/* Geist (variable, 300–700) */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("./fonts/geist-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Geist Mono (variable, 400–500) */
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/geist-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --color-fg: #171717;
  --color-fg-muted: #525252;
  --color-fg-subtle: #737373;
  --color-fg-inverse: #fafafa;
  --color-border: #d4d4d4;
  --color-border-strong: #a3a3a3;
  --color-surface: #ffffff;
  --color-surface-subtle: #fafafa;
  --color-surface-inverse: #171717;
  --color-accent: #059669;
  --color-accent-ring: rgb(5 150 105 / 0.18);
  --color-btn-primary-bg: #171717;
  --color-btn-primary-fg: #fafafa;
  --color-btn-primary-bg-hover: #262626;
  --color-danger-bg: #fff1f2;
  --color-danger-fg: #be123c;
  --color-danger-border: #fecdd3;

  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-full: 9999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;

  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);

  /* Theme native form controls (date pickers, dropdowns) to match the surface. */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-fg);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
}

.page--subtle { background: var(--color-surface-subtle); }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-lg);
  letter-spacing: -0.01em;
  color: var(--color-fg);
  text-decoration: none;
}

.wordmark__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.wordmark--lg { font-size: var(--text-2xl); }
.wordmark--lg .wordmark__dot {
  width: 0.625rem;
  height: 0.625rem;
}

.login {
  width: 100%;
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.login__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
  text-align: center;
}

.login__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.login__subtitle {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.card {
  position: relative;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  padding: var(--space-8);
}

.card::before,
.card::after,
.card > .card__corner-bl,
.card > .card__corner-br {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 9px;
  height: 9px;
  background: center / 9px 9px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 0v9M0 4.5h9' stroke='%23525252'/></svg>");
}

.card::before { top: -5px; left: -5px; }
.card::after { top: -5px; right: -5px; }
.card > .card__corner-bl { bottom: -5px; left: -5px; }
.card > .card__corner-br { bottom: -5px; right: -5px; }

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
}

.input {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  transition: border-color 120ms, box-shadow 120ms;
}

.input::placeholder { color: var(--color-fg-subtle); }
.input:hover { border-color: var(--color-border-strong); }
.input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.input--underline {
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  padding: var(--space-2) 0;
  height: auto;
  background: transparent;
}

.input--underline:hover { border-color: var(--color-border-strong); }
.input--underline:focus {
  border-color: var(--color-accent);
  box-shadow: none;
}

.input--code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 2.5rem;
  padding: 0 var(--space-4);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms;
}

.btn--primary {
  background: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-fg);
}

.btn--primary:hover { background: var(--color-btn-primary-bg-hover); }

.btn--primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--block { width: 100%; }

.muted-link {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
}

.muted-link:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

.alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.alert--error {
  background: var(--color-danger-bg);
  color: var(--color-danger-fg);
  border: 1px solid var(--color-danger-border);
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.footer-links a {
  color: var(--color-fg-muted);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--color-fg);
  text-decoration: underline;
}

.login--minimal .form { gap: var(--space-5); }

/* --- Auth split (full-bleed two-panel layout for /login, /register, /verify) -- */

.auth-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
}

.auth-split__brand {
  display: none;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-right: 1px solid var(--color-border);
}

.auth-split__brand-inner {
  position: relative;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-8);
  padding: var(--space-12);
  height: 100%;
  width: 100%;
}

.auth-split__quote {
  margin: 0;
  max-width: 32rem;
  font-size: var(--text-2xl);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--color-fg);
}

.auth-split__quote p { margin: 0 0 var(--space-4); }

.auth-split__quote-cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.auth-split__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-split__form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-6);
  background: var(--color-surface);
}

@media (min-width: 768px) {
  .auth-split { grid-template-columns: 1fr 1fr; }
  .auth-split__brand { display: block; }
}

/* --- Inspiring backgrounds (aurora / lattice / mix) -------------------------- */

