/* app/static/css/app.css — ET Bot design system.
   "Interview OS" editorial direction (2026-08-26 rebuild) — rewritten from
   the Claude Design canvas concept in claude_feeder/ (Landing v2 artboard is
   the source of truth for tokens; the Public/Candidate/Admin artboards
   confirmed the same tokens apply system-wide, just restyling existing
   layouts rather than changing them). Light + dark: themed tokens are
   defined dark-first on :root and overridden in :root[data-theme="light"];
   base.html's no-FOUC script sets data-theme from the saved preference
   (localStorage "etbot-theme") or prefers-color-scheme before first paint.
   Serif depth is deliberately partial: Source Serif 4 owns hero headlines,
   page titles, and large metric/score figures; Inter keeps card titles,
   table headers and body copy legible at every size.
   See TODO.md and the plan for the full rationale. */

:root {
  /* ============================================================
     THEME-INDEPENDENT TOKENS — identical in light and dark.
     Themed tokens (surfaces, text, borders, shadows) live in the
     DARK block below and are overridden in :root[data-theme="light"].
     ============================================================ */

  /* Sharp-cornered by design — not a derived scale (2px minus anything goes
     negative), so each step is set explicitly and stays small throughout. */
  --radius: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 4px;
  --radius-2xl: 6px;

  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif; /* hero, page titles, big metrics */
  --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;        /* card titles, table heads, buttons */
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  --gradient-primary: linear-gradient(135deg, var(--primary), var(--primary-glow));
  --gradient-surface: linear-gradient(160deg, color-mix(in oklab, var(--primary) 12%, var(--surface)), var(--surface) 55%);
  --gradient-hero: radial-gradient(120% 90% at 12% 0%, color-mix(in oklab, var(--primary) var(--hero-strength), transparent), transparent 60%);

  /* Layered, physically-plausible falloff (several stacked low-alpha shadows
     instead of one flat blur). --shadow-rgb tints them toward the page ground
     and --shadow-s scales every layer's opacity, so this one token set reads
     right on a near-black page (s: 1) and on white (s: ~0.3). */
  --shadow-elevated:
    0 1px 1px -0.5px rgb(var(--shadow-rgb) / calc(0.35 * var(--shadow-s))),
    0 3px 3px -1.5px rgb(var(--shadow-rgb) / calc(0.4 * var(--shadow-s))),
    0 8px 8px -3px rgb(var(--shadow-rgb) / calc(0.45 * var(--shadow-s))),
    0 20px 20px -6px rgb(var(--shadow-rgb) / calc(0.55 * var(--shadow-s)));
  --shadow-glow: 0 0 0 1px color-mix(in oklab, var(--primary) 35%, transparent), 0 18px 45px -20px color-mix(in oklab, var(--primary) 55%, transparent);
  /* Dramatic tier for hero/floating elements — same stacked falloff, larger
     and with a soft brand-color glow added on top. */
  --shadow-float:
    0 2px 2px -1px rgb(var(--shadow-rgb) / calc(0.4 * var(--shadow-s))),
    0 8px 8px -4px rgb(var(--shadow-rgb) / calc(0.45 * var(--shadow-s))),
    0 24px 24px -8px rgb(var(--shadow-rgb) / calc(0.5 * var(--shadow-s))),
    0 48px 48px -14px rgb(var(--shadow-rgb) / calc(0.6 * var(--shadow-s))),
    0 0 70px -12px color-mix(in oklab, var(--primary) 40%, transparent);
  /* Glossy pill-button treatment: the same falloff plus a colored glow and
     inset highlights (top sheen, bottom shade) for a raised, glassy look. */
  --shadow-btn-glow:
    0 1px 1px -0.5px rgb(var(--shadow-rgb) / calc(0.35 * var(--shadow-s))),
    0 4px 4px -2px rgb(var(--shadow-rgb) / calc(0.4 * var(--shadow-s))),
    0 14px 18px -6px color-mix(in oklab, var(--primary) 50%, transparent),
    inset 0 1px 0.5px 0 rgba(255, 255, 255, 0.3),
    inset 0 -3px 8px 0 rgba(0, 0, 0, 0.25);
  --elev-1: 0 1px 2px rgb(var(--shadow-rgb) / calc(0.4 * var(--shadow-s)));
  --elev-2: var(--shadow-elevated);

  /* --- scales, used instead of ad-hoc inline values --- */
  --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;
  --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;
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;
  --dur-fast: 120ms; --dur-base: 200ms; --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ============================================================
     DARK THEME — the default. Every themed token is defined here
     so bare :root is complete; the light theme only overrides.
     ============================================================ */
  color-scheme: dark;

  /* Surfaces: deep near-black, matching Landing v2's #02060E. */
  --background: #02060E;
  --foreground: #F5F7FA;
  --surface: #0B121F;
  --surface-2: #111B2E;
  --card: #0B121F;
  --card-foreground: #F5F7FA;
  --popover: #101A2E;
  /* The richer glass-panel treatment every artboard card actually uses,
     instead of a flat --surface fill — applied via .surface-card below. */
  --card-gradient: linear-gradient(160deg, rgba(22, 34, 58, 0.92), rgba(7, 13, 25, 0.94));

  --primary: #3C55E8;
  --primary-foreground: #FFFFFF;
  --primary-glow: #00C0F0;
  /* Secondary accents used as data/status color across scorecards, tags and
     transcripts in the artboards — not just the two brand stops. */
  --accent-periwinkle: #5B7BE8;
  --accent-lavender: #9FB0FF;
  --accent-sky: #7EC8F5;

  --secondary: #1B2740;
  --secondary-foreground: #E7ECF5;
  --muted: #16213A;
  /* Four-step muted ladder (v1 had one). --hairline-text is decorative-only
     (nav underlines, table rule labels at low emphasis) and fails contrast
     for body copy — never use it for readable text. */
  --muted-foreground: #94A3B8;
  --label: #5F6E8C;
  --label-dim: #4E5F86;
  --hairline-text: #3E4B66;
  --accent: #24365C;
  --accent-foreground: #E7ECF5;

  --destructive: #F0555C;
  --destructive-foreground: #FFFFFF;
  --success: #34D399;
  --warning: #F5A524;

  --border: rgba(255, 255, 255, 0.12);
  --border-faint: rgba(255, 255, 255, 0.05);
  --input: rgba(255, 255, 255, 0.14);
  --ring: #22D3EE;

  --overlay: rgba(3, 7, 15, 0.66);
  --hero-strength: 26%;
  --shadow-rgb: 2 5 12;
  --shadow-s: 1;
}

