/* ─────────────────────────────────────────────────────────────
   theme.css — the shared design layer.

   Loaded AFTER each page's inline <style>, so the tokens and
   component rules here win. Two jobs:

     1. Hold the palette in one place: the purple gradient with
        white text used by every primary control.
     2. Own the app chrome — full-width topbar, sidebar, footer —
        so the eight pages stay consistent from one file.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Black base — deliberately neutral, not navy. Shared by every page. */
  --bg: #0a0a0f;
  --card: #121219;
  --card-2: #16161f;
  --line: #23232f;
  --line-soft: #1c1c26;

  --ink: #f2f0f8;
  --body-ink: #c6c2d6;
  --muted: #8d88a3;
  --faint: #5f5a72;

  /* Purple gradient with white text — the original look. */
  --purple: #8b5cf6;
  --purple-lt: #a78bfa;
  --purple-dp: #6d28d9;
  --purple-line: rgba(139,92,246,.30);
  --grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);

  --accent: #a78bfa;     /* accent for text, borders, pills */
  --accent-ink: #ffffff; /* text sitting on the gradient */

  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 20px 50px -20px rgba(0,0,0,.9);
  --glow: 0 10px 30px -8px rgba(124,58,237,.5);
}

/* Every page declares its own body background in an inline <style> that runs
   before this file, so defining it here unifies them all in one place. The
   base stays black; the ambient wash at the top is the landing page's. */
body {
  position: relative;
  background: var(--bg);
}

/* Violet blooms at fixed points down the *document* (not the viewport) so long
   pages aren't a flat black expanse. Purple only — no blue, the base must read
   as black. Sits behind everything and fades to nothing, so it reads as the
   black lifting rather than a coloured panel. Felt, not seen. */
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 500px at 84% 6%, rgba(139,92,246,.13), transparent 62%),
    radial-gradient(820px 460px at 6% 40%, rgba(124,58,237,.09), transparent 60%),
    radial-gradient(980px 540px at 74% 76%, rgba(139,92,246,.10), transparent 64%);
}

/* ═══════════ scrollbars ═══════════
   The default light scrollbar cuts a bright stripe through a dark UI.
   Slim translucent purple thumb on a transparent track instead. */
* { scrollbar-width: thin; scrollbar-color: rgba(139,92,246,.34) transparent; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  /* transparent border + background-clip keeps the thumb visually slim
     while leaving a comfortable hit area */
  background: rgba(139,92,246,.30);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(167,139,250,.55);
  background-clip: content-box;
}
::-webkit-scrollbar-corner { background: transparent; }

/* ═══════════ primary buttons ═══════════
   Every "do the main thing" control across the app: purple gradient,
   white text. */
.newbtn,
.btn.primary,
.btn.dark,
button#submit,
button.blue,
button.solid,
button.submit,
button.save,
.cta a,
.finalcard .btn.primary {
  background: var(--grad) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  box-shadow: var(--glow) !important;
  font-weight: 700;
}
.newbtn:hover,
.btn.primary:hover,
.btn.dark:hover,
button#submit:hover:not(:disabled),
button.blue:hover:not(:disabled),
button.solid:hover,
button.submit:hover:not(:disabled),
button.save:hover:not(:disabled),
.cta a:hover {
  filter: brightness(1.08);
  color: #fff !important;
}
.newbtn svg, .btn.primary svg, .btn.dark svg,
button#submit svg, button.blue svg, button.solid svg, .cta a svg { color: #fff; }

/* secondary / ghost buttons keep the dark card look */
.btn:not(.primary):not(.dark),
button.ghost {
  background: var(--card);
  color: var(--body-ink);
  border: 1px solid var(--line);
}
.btn:not(.primary):not(.dark):hover,
button.ghost:hover { border-color: var(--purple-line); color: #fff; }

/* ═══════════ app shell ═══════════
   The topbar spans the full width above both columns; the footer
   spans it below. Markup order: topbar, sidebar, main, footer. */
.app {
  display: grid;
  grid-template-columns: 284px 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}
.app > .appbar { grid-column: 1 / -1; grid-row: 1; }
.app > .sidebar { grid-column: 1; grid-row: 2; }
.app > .main    { grid-column: 2; grid-row: 2; min-width: 0; }
.app > .appfoot { grid-column: 1 / -1; grid-row: 3; }

.appbar {
  height: 80px; display: flex; align-items: center; gap: 6px;
  padding: 0 22px; border-bottom: 1px solid var(--line);
  background: rgba(10,10,15,.78); backdrop-filter: blur(14px);
  position: sticky; top: 0; z-index: 30;
}
.appbar .side-brand,
.topbrand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 800; font-size: 17px; letter-spacing: -.025em;
  margin-right: 22px; flex: none;
}
.appbar .side-brand .mark, .topbrand .mark {
  width: 30px; height: 30px; border-radius: 9px; background: var(--grad);
  display: grid; place-items: center; box-shadow: var(--glow); flex: none;
  color: #fff;
}
.appbar .side-brand .mark svg, .topbrand .mark svg { width: 16px; height: 16px; color: #fff; }
.appbar .side-brand .name { font-weight: 800; font-size: 17px; }
/* background-clip:text paints only inside the element's box, and a glyph's
   ink can spill past it — especially an italic's slant, which sliced the
   final "s" of "success". Pad the paint area; the text itself is transparent
   so the extra space costs nothing visually. */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  padding-right: .09em; margin-right: -.03em;
}