.bg-aurora,
.bg-lattice,
.bg-mix { background: var(--color-surface); }

.bg-aurora__blob {
  position: absolute;
  width: 90%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  translate: -50% -50%;
  filter: blur(var(--a-blur, 38px));
  will-change: transform;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.bg-aurora__blob--1 {
  background: radial-gradient(circle, var(--a-c1, transparent), transparent 60%);
  top: var(--a-y1, 30%); left: var(--a-x1, 30%);
  animation: var(--a-name1, bg-blob-a) var(--a-d1, 28s) ease-in-out infinite;
  animation-delay: var(--a-delay1, 0s);
}

.bg-aurora__blob--2 {
  background: radial-gradient(circle, var(--a-c2, transparent), transparent 60%);
  top: var(--a-y2, 50%); left: var(--a-x2, 70%);
  animation: var(--a-name2, bg-blob-b) var(--a-d2, 32s) ease-in-out infinite;
  animation-delay: var(--a-delay2, 0s);
}

.bg-aurora__blob--3 {
  background: radial-gradient(circle, var(--a-c3, transparent), transparent 60%);
  top: var(--a-y3, 70%); left: var(--a-x3, 50%);
  animation: var(--a-name3, bg-blob-c) var(--a-d3, 36s) ease-in-out infinite;
  animation-delay: var(--a-delay3, 0s);
}

@keyframes bg-blob-a {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(28%, 14%) scale(1.08); }
  50%  { transform: translate(8%, 32%) scale(0.95); }
  75%  { transform: translate(-22%, 18%) scale(1.05); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-b {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(-20%, 22%) scale(0.92); }
  50%  { transform: translate(-32%, -14%) scale(1.1); }
  75%  { transform: translate(12%, -18%) scale(1); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-c {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(18%, -24%) scale(1.05); }
  50%  { transform: translate(34%, 4%) scale(0.92); }
  75%  { transform: translate(14%, 26%) scale(1.08); }
  100% { transform: translate(0%, 0%) scale(1); }
}
@keyframes bg-blob-d {
  0%   { transform: translate(0%, 0%) scale(1); }
  25%  { transform: translate(-26%, -8%) scale(1.1); }
  50%  { transform: translate(-12%, 28%) scale(0.95); }
  75%  { transform: translate(20%, 14%) scale(1.04); }
  100% { transform: translate(0%, 0%) scale(1); }
}

.bg-lattice::before, .bg-lattice::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.bg-lattice::before {
  background-image:
    radial-gradient(circle, var(--l-color1) var(--l-size1), transparent calc(var(--l-size1) + 0.6px));
  background-size: var(--l-gap1) var(--l-gap1);
  animation: bg-lattice-pan-far var(--l-speed1, 80s) linear infinite;
}
.bg-lattice::after {
  background-image:
    radial-gradient(circle, var(--l-color2) var(--l-size2), transparent calc(var(--l-size2) + 0.6px));
  background-size: var(--l-gap2) var(--l-gap2);
  animation: bg-lattice-pan-near var(--l-speed2, 40s) linear infinite;
}

@keyframes bg-lattice-pan-far {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--l-gap1) * var(--l-dx)) calc(var(--l-gap1) * var(--l-dy)); }
}
@keyframes bg-lattice-pan-near {
  from { background-position: 0 0; }
  to   { background-position: calc(var(--l-gap2) * var(--l-dx)) calc(var(--l-gap2) * var(--l-dy)); }
}