/* ============================================================
   LIGHT THEME — opt-in. The no-FOUC script in base.html sets
   data-theme to the resolved theme ("light" / "dark") on every
   load, so this block activates whenever the visitor's OS or
   saved preference is light. Keep this list in sync with the
   dark defaults above — same token names, inverted values.
   ============================================================ */
:root[data-theme="light"] {
  color-scheme: light;

  --background: #F4F6F9;
  --foreground: #18212E;
  --surface: #FFFFFF;
  --surface-2: #EDF1F6;
  --card: #FFFFFF;
  --card-foreground: #18212E;
  --popover: #FFFFFF;
  --card-gradient: linear-gradient(160deg, #FFFFFF, #F3F6FB);

  --primary: #3C55E8;
  --primary-foreground: #FFFFFF;
  --primary-glow: #0E8FB8;
  --accent-periwinkle: #4457C4;
  --accent-lavender: #5E6FC0;
  --accent-sky: #3E8DC4;

  --secondary: #E7ECF4;
  --secondary-foreground: #26344C;
  --muted: #E9EEF4;
  --muted-foreground: #55647E;
  --label: #6A788F;
  --label-dim: #8492A8;
  --hairline-text: #A9B3C2;
  --accent: #E1E8F1;
  --accent-foreground: #26344C;

  --destructive: #D22F3A;
  --destructive-foreground: #FFFFFF;
  --success: #0F9A62;
  --warning: #A96C0A;

  --border: rgba(17, 25, 42, 0.12);
  --border-faint: rgba(17, 25, 42, 0.05);
  --input: rgba(17, 25, 42, 0.2);
  --ring: #3C55E8;

  --overlay: rgba(17, 25, 42, 0.42);
  --hero-strength: 9%;
  --shadow-rgb: 17 25 42;
  --shadow-s: 0.3;
}

* { box-sizing: border-box; border-color: var(--border); }
body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
/* Serif depth is deliberate, not uniform: h1 (hero, page titles) gets the
   editorial Source Serif 4; h2-h4 (card titles, section/table heads) stay
   on Inter, which holds up far better at small sizes and in dense admin
   tables. */
h1 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.01em; margin: 0; }
h2, h3, h4 { font-family: var(--font-heading); letter-spacing: -0.02em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
button, a[href], summary, [role="button"] { cursor: pointer; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
.icon { width: var(--icon-md); height: var(--icon-md); flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.3em; }
.icon-sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon-lg { width: var(--icon-lg); height: var(--icon-lg); }

/* --- utility classes from the mockup's @utility blocks --- */
.text-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bg-hero-glow { background-image: var(--gradient-hero); }
.surface-card { background: var(--card-gradient); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-elevated); backdrop-filter: blur(14px); }
.surface-raised { background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.glow-ring { box-shadow: var(--shadow-glow); }
.grid-lines {
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--border) 60%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
}
.eyebrow { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--label); }