.navlink {
  font: 600 14px/1 var(--font, inherit); color: var(--muted); text-decoration: none;
  padding: 9px 13px; border-radius: 8px; transition: color .15s, background .15s;
}
.navlink:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.navlink.on { color: #fff; }
.navlink.on::after {
  content: ""; display: block; height: 2px; border-radius: 2px;
  margin-top: 7px; background: var(--grad);
}
/* Pushes the icon cluster to the far right. Was defined per-page, so pages
   written later (admin, account) had their icons stuck beside the nav. */
.appbar .grow { flex: 1; }

/* avatar in the top-right — initials, since there are no photo uploads */
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; margin-left: 10px;
  background: var(--grad); color: #fff;
  font: 800 12.5px/1 var(--font, inherit); letter-spacing: .02em;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,.14); padding: 0;
}
.avatar:hover { filter: brightness(1.08); }

/* ═══════════ inline code / math in interviewer questions ═══════════
   Technical tokens (identifiers, function calls, tensor shapes) rendered by
   AIRS.formatTech get a monospace treatment so notation like
   A_eff = Softmax(W) reads as code, not as run-on heading text. */
.question code, .qtext code, .qrow .q code, .critique p code {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: .88em; font-weight: 600;
  background: rgba(139,92,246,.14); border: 1px solid var(--purple-line);
  color: #dcd3ff; padding: .06em .38em; border-radius: 6px;
  letter-spacing: 0;
  /* internal spaces are NBSP (formatTech), so short chips stay whole; a chip
     too wide for a phone breaks here instead of overflowing the page. */
  overflow-wrap: anywhere;
}
/* the interview question is a heavy heading — soften code weight to match */
.question code { font-weight: 500; font-size: .8em; }

/* ═══════════ topbar icon cluster ═══════════
   Notifications + settings, injected by topbar.js so all pages match. */
.topicons { position: relative; display: flex; align-items: center; gap: 8px; flex: none; }
.iconbtn {
  width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--card); color: var(--muted); display: grid; place-items: center;
  cursor: pointer; position: relative; padding: 0;
  transition: color .15s, border-color .15s;
}
.iconbtn:hover { color: #fff; border-color: var(--purple-line); }
.iconbtn svg { width: 17px; height: 17px; }
.iconbtn .badge {
  position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--grad); color: #fff;
  font: 700 9.5px/16px var(--font, inherit); text-align: center;
}

.pop {
  position: absolute; top: calc(100% + 12px); right: 0; width: 310px; z-index: 60;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px; display: none;
}
.pop.open { display: block; }
.pop h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; }
.pop .psub { color: var(--muted); font-size: 12px; margin: 0 0 14px; }
.pop .empty-note { color: var(--faint); font-size: 13px; text-align: center; padding: 16px 0; }
@media (max-width: 560px) { .pop { width: min(310px, calc(100vw - 24px)); } }