/* Mix — aurora blobs underneath a parallax lattice */
.bg-mix .bg-aurora__blob { z-index: 0; }
.bg-mix::before, .bg-mix::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.bg-mix::before {
  background-image:
    radial-gradient(circle, var(--l-color1) var(--l-size1), transparent calc(var(--l-size1) + 0.6px));
  background-size: var(--l-gap1) var(--l-gap1);
  animation: bg-lattice-pan-far var(--l-speed1, 80s) linear infinite;
}
.bg-mix::after {
  background-image:
    radial-gradient(circle, var(--l-color2) var(--l-size2), transparent calc(var(--l-size2) + 0.6px));
  background-size: var(--l-gap2) var(--l-gap2);
  animation: bg-lattice-pan-near var(--l-speed2, 40s) linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bg-aurora__blob,
  .bg-lattice::before,
  .bg-lattice::after,
  .bg-mix::before,
  .bg-mix::after { animation: none; }
}

/* ============================================================
   THEME SHOWCASE — shared component primitives
   ============================================================ */

:root {
  --color-info-bg: #eff6ff;
  --color-info-fg: #1d4ed8;
  --color-info-border: #bfdbfe;
  --color-warn-bg: #fffbeb;
  --color-warn-fg: #b45309;
  --color-warn-border: #fde68a;
  --color-success-bg: #f0fdf4;
  --color-success-fg: #166534;
  --color-success-border: #bbf7d0;
}

/* --- Layout shell -------------------------------------------- */

.shell {
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.shell__hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
}

.shell__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
}

.shell__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.shell__lede {
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  margin: 0;
  max-width: 44rem;
}

.section {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}

.section__title {
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}

.section__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}

/* --- Navbar -------------------------------------------------- */

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.navbar--dark {
  background: var(--color-surface-inverse);
  border-color: #262626;
  color: var(--color-fg-inverse);
}

.navbar--dark .wordmark,
.navbar--dark .nav__link { color: var(--color-fg-inverse); }

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.nav__link:hover { color: var(--color-fg); }
.nav__link[aria-current="page"] {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

.navbar--dark .nav__link[aria-current="page"] {
  color: var(--color-fg-inverse);
  border-bottom-color: var(--color-fg-inverse);
}

/* --- Buttons (extended) ------------------------------------- */

.btn--secondary {
  background: var(--color-surface);
  color: var(--color-fg);
  border-color: var(--color-border);
}

.btn--secondary:hover { border-color: var(--color-border-strong); }

.btn--ghost {
  background: transparent;
  color: var(--color-fg);
}

.btn--ghost:hover { background: var(--color-surface-subtle); }

.btn--accent {
  background: var(--color-accent);
  color: var(--color-fg-inverse);
}

.btn--accent:hover { background: #047857; }

.btn--danger {
  background: var(--color-danger-fg);
  color: var(--color-fg-inverse);
}

.btn--danger:hover { background: #9f1239; }

.btn--sm { height: 2rem; padding: 0 var(--space-3); font-size: var(--text-xs); }
.btn--lg { height: 3rem; padding: 0 var(--space-6); font-size: var(--text-base); }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-group {
  display: inline-flex;
}

.btn-group .btn {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg);
  margin-left: -1px;
}

.btn-group .btn:first-child { margin-left: 0; }
.btn-group .btn:hover { border-color: var(--color-border-strong); z-index: 1; position: relative; }
.btn-group .btn[aria-pressed="true"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
  z-index: 1;
  position: relative;
}

/* --- Typography ---------------------------------------------- */

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-2);
}

.prose h1 { font-size: var(--text-3xl); }
.prose h2 { font-size: var(--text-2xl); }
.prose h3 { font-size: var(--text-xl); }
.prose h4 { font-size: var(--text-lg); }
.prose h5 { font-size: var(--text-base); }
.prose h6 { font-size: var(--text-sm); color: var(--color-fg-muted); }

.prose p { margin: 0 0 var(--space-3); color: var(--color-fg); }
.prose p + p { margin-top: 0; }

.prose small, .text-sm { font-size: var(--text-sm); color: var(--color-fg-muted); }
.text-muted { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-mono { font-family: var(--font-mono); }

.kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-bottom-width: 2px;
  background: var(--color-surface);
}