/* --- layout --- */
.shell { position: relative; min-height: 100vh; background: var(--background); }
.shell-glow { pointer-events: none; position: absolute; inset: 0 0 auto 0; height: 420px; background-image: var(--gradient-hero); }
.shell-lines { pointer-events: none; position: absolute; inset: 0 0 auto 0; height: 420px; opacity: 0.35; -webkit-mask-image: linear-gradient(to bottom, black, transparent); mask-image: linear-gradient(to bottom, black, transparent); }
.shell-body { position: relative; }
.main { margin: 0 auto; width: 100%; max-width: 72rem; padding: 2rem 1.25rem; }
.main-wide { max-width: 80rem; }

/* --- topbar --- */
.topbar { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid color-mix(in oklab, var(--border) 80%, transparent); background: color-mix(in oklab, var(--background) 80%, transparent); backdrop-filter: blur(20px); }
.topbar-inner { margin: 0 auto; display: flex; width: 100%; max-width: 80rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.875rem 1.25rem; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 1rem; }
@media (min-width: 768px) { .topbar-left { gap: 2rem; } }
.topbar-right { display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; justify-content: flex-end; }
.pending-claim-banner { display: block; text-align: center; padding: 0.5rem 1rem; font-size: 0.8rem; font-weight: 500; color: var(--warning); background: color-mix(in oklab, var(--warning) 10%, transparent); border-top: 1px solid color-mix(in oklab, var(--warning) 25%, transparent); text-decoration: none; }
.pending-claim-banner:hover { background: color-mix(in oklab, var(--warning) 16%, transparent); }
.verify-banner {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; flex-wrap: wrap;
  padding: 0.5rem 2.25rem 0.5rem 1rem; font-size: 0.8rem; font-weight: 500; color: var(--warning);
  background: color-mix(in oklab, var(--warning) 10%, transparent);
  border-top: 1px solid color-mix(in oklab, var(--warning) 25%, transparent); position: relative;
}
.verify-banner-link { background: none; border: none; padding: 0; color: var(--warning); font-weight: 700; text-decoration: underline; cursor: pointer; font-size: 0.8rem; }
.verify-banner-dismiss { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--warning); opacity: 0.7; cursor: pointer; display: grid; place-items: center; padding: 0.25rem; }
.verify-banner-dismiss:hover { opacity: 1; }
.logo { display: flex; align-items: center; gap: 0.5rem; }
/* The mark is a wide "ET" lockup (arrow + pixel flourish), not a square icon
   — sized by height with the width following its native ~1.6:1 aspect ratio,
   so nothing gets cropped the way a fixed square box with object-fit:cover would. */
.logo-mark { display: block; height: 2.1rem; width: auto; flex-shrink: 0; }
.logo-mark img { display: block; height: 100%; width: auto; object-fit: contain; }
.logo-text { font-family: var(--font-display); font-size: 1.375rem; font-weight: 400; letter-spacing: -0.01em; }

.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--foreground); cursor: pointer; font-size: 1rem; line-height: 1; }
@media (min-width: 768px) { .nav-toggle { display: none; } }

.nav { display: none; align-items: center; gap: 0.25rem; }
@media (min-width: 768px) { .nav { display: flex; } }
/* Below 768px, .nav is a dropdown toggled by .nav-toggle via .topbar.mobile-open, anchored
   to the (sticky, so positioned) .topbar. */
.topbar.mobile-open .nav {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.75rem 1.25rem 1rem;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}
@media (min-width: 768px) {
  .topbar.mobile-open .nav { position: static; flex-direction: row; align-items: center; padding: 0; border: none; background: none; }
}
.topbar.mobile-open .nav a { padding: 0.65rem 0.75rem; }