/* notification rows */
.nlist { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; }
.nrow {
  display: flex; gap: 11px; align-items: flex-start; text-decoration: none;
  border-radius: 10px; padding: 11px; transition: background .15s;
}
.nrow:hover { background: rgba(139,92,246,.1); }
.nrow .ic {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center;
  background: rgba(139,92,246,.14); border: 1px solid var(--purple-line); color: var(--purple-lt);
}
.nrow.ok .ic { background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.35); color: var(--green); }
.nrow.warn .ic { background: rgba(251,191,36,.13); border-color: rgba(251,191,36,.35); color: var(--amber); }
.nrow .ic svg { width: 14px; height: 14px; }
.nrow .t { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.nrow .b { margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.nrow .w { margin-top: 5px; font: 500 10px/1 var(--mono, monospace); color: var(--faint); }

/* settings rows */
.setrow { margin-bottom: 16px; }
.setrow:last-child { margin-bottom: 0; }
.setrow .lbl {
  font: 500 10.5px/1 var(--mono, monospace); letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 9px;
}
.toggle { display: flex; align-items: center; justify-content: space-between; }
.toggle span { font-size: 13.5px; color: var(--body-ink); }
.sw {
  width: 42px; height: 24px; border-radius: 14px; background: var(--line);
  border: none; cursor: pointer; position: relative; transition: background .15s; flex: none;
}
.sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.sw.on { background: var(--purple); }
.sw.on::after { transform: translateX(18px); }

/* account menu hanging off the avatar */
.acctwrap { position: relative; margin-left: 10px; flex: none; }
.acctwrap .avatar { margin-left: 0; }
.acctmenu {
  position: absolute; top: calc(100% + 10px); right: 0; width: 244px; z-index: 60;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 13px;
  box-shadow: var(--shadow); padding: 7px; display: none;
}
.acctmenu.open { display: block; }
.acctmenu .head { padding: 11px 11px 12px; border-bottom: 1px solid var(--line-soft); margin-bottom: 6px; }
.acctmenu .head .nm {
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acctmenu .head .em {
  margin-top: 4px; font: 500 10.5px/1.4 var(--mono, monospace); color: var(--faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acctmenu a, .acctmenu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: 600 13.5px/1 var(--font, inherit); color: var(--body-ink);
  background: none; border: none; border-radius: 9px; padding: 11px;
  cursor: pointer; text-align: left; text-decoration: none;
}
.acctmenu a:hover, .acctmenu button:hover { background: rgba(139,92,246,.12); color: #fff; }
.acctmenu svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.acctmenu a:hover svg, .acctmenu button:hover svg { color: var(--purple-lt); }
.acctmenu .danger { color: var(--red); }
.acctmenu .danger:hover { background: rgba(248,113,113,.12); color: var(--red); }
.acctmenu .danger svg { color: var(--red); }

/* Pages without a workspace sidebar (informational / focused screens) run
   the content full width. shell.js still gives them a nav-only drawer on
   mobile, since the topbar hides its links at that size. */
.app.nosidebar { grid-template-columns: 1fr; }
.app.nosidebar > .main { grid-column: 1; }
.sidebar.navonly { display: none; }
@media (max-width: 860px) { .sidebar.navonly { display: flex; } }

/* ═══════════ sidebar ═══════════ */
/* Layout for the sidebar CTA lives here, not in each page's inline <style> —
   otherwise a page that doesn't carry a copy (admin.html) renders it unstyled
   with a full-size SVG. */
.newbtn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 700 14px/1 var(--font, inherit); border-radius: 11px; padding: 14px;
  cursor: pointer; text-decoration: none;
}
.newbtn svg { width: 16px; height: 16px; flex: none; }
.profile .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.profile .pchev { width: 15px; height: 15px; flex: none; }

.sidebar {
  background: rgba(11,11,16,.72); border-right: 1px solid var(--line);
  padding: 20px 16px; display: flex; flex-direction: column; gap: 18px;
  position: sticky; top: 80px; height: calc(100vh - 80px); overflow-y: auto;
}
.side-sec {
  font: 500 10px/1 var(--mono, monospace); letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); padding: 0 4px 2px;
}
.side-empty {
  border: 1px dashed var(--line); border-radius: 11px; padding: 18px 12px;
  text-align: center; color: var(--faint); font-size: 12.5px;
}
.side-spacer { flex: 1; }

/* session cards: role, status pill, date */
.sesslist { display: flex; flex-direction: column; gap: 6px; }
.sess {
  display: block; text-decoration: none; border: 1px solid transparent;
  border-radius: 11px; padding: 11px 12px; transition: background .15s, border-color .15s;
}
.sess:hover { background: rgba(255,255,255,.04); border-color: var(--line); }
.sess.done { background: rgba(255,255,255,.045); border-color: var(--line); }
.sess-top { display: flex; align-items: center; gap: 8px; }
.sess-role {
  flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sess.done .sess-role { color: var(--purple-lt); }
.sess-date {
  /* span defaults to inline, where margin-top is ignored */
  display: block; margin-top: 6px;
  font: 500 10.5px/1 var(--mono, monospace); color: var(--faint);
}
.pill {
  font: 500 8.5px/1 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase;
  border-radius: 5px; padding: 5px 6px; flex: none; border: 1px solid var(--line); color: var(--muted);
}
.pill.live     { color: var(--green); border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.1); }
.pill.complete { color: var(--purple-lt); border-color: var(--purple-line); background: rgba(139,92,246,.12); }
.pill.stopped  { color: var(--red);   border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.1); }

/* account card at the bottom of the sidebar */
.profile {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line);
  transition: border-color .15s, background .15s;
}
.profile:hover { border-color: var(--purple-line); background: rgba(139,92,246,.08); }
.profile .pic {
  width: 34px; height: 34px; border-radius: 9px; flex: none; position: relative;
  background: var(--grad); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 13px; box-shadow: none;
}
.profile .pic .on-dot { display: none; }
.profile .nm { font-size: 13.5px; font-weight: 600; }
.profile .pl { font: 500 9.5px/1 var(--mono, monospace); color: var(--muted); }
.profile .pl .plan { color: var(--purple-lt); font-weight: 700; }
.profile .pchev { color: var(--faint); }

/* ═══════════ footer ═══════════ */
.appfoot {
  border-top: 1px solid var(--line); padding: 22px 26px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: rgba(9,9,13,.6);
}
.appfoot .fb { font-weight: 800; font-size: 15px; letter-spacing: -.02em; }
.appfoot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.appfoot a {
  font: 500 11px/1 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
}
.appfoot a:hover { color: var(--ink); }
.appfoot .fc {
  margin-left: auto; font: 500 11px/1.6 var(--mono, monospace); color: var(--faint);
}
@media (max-width: 700px) {
  .appfoot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .appfoot .fc { margin-left: 0; }
}

/* ═══════════ form controls ═══════════ */
label.f, .flabel {
  font: 500 10px/1 var(--mono, monospace) !important; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted) !important; font-weight: 500 !important;
}
input[type=text], input[type=email], input[type=password], textarea {
  background: rgba(0,0,0,.32); border: 1px solid var(--line); border-radius: 11px;
}
input[type=text]:focus, input[type=email]:focus,
input[type=password]:focus, textarea:focus {
  border-color: var(--purple) !important;
  box-shadow: 0 0 0 3.5px rgba(139,92,246,.18) !important;
}