.code-inline {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 4px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
}

.blockquote {
  margin: 0;
  padding: var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-fg);
  color: var(--color-fg-muted);
  font-size: var(--text-lg);
  line-height: 1.5;
}

.blockquote__cite {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--color-fg-subtle);
}

/* --- Tables -------------------------------------------------- */

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.table th {
  font-weight: 500;
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.table tbody tr:hover { background: var(--color-surface-subtle); }
.table--striped tbody tr:nth-child(odd) { background: var(--color-surface-subtle); }

/* Scrolls a wide table within its container instead of overflowing the layout.
   overflow!=visible also gives this flex item min-width:0, so it can shrink. */
.table-scroll { overflow-x: auto; }

/* Breaks the table out of the centered shell to span the full viewport width,
   keeping shell gutters so it stays off the screen edges. The shell stays
   capped, so the header and filter form remain comfortably narrow. */
.table-scroll--bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: var(--space-6);
  padding-right: var(--space-6);
}

/* History table: uniform single-line rows; wide cells truncate with ellipsis
   (full value stays available via the cell's title tooltip). */
.table--history tbody td { height: 2.75rem; }
.table--history td,
.table--history th { white-space: nowrap; }
.col-selectors {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Form additions ----------------------------------------- */

.textarea {
  width: 100%;
  min-height: 6rem;
  padding: var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  resize: vertical;
  transition: border-color 120ms, box-shadow 120ms;
}

.textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.select {
  width: 100%;
  height: 2.5rem;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--color-fg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0;
  outline: 0;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--space-8);
}

.select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-ring);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.check input[type="checkbox"],
.check input[type="radio"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-fg);
  margin: 0;
}

.switch {
  --switch-w: 2.25rem;
  --switch-h: 1.25rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}

.switch input { position: absolute; opacity: 0; }

.switch__slider {
  width: var(--switch-w);
  height: var(--switch-h);
  background: var(--color-border);
  position: relative;
  transition: background 120ms;
}

.switch__slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--switch-h) - 4px);
  height: calc(var(--switch-h) - 4px);
  background: var(--color-surface);
  transition: transform 120ms;
}

.switch input:checked + .switch__slider { background: var(--color-fg); }
.switch input:checked + .switch__slider::after {
  transform: translateX(calc(var(--switch-w) - var(--switch-h)));
}

.range {
  -webkit-appearance: none;
  width: 100%;
  height: 2px;
  background: var(--color-border);
  outline: 0;
}

.range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: var(--color-fg);
  cursor: pointer;
}

.range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--color-fg);
  border: 0;
  cursor: pointer;
}

.field__hint {
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
}

.field__error {
  font-size: var(--text-xs);
  color: var(--color-danger-fg);
}

/* --- Tabs ---------------------------------------------------- */

.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tabs__item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  font-family: inherit;
}

.tabs__item:hover { color: var(--color-fg); }
.tabs__item[aria-selected="true"] {
  color: var(--color-fg);
  border-bottom-color: var(--color-fg);
}