.nav a { border-radius: var(--radius-md); padding: 0.375rem 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); transition: color .15s, background-color .15s; }
.nav a:hover { color: var(--foreground); }
.nav a.active { background: var(--secondary); color: var(--foreground); }
.credits-pill { display: flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); padding: 0.375rem 0.875rem; font-size: 0.875rem; transition: border-color .15s; }
.credits-pill:hover { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }
@media (max-width: 480px) { .credits-pill .credits-label { display: none; } .credits-pill { padding: 0.375rem 0.65rem; } }
.avatar { width: 2.25rem; height: 2.25rem; border-radius: 999px; background-image: var(--gradient-primary); padding: 1px; }
.avatar-inner { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 999px; background: var(--surface); font-size: 0.75rem; font-weight: 600; }

/* --- theme toggle --- */
/* One button that cycles System -> Light -> Dark. JS sets data-mode to the
   saved preference; the matching icon shows, the other two are hidden. Works
   in the app topbar, the landing nav and the auth logo rows. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0;
  border-radius: var(--radius-md); border: 1px solid var(--border);
  background: var(--surface-2); color: var(--muted-foreground); cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover { color: var(--foreground); border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }
.theme-toggle-icon { display: none; }
.theme-toggle:not([data-mode]) [data-theme-icon="system"],
.theme-toggle[data-mode="system"] [data-theme-icon="system"],
.theme-toggle[data-mode="light"] [data-theme-icon="light"],
.theme-toggle[data-mode="dark"] [data-theme-icon="dark"] { display: inline-flex; }
/* Auth pages have no topbar — float the toggle in the corner instead. */
.auth-theme-toggle { position: fixed; top: 1rem; right: 1rem; z-index: 20; }

/* --- page head --- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; padding-bottom: 1.75rem; }
.page-head h1 { font-size: 2.25rem; }
@media (min-width: 640px) { .page-head h1 { font-size: 2.625rem; } }
.page-head .subtitle { margin-top: 0.5rem; max-width: 42rem; color: var(--muted-foreground); }

/* --- buttons --- */
/* Mono, uppercase, letter-spaced — the v2 button signature. Icons inside
   (via the icon() macro) inherit currentColor and stay unaffected. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: none; border-radius: var(--radius-md); padding: 0.7rem 1.15rem;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: opacity .15s, background-color .15s, border-color .15s, transform .25s var(--ease), box-shadow .25s var(--ease);
  white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--foreground); color: var(--background); }
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 16px 40px -12px color-mix(in oklab, var(--foreground) 22%, transparent); }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--foreground); }
.btn-outline:hover:not(:disabled) { background: color-mix(in oklab, var(--foreground) 6%, transparent); border-color: color-mix(in oklab, var(--foreground) 35%, var(--border)); }
.btn-ghost { background: transparent; color: var(--muted-foreground); }
.btn-ghost:hover:not(:disabled) { color: var(--foreground); background: var(--secondary); }
.btn-destructive { background: var(--destructive); color: var(--destructive-foreground); }
.btn-sm { padding: 0.5rem 0.85rem; font-size: 0.6875rem; }
.btn-lg { padding: 0.85rem 1.6rem; font-size: 0.8125rem; }
.btn-icon { padding: 0.55rem; }
.btn-block { width: 100%; }
/* Retained as a modifier name (call sites unchanged) but redefined: v1's
   glossy gradient pill directly contradicted the sharp-cornered editorial
   direction, so this is now just the restrained hover-lift already on every
   .btn, kept for markup compatibility rather than as a distinct visual. */
.btn-glow { box-shadow: none; }

/* --- tags/badges --- */
/* Pill shape kept deliberately — confirmed against the Admin artboard's
   status badges, one of the few circular exceptions in an otherwise sharp
   system (alongside .avatar, .rec-dot and .score-ring). */
.tag { display: inline-flex; align-items: center; gap: 0.35rem; border-radius: 999px; border: 1px solid var(--border); background: var(--secondary); color: var(--muted-foreground); padding: 0.2rem 0.65rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 500; }
.tag-primary { border-color: color-mix(in oklab, var(--primary) 40%, transparent); background: color-mix(in oklab, var(--primary) 10%, transparent); color: var(--primary); }
.tag-success { border-color: color-mix(in oklab, var(--success) 40%, transparent); background: color-mix(in oklab, var(--success) 10%, transparent); color: var(--success); }
.tag-warning { border-color: color-mix(in oklab, var(--warning) 40%, transparent); background: color-mix(in oklab, var(--warning) 10%, transparent); color: var(--warning); }