/* ═══════════ selects & segmented controls ═══════════ */
select {
  width: 100%; font: 400 14.5px/1.6 var(--font, inherit); color: var(--ink);
  background: rgba(0,0,0,.3); border: 1px solid var(--line); border-radius: 11px;
  padding: 13px 40px 13px 15px; cursor: pointer; appearance: none;
  /* chevron drawn inline so there's no extra asset to load */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d88a3' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  transition: border-color .15s, box-shadow .15s;
}
select:focus {
  outline: none; border-color: var(--purple);
  box-shadow: 0 0 0 3.5px rgba(139,92,246,.18);
}
select option { background: #16161f; color: var(--ink); }

.seg {
  display: flex; gap: 5px; background: rgba(0,0,0,.3);
  border: 1px solid var(--line); border-radius: 11px; padding: 4px;
}
.seg button {
  flex: 1; font: 600 13px/1 var(--font, inherit); color: var(--muted);
  background: none; border: none; border-radius: 8px; padding: 11px 8px;
  cursor: pointer; transition: background .15s, color .15s; white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
/* the theme row's options carry a moon / sun beside the label */
.seg button svg { width: 14px; height: 14px; flex: none; }
.seg button:has(svg) { display: flex; align-items: center; justify-content: center; gap: 7px; }
.seg button.on { background: var(--grad); color: #fff; font-weight: 700; }
@media (max-width: 460px) {
  .seg { flex-wrap: wrap; }
  .seg button { flex: 1 0 calc(50% - 5px); }
}

/* numbered step badge on a section card */
.stepno {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: rgba(139,92,246,.14); border: 1px solid var(--purple-line);
  display: grid; place-items: center; color: var(--purple-lt);
  font: 700 12px/1 var(--mono, monospace);
}

/* icon chips on section cards */
.chip, .t-ic, .pv-ic {
  background: rgba(139,92,246,.14) !important;
  border-color: var(--purple-line) !important;
  color: var(--accent) !important;
}

/* ═══════════ mobile ═══════════ */
/* Nav links live in the drawer on mobile — shell.js clones them there.
   Hidden here by default so they never flash before the clone lands. */
.sidenav { display: none; flex-direction: column; gap: 2px; }
.sidenav a {
  font: 600 14.5px/1 var(--font, inherit); color: var(--body-ink); text-decoration: none;
  padding: 12px 12px; border-radius: 9px;
}
.sidenav a:hover { background: rgba(255,255,255,.05); color: #fff; }
.sidenav a.on { color: #fff; background: var(--grad); font-weight: 700; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .app > .main { grid-column: 1; }
  .appbar .side-brand { margin-right: auto; }
  .sidebar { top: 0; height: 100vh; height: 100dvh; }

  /* the topbar can't hold brand + 4 links + icons + avatar on a phone */
  .appbar .navlink { display: none; }
  .sidenav { display: flex; }
}
@media (max-width: 560px) {
  .appbar { padding: 0 14px; }
  .appbar .side-brand .name { display: none; }
  /* The nav links moved into the drawer, which frees enough room to keep
     notifications and settings reachable on a phone. */
  .topicons { gap: 6px; }
  .iconbtn { width: 34px; height: 34px; }
}
@media (max-width: 420px) {
  /* smallest phones: shave the topbar so a busy bar (e.g. the live interview
     with its Save & exit button) still fits without horizontal scroll. Placed
     after the 560px block so its tighter values win. */
  .appbar { padding: 0 10px; gap: 3px; }
  .topicons { gap: 5px; }
  .iconbtn { width: 32px; height: 32px; }
  .avatar { width: 32px; height: 32px; margin-left: 6px; }
  .acctwrap { margin-left: 6px; }
}

/* ═══════════ public marketing bar ═══════════
   /rules, /pricing and /about are pages a signed-out visitor can land on, so
   their bar matches the homepage's rather than the app shell's. Scoped to
   .appbar.publicnav — the app screens (setup, interview, report, account,
   admin) keep the compact 64px bar above. Values mirror `.nav` in home.html. */
.appbar.publicnav {
  height: 80px; gap: 18px; padding: 0;
  /* same black tint as the app bar and the homepage's own .nav */
  background: rgba(10,10,15,.78);
}
.appbar.publicnav > * { flex: none; }
/* brand + links + actions sit on the same 1140px measure as every other
   section of the marketing pages */
.appbar.publicnav {
  padding: 0 max(24px, calc((100% - 1140px) / 2));
}
.appbar.publicnav .side-brand {
  gap: 12px; font-size: 25px; margin-right: 0;
}
.appbar.publicnav .side-brand .mark {
  width: 44px; height: 44px; background: none; box-shadow: none;
}
.appbar.publicnav .side-brand .name { font-size: 25px; position: relative; top: 2px; }
/* a .grow either side centres the link cluster, as on the homepage */
.appbar.publicnav .grow { flex: 1; }
.appbar.publicnav .navlink { font-size: 14px; padding: 10px 14px; }

/* the CTAs shell.js appends for anonymous visitors, restyled to match the
   homepage's ghost + gradient pair */
/* pricing.html sets .btn { width: 100% } for its plan cards; the bar's own
   buttons must not inherit that */
.appbar.publicnav .btn { width: auto; flex: none; }
.appbar.publicnav .btn.ghost {
  padding: 13px 20px; font-size: 14px; border-radius: 10px; text-decoration: none;
}
.appbar.publicnav .btn.primary {
  padding: 13px 20px !important; font-size: 14px !important; border-radius: 10px !important;
  text-decoration: none;
}
@media (max-width: 860px) {
  .appbar.publicnav { height: 68px; padding: 0 18px; gap: 10px; }
  .appbar.publicnav .side-brand { font-size: 21px; margin-right: auto; }
  /* theme's compact bar drops the wordmark at 560px; the marketing bar keeps
     the full lockup, as the homepage does */
  .appbar.publicnav .side-brand .name { display: block; font-size: 21px; }
  .appbar.publicnav .side-brand .mark { width: 38px; height: 38px; }
  /* markup order puts the drawer button first; the homepage has it far right */
  .appbar.publicnav .menubtn { order: 9; margin-left: 4px; }
  .appbar.publicnav .grow { display: none; }
}
@media (max-width: 560px) {
  /* same call as the homepage: the marketing CTAs leave the bar and the drawer
     carries "Get started" instead (appended by shell.js) */
  .appbar.publicnav .btn.ghost, .appbar.publicnav .btn.primary { display: none; }
}
/* the drawer's own Get started, styled like the homepage menu's */
.sidenav a.navcta {
  margin-top: 12px; text-align: center; border-radius: 10px;
  padding: 13px 16px; font-weight: 700;
  background: var(--grad); color: #fff; box-shadow: var(--glow);
}

/* ═══════════ popovers on phones ═══════════
   .pop / .acctmenu hang right:0 off .topicons / .acctwrap. Those sit ~90px in
   from the screen edge, so a 310px panel runs off the left of a 390px phone
   and gets clipped. Dropping the wrappers to static re-anchors the panels to
   the bar itself (sticky, so it is the next positioned ancestor), which spans
   the full width — the panel then sits flush under the bar and inside it. */
@media (max-width: 560px) {
  .topicons, .acctwrap { position: static; }
  .pop, .acctmenu {
    right: 12px; left: auto;
    width: min(320px, calc(100vw - 24px));
  }
}


/* ═══════════ app bar, matched to the landing page ═══════════
   Same proportions as `.nav` in home.html — 80px tall, 44px mark, 25px
   wordmark, links centred — so moving between the marketing pages and the
   app doesn't feel like changing product. The link set stays app-specific. */
.appbar .side-brand { font-size: 25px; gap: 12px; margin-right: 0; padding: 4px 6px; }
.appbar .side-brand .mark { width: 44px; height: 44px; background: none; box-shadow: none; }
.appbar .side-brand .name { font-size: 25px; position: relative; top: 2px; }
/* the landing page's lockup is mark + wordmark; the strapline underneath made
   this one two lines tall and a different shape from every other bar */
.appbar .side-brand .brand-tag { display: none; }
.appbar .side-brand .brand-txt { display: flex; align-items: center; }
/* auto margins either side centre the link cluster without extra markup.
   `:first-of-type` would fail here — .side-brand is also an <a>, so the first
   <a> in the bar is the brand, not a link. */
.appbar:not(.publicnav) .side-brand + .navlink { margin-left: auto; }
.appbar:not(.publicnav) .grow { flex: none; margin-right: auto; }
.appbar .navlink { font-size: 14px; padding: 10px 14px; }
/* the app bar stays full-bleed — its brand sits over the session rail, not on
   the marketing pages' centred measure. Pages set 22 / 24 / 26px individually,
   which shifted the lockup between pages; one gutter for all of them. */
.appbar:not(.publicnav) { padding: 0 24px; }
@media (max-width: 860px) { .appbar:not(.publicnav) { padding: 0 18px; } }

/* the workspace rail reads as part of the page, not a darker slab beside it */
.sidebar { background: rgba(13,13,19,.55); }

@media (max-width: 860px) {
  .appbar { height: 68px; }
  .appbar .side-brand, .appbar .side-brand .name { font-size: 21px; }
  .appbar .side-brand .mark { width: 38px; height: 38px; }
  .sidebar { top: 0; height: 100vh; height: 100dvh; }
}


/* ═══════════ page titles ═══════════
   Pages had drifted to five different h1 scales — rules/about 30→42,
   pricing 30→44, setup/report 34→46, account/admin 28→38 — which is what
   made the typography feel inconsistent from page to page. One scale here.
   `.wrap` exists on every page except the landing page, so the homepage's
   hero h1 is untouched. Page titles are all bare <h1>; interview.html's are
   classed (.question, .brief-head) and are not page titles, so :not([class])
   keeps this off them — without it `.wrap h1` outweighed `.question`. */
.wrap h1:not([class]) { font-size: clamp(30px, 4.4vw, 42px); }


/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME
   ═══════════════════════════════════════════════════════════════
   Toggled from the settings popover (topbar.js), stored as `hl_theme`
   in localStorage and applied as data-theme="light" on <html> by a
   head snippet on each page — before first paint, so there's no flash.

   Two layers:
     1. the palette, which most rules already read through var()
     2. overrides for rules that hard-code a dark literal — sunken
        wells (rgba(0,0,0,…)) and white tints (rgba(255,255,255,…))
        that invert rather than re-tint. Selectors are prefixed with
        html[data-theme="light"], which outranks both the page's own
        inline <style> and the dark rules above.

   The purple is untouched: same gradient, same accent, so the brand
   reads identically in both themes. */

:root { color-scheme: dark; }
html[data-theme="light"] {
  color-scheme: light;

  --bg: #f6f5fb;
  --card: #ffffff;
  --card-2: #ffffff;
  --line: #e4e1ef;
  --line-soft: #edeaf5;

  --ink: #17131f;
  --body-ink: #4a4459;
  --muted: #6f6982;
  --faint: #948fa5;

  /* the gradient and its family stay exactly as they are — same brand */
  --purple: #7c3aed;
  --purple-lt: #7c3aed;
  --purple-dp: #5b21b6;
  --purple-line: rgba(124,58,237,.26);
  --grad: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
  --accent: #7c3aed;
  --accent-ink: #ffffff;

  /* the dark theme's pastels are too pale to read on white */
  --green: #059669;
  --amber: #b45309;
  --red: #dc2626;

  --shadow: 0 1px 2px rgba(24,16,46,.06), 0 18px 42px -22px rgba(24,16,46,.28);
  --glow: 0 8px 22px -10px rgba(124,58,237,.45);
}

/* the blooms lift the page the same way, just far softer on white */
html[data-theme="light"] body::before {
  background:
    radial-gradient(900px 500px at 84% 6%, rgba(139,92,246,.16), transparent 62%),
    radial-gradient(820px 460px at 6% 40%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(980px 540px at 74% 76%, rgba(139,92,246,.13), transparent 64%);
}
html[data-theme="light"] * { scrollbar-color: rgba(124,58,237,.34) transparent; }

/* ── chrome ─────────────────────────────────────────────────── */
html[data-theme="light"] .sidebar { background: rgba(255,255,255,.66); }
html[data-theme="light"] .navlink:hover,
html[data-theme="light"] .navlinks a:hover { background: rgba(124,58,237,.08); }
html[data-theme="light"] .navlink.on { color: var(--ink); }
html[data-theme="light"] .iconbtn:hover { color: var(--purple); }
html[data-theme="light"] .sidenav a:hover { background: rgba(124,58,237,.08); color: var(--ink); }
html[data-theme="light"] .acctmenu a:hover,
html[data-theme="light"] .acctmenu button:hover { background: rgba(124,58,237,.10); color: var(--ink); }
html[data-theme="light"] .sess:hover { background: rgba(124,58,237,.06); }
html[data-theme="light"] .sess.done { background: rgba(124,58,237,.05); }
html[data-theme="light"] .profile { background: rgba(124,58,237,.05); }
html[data-theme="light"] .btn:not(.primary):not(.dark):hover,
html[data-theme="light"] button.ghost:hover { color: var(--purple); }
html[data-theme="light"] .drawer-backdrop { background: rgba(24,16,46,.38); }

/* ── form controls ──────────────────────────────────────────── */
/* Wells were rgba(0,0,0,…); inverted to a white-on-silver inset. Set as
   background-color, never the shorthand — a <select> draws its chevron as a
   background-image and the shorthand would wipe it out. */
html[data-theme="light"] input[type=text],
html[data-theme="light"] input[type=email],
html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=number],
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] .seg,
html[data-theme="light"] .drop,
html[data-theme="light"] .miccheck { background-color: #fbfaff; }
html[data-theme="light"] select option { background: #ffffff; }
html[data-theme="light"] .sw { background: #ddd8ea; }
html[data-theme="light"] .sw::after { background: #fff; }
html[data-theme="light"] .seg button:not(.on) { color: var(--body-ink); }

/* progress tracks and other white-tint surfaces */
html[data-theme="light"] .qc-bar,
html[data-theme="light"] .bar .track,
html[data-theme="light"] .dim .track,
html[data-theme="light"] .meter-bar,
html[data-theme="light"] .timer .tbar,
html[data-theme="light"] .scorepanel .scbar { background: rgba(24,16,46,.09); }
html[data-theme="light"] .audiobox,
html[data-theme="light"] .livetext,
html[data-theme="light"] .kv .cell,
html[data-theme="light"] .qrow,
html[data-theme="light"] .metric,
html[data-theme="light"] .debrief,
html[data-theme="light"] .dcell,
html[data-theme="light"] .modeviz,
html[data-theme="light"] .acct-row { background-color: #fbfaff !important; background-image: none !important; }

/* ── code chips and editors ─────────────────────────────────── */
html[data-theme="light"] .question code,
html[data-theme="light"] .qtext code,
html[data-theme="light"] .qrow .q code,
html[data-theme="light"] .critique p code {
  background: rgba(124,58,237,.10); color: #5b21b6;
}
html[data-theme="light"] .question { color: var(--ink); }
/* …except inside the question card, which is filled deep purple in both
   themes, so its type stays white and its code chips stay translucent */
html[data-theme="light"] .qcard .question { color: #fff; }
html[data-theme="light"] .qcard .question code {
  background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.3); color: #fff;
}
/* the mode buttons sit on a dark well by default — silver on a light page */
html[data-theme="light"] .livehead .modes {
  background: linear-gradient(180deg, #ffffff, #f4f2fa); border-color: #e4e1ef;
}
html[data-theme="light"] .livehead .modes button { color: var(--purple); }
html[data-theme="light"] .livehead .modes button.on { color: #fff; }
html[data-theme="light"] .editorbox { box-shadow: inset 0 0 0 1px var(--line); }

/* ── landing page ───────────────────────────────────────────── */
/* the hero art and the neural band are dark images; they keep their own
   contrast, so only the furniture around them changes */
html[data-theme="light"] .btn:hover { background: rgba(124,58,237,.08); color: var(--purple); }
html[data-theme="light"] .btn.ghost:hover { background: rgba(124,58,237,.08); color: var(--purple); }
html[data-theme="light"] .btn.primary:hover,
html[data-theme="light"] .newbtn:hover { color: #fff !important; }
html[data-theme="light"] .trust .pill { background: #fff; }
html[data-theme="light"] .trust .pill:hover { color: var(--purple); }
html[data-theme="light"] .fsocial a:hover { color: var(--purple); }
html[data-theme="light"] .herotext .ledemore:hover { color: var(--purple); }
/* hero badge sat on a white-tint glass that vanishes on white */
html[data-theme="light"] .badge,
html[data-theme="light"] .hbadge {
  background: rgba(124,58,237,.09);
  border-color: rgba(124,58,237,.22);
  box-shadow: none;
}
/* the band artwork stays dark, so text over it keeps its dark-mode treatment */
html[data-theme="light"] .ideaband { color: #f2f0f8; }
html[data-theme="light"] .ideaband .sec-head h2,
html[data-theme="light"] .ideaband .sec-head p { color: #f2f0f8; }

/* ── report / print ─────────────────────────────────────────── */
html[data-theme="light"] .bar {
  background: linear-gradient(90deg, #efedf6 25%, #f7f5fc 37%, #efedf6 63%);
  background-size: 400% 100%;
}

/* ── light theme: depth ─────────────────────────────────────────
   Flat white read as empty, so the light theme gets the same treatment
   the dark one has: a graded ground rather than a single fill. Three
   layers — a lavender wash on the page, a silver-to-white gradient on
   every raised surface, and silver hairlines to separate them. */
html[data-theme="light"] body {
  background:
    linear-gradient(180deg, #f4f1fc 0%, #f8f7fc 38%, #f5f3fb 100%) fixed;
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(1100px 620px at 84% 4%, rgba(124,58,237,.20), transparent 64%),
    radial-gradient(900px 520px at 4% 34%, rgba(139,92,246,.15), transparent 62%),
    radial-gradient(1000px 560px at 76% 74%, rgba(167,139,250,.18), transparent 66%),
    /* silver drift, so the white isn't uniform between the purple pools */
    radial-gradient(760px 420px at 20% 88%, rgba(148,143,165,.13), transparent 68%);
}

/* raised surfaces: white at the top edge falling to silver, which is what
   makes a card read as lit rather than as a flat patch of paper */
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .summary,
html[data-theme="light"] .qitem,
html[data-theme="light"] .tile,
html[data-theme="light"] .plan,
html[data-theme="light"] .pop,
html[data-theme="light"] .acctmenu,
html[data-theme="light"] .quotacard,
html[data-theme="light"] .stage,
  background: linear-gradient(180deg, #ffffff 0%, #f4f2fa 100%);
  border-color: #e6e3f0;
}
html[data-theme="light"] .card,
html[data-theme="light"] .panel,
html[data-theme="light"] .stage {
  box-shadow: 0 1px 1px rgba(24,16,46,.04), 0 16px 34px -22px rgba(76,45,140,.30);
}
/* the hairline every card already draws across its top — silver on light */
html[data-theme="light"] .card::before {
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.35), rgba(190,186,205,.5), transparent);
}
/* Opaque, not translucent. The homepage hero is a dark band that scrolls
   underneath a sticky bar, and at 86-94% alpha it bled through as a grey
   wash across part of the bar while the rest stayed white — reading as a
   stripe. Nothing behind the bar should show in light mode. */
html[data-theme="light"] .appbar,
html[data-theme="light"] .appbar.publicnav,
html[data-theme="light"] .nav {
  background: linear-gradient(180deg, #ffffff, #f7f5fd);
  border-bottom-color: #e4e0ee;
}
html[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(243,240,252,.72));
  border-right-color: #e4e0ee;
}
/* the footer's translucent near-black composited to a slab of grey on a light
   page — silver, in the same family as the other raised surfaces */
html[data-theme="light"] .appfoot {
  background: linear-gradient(180deg, rgba(255,255,255,.80), rgba(240,237,249,.94));
  border-top-color: #e4e0ee;
}
html[data-theme="light"] .appfoot a { color: var(--muted); }
html[data-theme="light"] .appfoot a:hover { color: var(--purple); }

/* ── light theme: the mobile drawer / menu ──────────────────────
   Both panels are near-opaque dark slabs — the app-shell drawer in
   shell.css and the homepage's own dropdown — so on a phone in light mode
   the page was white and the menu still black. */
html[data-theme="light"] .app > .sidebar { background: rgba(255,255,255,.98); }
html[data-theme="light"] .app > .sidebar.open { box-shadow: 0 0 46px rgba(76,45,140,.28); }
html[data-theme="light"] .navlinks {
  background: rgba(255,255,255,.98);
  border-bottom-color: #e4e0ee;
}
html[data-theme="light"] .navlinks a { color: var(--body-ink); }
html[data-theme="light"] .navlinks a:hover { color: var(--purple); }
html[data-theme="light"] .menubtn:hover,
html[data-theme="light"] .drawer-close:hover { color: var(--purple); }
html[data-theme="light"] .navtoggle { color: var(--body-ink); border-color: #e2dfee; }
/* pills / chips pick up the silver so they stand off the page */
html[data-theme="light"] .trust .pill,
html[data-theme="light"] .pill,
html[data-theme="light"] .iconbtn,
html[data-theme="light"] .btn:not(.primary):not(.dark),
html[data-theme="light"] button.ghost {
  background: linear-gradient(180deg, #ffffff, #f1eff8);
  border-color: #e2dfee;
}
html[data-theme="light"] .chip,
html[data-theme="light"] .hp-ic,
html[data-theme="light"] .nrow .ic {
  background: linear-gradient(180deg, rgba(167,139,250,.20), rgba(124,58,237,.10));
  border-color: rgba(124,58,237,.22);
}

/* ── light theme: the dark artwork ──────────────────────────────
   The hero render and the neural band are both dark images. Dropped on
   white they read as holes in the page, so in light mode the bands they
   sit in become violet: the art now fades into colour rather than into
   nothing, and the copy sits on a lavender-to-white gradient. */
/* The hero band stays black-and-purple in light mode — the same ground the
   dark theme uses. The render is a dark image; every attempt to sit it on a
   pale band ended up fighting it, and a dark hero panel under a light page
   reads as deliberate. Everything inside the band therefore keeps its
   dark-theme treatment too. */
html[data-theme="light"] .heroband {
  background:
    radial-gradient(900px 520px at 80% 32%, rgba(139,92,246,.10), transparent 62%),
    radial-gradient(720px 460px at 4% 8%, rgba(139,92,246,.16), transparent 60%),
    #0a0a0f;
}
/* the band's own type and chrome, back to the dark palette */
html[data-theme="light"] .heroband h1 { color: #f2f0f8; }
html[data-theme="light"] .hero p.lede { color: #c6c2d6; }
html[data-theme="light"] .heroband .badge {
  color: #a78bfa; border-color: rgba(139,92,246,.30);
  background: rgba(139,92,246,.09); box-shadow: none;
}
html[data-theme="light"] .hpoint {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme="light"] .heropoints h3 { color: #f2f0f8; }
html[data-theme="light"] .heropoints p { color: #8d88a3; }
html[data-theme="light"] .hp-ic {
  color: #dccfff;
  background: rgba(139,92,246,.22);
  border-color: rgba(167,139,250,.36);
}
/* the secondary CTA is a ghost button on the dark band, not a silver card */
html[data-theme="light"] .heroband .btn:not(.primary) {
  background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.14); color: #f2f0f8;
}
html[data-theme="light"] .heroband .btn:not(.primary):hover {
  background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.4); color: #fff;
}
html[data-theme="light"] .herotext .ledemore { color: #a78bfa; }
html[data-theme="light"] .herotext .ledemore:hover { color: #fff; }
/* the neural band inverts: its black ground becomes white and the strands
   keep their hue, so the whole band reads as light artwork on the page */
html[data-theme="light"] .ideaimg {
  filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(1.02);
}
html[data-theme="light"] .ideaband::after {
  background:
    radial-gradient(620px 230px at 50% 50%,
      rgba(255,255,255,.86), rgba(255,255,255,.45) 60%, rgba(255,255,255,0) 100%),
    linear-gradient(to bottom,
      var(--bg) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 66%, var(--bg) 100%);
}
/* …which means the type over it goes back to page ink */
html[data-theme="light"] .ideaband,
html[data-theme="light"] .ideaband .sec-head h2 { color: var(--ink); }
html[data-theme="light"] .ideaband .sec-head p { color: var(--body-ink); }
html[data-theme="light"] .ideaband .sec-head h2,
html[data-theme="light"] .ideaband .sec-head p {
  text-shadow: 0 1px 14px rgba(255,255,255,.95), 0 1px 3px rgba(255,255,255,.9);
}
/* …but the auth pages' art column stays dark: it's a photograph, and the
   copy sitting on it keeps its dark-theme treatment */
html[data-theme="light"] .panel .pill {
  color: #fff; border-color: rgba(255,255,255,.30);
  background: rgba(255,255,255,.14);
}
html[data-theme="light"] .panel h2,
html[data-theme="light"] .panel .blurb,
html[data-theme="light"] .panel .ft { color: #fff; }

/* the auth pages run the same dark photo down one side */
html[data-theme="light"] .pane-art::before,
html[data-theme="light"] .topfade {
  background: linear-gradient(180deg, rgba(91,33,182,.55), rgba(91,33,182,0));
}