.pills {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pills__item {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  border: 1px solid transparent;
  cursor: pointer;
  background: none;
  font-family: inherit;
}

.pills__item:hover { border-color: var(--color-border); color: var(--color-fg); }
.pills__item[aria-selected="true"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
}

/* --- Breadcrumbs & pagination ------------------------------- */

.breadcrumb {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  font-family: var(--font-mono);
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  margin-right: var(--space-2);
  color: var(--color-fg-subtle);
}

.breadcrumb a { color: var(--color-fg-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-fg); }
.breadcrumb__item--current { color: var(--color-fg); }

.pagination {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pagination__item {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  margin-left: -1px;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  font-family: var(--font-mono);
}

.pagination__item:first-child { margin-left: 0; }
.pagination__item:hover { color: var(--color-fg); border-color: var(--color-border-strong); z-index: 1; position: relative; }
.pagination__item[aria-current="page"] {
  background: var(--color-fg);
  color: var(--color-fg-inverse);
  border-color: var(--color-fg);
  z-index: 1;
  position: relative;
}

/* --- Alerts (extended) --------------------------------------- */

.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border: 1px solid var(--color-info-border);
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border: 1px solid var(--color-success-border);
}

.alert--warn {
  background: var(--color-warn-bg);
  color: var(--color-warn-fg);
  border: 1px solid var(--color-warn-border);
}

.alert--plain {
  background: var(--color-surface-subtle);
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}

/* --- Badges -------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-fg-muted);
}

.badge--solid { background: var(--color-fg); color: var(--color-fg-inverse); border-color: var(--color-fg); }
.badge--accent { color: var(--color-accent); border-color: var(--color-accent); }
.badge--danger { color: var(--color-danger-fg); border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.badge--warn { color: var(--color-warn-fg); border-color: var(--color-warn-border); background: var(--color-warn-bg); }
.badge--success { color: var(--color-success-fg); border-color: var(--color-success-border); background: var(--color-success-bg); }

.badge__dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}

.badge--sm { padding: 1px var(--space-1); font-size: 0.6875rem; }
.badge--lg { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); letter-spacing: 0.03em; }
.badge--pill { border-radius: 999px; padding-left: var(--space-2); padding-right: var(--space-2); }
.badge--pill.badge--lg { padding-left: var(--space-3); padding-right: var(--space-3); }

.badge--counter {
  padding: 0 var(--space-1);
  min-width: 1.25rem;
  justify-content: center;
  letter-spacing: 0;
  text-transform: none;
}

.badge--info { color: var(--color-info-fg); border-color: var(--color-info-border); background: var(--color-info-bg); }

/* In-heading badges sit on the baseline with the text */
h1 .badge, h2 .badge, h3 .badge, h4 .badge, h5 .badge, h6 .badge {
  vertical-align: middle;
  margin-left: var(--space-2);
  transform: translateY(-2px);
}

/* Anchor + pinned overlay for notification-style counters */
.badge-anchor {
  position: relative;
  display: inline-flex;
}

.badge--pin {
  position: absolute;
  top: -8px;
  right: -10px;
  z-index: 1;
}

/* --- Progress ------------------------------------------------ */

.progress {
  width: 100%;
  height: 6px;
  background: var(--color-border);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  background: var(--color-fg);
}

.progress__bar--accent { background: var(--color-accent); }
.progress__bar--danger { background: var(--color-danger-fg); }

.progress--striped .progress__bar {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.25) 0 6px,
    transparent 6px 12px
  );
  background-color: var(--color-fg);
}

/* --- List group --------------------------------------------- */

.list-group {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-group__item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.list-group__item:last-child { border-bottom: 0; }
.list-group__item--active { background: var(--color-surface-subtle); }

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.status__name { font-weight: 500; }

.status__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

.status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-fg-subtle);
  flex-shrink: 0;
}