/* --- meter / progress --- */
.meter { height: 0.5rem; width: 100%; overflow: hidden; border-radius: 999px; background: var(--secondary); }
.meter-fill { height: 100%; border-radius: 999px; background-image: var(--gradient-primary); transition: width .3s ease; }
.segbar { display: flex; gap: 0.375rem; }
.segbar span { height: 0.375rem; flex: 1; border-radius: 999px; background: var(--secondary); }
.segbar span.done { background: var(--primary); }
.segbar span.current { background: color-mix(in oklab, var(--primary) 50%, transparent); }

/* --- forms --- */
.field { display: block; }
.field + .field { margin-top: 1rem; }
.field .eyebrow { display: block; margin-bottom: 0.5rem; }
.field input, .field textarea, .field select, .input, .select, .textarea {
  width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2);
  padding: 0.65rem 0.85rem; font-size: 0.875rem; outline: none; transition: border-color var(--dur-fast) var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus, .input:focus, .select:focus, .textarea:focus {
  border-color: color-mix(in oklab, var(--primary) 60%, transparent);
}
.field textarea, .textarea { resize: vertical; }
.select { padding-right: 2rem; }
.field-error { margin-top: 0.4rem; font-size: 0.8rem; color: var(--destructive); }
.field-hint { margin-top: 0.4rem; font-size: 0.8rem; color: var(--muted-foreground); }
.password-field { position: relative; }
.password-field input { padding-right: 2.5rem; }
.password-toggle {
  position: absolute; top: 50%; right: 0.35rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0.35rem; color: var(--muted-foreground); cursor: pointer;
  border-radius: var(--radius-sm);
}
.password-toggle:hover { color: var(--foreground); }
.filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filter-bar .select { width: auto; min-width: 9rem; padding-top: 0.4rem; padding-bottom: 0.4rem; font-size: 0.85rem; }
.search-box { display: flex; min-width: 16rem; flex: 1; align-items: center; gap: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface); padding: 0.6rem 0.9rem; color: var(--muted-foreground); }
.search-box input { flex: 1; background: transparent; border: none; outline: none; font-size: 0.875rem; color: var(--foreground); }
.checkrow { display: flex; align-items: flex-start; gap: 0.65rem; font-size: 0.875rem; color: var(--muted-foreground); }
.checkrow input { margin-top: 0.2rem; accent-color: var(--primary); }

/* --- grids --- */
.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.grid-jd { grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-jd { grid-template-columns: 1fr 1fr; } }
.dash-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .dash-layout { grid-template-columns: 1fr 20rem; } }
.room-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .room-layout { grid-template-columns: 1fr 22.5rem; } }
.score-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .score-layout { grid-template-columns: 20rem 1fr; } }
.admin-layout { grid-template-columns: 1fr; }
@media (min-width: 1024px) { .admin-layout { grid-template-columns: 13.75rem 1fr; } }

/* --- JD / stat / list cards --- */
.jd-card { display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem; transition: transform .15s, border-color .15s; }
.jd-card:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--primary) 50%, transparent); }
.jd-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.jd-card h3 { font-size: 1.125rem; font-weight: 600; }
.jd-card .company { font-size: 0.875rem; color: var(--muted-foreground); }
.jd-card-tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.jd-card-foot { margin-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 1rem; }
.muted-row { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: var(--muted-foreground); }

.stat-card { padding: 1.25rem; }
.stat-card .value-row { margin-top: 0.5rem; display: flex; align-items: flex-end; justify-content: space-between; }
.stat-card .value { font-family: var(--font-display); font-size: 2.25rem; font-weight: 400; }

.list-row { display: flex; align-items: center; justify-content: space-between; border-radius: var(--radius-md); padding: 0.5rem 0.5rem; transition: background-color .15s; }
.list-row:hover { background: var(--secondary); }

/* --- sidebar nav (admin) --- */
.side-nav { height: fit-content; padding: 0.75rem; }
.side-nav a { display: flex; align-items: center; gap: 0.65rem; border-radius: var(--radius-md); padding: 0.55rem 0.75rem; font-size: 0.875rem; color: var(--muted-foreground); transition: background-color .15s, color .15s; }
.side-nav a:hover { color: var(--foreground); background: color-mix(in oklab, var(--secondary) 60%, transparent); }
.side-nav a.active { background: var(--secondary); color: var(--foreground); font-weight: 500; }

/* --- tabs --- */
.tabbar { display: flex; flex-wrap: wrap; gap: 0.25rem; border-radius: var(--radius-xl); border: 1px solid var(--border); background: var(--surface); padding: 0.25rem; }
.tabbar button { border: none; background: transparent; border-radius: var(--radius-md); padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--muted-foreground); cursor: pointer; transition: background-color .15s, color .15s; }
.tabbar button.active { background: var(--secondary); color: var(--foreground); font-weight: 500; }

/* --- table --- */
table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }
th { text-align: left; padding: 0.5rem 0.5rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--label); font-weight: 400; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); }
td { padding: 0.75rem 0.5rem; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background-color var(--dur-fast) var(--ease); }
tbody tr:hover { background: var(--secondary); }
.table-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border-bottom: 1px solid var(--border); padding: 0.75rem 0; }
  .table-stack tr:hover { background: none; }
  .table-stack td { border: none; padding: 0.3rem 0; display: flex; justify-content: space-between; gap: 1rem; text-align: right; }
  .table-stack td::before { content: attr(data-label); color: var(--muted-foreground); font-size: 0.75rem; text-align: left; }
  .table-stack td[data-label=""]::before, .table-stack td:not([data-label])::before { content: none; }
}

/* --- empty states / skeletons --- */
.empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 3rem 1.5rem; color: var(--muted-foreground); }
.empty-state .icon { width: 2.5rem; height: 2.5rem; color: var(--muted-foreground); opacity: 0.7; }
.empty-state p { max-width: 26rem; font-size: 0.875rem; }
.empty-state .empty-title { color: var(--foreground); font-family: var(--font-display); font-weight: 400; font-size: 1.375rem; }
.skeleton { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--surface-2); }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background-image: linear-gradient(90deg, transparent, color-mix(in oklab, var(--foreground) 8%, transparent), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }
.skeleton-line { height: 0.9rem; margin: 0.4rem 0; }
.skeleton-row { height: 2.75rem; margin-bottom: 0.5rem; }

/* --- modal --- */
.modal-backdrop { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--overlay); padding: 1.25rem; animation: fade-in var(--dur-base) var(--ease); }
@keyframes fade-in { from { opacity: 0; } }
.modal { width: 100%; max-width: 28rem; padding: 1.5rem; max-height: calc(100vh - 2.5rem); overflow-y: auto; }
.modal h2 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.modal .modal-desc { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1.25rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; }

/* --- danger zone --- */
.danger-zone { border: 1px solid color-mix(in oklab, var(--destructive) 35%, transparent); border-radius: var(--radius-xl); padding: 1.25rem; background: color-mix(in oklab, var(--destructive) 6%, transparent); }
.danger-zone .eyebrow { color: var(--destructive); }

/* --- auth / centered card --- */
.auth-wrap { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; overflow: hidden; }
.auth-orb-1 { width: 26rem; height: 26rem; top: -10rem; left: -10rem; background: radial-gradient(circle, var(--primary), transparent 70%); }
.auth-orb-2 { width: 20rem; height: 20rem; bottom: -8rem; right: -8rem; background: radial-gradient(circle, var(--primary-glow), transparent 70%); opacity: 0.35; }
.auth-card { position: relative; width: 100%; max-width: 26rem; padding: 2rem; }
.auth-card h1 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.auth-card .sub { color: var(--muted-foreground); font-size: 0.875rem; margin-bottom: 1.5rem; }
.auth-foot { margin-top: 1.5rem; text-align: center; font-size: 0.875rem; color: var(--muted-foreground); }
.auth-foot a { color: var(--primary); font-weight: 500; }