.status__dot--ok { background: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent); }
.status__dot--warn { background: var(--color-warn-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-warn-fg) 14%, transparent); }
.status__dot--down { background: var(--color-danger-fg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger-fg) 14%, transparent); }
.status__dot--idle { background: #d4d4d4; }

/* --- Card variants ------------------------------------------ */

.card--plain {
  background: var(--color-surface);
}

.card--plain::before,
.card--plain::after,
.card--plain > .card__corner-bl,
.card--plain > .card__corner-br { display: none; }

.card__header {
  margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6);
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.card__title {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0;
}

.card__body { display: flex; flex-direction: column; gap: var(--space-3); }

.card__footer {
  margin: var(--space-6) calc(var(--space-8) * -1) calc(var(--space-8) * -1);
  padding: var(--space-3) var(--space-8);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

/* --- Accordion ----------------------------------------------- */

.accordion {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__item:last-child { border-bottom: 0; }

.accordion__summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary::after {
  content: "+";
  font-family: var(--font-mono);
  color: var(--color-fg-muted);
}

.accordion__item[open] .accordion__summary::after { content: "−"; }

.accordion__body {
  padding: 0 var(--space-4) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  line-height: 1.6;
}

/* --- Modal (static showcase) -------------------------------- */

.modal {
  position: relative;
  max-width: 28rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--space-6);
  box-shadow: 0 10px 40px -10px rgb(0 0 0 / 0.15);
}

.modal::before,
.modal::after,
.modal > .card__corner-bl,
.modal > .card__corner-br {
  content: "";
  display: block;
  pointer-events: none;
  position: absolute;
  width: 9px;
  height: 9px;
  background: center / 9px 9px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M4.5 0v9M0 4.5h9' stroke='%23525252'/></svg>");
}

.modal::before { top: -5px; left: -5px; }
.modal::after { top: -5px; right: -5px; }
.modal > .card__corner-bl { bottom: -5px; left: -5px; }
.modal > .card__corner-br { bottom: -5px; right: -5px; }

.modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin: 0;
}

.modal__close {
  background: none;
  border: 0;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--color-fg-muted);
  cursor: pointer;
  line-height: 1;
}

.modal__body {
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.modal-backdrop {
  background: var(--color-surface-subtle);
  padding: var(--space-10);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-border);
}

/* --- Toast --------------------------------------------------- */

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  max-width: 22rem;
}

.toast__title { font-size: var(--text-sm); font-weight: 500; margin: 0 0 2px; }
.toast__body { font-size: var(--text-xs); color: var(--color-fg-muted); margin: 0; }

/* --- Color swatches ----------------------------------------- */

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--space-3);
}

.swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
}

.swatch__chip {
  height: 3.5rem;
  border: 1px solid var(--color-border);
}

.swatch__label { color: var(--color-fg); }

/* --- Profile shell (side-nav layout) ------------------------ */

.profile-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  width: 100%;
}

@media (min-width: 720px) {
  .profile-shell { grid-template-columns: 12rem 1fr; }
}

.profile-shell__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.profile-nav__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.profile-nav__link:hover {
  color: var(--color-fg);
  background: var(--color-surface-subtle);
}

.profile-nav__link[aria-current="page"] {
  color: var(--color-fg);
  border-left-color: var(--color-fg);
  font-weight: 500;
}

.profile-shell__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}

.profile-shell__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.profile-shell__title {
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.profile-shell__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

/* --- Footer -------------------------------------------------- */

.shell__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-fg-subtle);
}

/* --- Avatar ------------------------------------------------- */

:root {
  --color-on-avatar: #fafafa;
}

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  background: var(--avatar-bg, var(--color-fg));
  color: var(--color-on-avatar);
  font-weight: 600;
  font-size: var(--text-sm);
  line-height: 1;
}
.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: var(--text-xs); }
.avatar--lg { width: 2.5rem; height: 2.5rem; font-size: var(--text-base); }

/* --- Account menu ------------------------------------------- */

.account-menu { position: relative; }
.account-menu__trigger { list-style: none; cursor: pointer; }
.account-menu__trigger::-webkit-details-marker { display: none; }

.account-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 18rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  z-index: 50;
}

.account-menu__section { display: flex; flex-direction: column; }
.account-menu__section + .account-menu__section { border-top: 1px solid var(--color-border); }

.account-menu__identity {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
}
.account-menu__email { font-size: var(--text-sm); color: var(--color-fg); word-break: break-all; }

.account-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-fg);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.account-menu__item:hover { background: var(--color-surface-subtle); }
.account-menu__item--muted { color: var(--color-fg-muted); }
.account-menu__item--danger { color: var(--color-danger-fg); }