/* --- auth / split layout (login, signup) --- */
.auth-split { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
.auth-split-brand {
  position: relative; padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between;
  background-image: var(--gradient-hero); border-bottom: 1px solid var(--border); overflow: hidden; min-height: 14rem;
}
.auth-split-brand h2 { font-size: 1.7rem; line-height: 1.2; max-width: 26rem; }
.auth-split-brand p { color: var(--muted-foreground); font-size: 0.9rem; line-height: 1.6; max-width: 24rem; margin-top: 0.75rem; }
.auth-split-form { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.auth-split-form .auth-card { box-shadow: none; }
@media (min-width: 860px) {
  .auth-split { grid-template-columns: 1fr 1fr; }
  .auth-split-brand { border-bottom: none; border-right: 1px solid var(--border); min-height: 100vh; }
}

/* --- password strength / requirements --- */
.password-strength { display: flex; gap: 0.3rem; margin-top: 0.5rem; }
.password-strength span { flex: 1; height: 3px; border-radius: 2px; background: var(--secondary); transition: background-color var(--dur-base) var(--ease); }
.password-strength-label { margin-top: 0.35rem; font-size: 0.75rem; color: var(--muted-foreground); }
.password-requirements { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.6rem; font-size: 0.78rem; color: var(--muted-foreground); }
.password-requirements li { display: flex; align-items: center; gap: 0.4rem; list-style: none; }
.password-requirements .icon { color: var(--muted-foreground); flex-shrink: 0; }
.password-requirements li.met { color: var(--foreground); }
.password-requirements li.met .icon { color: var(--success); }

/* --- room / interview stage --- */
.room-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; }
.rec-pill { display: flex; align-items: center; gap: 0.5rem; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--destructive) 50%, transparent); background: color-mix(in oklab, var(--destructive) 10%, transparent); padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: var(--destructive); }
.rec-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--destructive); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.orb-panel { padding: 2rem; }
.orb-head { display: flex; align-items: center; gap: 0.75rem; }
.orb-avatar { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 999px; background-image: var(--gradient-primary); color: var(--primary-foreground); }
.orb-bars { margin-left: auto; display: flex; height: 2rem; align-items: flex-end; gap: 0.2rem; }
.orb-bars span { width: 0.2rem; border-radius: 999px; background: color-mix(in oklab, var(--primary) 70%, transparent); }
.orb-question { margin-top: 1.5rem; font-family: var(--font-display); font-size: 1.375rem; line-height: 1.4; }
.orb-tags { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.answer-box .head-row { display: flex; align-items: center; justify-content: space-between; }
.wave { margin-top: 1rem; display: flex; height: 5rem; align-items: center; justify-content: center; gap: 0.2rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); padding: 0 1rem; }
.wave span { width: 0.2rem; border-radius: 999px; background: color-mix(in oklab, var(--primary) 60%, transparent); transition: height .1s; }
.answer-actions { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.answer-actions .ml-auto { margin-left: auto; }
.cam-box { overflow: hidden; }
.cam-video-wrap { display: grid; place-items: center; height: 10rem; background-image: var(--gradient-surface); position: relative; }
.cam-video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.cam-meta { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; font-size: 0.75rem; }
.transcript-box { display: flex; max-height: 26rem; flex-direction: column; padding: 1.25rem; }
.transcript-list { margin-top: 1rem; display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; padding-right: 0.25rem; }
.transcript-who { font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; }
.transcript-who.ai { color: var(--primary); }
.transcript-who.me { color: var(--muted-foreground); }
.transcript-text { margin-top: 0.25rem; font-size: 0.875rem; line-height: 1.55; color: var(--muted-foreground); }
.scratchpad textarea { width: 100%; resize: none; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); padding: 0.75rem; font-size: 0.875rem; outline: none; }
.scratchpad textarea:focus { border-color: color-mix(in oklab, var(--primary) 60%, transparent); }

/* --- score ring & scoreboard --- */
.score-ring-wrap { display: flex; flex-direction: column; align-items: center; padding: 1.75rem; }
.score-ring { position: relative; display: grid; place-items: center; width: 10rem; height: 10rem; }
.score-ring svg { width: 10rem; height: 10rem; transform: rotate(-90deg); }
.score-ring circle { fill: none; stroke-width: 10; }
.score-ring .track { stroke: var(--secondary); }
.score-ring .fill { stroke: var(--primary); stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.score-ring-value { position: absolute; text-align: center; }
.score-ring-value .num { font-family: var(--font-display); font-size: 2.75rem; font-weight: 400; }
.score-stat { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); padding: 0.75rem; text-align: center; }
.score-stat .val { font-family: var(--font-mono); font-size: 1.125rem; font-weight: 600; }
.trend-chart { margin-top: 0.75rem; display: flex; height: 6rem; align-items: flex-end; gap: 0.5rem; }
.trend-bar { flex: 1; border-radius: 0.375rem 0.375rem 0 0; background-image: var(--gradient-primary); }
.competency-row + .competency-row { margin-top: 1.25rem; }
.competency-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.875rem; margin-bottom: 0.5rem; }
.feedback-list li { display: flex; gap: 0.65rem; font-size: 0.875rem; color: var(--muted-foreground); align-items: flex-start; }
.feedback-list li + li { margin-top: 0.75rem; }
.feedback-dot { margin-top: 0.4rem; width: 0.375rem; height: 0.375rem; flex-shrink: 0; border-radius: 999px; }
.feedback-dot.success { background: var(--success); }
.feedback-dot.warning { background: var(--warning); }
.qrow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--surface-2); padding: 1rem; }
.qrow + .qrow { margin-top: 0.75rem; }
.qscore { display: grid; place-items: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: color-mix(in oklab, var(--primary) 12%, transparent); font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600; color: var(--primary); }

/* --- misc --- */
.section { margin-top: 1.25rem; }
.card-pad { padding: 1.5rem; }
.spin { display: inline-block; width: 1.1rem; height: 1.1rem; border: 2px solid color-mix(in oklab, var(--foreground) 25%, transparent); border-top-color: var(--foreground); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.center-loading { display: flex; min-height: 60vh; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; color: var(--muted-foreground); }
.hide { display: none !important; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
/* Opt-in, not the .flex default: flex-wrap + flex-direction:column is a trap —
   inside a stretched CSS Grid item (e.g. any .flex.flex-col admin/dashboard
   content column), the browser treats a tall-but-empty cross size as room to
   open new *columns* instead of just growing, shattering the layout into
   several narrow strips. Apply this only to row-direction action/button groups. */
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.35rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-5 { gap: 1.25rem; }
.mt-1 { margin-top: 0.35rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.35rem; }
.text-sm { font-size: 0.875rem; } .text-xs { font-size: 0.75rem; }
.text-muted { color: var(--muted-foreground); }
.text-primary { color: var(--primary); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-destructive { color: var(--destructive); }
.font-mono { font-family: var(--font-mono); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.w-full { width: 100%; }
.flex-1 { flex: 1; }
.toast-stack { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 100; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); box-shadow: var(--shadow-elevated); padding: 0.75rem 1rem; font-size: 0.875rem; max-width: 22rem; }
.toast.error { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); }
.toast.success { border-color: color-mix(in oklab, var(--success) 50%, transparent); }

/* --- depth & motion (marketing surfaces) ---
   Additive-only: nothing else in the app references these classes yet, so
   adding them can't change how any existing page renders. */
.surface-glass {
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
}
.hover-lift { transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: color-mix(in oklab, var(--primary) 45%, transparent); }

.badge-icon {
  display: grid; place-items: center; flex-shrink: 0; width: 2.75rem; height: 2.75rem;
  border-radius: var(--radius-lg); color: var(--primary);
  background: radial-gradient(circle at 30% 20%, color-mix(in oklab, var(--primary) 30%, var(--surface-2)), var(--surface-2) 72%);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--foreground) 8%, transparent), 0 0 0 1px var(--border);
}

.glow-orb { position: absolute; border-radius: 999px; filter: blur(60px); pointer-events: none; opacity: 0.55; }

/* --- centered status card (invite-link status, error pages) --- */
.status-card-wrap { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem 1rem; }
.status-card { max-width: 28rem; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; }
.status-card-icon {
  display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 999px;
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent);
  color: var(--destructive); margin-bottom: 1rem;
}
.status-card-icon.status-card-icon-success {
  background: color-mix(in oklab, var(--success) 12%, transparent);
  border-color: color-mix(in oklab, var(--success) 40%, transparent);
  color: var(--success);
}
.status-card h2 { font-size: 1.375rem; margin-top: 0.5rem; line-height: 1.35; }
.status-card-token {
  margin-top: 1rem; width: 100%; padding: 0.75rem 0.9rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.75rem; word-break: break-all;
}

/* --- legal/info pages (privacy, terms, refunds, contact) — sticky in-page TOC --- */
.legal-page { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-top: 0.5rem; }
.legal-toc { display: flex; flex-direction: column; gap: 0.5rem; height: fit-content; }
.legal-toc a { font-size: 0.85rem; color: var(--muted-foreground); padding: 0.35rem 0.75rem; border-left: 2px solid var(--border); }
.legal-toc a:hover { color: var(--foreground); border-left-color: var(--primary); }
.legal-body { max-width: 44rem; }
.legal-section + .legal-section { margin-top: 1.75rem; }
.legal-section h3 { font-size: 1.15rem; font-weight: 600; }
@media (min-width: 860px) {
  .legal-page { grid-template-columns: 14rem 1fr; }
  .legal-toc { position: sticky; top: 5.5rem; }
}

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }

@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.float { animation: float-y 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .rec-dot, .spin, .skeleton::after, .modal-backdrop { animation: none; }
  .btn, .jd-card, tbody tr, .hover-lift, .btn-glow { transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .float { animation: none; }
}

/* --- small-phone polish --- */
@media (max-width: 420px) {
  .main { padding: 1.5rem 1rem; }
  .auth-card { padding: 1.5rem; }
  .card-pad { padding: 1.1rem; }
  .page-head h1 { font-size: 1.6rem; }
}