.account-menu__sub > summary { list-style: none; }
.account-menu__sub > summary::-webkit-details-marker { display: none; }
.account-menu__chev { margin-left: auto; color: var(--color-fg-subtle); }
.account-menu__sub-panel { display: flex; flex-direction: column; padding-left: var(--space-4); }

/* --- Dark theme --------------------------------------------- */

[data-theme="dark"] {
  color-scheme: dark;
  --color-fg: #fafafa;
  --color-fg-muted: #a3a3a3;
  --color-fg-subtle: #737373;
  --color-fg-inverse: #171717;
  --color-border: #404040;
  --color-border-strong: #525252;
  --color-surface: #0a0a0a;
  --color-surface-subtle: #171717;
  --color-surface-inverse: #fafafa;
  --color-btn-primary-bg: #d4d4d4;
  --color-btn-primary-fg: #0a0a0a;
  --color-btn-primary-bg-hover: #e5e5e5;
  --color-info-bg: #172554;
  --color-info-fg: #93c5fd;
  --color-info-border: #1e40af;
  --color-warn-bg: #451a03;
  --color-warn-fg: #fcd34d;
  --color-warn-border: #92400e;
  --color-success-bg: #052e16;
  --color-success-fg: #86efac;
  --color-success-border: #166534;
  --color-danger-bg: #4c0519;
  --color-danger-fg: #fda4af;
  --color-danger-border: #9f1239;
}

/* Aurora blobs use multiply on light surfaces (darkens color over white).
   On dark surfaces multiply collapses to ~black, so switch to screen (lightens). */
[data-theme="dark"] .bg-aurora__blob { mix-blend-mode: screen; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-fg: #fafafa;
    --color-fg-muted: #a3a3a3;
    --color-fg-subtle: #737373;
    --color-fg-inverse: #171717;
    --color-border: #404040;
    --color-border-strong: #525252;
    --color-surface: #0a0a0a;
    --color-surface-subtle: #171717;
    --color-surface-inverse: #fafafa;
    --color-btn-primary-bg: #d4d4d4;
    --color-btn-primary-fg: #0a0a0a;
    --color-btn-primary-bg-hover: #e5e5e5;
    --color-info-bg: #172554;
    --color-info-fg: #93c5fd;
    --color-info-border: #1e40af;
    --color-warn-bg: #451a03;
    --color-warn-fg: #fcd34d;
    --color-warn-border: #92400e;
    --color-success-bg: #052e16;
    --color-success-fg: #86efac;
    --color-success-border: #166534;
    --color-danger-bg: #4c0519;
    --color-danger-fg: #fda4af;
    --color-danger-border: #9f1239;
  }
  :root:not([data-theme]) .bg-aurora__blob { mix-blend-mode: screen; }
}

/* --- Table component (toolbar / sortable headers / footer / empty) --- */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.toolbar__search { flex: 1 1 280px; min-width: 220px; }

.toolbar__group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toolbar__label {
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.daterange {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.daterange .input { width: 11.5rem; }

.daterange__sep {
  color: var(--color-fg-subtle);
  font-family: var(--font-mono);
}

.table-frame { border: 1px solid var(--color-border); }
.table-frame .table { border: none; margin: 0; }

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  color: inherit;
  text-decoration: none;
}

.th-sort__arrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  line-height: 1;
}

.th-sort--active .th-sort__arrow { color: var(--color-fg); }

.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.table-footer__count {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-fg-muted);
}

.table-footer .pagination { margin: 0; }

.table-empty {
  text-align: center;
  color: var(--color-fg-muted);
  padding: var(--space-5) var(--space-4);
}

/* --- Mail log (Gmail-style) --------------------------------- */

.table--mail-log thead { display: none; }

td.mail-log__main {
  width: 100%;
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mail-log__snippet { color: var(--color-fg-muted); }

td.mail-log__meta {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.mail-log__meta-inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.mail-log__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
}

.mail-log__time {
  color: var(--color-fg-muted);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
}