/* RoleQuestOS — UI styles.
   Career-domain neutral. Sticky sidebar, compact cards, clear hierarchy. */

:root {
  --bg: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f2f4f9;
  --border: #e3e6ef;
  --text: #1c2233;
  --text-2: #5a6478;
  --muted: #8a93a8;
  --accent: #4f46e5;
  --accent-soft: #eef0ff;
  --accent-ink: #3730a3;
  --green: #0f9d58;
  --green-soft: #e6f6ee;
  --amber: #b7791f;
  --amber-soft: #fbf3e3;
  --red: #d64550;
  --red-soft: #fbeaec;
  --blue: #2563eb;
  --blue-soft: #e8f0fe;
  --shadow: 0 1px 2px rgba(20, 25, 45, .05), 0 4px 16px rgba(20, 25, 45, .05);
  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
/* The HTML `hidden` attribute must always win. Author `display` rules (e.g.
   .layout{display:grid}, .gate{display:grid}) would otherwise override the
   UA `[hidden]{display:none}`, leaving hidden elements visible. This one rule
   makes toggling `.hidden` in JS actually hide/show #app, #gate, badges, etc. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.01em; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); }

/* ---------- Dev banner ---------- */
.dev-banner {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #1f2430; color: #e7ebf5;
  padding: 8px 16px; font-size: 12.5px;
  border-bottom: 2px solid #ffb020;
}
.dev-badge {
  background: #ffb020; color: #2a1c00; font-weight: 700;
  padding: 2px 8px; border-radius: 6px; letter-spacing: .03em;
}
.dev-text { color: #b9c1d6; }
.dev-switch {
  background: #333b4d; color: #eef1f8; border: 1px solid #49536b;
  padding: 4px 10px; border-radius: 6px; font-size: 12.5px;
}
.dev-switch:hover { background: #3d475d; }
.dev-current { margin-left: auto; color: #9fb0d0; font-weight: 600; }

/* ---------- Layout ---------- */
.layout { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; align-self: start; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 18px 14px;
}
.brand { display: flex; gap: 10px; align-items: flex-start; padding: 4px 6px 18px; }
.brand-mark {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: var(--accent); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 18px;
}
.brand-mark.large { width: 52px; height: 52px; font-size: 26px; margin: 0 auto 6px; }
.brand-name { font-weight: 700; font-size: 26.73px; line-height: 1.12; }
.brand-tag { color: var(--muted); font-size: 11.5px; margin-top: 3px; }

.nav { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: none; text-align: left;
  color: var(--text-2); font-size: 13.5px; font-weight: 550;
  padding: 9px 12px; border-radius: var(--radius-sm); width: 100%;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 650; }
.nav-ico { width: 18px; text-align: center; opacity: .8; font-size: 13px; }
.nav-item { position: relative; }
.nav-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--red); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; font-variant-numeric: tabular-nums;
}
.nav-admin { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 12px; }

/* No `margin-top: auto` here: `.nav-utility` above owns the free space and this
   sits directly under it. Two auto margins would share the gap and split the
   utility group away from the footer it belongs to. */
.sidebar-foot { padding-top: 14px; border-top: 1px solid var(--border); }
.identity-chip { font-size: 12.5px; color: var(--text-2); margin-bottom: 6px; }
.identity-chip strong { color: var(--text); }
.identity-role {
  display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 6px; border-radius: 5px; margin-left: 6px; vertical-align: middle;
}
.role-admin { background: var(--accent-soft); color: var(--accent-ink); }
.role-candidate { background: var(--blue-soft); color: var(--blue); }
.linkbtn { background: none; border: none; color: var(--accent); font-size: 12.5px; padding: 0; }

/* Bold, obvious Sign out button (not a faint text link). */
.signout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  margin-top: 10px; padding: 9px 12px; cursor: pointer;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: var(--text); background: var(--surface-2);
  border: 1.5px solid var(--border); border-radius: 9px;
  transition: background .15s, border-color .15s, color .15s, box-shadow .2s;
}
.signout-btn:hover {
  color: #ff6b6b; border-color: #ff6b6b; background: rgba(255, 107, 107, .10);
  box-shadow: 0 0 12px rgba(255, 107, 107, .22);
}
.signout-ico { font-size: 14px; line-height: 1; }

/* ---------- Main ---------- */
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 14px; gap: 16px;
}
.topbar h1 { font-size: 20px; }
.topbar-right { color: var(--muted); font-size: 12.5px; }
.views { padding: 4px 28px 48px; }

/* ---------- Toast ---------- */
.toast {
  margin: 0 28px 10px; padding: 10px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 550;
}
.toast.ok { background: var(--green-soft); color: var(--green); border: 1px solid #bfe6cf; }
.toast.err { background: var(--red-soft); color: var(--red); border: 1px solid #f3c9ce; }

/* ---------- Cards / grid ---------- */
.grid { display: grid; gap: 16px; }
.grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
}
.card h3 { font-size: 14px; margin-bottom: 8px; }
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 22px 0 10px; font-weight: 700; }

/* Stat tile */
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat .num { font-size: 30px; font-weight: 750; letter-spacing: -.02em; }
.stat .lbl { color: var(--text-2); font-size: 12.5px; }
.stat .sub { color: var(--muted); font-size: 11.5px; }
.stat.hot .num { color: var(--red); }
.stat.warn .num { color: var(--amber); }
.stat.good .num { color: var(--green); }

/* ---------- Opportunity cards ---------- */
.opp-grid { grid-template-columns: repeat(2, 1fr); }
.opp {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
}
.opp-head { display: flex; justify-content: space-between; gap: 12px; }
.opp-title { font-size: 15px; font-weight: 650; }
.opp-co { color: var(--text-2); font-size: 13px; margin-top: 1px; }
.opp-meta { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12.5px; color: var(--text-2); }
.opp-meta b { color: var(--text); font-weight: 600; }
.fit {
  display: inline-grid; place-items: center; min-width: 46px; height: 46px;
  border-radius: 10px; font-weight: 750; font-size: 15px;
  background: var(--accent-soft); color: var(--accent-ink);
}
.fit.high { background: var(--green-soft); color: var(--green); }
.fit.mid { background: var(--amber-soft); color: var(--amber); }
.fit.low { background: var(--surface-2); color: var(--muted); }
.notes { font-size: 12.5px; color: var(--text-2); }
.notes .gap { color: var(--amber); }
.opp-link { font-size: 14.5px; font-weight: 700; color: var(--accent); text-decoration: none; }
.opp-link:hover { text-decoration: underline; }
.opp-actions { display: flex; gap: 8px; margin-top: 2px; }
/* A role whose outcome is settled externally — closed, won, not applying —
   carries a sentence here instead of buttons. It keeps the row's height so
   cards do not jump about, and reads as a note rather than a dead control. */
.opp-actions.locked { align-items: center; min-height: 30px; font-size: 13.5px; font-style: italic; }

/* A section whose data could not be read. Amber, never grey: grey reads as
   "nothing here", which is the exact misreading this state exists to prevent. */
.card.unavailable { border-color: var(--amber); background: var(--amber-soft); }

.pill {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  padding: 2px 8px; border-radius: 999px;
}
.pill.review { background: var(--blue-soft); color: var(--blue); }
.pill.apply { background: var(--green-soft); color: var(--green); }
.pill.hold { background: var(--amber-soft); color: var(--amber); }
.pill.pass { background: var(--surface-2); color: var(--muted); }
.pill.applied { background: var(--accent-soft); color: var(--accent-ink); }
.pill.high { background: var(--red-soft); color: var(--red); }
.pill.medium { background: var(--amber-soft); color: var(--amber); }
.pill.low { background: var(--surface-2); color: var(--muted); }

/* Buttons */
.btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 7px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: #4338ca; }
.btn.good { background: var(--green); border-color: var(--green); color: #fff; }
.btn.good:hover { filter: brightness(.95); }
.btn.warn { color: var(--amber); border-color: #ecd7ad; }
.btn.danger { color: var(--red); border-color: #f0c2c7; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.sm { padding: 5px 10px; font-size: 12px; }

/* ---------- Kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; }
.kcol { background: var(--surface-2); border-radius: var(--radius); padding: 10px; min-width: 180px; }
.kcol h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); display: flex; justify-content: space-between; margin-bottom: 8px; }
.kcol .count { color: var(--muted); }
.kcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; box-shadow: var(--shadow); }
.kcard .t { font-weight: 650; font-size: 13px; }
.kcard .c { color: var(--text-2); font-size: 12px; }
.kcard .m { color: var(--muted); font-size: 11.5px; margin-top: 6px; }
/* Follow-up flags. A left edge rather than a whole-card wash: the card still
   has to be readable, and the point is to be findable while scanning a column. */
.kcard.flagged { border-left-width: 3px; }
.kcard.flagged.due { border-left-color: var(--amber); }
.kcard.flagged.overdue { border-left-color: var(--red); }
.pipe-bar { align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pipe-bar .chip .count { opacity: .7; margin-left: 2px; }
.pipe-bar .chip.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.pipe-tz { margin-left: auto; }

/* ---------- Email center ---------- */
.email-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: start; }
.email-list { display: flex; flex-direction: column; gap: 8px; }
.email-item {
  text-align: left; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px; width: 100%;
}
.email-item:hover { border-color: #cdd3e6; }
.email-item.active { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.email-item.unread { border-left: 3px solid var(--red); }
.email-item.unread .subj { font-weight: 750; }
.email-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tag-new {
  display: inline-block; background: var(--red); color: #fff; font-size: 10px; font-weight: 800;
  letter-spacing: .04em; padding: 1px 6px; border-radius: 5px; flex: 0 0 auto;
}
.new-summary { font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.new-summary b { color: var(--red); }
.email-item .subj { font-weight: 650; font-size: 13px; }
.email-item .frm { color: var(--text-2); font-size: 12px; }
.email-item .when { color: var(--muted); font-size: 11px; margin-top: 3px; }
/* What actually happened to this message, taken from its own stored state.
   Sits directly under the header so it is read before the reply below it. */
.email-state {
  margin: 10px 0 2px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.5; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text-2);
}
.email-state b { color: var(--text); margin-right: 4px; }
.email-state.is-sent { background: var(--green-soft); border-color: #bfe6cf; }
.email-state.is-sent b { color: var(--green); }
.email-state.is-draft { background: var(--accent-soft); border-color: #d9dcff; }
.email-state.is-warn { background: var(--amber-soft); border-color: #eddcbb; }
.email-state.is-warn b { color: var(--amber); }
.msg-label { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; margin: 14px 0 5px; }
.msg-label.in { color: var(--text-2); }
.msg-label.out { color: var(--accent-ink); }
.msg-block {
  white-space: pre-wrap; border-radius: var(--radius-sm); padding: 13px 14px;
  font-size: 13px; color: var(--text); line-height: 1.6;
}
.msg-block.incoming { background: var(--surface-2); border: 1px solid var(--border); }
.msg-block.draft { background: var(--accent-soft); border: 1px solid #d9dcff; }
.email-detail .draft {
  white-space: pre-wrap; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 14px; font-size: 13px; color: var(--text);
  margin: 10px 0; line-height: 1.6;
}
.email-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.checkbox { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }

/* ---------- Forms / settings ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.field input[type="text"], .field input[type="number"], .field select, .field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text);
}
.field .row { display: flex; gap: 8px; }
.field .hint { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.readonly-val { background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 13px; color: var(--text-2); }
.toggle { display: inline-flex; align-items: center; gap: 8px; }
.masked-row { display: flex; gap: 8px; align-items: center; }
.masked-row input { flex: 1; }
.note-box { background: var(--accent-soft); border: 1px solid #d9dcff; color: var(--accent-ink); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 12.5px; margin-bottom: 16px; }

/* ---------- Tables ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.table th { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.table tr:last-child td { border-bottom: none; }
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot-ok { background: var(--green); }
.dot-warn { background: var(--amber); }
.dot-bad { background: var(--red); }

.muted { color: var(--muted); }
.empty { color: var(--muted); font-size: 13px; padding: 24px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
.stack { display: flex; flex-direction: column; gap: 8px; }
.rowline { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.rowline:last-child { border-bottom: none; }

/* ---------- Gate ---------- */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.gate-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow); padding: 32px; max-width: 420px; text-align: center; }
.gate-card h2 { margin-bottom: 4px; }
.gate-card .muted { margin-bottom: 20px; }
.gate-actions { display: flex; flex-direction: column; gap: 10px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid.cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
  .grid.cols-5 { grid-template-columns: repeat(2, 1fr); }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .opp-grid { grid-template-columns: 1fr; }
  .email-layout { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: column; }
  .grid.cols-5, .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   FUTURISTIC "MISSION CONTROL" THEME
   Dark neon-glass reskin layered over the base styles above.
   ============================================================ */
:root {
  --bg: #060912;
  --surface: rgba(18, 26, 48, 0.55);
  --surface-2: rgba(140, 170, 255, 0.06);
  --border: rgba(120, 165, 255, 0.16);
  --text: #e9eeff;
  --text-2: #a6b6e0;
  --muted: #6f7ea8;
  --accent: #22d3ee;
  --accent-soft: rgba(34, 211, 238, 0.14);
  --accent-ink: #8bf3ff;
  --green: #34e5b0; --green-soft: rgba(52, 229, 176, 0.14);
  --amber: #ffc861; --amber-soft: rgba(255, 200, 97, 0.14);
  --red: #ff5d7e; --red-soft: rgba(255, 93, 126, 0.16);
  --blue: #6aa8ff; --blue-soft: rgba(106, 168, 255, 0.14);
  --violet: #a274ff;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

html, body { min-height: 100%; }
body {
  background:
    radial-gradient(1100px 620px at 10% -10%, rgba(34, 211, 238, .14), transparent 60%),
    radial-gradient(1000px 720px at 110% 115%, rgba(162, 116, 255, .14), transparent 55%),
    #05070f;
  color: var(--text);
}
/* faint HUD grid + animated particle canvas sit behind the content */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 165, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 165, 255, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 38%, transparent 88%);
  mask-image: radial-gradient(circle at 50% 22%, #000 38%, transparent 88%);
}
#bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.layout, .gate { position: relative; z-index: 1; }
a { color: var(--accent-ink); }

/* James reported the thumb was too small to see or grab, and he was right about
   the cause as well as the symptom: the track was 11px but a 3px transparent
   border on each side left roughly 5px of actual thumb, at .22 opacity. Widened
   to 14px with a 2px inset, so the visible core goes ~5px -> 10px, and the fill
   is opaque enough to find without becoming a stripe down the page. The track
   gets a faint tint so the thumb has something to sit against instead of
   floating on the background.

   Firefox has no ::-webkit- support and gets `scrollbar-color`/`scrollbar-width`
   instead — it was previously left with the browser default, which did not match
   anything else here. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: rgba(120, 165, 255, .05); }
::-webkit-scrollbar-thumb {
  background: rgba(140, 180, 255, .42); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: rgba(34, 211, 238, .72); background-clip: content-box; }
::-webkit-scrollbar-thumb:active { background: rgba(34, 211, 238, .9); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
html { scrollbar-color: rgba(140, 180, 255, .5) rgba(120, 165, 255, .05); scrollbar-width: auto; }

/* Glass panels */
.card, .opp, .kcard, .stat, .email-item, .email-detail, .gate-card,
.readonly-val, .msg-block, .note-box {
  background: var(--surface);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid var(--border);
}
.card, .opp, .gate-card, .stat { box-shadow: var(--shadow); }
.opp, .card, .stat { transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease; }
.opp:hover, .card:hover, .stat:hover {
  border-color: rgba(34, 211, 238, .42);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 0 0 1px rgba(34, 211, 238, .12), 0 0 30px rgba(34, 211, 238, .12);
}
.opp:hover, .stat:hover { transform: translateY(-2px); }

/* Sidebar glass + edge glow */
.sidebar {
  background: linear-gradient(180deg, rgba(12, 18, 38, .72), rgba(8, 12, 26, .72));
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-right: 1px solid var(--border);
  box-shadow: 1px 0 30px rgba(0, 0, 0, .35);
}
.topbar h1 { text-shadow: 0 0 26px rgba(34, 211, 238, .25); }

/* Brand mark — neon gradient */
.brand-mark {
  background: linear-gradient(135deg, var(--accent), var(--violet));
  color: #051018;
  box-shadow: 0 0 18px rgba(34, 211, 238, .5), inset 0 0 12px rgba(255, 255, 255, .25);
}
.brand-name {
  background: linear-gradient(90deg, #e9eeff, #8bf3ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Nav — glowing active state */
.nav-item { transition: background .15s, color .15s, box-shadow .2s; }
.nav-item:hover { color: var(--text); background: rgba(140, 170, 255, .07); }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent-ink);
  box-shadow: inset 2px 0 0 var(--accent), 0 0 18px rgba(34, 211, 238, .12);
}
.role-admin { box-shadow: 0 0 12px rgba(34, 211, 238, .25); }

/* Buttons — neon */
.btn { background: rgba(140, 170, 255, .06); border-color: var(--border); color: var(--text); transition: all .15s; }
.btn:hover { background: rgba(140, 170, 255, .12); border-color: rgba(34, 211, 238, .4); box-shadow: 0 0 16px rgba(34, 211, 238, .15); }
.btn.primary { background: linear-gradient(135deg, var(--accent), #12b6d6); border-color: transparent; color: #04121a; font-weight: 700; box-shadow: 0 0 20px rgba(34, 211, 238, .4); }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 0 30px rgba(34, 211, 238, .6); }
.btn.good { background: linear-gradient(135deg, var(--green), #1fc294); border-color: transparent; color: #032018; box-shadow: 0 0 16px rgba(52, 229, 176, .35); }
.btn.good:hover { filter: brightness(1.06); }
.btn.warn { color: var(--amber); border-color: rgba(255, 200, 97, .35); background: rgba(255, 200, 97, .06); }
.btn.danger { color: var(--red); border-color: rgba(255, 93, 126, .35); background: rgba(255, 93, 126, .06); }

/* Fit score — glow */
.fit { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .3), 0 0 16px rgba(34, 211, 238, .15); font-variant-numeric: tabular-nums; }
.fit.high { background: var(--green-soft); color: #7dffcf; box-shadow: inset 0 0 0 1px rgba(52, 229, 176, .4), 0 0 18px rgba(52, 229, 176, .25); }
.fit.mid { background: var(--amber-soft); color: #ffdf9e; box-shadow: inset 0 0 0 1px rgba(255, 200, 97, .35); }
.fit.low { background: var(--surface-2); color: var(--muted); box-shadow: none; }

/* Stat numbers glow */
.stat .num { text-shadow: 0 0 22px rgba(34, 211, 238, .3); font-variant-numeric: tabular-nums; }
.stat.hot .num { color: var(--red); text-shadow: 0 0 22px rgba(255, 93, 126, .45); }
.stat.good .num { color: var(--green); text-shadow: 0 0 22px rgba(52, 229, 176, .45); }
.stat.warn .num { color: var(--amber); text-shadow: 0 0 22px rgba(255, 200, 97, .45); }

/* Inputs / focus */
.field input[type="text"], .field input[type="number"], .field input[type="password"], .field select, .field textarea {
  background: rgba(8, 13, 28, .6); color: var(--text); border-color: var(--border);
}
.field input::placeholder { color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus,
.btn:focus-visible, .nav-item:focus-visible, .opp-link:focus-visible, .email-item:focus-visible {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .2), 0 0 18px rgba(34, 211, 238, .25);
}
.msg-block.draft { border-color: rgba(34, 211, 238, .3); }
.note-box { border-color: rgba(34, 211, 238, .3); }
/* Stored-state banner: the base rules above carry light-theme hairlines. */
.email-state.is-sent { border-color: rgba(52, 229, 176, .35); }
.email-state.is-sent b { color: #7dffcf; }
.email-state.is-draft { border-color: rgba(34, 211, 238, .3); }
.email-state.is-warn { border-color: rgba(255, 200, 97, .35); }
.email-state.is-warn b { color: #ffdf9e; }

/* Kanban glass */
.kcol { background: rgba(140, 170, 255, .05); border: 1px solid var(--border); }
.kcard { background: var(--surface); border: 1px solid var(--border); }

/* Email neon states */
.email-item:hover { border-color: rgba(34, 211, 238, .4); }
.email-item.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 20px rgba(34, 211, 238, .2); }
.email-item.unread { border-left: 3px solid var(--red); box-shadow: 0 0 18px rgba(255, 93, 126, .1); }
.tag-new, .nav-badge { box-shadow: 0 0 12px rgba(255, 93, 126, .6); animation: pulseNeon 2.2s ease-in-out infinite; }
@keyframes pulseNeon { 0%, 100% { box-shadow: 0 0 8px rgba(255, 93, 126, .45); } 50% { box-shadow: 0 0 17px rgba(255, 93, 126, .85); } }

/* Toast */
.toast.ok { background: rgba(52, 229, 176, .12); border: 1px solid rgba(52, 229, 176, .4); color: #7dffcf; }
.toast.err { background: rgba(255, 93, 126, .12); border: 1px solid rgba(255, 93, 126, .4); color: #ff9bb2; }

/* Tables */
.table th, .table td { border-color: var(--border); }
.empty { border-color: var(--border); }

/* Gate — futuristic sign-in centerpiece */
.gate-card {
  position: relative; overflow: hidden; padding: 42px 34px;
  border: 1px solid rgba(34, 211, 238, .28);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 60px rgba(34, 211, 238, .14);
}
.gate-card .brand-mark.large {
  position: relative; z-index: 1;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 0 34px rgba(34, 211, 238, .6);
}
.gate-card .brand-mark.large::before {
  content: ""; position: absolute; inset: -16px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--accent), var(--violet), var(--accent));
  filter: blur(7px); opacity: .55; z-index: -1;
  animation: spinRing 6s linear infinite;
}
.gate-card h2 {
  position: relative; z-index: 1; font-size: 26px;
  background: linear-gradient(90deg, #e9eeff, #8bf3ff);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
@keyframes spinRing { to { transform: rotate(360deg); } }

/* Animated aurora glow behind the sign-in card */
.gate { position: relative; overflow: hidden; }
.gate::before {
  content: ""; position: absolute; z-index: 0; width: 120vmax; height: 120vmax;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background:
    radial-gradient(closest-side, rgba(34, 211, 238, .16), transparent 70%) 30% 35% / 55% 55% no-repeat,
    radial-gradient(closest-side, rgba(162, 116, 255, .16), transparent 70%) 70% 60% / 60% 60% no-repeat,
    radial-gradient(closest-side, rgba(255, 93, 126, .12), transparent 70%) 50% 80% / 50% 50% no-repeat;
  filter: blur(24px); animation: auroraDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
.gate-card, .gate-card * { position: relative; z-index: 1; }
@keyframes auroraDrift {
  0%   { transform: translate(-52%, -50%) rotate(0deg) scale(1); }
  50%  { transform: translate(-48%, -52%) rotate(8deg) scale(1.08); }
  100% { transform: translate(-50%, -47%) rotate(-6deg) scale(1.04); }
}

/* Welcome + copy */
.gate-welcome {
  position: relative; z-index: 1; margin-top: 16px;
  font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  background: linear-gradient(90deg, #8bf3ff, #a274ff 55%, #ff8fb0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 0 32px rgba(130, 200, 255, .25);
}
.gate-sub {
  position: relative; z-index: 1; color: var(--text-2);
  font-size: 13.5px; line-height: 1.55; margin: 10px auto 22px; max-width: 340px;
}

/* Sign in with Google — Google's dark button treatment, which is the one that
   belongs on this gate. The values are theirs, not ours: #131314 container,
   #8E918F stroke, #E3E3E3 text, Roboto Medium 14px, 40px tall, 18px logo.
   Roboto is named but never fetched — CSP allows no external font, so this
   falls through to the system UI face rather than loading anything.

   Deliberately NOT dressed in the RoleQuestOS gradient and pulse the old
   homemade button wore. Restyling this control is exactly what the guidance
   prohibits, and it is the one place on the site where our visual language
   does not get the last word. */
.gsi-button {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 40px; min-width: 200px; padding: 0 14px;
  background: #131314; color: #E3E3E3;
  border: 1px solid #8E918F; border-radius: 20px;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px; font-weight: 500; letter-spacing: .25px; line-height: 20px;
  text-decoration: none; cursor: pointer;
}
.gsi-button:hover { background: #1c1c1d; box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px 1px rgba(0, 0, 0, .15); }
.gsi-button:active { background: #232324; }
.gsi-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The mark is never recoloured, resized off-ratio, or given a background. */
.gsi-mark { flex: none; width: 18px; height: 18px; }
.gsi-text { white-space: nowrap; }

/* Feature chips */
.gate-features {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 20px;
}
.gate-feat {
  font-size: 11.5px; font-weight: 600; color: var(--accent-ink);
  padding: 5px 11px; border-radius: 999px;
  background: rgba(34, 211, 238, .1); border: 1px solid rgba(34, 211, 238, .28);
}

@media (prefers-reduced-motion: reduce) {
  .tag-new, .nav-badge, .gate-card .brand-mark.large::before,
  .gate::before, .gate-signin { animation: none; }
  .opp, .card, .stat { transition: none; }
}

/* ---------- Job "heat" — thermal neon by hit strength ---------- */
.opp { position: relative; }
/* Glow intensity + thermal color come from inline CSS vars set per card. */
.opp.heat {
  border-color: rgba(var(--heat-rgb), .6);
  box-shadow: 0 0 var(--heat-blur) rgba(var(--heat-rgb), var(--heat-a)),
              inset 0 0 0 1px rgba(var(--heat-rgb), .28);
}
.opp.heat:hover {
  box-shadow: 0 0 calc(var(--heat-blur) * 1.25) rgba(var(--heat-rgb), var(--heat-a)),
              inset 0 0 0 1px rgba(var(--heat-rgb), .4);
}
.opp.blazing { animation: heatPulse 1.9s ease-in-out infinite; }
@keyframes heatPulse {
  0%, 100% { box-shadow: 0 0 calc(var(--heat-blur) * .72) rgba(var(--heat-rgb), calc(var(--heat-a) * .78)), inset 0 0 0 1px rgba(var(--heat-rgb), .34); }
  50%      { box-shadow: 0 0 calc(var(--heat-blur) * 1.4) rgba(var(--heat-rgb), var(--heat-a)), inset 0 0 0 1px rgba(var(--heat-rgb), .52); }
}
/* Decided (Pass / Applied) jobs sink and dim; brighten on hover for action. */
.opp.dim { opacity: .58; box-shadow: none; }
.opp.dim:hover { opacity: 1; }
/* 🔥 HOT ribbon — floats at the card's top-left corner */
.opp-ribbon {
  position: absolute; top: -9px; left: 14px; z-index: 3;
  font-size: 10px; font-weight: 800; letter-spacing: .06em; color: #1a0410;
  padding: 3px 9px; border-radius: 999px;
  background: linear-gradient(90deg, #ff3a6e, #ff9a3a);
  box-shadow: 0 0 16px rgba(255, 58, 110, .6);
}
/* TOP MATCH is a ranking signal, not the authoritative Hot Role flag, so it is
   deliberately cooler and quieter than the HOT ribbon it used to impersonate. */
.opp-ribbon.top-match {
  color: #041018;
  background: linear-gradient(90deg, #22d3ee, #4a7bff);
  box-shadow: 0 0 14px rgba(74, 123, 255, .5);
}
.opp.blazing .opp-ribbon { animation: pulseNeon 1.6s ease-in-out infinite; }
/* Only the authoritative HOT ribbon pulses; a ranking hint should not. */
.opp.blazing .opp-ribbon.top-match { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .opp.blazing, .opp.blazing .opp-ribbon { animation: none; }
}

/* ===================================================================
   Impersonation, Report-an-issue, and Admin Open Issues
   =================================================================== */

/* --- Impersonation banner (fixed at top while acting as a user) --- */
.impersonate-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  display: flex; align-items: center; gap: 12px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: #1a0410;
  background: linear-gradient(90deg, #ffc861, #ff9a3a);
  box-shadow: 0 4px 22px rgba(255, 154, 58, .45);
}
.impersonate-bar .imp-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #b3220f; box-shadow: 0 0 0 0 rgba(179, 34, 15, .6);
  animation: impPulse 1.6s ease-in-out infinite;
}
@keyframes impPulse {
  0%   { box-shadow: 0 0 0 0 rgba(179, 34, 15, .55); }
  70%  { box-shadow: 0 0 0 8px rgba(179, 34, 15, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 34, 15, 0); }
}
.impersonate-bar .imp-text { letter-spacing: .01em; }
.impersonate-bar .imp-exit {
  margin-left: auto; cursor: pointer;
  border: 1px solid rgba(26, 4, 16, .35); border-radius: 999px;
  background: rgba(26, 4, 16, .12); color: #1a0410;
  font-weight: 700; font-size: 12px; padding: 5px 14px;
}
.impersonate-bar .imp-exit:hover { background: rgba(26, 4, 16, .22); }
/* Push the app down so the fixed bar never covers content. */
body.is-impersonating .layout,
body.is-impersonating .gate { margin-top: 40px; }
@media (prefers-reduced-motion: reduce) {
  .impersonate-bar .imp-dot { animation: none; }
}

/* --- Report-an-issue sidebar link --- */
.report-link { color: var(--amber); text-align: left; }
.report-link:hover { color: var(--accent-ink); }

/* Divider line separating the main nav from the report button (sits right
   after Settings for typical users, since Admin is hidden for them). */
.side-sep { height: 1px; background: var(--border); margin: 12px 0; }

/* The two sidebar utilities. `margin-top: auto` sinks them to just above the
   identity footer, so they read as a footer group rather than as two more
   places to navigate to. `.sidebar-foot` gives up its own auto margin below,
   otherwise the two would split the free space and this group would float in
   the middle of the sidebar. */
.nav-utility { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }
.nav-utility .side-sep { margin: 0 0 6px; }

/* Shared neon shell for both. Luminous edge and a faint text glow rather than a
   filled block — the report button used to be a solid amber gradient, which
   shouted louder than the page it sits beside. Colour is the only difference
   between the two: amber for the one that reports a fault, cyan for the one
   that is just a link. */
.nav-cta, .nav-utility .nav-team {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin: 0; padding: 11px 12px; cursor: pointer; text-align: left;
  border-radius: 10px; border: 1px solid;
  transition: box-shadow .2s, border-color .2s, background .2s, color .2s, transform .1s;
}
.nav-cta {
  background: rgba(245, 176, 66, .07); color: var(--text);
  border-color: rgba(245, 176, 66, .45);
  box-shadow: 0 0 10px rgba(245, 176, 66, .12), inset 0 0 12px rgba(245, 176, 66, .05);
}
.nav-cta:hover {
  background: rgba(245, 176, 66, .14); border-color: var(--amber);
  box-shadow: 0 0 18px rgba(245, 176, 66, .32), inset 0 0 14px rgba(245, 176, 66, .08);
}
.nav-utility .nav-team {
  background: rgba(34, 211, 238, .06); color: var(--text-2);
  border-color: rgba(34, 211, 238, .34);
  box-shadow: 0 0 10px rgba(34, 211, 238, .10), inset 0 0 12px rgba(34, 211, 238, .04);
  font-size: 13.5px; font-weight: 600;
}
.nav-utility .nav-team:hover {
  background: rgba(34, 211, 238, .12); border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 18px rgba(34, 211, 238, .30), inset 0 0 14px rgba(34, 211, 238, .07);
}
.nav-utility .nav-team.active {
  background: rgba(34, 211, 238, .14); border-color: var(--accent); color: var(--accent-ink);
}
/* The glow lives on the icon, not the label — a text-shadow behind body copy
   costs legibility, which is the opposite of what the idle state needs. */
.nav-cta-ico, .nav-utility .nav-team .nav-ico { text-shadow: 0 0 10px currentColor; opacity: 1; }
.nav-utility .nav-team .nav-ico { color: var(--accent); }
.nav-cta:active, .nav-utility .nav-team:active { transform: translateY(1px); }
/* Keyboard users get a ring, not just the hover bloom they cannot trigger. */
.nav-cta:focus-visible, .nav-utility .nav-team:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Motion is a transition, never an animation, so there is nothing pulsing to
   turn off — but honour both the OS setting and the in-app Animations switch. */
@media (prefers-reduced-motion: reduce) {
  .nav-cta, .nav-utility .nav-team { transition: none; }
  .nav-cta:active, .nav-utility .nav-team:active { transform: none; }
}
body.motion-off .nav-cta, body.motion-off .nav-utility .nav-team { transition: none; }

.nav-cta-ico { font-size: 18px; color: var(--amber); line-height: 1; flex: 0 0 auto; }
.nav-cta-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nav-cta-title { font-size: 13.5px; font-weight: 700; color: var(--text); }
.nav-cta-sub { font-size: 11px; color: var(--text-2); }

/* --- Modal --- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(4, 7, 16, .68); backdrop-filter: blur(4px);
}
.modal-card {
  width: 100%; max-width: 480px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 22px; backdrop-filter: blur(18px);
}
.modal-card h3 { margin: 0 0 4px; }
.modal-card .field { margin-top: 12px; }
.modal-card textarea, .modal-card input, .modal-card select {
  width: 100%; box-sizing: border-box;
}
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

/* --- Admin Open Issues section --- */
.issues-card { border: 1px solid var(--border); margin-bottom: 18px; }
.issues-card.pulsing {
  border-color: rgba(255, 93, 126, .55);
  box-shadow: 0 0 0 1px rgba(255, 93, 126, .25), 0 0 28px rgba(255, 93, 126, .22);
  animation: issuesGlow 2.2s ease-in-out infinite;
}
@keyframes issuesGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 93, 126, .22), 0 0 20px rgba(255, 93, 126, .16); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 93, 126, .40), 0 0 34px rgba(255, 93, 126, .30); }
}
.issues-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.issues-title { font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.issues-badge {
  min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #1a0410;
  background: var(--muted);
}
.issues-badge.pulsing {
  background: linear-gradient(90deg, #ff3a6e, #ff9a3a);
  animation: badgePulse 1.5s ease-in-out infinite;
}
@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 58, 110, .5); }
  50%      { box-shadow: 0 0 0 7px rgba(255, 58, 110, 0); }
}
.issues-live { color: var(--red); font-size: 12px; font-weight: 700; }
/* Collapse control. `margin-left: auto` parks it at the far right of the header
   without a spacer element, so the header still wraps cleanly on a narrow
   screen. The card keeps pulsing while collapsed — hiding the list is a layout
   choice, not a way to stop the panel asking for attention. */
.issues-toggle {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 6px 12px; cursor: pointer;
  min-height: 32px;  /* comfortable to tap, not just to click */
}
.issues-toggle:hover { color: var(--accent-ink); border-color: var(--accent); }
.issues-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.issues-summary { font-size: 13px; color: var(--text-2); padding: 2px 2px 4px; }
.issue-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--border);
}
.issue-main { flex: 1; min-width: 0; }
.issue-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.issue-title { font-weight: 600; }
.issue-area {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-2);
}
.issue-desc { margin-top: 5px; font-size: 13px; color: var(--text-2); white-space: pre-wrap; }
.issue-meta { margin-top: 5px; font-size: 12px; }
.issue-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.issues-resolved { margin-top: 12px; }
.issues-resolved summary { cursor: pointer; color: var(--muted); font-size: 12.5px; }
@media (prefers-reduced-motion: reduce) {
  .issues-card.pulsing, .issues-badge.pulsing { animation: none; }
}

/* ===================================================================
   Job Review — sort toolbar + signal breakdown
   =================================================================== */
.job-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.job-sort { display: flex; align-items: center; gap: 8px; }
.job-sort label {
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-ink);
  text-shadow: 0 0 6px rgba(34, 211, 238, .75), 0 0 14px rgba(34, 211, 238, .45);
}
.job-sort select {
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.job-hint { font-size: 12px; }
.job-search { display: flex; align-items: center; gap: 10px; flex: 1 1 260px; min-width: 220px; }
.job-search input {
  flex: 1 1 auto; min-width: 0;
  padding: 8px 12px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 13.5px;
}
.job-search input::placeholder { color: var(--muted); }
.job-search input:focus {
  outline: none; border-color: var(--accent-ink);
  box-shadow: 0 0 0 1px var(--accent-ink), 0 0 10px rgba(34, 211, 238, .35);
}
.job-count { font-size: 12px; white-space: nowrap; }

/* Signal breakdown strip on each opportunity card */
.opp-signals {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 10px 0 2px;
}
.opp-signals .sig {
  display: inline-flex; flex-direction: column; gap: 1px;
  padding: 4px 9px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid transparent;
  min-width: 52px;
}
.opp-signals .sig-k { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.opp-signals .sig-v { font-size: 13px; font-weight: 700; color: var(--text); }
.opp-signals .sig-v.high { color: var(--green); }
.opp-signals .sig-v.mid  { color: var(--amber); }
.opp-signals .sig-v.low  { color: var(--muted); }
/* Highlight the signal currently driving the sort */
.opp-signals .sig.sig-on {
  border-color: rgba(34, 211, 238, .55);
  box-shadow: 0 0 12px rgba(34, 211, 238, .18);
}
.opp-signals .sig.sig-on .sig-k { color: var(--accent-ink); }

/* ===================================================================
   "Your submitted issues" list (inside the report-issue modal)
   =================================================================== */
.my-issues { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 14px; }
.my-issues-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.my-issues-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.mi-row { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
.mi-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mi-title { font-weight: 600; font-size: 13px; }
.mi-when { font-size: 11.5px; margin-left: auto; }
.mi-reason { margin-top: 5px; font-size: 12px; color: var(--text-2); }
.mi-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.mi-badge.good   { background: var(--green-soft); color: var(--green); }
.mi-badge.danger { background: var(--red-soft); color: var(--red); }
.mi-badge.review { background: var(--blue-soft); color: var(--blue); }
.mi-badge.high   { background: var(--amber-soft); color: var(--amber); }

/* ===================================================================
   Admin Discovery Control
   =================================================================== */
.disc-row {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; border-top: 1px solid var(--border);
}
.disc-who { flex: 1; min-width: 180px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.disc-legacy { font-size: 11.5px; width: 100%; padding-left: 16px; }
.disc-freq {
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  min-width: 200px;
}

/* ===================================================================
   First-login onboarding wizard
   =================================================================== */
.onboard {
  position: fixed; inset: 0; z-index: 1400;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  overflow-y: auto;
}
.onboard::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120vmax 120vmax at 50% 40%, rgba(6, 9, 18, .55), rgba(6, 9, 18, .82));
  backdrop-filter: blur(6px);
}
.onb-card {
  position: relative; z-index: 1; width: 100%; max-width: 460px;
  background: var(--surface); border: 1px solid rgba(34, 211, 238, .28);
  border-radius: 20px; padding: 34px 30px 26px; text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 70px rgba(34, 211, 238, .14);
  backdrop-filter: blur(20px);
  animation: onbIn .45s cubic-bezier(.2, .8, .2, 1);
}
@keyframes onbIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.onb-loading { color: var(--text-2); padding: 40px 0; }

.onb-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: 18px; }
.onb-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: all .25s; }
.onb-dot.on { background: var(--accent); box-shadow: 0 0 12px rgba(34, 211, 238, .8); transform: scale(1.25); }
.onb-dot.done { background: var(--accent-ink); }

.onb-mark {
  width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px;
  display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #06121f;
  background: linear-gradient(135deg, var(--accent), var(--violet));
  box-shadow: 0 0 34px rgba(34, 211, 238, .55);
}
.onb-title {
  font-size: 25px; line-height: 1.15; margin-bottom: 8px;
  background: linear-gradient(90deg, #8bf3ff, #a274ff 55%, #ff8fb0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.onb-sub { color: var(--text-2); font-size: 13.5px; line-height: 1.55; margin: 0 auto 20px; max-width: 360px; }

.onb-body { text-align: left; display: flex; flex-direction: column; gap: 14px; }
.onb-features { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 4px; }
.onb-field { display: flex; flex-direction: column; gap: 5px; }
.onb-field label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.onb-field input, .onb-field select {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.onb-field input:focus, .onb-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.onb-area {
  width: 100%; box-sizing: border-box; padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text);
}
.onb-area:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
/* Settings: search-criteria textareas fill their row next to the Save button. */
.field .row textarea { flex: 1 1 auto; min-width: 0; box-sizing: border-box; padding: 9px 11px; font: inherit; font-size: 13.5px; resize: vertical; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.field .row textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.onb-hint { font-size: 11.5px; color: var(--muted); line-height: 1.45; }

/* Money input: $ prefix + "USD / year" suffix framing a clean numeric field. */
.onb-money { display: flex; align-items: stretch; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.onb-money:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.onb-money-pre, .onb-money-suf { display: flex; align-items: center; padding: 0 12px; font-size: 13px; color: var(--muted); background: rgba(255, 255, 255, .03); white-space: nowrap; }
.onb-money-pre { font-weight: 700; color: var(--accent); border-right: 1px solid var(--border); }
.onb-money-suf { border-left: 1px solid var(--border); }
.onb-money input { flex: 1 1 auto; width: 100%; box-sizing: border-box; padding: 10px 12px; font-size: 14px; background: transparent; border: 0; color: var(--text); }
.onb-money input:focus { outline: none; box-shadow: none; }

.onb-toggle-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.onb-toggle-label { font-size: 14px; font-weight: 600; color: var(--text); }
.onb-switch { position: relative; flex: 0 0 auto; width: 44px; height: 26px; }
.onb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.onb-switch span { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); transition: .2s; }
.onb-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: .2s; }
.onb-switch input:checked + span { background: rgba(34, 211, 238, .22); border-color: var(--accent); }
.onb-switch input:checked + span::after { transform: translateX(18px); background: var(--accent); box-shadow: 0 0 10px rgba(34, 211, 238, .8); }

.onb-speaker {
  margin: 4px auto 0; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(162, 116, 255, .12); border: 1px solid rgba(162, 116, 255, .4);
  color: #c7b0ff; font-weight: 600; font-size: 13px; padding: 9px 16px; border-radius: 999px;
}
.onb-speaker:hover { background: rgba(162, 116, 255, .2); }

.onb-summary { display: flex; flex-direction: column; gap: 2px; }
.onb-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border); }
.onb-sum-k { color: var(--text-2); font-size: 13px; }
.onb-sum-v { font-weight: 600; font-size: 13px; text-align: right; }

.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; }
.onb-foot-right { display: flex; align-items: center; gap: 12px; }
.onb-skip { background: none; border: none; color: var(--muted); font-size: 12.5px; }
.onb-skip:hover { color: var(--text-2); }
.onb-next { font-weight: 700; }
.onb-back { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) { .onb-card { animation: none; } }

/* ===================================================================
   RoleQuestOS brand — italic byline + two-part brand marks
   =================================================================== */
.brand-tag em, .gate-card .muted em { font-style: italic; }
.brand-mark { letter-spacing: -1px; }
.brand-mark { font-size: 15px; }
.brand-mark.large { font-size: 21px; letter-spacing: -1.5px; }
.onb-mark { font-size: 21px; letter-spacing: -1.5px; }

/* ===================================================================
   RoleQuestOS logomark — consistent animated brand across every surface
   =================================================================== */
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.logomark { position: relative; display: inline-block; width: 42px; height: 42px; flex: 0 0 auto; }
.logomark svg, .logomark img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 0 9px rgba(74, 123, 255, .5)); animation: logoFloat 4.5s ease-in-out infinite; }
@keyframes logoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.logomark.large { width: 88px; height: 88px; display: block; margin: 0 auto 14px; }
.logomark.large svg, .logomark.large img { filter: drop-shadow(0 0 18px rgba(122, 92, 255, .55)); }
/* Soft glow halo behind the large mark (landing + onboarding). */
.logomark.large::before {
  content: ""; position: absolute; inset: 2px; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(90, 120, 255, .35), transparent 72%);
  filter: blur(10px);
}

/* Two-part neon wordmark: "RoleQuest" light, "OS" a blue→purple gradient.
   Explicit -webkit-text-fill-color overrides any gradient clip on the parent. */
.brand-name { letter-spacing: -.01em; }
/* Matches the approved mark: "RoleQuest" light, "OS" a blue→purple gradient. */
.wm-role {
  color: #e7ecff; -webkit-text-fill-color: #e7ecff; background: none;
  font-weight: 800; text-shadow: 0 0 10px rgba(120, 150, 255, .28);
}
.wm-os {
  background: linear-gradient(90deg, #3a86ff, #8a3df0);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.onb-logo { margin-bottom: 16px; }

@media (prefers-reduced-motion: reduce) {
  .logomark svg { animation: none; }
  .logomark.large::before { animation: none; }
}

/* ===================================================================
   RoleQuestOS logo — icon + CSS wordmark lockup (sign-in landing)
   =================================================================== */
.logo-plate {
  position: relative; z-index: 1;
  background: linear-gradient(160deg, rgba(18, 30, 52, .92), rgba(8, 14, 26, .92));
  border-radius: 18px; padding: 22px 26px; margin: 2px auto 22px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35),
              0 0 0 1px rgba(120, 150, 255, .25),
              0 0 42px rgba(90, 120, 255, .28);
}
.gate-lockup { text-align: center; }
.gate-wordmark { font-size: 34px; font-weight: 800; letter-spacing: -1.5px; line-height: 1.1; }
.gate-tagline { margin-top: 8px; font-size: 13px; color: var(--text-2); }
.gate-tagline em { font-style: italic; }

/* The logomark <img> should not inherit any drop-shadow meant for line art */
.logomark img { filter: none; }
.logomark.large img { filter: drop-shadow(0 6px 16px rgba(90, 120, 255, .45)); }

/* ===================================================================
   Admin: guest test access + invite a user
   =================================================================== */
/* One line per guest-access door, so the page can never imply the site is
   closed while a door is open. */
.access-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 8px 0 6px; }
.access-state.off { color: var(--text-2); }
.access-state.on { color: var(--green); }
.access-state.warn { color: var(--amber); }
.access-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.access-dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.access-dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }

.access-link { display: flex; gap: 8px; align-items: center; margin: 6px 0 4px; }
.access-link input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12.5px; }
.invite-ok { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.invite-status { font-size: 12.5px; color: var(--text-2); margin-bottom: 8px; }
.invite-ok textarea { width: 100%; box-sizing: border-box; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; padding: 8px 10px; }
/* Two jobs, one look: the warning before an Admin invite is sent, and the
   notice afterwards when the stored access level is not the one that was asked
   for. Amber rather than red — neither is a failure, both are things the admin
   has to actually read before believing what they think just happened. */
.invite-warn {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12.5px; line-height: 1.5; color: var(--amber);
  background: rgba(255, 200, 97, .07); border: 1px solid rgba(255, 200, 97, .32);
}
.invite-warn p { margin: 0 0 8px; }
.invite-confirm { display: flex; align-items: flex-start; gap: 8px; font-weight: 600; cursor: pointer; }
.invite-confirm input { margin-top: 2px; flex: none; }
.card code { background: var(--surface-2); padding: 1px 5px; border-radius: 5px; font-size: 12px; }

/* ===================================================================
   Guest / demo mode banner
   =================================================================== */
.demo-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1150;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; font-size: 12.5px; font-weight: 600; color: #05121f;
  background: linear-gradient(90deg, #38bdf8, #6b5cff);
  box-shadow: 0 3px 20px rgba(80, 120, 255, .4);
}
.demo-bar .demo-badge {
  background: rgba(5, 18, 31, .18); color: #05121f;
  font-weight: 800; letter-spacing: .08em; font-size: 11px;
  padding: 2px 9px; border-radius: 999px;
}
.demo-bar .demo-text { letter-spacing: .01em; }
/* Push content down so the fixed bar never covers it (matches impersonation). */
body.is-guest .layout,
body.is-guest .gate,
body.is-guest .onboard { margin-top: 38px; }

/* Guest button on the login page (shown when DEMO_PUBLIC=true) */
.gate-guest {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 10px; font-size: 13.5px; font-weight: 600;
  background: var(--surface-2); color: var(--text);
  border: 1px solid rgba(120, 165, 255, .3);
}
.gate-guest:hover { border-color: var(--accent); color: var(--accent-ink); }

/* Invite note on the login page (demo-user invite link) */
.gate-invite-note {
  margin-top: 10px; font-size: 12px; color: var(--accent-ink);
  background: rgba(34, 211, 238, .08); border: 1px solid rgba(34, 211, 238, .22);
  border-radius: var(--radius-sm); padding: 7px 12px;
}

/* Currency parameter fields on Settings ($ prefix + thousands separators) */
.money-row { position: relative; }
.money-prefix {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-2); font-weight: 700; pointer-events: none; font-size: 14px;
}
.money-row input[data-currency] { padding-left: 22px; }
.field .unit { font-weight: 500; font-size: 11px; }

/* Issue vs Enhancement type chips */
.type-chip { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.type-chip.bug { background: rgba(255, 93, 126, .16); color: #ff8fa6; }
.type-chip.enh { background: rgba(106, 168, 255, .16); color: #8fc0ff; }

/* ===================================================================
   "Operating system" vibe — unix status bar, shell prompt, mono labels
   =================================================================== */
:root { --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; }

/* Top system status bar (tmux/wm style) */
/* Scaled about 10% up on James's note — the whole bar, not just the buttons,
   so nothing inside it drifts out of proportion with the rest. `position:
   relative` anchors the shared help strip below the bar. */
.sysbar {
  position: relative;
  display: flex; align-items: center; justify-content: space-between; gap: 13px; flex-wrap: wrap;
  font-family: var(--mono); font-size: 13px; letter-spacing: .02em;
  padding: 7px 28px; border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(34, 211, 238, .07), rgba(162, 116, 255, .05));
  color: var(--text-2);
}
.sysbar-left, .sysbar-right { display: flex; align-items: center; gap: 11px; }
.sysbar-dots { display: inline-flex; gap: 6px; margin-right: 2px; }
.sysbar-dots i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sysbar-dots i:nth-child(1) { background: #ff5f57; }
.sysbar-dots i:nth-child(2) { background: #febc2e; }
.sysbar-dots i:nth-child(3) { background: #28c840; }
.sysbar-badge { color: var(--accent-ink); font-weight: 800; }
.sysbar-sep { color: var(--muted); }
.sysbar-path { color: var(--accent); }
.sysbar-uptime, .sysbar-clock { color: var(--text-2); font-variant-numeric: tabular-nums; }
.sysbar-online { display: inline-flex; align-items: center; gap: 7px; color: var(--green); text-transform: uppercase; font-size: 12px; letter-spacing: .06em; }
.sysbar-led { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: ledPulse 2s ease-in-out infinite; }

/* The one description surface for every control in this bar. Absolutely
   positioned under the bar rather than inline, because a strip that reserved
   inline space would push the clock around and a strip that appeared inline
   would shift the layout on hover. Empty and non-interactive when idle. */
/* The cluster the help strip belongs to. Relative so the strip can align to its
   left edge rather than to a pixel offset that is only correct at one width. */
.sysbar-controls { position: relative; display: inline-flex; align-items: center; gap: 11px; }

/* Starts at the left edge of the controls it describes, per James's request —
   it used to be pinned to the far-right status edge beside the clock, which
   read as belonging to the clock. `right: 0` is set as well as `left: 0` so the
   box can never extend past the controls' own right edge and off the viewport;
   the text wraps instead. */
.sysbar-help {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 4; pointer-events: none;
  font-family: var(--mono); font-size: 12px; line-height: 1.35; letter-spacing: .01em;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-top: 0; border-radius: 0 0 7px 7px;
  padding: 5px 10px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease;
}
.sysbar-help.show { opacity: 1; visibility: visible; transform: translateY(0); }
/* Narrow screens hide the button labels, so the cluster shrinks to four icons
   and a strip locked to its width would wrap into a column. Below that
   breakpoint it keeps its left edge and grows rightward instead, clamped to the
   viewport so it still cannot run off. */
@media (max-width: 720px) {
  .sysbar-help { right: auto; width: max-content; max-width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) { .sysbar-help { transition: none; } }
@keyframes ledPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Identity chip → shell prompt: user@rolequestos:~$ ▊ */
.identity-chip { font-family: var(--mono); font-size: 12px; }
.term-user { color: var(--green); font-weight: 700; }
.term-at, .term-tail { color: var(--muted); }
.term-host { color: var(--accent); }
.term-cursor { color: var(--accent); }
.term-cursor, .sysbar-badge::after { animation: termBlink 1.1s steps(1) infinite; }
@keyframes termBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* Section headings look like code comments */
.section-title { font-family: var(--mono); }
.section-title::before { content: "// "; color: var(--accent); opacity: .85; }

@media (max-width: 640px) { .sysbar-uptime { display: none; } }
@media (prefers-reduced-motion: reduce) { .sysbar-led, .term-cursor { animation: none; } }

/* ===================================================================
   Cinematic boot screen + AI-core robot
   =================================================================== */
.boot {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: radial-gradient(120vmax 120vmax at 50% 38%, #071018, #03060c 75%);
  font-family: var(--mono); animation: bootIn .2s ease;
}
.boot.boot-out { animation: bootOut .42s ease forwards; }
@keyframes bootIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes bootOut { to { opacity: 0; transform: scale(1.03); } }
.boot-log { color: #b9f5e6; font-size: 13.5px; line-height: 1.5; margin: 0; width: min(680px, 88vw); white-space: pre-wrap; text-shadow: 0 0 8px rgba(80, 255, 220, .25); }
.boot-log .ok { color: #34e5b0; text-shadow: 0 0 10px rgba(52, 229, 176, .6); }
.boot-cursor { color: #7dffdf; animation: termBlink 1s steps(1) infinite; }
.boot-hint { color: #4a6a78; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; }

.boot-core { width: 132px; height: 132px; filter: drop-shadow(0 0 22px rgba(34, 211, 238, .55)); }
.boot-core svg { width: 100%; height: 100%; overflow: visible; }
.bc-ring { fill: none; stroke: rgba(34, 211, 238, .55); stroke-width: 1.5; stroke-dasharray: 8 10; transform-origin: 60px 60px; }
.bc-r1 { animation: bcSpin 6s linear infinite; }
.bc-r2 { stroke: rgba(162, 116, 255, .65); animation: bcSpin 4s linear infinite reverse; }
.bc-hex { fill: rgba(34, 211, 238, .06); stroke: rgba(120, 190, 255, .85); stroke-width: 2; transform-origin: 60px 60px; animation: bcPulse 2.4s ease-in-out infinite; }
.bc-eye { fill: #7dffff; transform-origin: 60px 60px; animation: bcEye 1.6s ease-in-out infinite; }
.bc-scan { stroke: rgba(125, 255, 255, .85); stroke-width: 2; transform-origin: 60px 60px; animation: bcScan 2s ease-in-out infinite; }
.bc-orbit { fill: #ff8fb0; transform-origin: 60px 60px; animation: bcSpin 3s linear infinite; }
@keyframes bcSpin { to { transform: rotate(360deg); } }
@keyframes bcPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes bcEye { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.35); opacity: 1; } }
@keyframes bcScan { 0%, 100% { transform: translateY(-26px); } 50% { transform: translateY(26px); } }

/* ===================================================================
   ⌘K command palette
   =================================================================== */
.cmdk {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px;
  background: rgba(4, 8, 16, .6); backdrop-filter: blur(4px);
}
.cmdk-panel {
  width: min(560px, 94vw); font-family: var(--mono);
  background: var(--surface); border: 1px solid rgba(34, 211, 238, .35); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 40px rgba(34, 211, 238, .18);
  overflow: hidden; animation: cmdkIn .16s ease;
}
@keyframes cmdkIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.cmdk-inputrow { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-prompt { color: var(--accent); font-weight: 800; }
.cmdk-inputrow input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--mono); }
.cmdk-list { max-height: 300px; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.cmdk-caret { color: var(--muted); opacity: 0; }
.cmdk-label { flex: 1; font-size: 13.5px; color: var(--text); }
.cmdk-hint { color: var(--muted); font-size: 11.5px; }
.cmdk-item.sel { background: rgba(34, 211, 238, .14); box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .4); }
.cmdk-item.sel .cmdk-caret { opacity: 1; color: var(--accent); }
.cmdk-empty { padding: 16px; color: var(--muted); text-align: center; }
.cmdk-foot { display: flex; gap: 16px; justify-content: center; padding: 8px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; }

/* ===================================================================
   Subtle CRT scanlines + sysbar buttons
   =================================================================== */
.crt {
  position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .35;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(10,20,30,.20) 3px, rgba(0,0,0,0) 4px);
}
/* One rule for every system-bar control. Boot, Animations and Sound are the
   same kind of switch and must look it — Boot used to match no selector here at
   all and rendered as a bare default button next to two styled ones. Keep new
   controls in these lists rather than giving them a private block. */
.sysbar-cmdk, .sysbar-sound, .sysbar-motion, .sysbar-boot {
  /* Sized roughly 10% up from the original 11–12px on James's note: these are
     the controls people reach for most and they were the smallest hit targets
     on the page. The icons inherit this size, the word label follows below. */
  font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; cursor: pointer;
}
.sysbar-cmdk:hover, .sysbar-sound:hover, .sysbar-motion:hover, .sysbar-boot:hover { color: var(--accent-ink); border-color: var(--accent); }
/* Keyboard users get the same affordance the mouse gets. */
.sysbar-cmdk:focus-visible, .sysbar-sound:focus-visible, .sysbar-motion:focus-visible, .sysbar-boot:focus-visible {
  color: var(--accent-ink); border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: 2px;
}

/* Icon + word label so the controls are self-explanatory (not just an emoji). */
.sysbar-motion, .sysbar-sound, .sysbar-cmdk, .sysbar-boot { display: inline-flex; align-items: center; gap: 6px; }
.sysbar-ico { line-height: 1; }
.sysbar-label { font-size: 12px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
/* Dim + strike a toggle when it's OFF so on/off reads at a glance. */
.sysbar-motion.is-off, .sysbar-sound.is-off, .sysbar-boot.is-off { opacity: .55; }
.sysbar-motion.is-off .sysbar-label, .sysbar-sound.is-off .sysbar-label, .sysbar-boot.is-off .sysbar-label { text-decoration: line-through; }
/* On tight widths keep the icons but drop the words so the bar never overflows. */
@media (max-width: 720px) { .sysbar-label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .boot-core *, .cmdk-panel { animation: none !important; }
  .crt { display: none; }
}

/* ===================================================================
   Boot finale (robot power-surge + wordmark) + window-chrome cards
   =================================================================== */
.boot-core { width: 156px; height: 156px; transition: filter .4s ease; }
.boot-core.surge { animation: bcSurge 1s cubic-bezier(.2,.8,.2,1) forwards; filter: drop-shadow(0 0 46px rgba(34, 211, 238, .9)); }
@keyframes bcSurge { 0% { transform: scale(1); } 55% { transform: scale(1.22); } 100% { transform: scale(1.12); } }
.bc-orbit2 { animation-duration: 4.5s !important; animation-direction: reverse; fill: #7dffff; }

.boot-title {
  display: flex; align-items: baseline; gap: 14px; font-weight: 800; font-size: 34px; letter-spacing: -.01em;
  animation: bootTitleIn .55s cubic-bezier(.2,.8,.2,1);
}
.boot-title-sub { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--green); text-shadow: 0 0 10px rgba(52, 229, 176, .6); }
@keyframes bootTitleIn { from { opacity: 0; transform: translateY(10px); letter-spacing: .32em; } to { opacity: 1; transform: none; } }

/* Panels look like little OS windows: a traffic-light title bar */
.card:not(.stat) { position: relative; padding-top: 38px; }
.card:not(.stat)::before {
  content: ""; position: absolute; top: 13px; left: 15px; width: 42px; height: 8px;
  background:
    radial-gradient(circle at 4px 4px, #ff5f57 3.4px, transparent 4px),
    radial-gradient(circle at 20px 4px, #febc2e 3.4px, transparent 4px),
    radial-gradient(circle at 36px 4px, #28c840 3.4px, transparent 4px);
  opacity: .9;
}
.card:not(.stat)::after {
  content: ""; position: absolute; top: 30px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 12%, var(--border) 88%, transparent);
}

@media (prefers-reduced-motion: reduce) { .boot-core.surge, .boot-title { animation: none; } }

/* ===================================================================
   Robot-hand page-peel transition (fires on every view change)
   =================================================================== */
.main { position: relative; }
/* Fixed to the viewport (content column) so the hand is always centered in view
   and behaves identically on every page — including tall ones like Settings. */
.pagefx { position: fixed; top: 0; right: 0; bottom: 0; left: 264px; z-index: 40; pointer-events: none; overflow: hidden; }
@media (max-width: 820px) { .pagefx { left: 0; } }
.pagefx-sheet {
  position: absolute; top: -6%; bottom: -6%; left: 0; width: 66%;
  transform: translateX(-108%) skewX(-6deg);
  background: linear-gradient(95deg,
    rgba(6, 10, 18, 0) 0%,
    rgba(8, 14, 26, .82) 24%,
    rgba(16, 24, 46, .96) 68%,
    rgba(34, 211, 238, .38) 90%,
    rgba(196, 246, 255, .92) 97%,
    rgba(255, 255, 255, 0) 100%);
  filter: drop-shadow(8px 0 30px rgba(0, 0, 0, .5));
}
.pagefx-hand {
  position: absolute; top: 50%; right: -46px; width: 380px; max-width: 62vw; height: auto;
  transform: translateY(-50%) skewX(6deg);
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 26px rgba(255, 150, 40, .28));
}
.pagefx-hand img { width: 100%; height: auto; display: block; }
.pagefx.run .pagefx-sheet { animation: peelSweep 2s cubic-bezier(.42, 0, .3, 1) forwards; }
@keyframes peelSweep {
  0%   { transform: translateX(-112%) skewX(-6deg); }
  12%  { transform: translateX(-84%)  skewX(-6deg); }
  100% { transform: translateX(172%)  skewX(-6deg); }
}
@media (prefers-reduced-motion: reduce) { .pagefx { display: none !important; } }

/* ===================================================================
   User "animations off" toggle (top bar, next to sound)
   The button's own look lives with the other system-bar controls above, so all
   three switches can never drift apart again. Only its effect is defined here.
   =================================================================== */

/* When the user turns animations off: stop all CSS motion, hide the CRT and the
   robot-hand page-peel. (The background canvas freezes via JS.) */
body.motion-off *, body.motion-off *::before, body.motion-off *::after { animation: none !important; }
body.motion-off .crt { display: none !important; }
body.motion-off #pageFx { display: none !important; }

/* Always-visible "signed in as" indicator (top bar) — makes wrong-account /
   shared-device situations obvious, with one-click sign out to switch. */
.whoami { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.whoami b { color: var(--text); }
.whoami-role {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; padding: 1px 6px; border-radius: 5px;
}
.whoami-role.role-admin { background: var(--accent-soft); color: var(--accent-ink); }
.whoami-role.role-candidate { background: var(--blue-soft); color: var(--blue); }
.whoami-out {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
  font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 6px; cursor: pointer;
}
.whoami-out:hover { border-color: var(--red); color: var(--red); }
@media (max-width: 720px) { .whoami-label { display: none; } }

/* ---------- Job Discovery editor (Settings + onboarding) ---------- */
.disc-card { display: flex; flex-direction: column; gap: 18px; }
.disc-block { display: flex; flex-direction: column; gap: 10px; }
.disc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.disc-h-title { font-size: 14px; font-weight: 700; color: var(--text); }
.disc-sub { font-size: 12px; color: var(--muted); line-height: 1.45; }
.disc-count { font-size: 12px; font-weight: 700; color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.disc-count.is-full { color: #ffcf6b; background: rgba(245, 176, 66, .12); border-color: rgba(245, 176, 66, .5); }

/* Source cards */
.disc-src-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.disc-src { display: flex; align-items: center; gap: 9px; text-align: left; padding: 9px 11px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); transition: border-color .15s, background .15s, box-shadow .2s; }
.disc-src:hover { border-color: var(--accent); }
.disc-src.is-on { border-color: var(--accent); background: rgba(34, 211, 238, .10); box-shadow: 0 0 10px rgba(34, 211, 238, .18); }
.disc-src.is-full { opacity: .45; cursor: not-allowed; }
.disc-src.is-full:hover { border-color: var(--border); }
.disc-src-check { flex: 0 0 auto; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--surface); border: 1px solid var(--border); }
.disc-src.is-on .disc-src-check { color: #04121a; background: var(--accent); border-color: var(--accent); }
.disc-src-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.disc-src-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disc-src-cat { font-size: 10.5px; color: var(--muted); }
.disc-more { align-self: flex-start; }

/* Schedule windows */
.disc-win { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.disc-win-head { display: flex; align-items: center; justify-content: space-between; }
.disc-win-title { font-size: 13px; font-weight: 700; color: var(--text); }
.disc-win-remove { background: none; border: none; color: var(--muted); font-size: 12px; cursor: pointer; padding: 2px 4px; }
.disc-win-remove:hover { color: #ff6b6b; }
.disc-time { width: 100%; box-sizing: border-box; padding: 9px 11px; font-size: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; color: var(--text); }
.disc-time:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(34, 211, 238, .16); }
.disc-daychips { display: flex; flex-wrap: wrap; gap: 6px; }
.disc-daychip { flex: 0 0 auto; min-width: 46px; padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 600; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text-2); transition: color .15s, background .15s, border-color .15s, box-shadow .2s; }
.disc-daychip:hover { border-color: var(--accent); color: var(--text); }
.disc-daychip.is-on { color: #04121a; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 8px rgba(34, 211, 238, .5); }
.disc-addwin { align-self: flex-start; padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 600; background: rgba(34, 211, 238, .08); color: var(--accent-ink); border: 1px dashed var(--accent); border-radius: 10px; }
.disc-addwin:hover { background: rgba(34, 211, 238, .16); }

/* Enable toggle row */
.disc-toggle { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.disc-toggle-label { font-size: 14px; font-weight: 700; color: var(--text); }

.settings-actions { margin-top: 10px; }
.onb-disc { text-align: left; display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 640px) {
  .disc-src-grid { grid-template-columns: 1fr; }
  .disc-daychip { flex: 1 1 auto; min-width: 40px; }
}

/* Source pager (paged 24 at a time, replaced in place) */
.disc-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.disc-page-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.btn.sm.disc-prev[disabled], .btn.sm.disc-next[disabled] { opacity: .4; cursor: default; pointer-events: none; }

/* Discovery window cards (child-table model) */
.disc-win.is-off { opacity: .6; }
.disc-win-actions { display: flex; align-items: center; gap: 12px; }
.disc-win-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-2); cursor: pointer; }
.disc-win-lbl { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.disc-win-ends { font-size: 12px; color: var(--text-2); }
.disc-win-ends b { color: var(--text); }

/* Warning-toned hint (e.g. SMS relay is still a sample-data placeholder). */
.hint.warn { color: var(--amber); }

/* ---------- Settings: resume selection ---------- */
.resume-field { padding: 14px 0; border-top: 1px solid var(--border); }
.resume-field:first-of-type { border-top: none; padding-top: 4px; }
.resume-help { margin: 2px 0 8px; }
.resume-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 8px; }
.resume-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.resume-dot.ok { background: var(--green); box-shadow: 0 0 8px var(--green); }
.resume-state.none { color: var(--text-2); }
.resume-state.warn { color: var(--amber); }
.resume-dot.warn { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.resume-row { gap: 8px; }
.resume-select {
  flex: 1 1 auto; min-width: 0; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 12.5px;
}

/* Fail-closed load errors — shown instead of editable controls when a read
   failed, so nobody edits (and saves) defaults over their real settings. */
.disc-load-error, .onb-load-error {
  border: 1px solid var(--border); border-left: 3px solid var(--amber);
  border-radius: 10px; padding: 16px; background: var(--surface-2);
}
.disc-load-error-title, .onb-load-error-title {
  font-family: var(--mono); font-size: 13.5px; font-weight: 700;
  color: var(--amber); margin-bottom: 6px;
}
.disc-load-error p, .onb-load-error p { margin: 0 0 12px; font-size: 12.5px; }

/* ---------- Documents: list / detail workspace ---------- */
.doc-workspace { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 14px; align-items: start; }

.doc-pane-list { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.doc-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.doc-filter {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 700;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 3px 10px; cursor: pointer;
}
.doc-filter:hover { color: var(--text); }
.doc-filter.active { color: var(--accent-ink); background: var(--accent-soft); border-color: transparent; }
.doc-filter-n { font-size: 10.5px; opacity: .75; }

.doc-search {
  width: 100%; box-sizing: border-box; margin-bottom: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-size: 12.5px;
}

.doc-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }
.doc-item {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 9px 10px; border: 1px solid transparent; border-radius: 9px;
  background: none; color: var(--text); text-align: left; cursor: pointer;
}
.doc-item:hover { background: var(--surface-2); }
.doc-item.active { background: var(--accent-soft); border-color: rgba(120, 150, 255, .35); }
.doc-item-name { font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item-meta { font-size: 11.5px; color: var(--muted); }
.doc-item.placeholder .doc-item-name { color: var(--text-2); font-weight: 500; }
.doc-item-todo { color: var(--accent); font-weight: 700; }
.doc-item-history { color: var(--muted); font-weight: 700; }
.doc-item.history .doc-item-name { color: var(--text-2); font-weight: 500; }
.doc-history-note {
  margin: -6px 0 14px; padding: 9px 12px; font-size: 12.5px;
  color: var(--text-2); background: var(--surface-2);
  border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px;
}

/* Pursuit state — what actually happened to a role, beside the candidate's own
   decision. Never replaces the decision pill; the decision is a historical fact. */
.opp-pursuit {
  display: flex; align-items: baseline; gap: 7px;
  margin: 8px 0 2px; padding: 7px 10px;
  font-size: 12.5px; line-height: 1.45;
  border-radius: 8px; background: var(--surface-2);
  border-left: 3px solid var(--border);
}
.opp-pursuit-ico { flex: 0 0 auto; font-size: 11px; }
.opp-pursuit.active { border-left-color: var(--green); color: var(--text); }
.opp-pursuit.done { border-left-color: var(--muted); color: var(--text-2); }
.opp-pursuit.conflict {
  border-left-color: var(--amber); color: var(--amber);
  background: rgba(255, 200, 97, .07);
}

.doc-new { width: 100%; margin-top: 10px; }

.doc-pane-detail { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px; min-height: 240px; }
.doc-detail-title { margin: 0 0 14px; font-size: 17px; }
.doc-detail-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.doc-detail-row { display: flex; gap: 12px; font-size: 13px; }
.doc-detail-row > .muted { flex: 0 0 104px; }

.doc-notes {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 12px; margin-bottom: 16px; font-size: 12.5px; white-space: pre-wrap;
}
.doc-notes-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }

.doc-files { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.doc-file {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); text-decoration: none; font-size: 12.5px;
}
.doc-file:hover { border-color: var(--accent); }
.doc-file-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-file-meta { font-size: 11.5px; flex: 0 0 auto; }

/* Document editor */
.doc-editor { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.doc-editor-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.doc-toolbar { display: flex; gap: 3px; flex-wrap: wrap; flex: 1 1 auto; }
.doc-tool {
  min-width: 28px; height: 26px; padding: 0 7px;
  font-family: var(--mono); font-size: 12px; line-height: 1;
  color: var(--text-2); background: var(--surface); border: 1px solid var(--border);
  border-radius: 6px; cursor: pointer;
}
.doc-tool:hover { color: var(--text); border-color: var(--accent); }
.doc-tool.is-bold { font-weight: 800; }
.doc-tool.is-italic { font-style: italic; }
.doc-tool.is-underline { text-decoration: underline; }
.doc-editor-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.doc-dirty { font-size: 11.5px; color: var(--amber); }

.doc-body {
  min-height: 260px; max-height: 55vh; overflow-y: auto;
  padding: 16px 18px; background: var(--surface);
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.doc-body:focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent-soft); }
.doc-body:empty::before { content: "Start writing…"; color: var(--muted); }
.doc-body h1 { font-size: 21px; margin: 14px 0 8px; }
.doc-body h2 { font-size: 17.5px; margin: 14px 0 8px; }
.doc-body h3 { font-size: 15px; margin: 12px 0 6px; }
.doc-body p { margin: 0 0 10px; }
.doc-body ul, .doc-body ol { margin: 0 0 10px; padding-left: 24px; }
.doc-body li { margin-bottom: 4px; }
.doc-body blockquote {
  margin: 0 0 10px; padding: 4px 0 4px 12px;
  border-left: 3px solid var(--border); color: var(--text-2);
}
.doc-body a { color: var(--accent); }
.doc-body table { border-collapse: collapse; margin: 0 0 10px; }
.doc-body th, .doc-body td { border: 1px solid var(--border); padding: 5px 9px; }
.doc-body pre { background: var(--surface-2); padding: 10px; border-radius: 6px; overflow-x: auto; }

.doc-placeholder { border: 1px dashed var(--border); border-radius: 10px; padding: 16px; }
.doc-placeholder-title { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.doc-placeholder p { margin: 0; font-size: 12.5px; }

.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.doc-empty { padding: 12px 10px; font-size: 12.5px; }

@media (max-width: 860px) {
  .doc-workspace { grid-template-columns: 1fr; }
  .doc-list { max-height: 300px; }
}

/* Search-source health. Only a genuine blocker is red; "never checked" is amber
   because it is an absence of information, not a fault, and Off is neutral —
   colouring a switched-off source as broken is the mislabelling this replaced. */
.src-blocked td:first-child { font-weight: 650; }
.src-off td { opacity: .62; }

/* A submitted or archived document: readable and selectable, but not editable.
   Left as normal body type rather than greyed out — it is real content someone
   may need to read and copy, not disabled UI. */
.doc-editor.locked .doc-body.read-only { cursor: text; user-select: text; background: var(--surface-2); }
.doc-locked-note,
.doc-split-note {
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.5;
}

/* The two approval gates. Rendered as two separate rows, never merged into one
   badge — "a machine checked this" and "the person agreed to send it" are
   different claims, and collapsing them is the bug this replaced. */
.doc-gates { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.doc-gate { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.doc-gate-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.doc-gate.on .doc-gate-dot { background: var(--green); }
.doc-gate.off .doc-gate-dot { background: var(--amber); }
.doc-gate-label { color: var(--text-2); min-width: 96px; }
.doc-gate-value { font-weight: 600; }
.doc-gate.off .doc-gate-value { color: var(--amber); }

.doc-ready { border-radius: var(--radius-sm); padding: 9px 12px; margin: 10px 0; font-size: 13px; line-height: 1.5; }
.doc-ready.on { background: var(--green-soft); color: var(--green); }
.doc-ready.off { background: var(--surface-2); color: var(--text-2); }

.doc-approve-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.doc-approve-state { font-size: 13px; color: var(--text-2); }

/* An issue whose decision has been made but whose work is not done. Stated as
   text rather than a disabled button: a greyed-out control still reads as an
   action you might take, and the point is that the question is closed. */
.issue-decided { font-size: 12.5px; font-style: italic; white-space: nowrap; }
/* Reopen is deliberately quieter than Approve/Reject — it is a correction, not
   a third decision sitting alongside them. */
.issue-reopen { opacity: .8; font-size: 12px; }

/* The ON/OFF token on the Sound and Animations controls. Deliberately in the
   existing neon/terminal language rather than a new visual idea: monospace,
   letterspaced, boxed. OFF is muted rather than red — being switched off is a
   choice, not a fault, the same rule the source table and the recruiter toggle
   follow. */
.sysbar-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em;
  line-height: 1; padding: 2px 5px; margin-left: 6px; border-radius: 3px;
  border: 1px solid currentColor; opacity: .95;
}
.sysbar-state.on { color: var(--green); }
.sysbar-state.off { color: var(--muted); }

/* The toast is a live region and therefore stays mounted at all times — using
   the `hidden` attribute would drop it out of the accessibility tree, and text
   written into a hidden element is never announced. Visibility is a class, and
   `visibility` rather than `display` so the region is never torn down. */
.toast { visibility: hidden; opacity: 0; transition: opacity .16s ease; }
.toast.show { visibility: visible; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }

/* ===================================================================
   Meet the Team
   The page's whole job is that a reader can tell a person from an AI agent
   from a plain piece of code, so the three kinds are separated by their left
   edge and their monogram shape rather than by a label alone: a person is
   round and warm, an agent is round and accent-coloured, a worker is square
   and monospaced because it is a call sign, not a name.
   =================================================================== */
.nav-team { width: 100%; }

.team-intro { color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 70ch; margin: 0 0 4px; }
.team-note { color: var(--text-2); font-size: 12.5px; line-height: 1.55; max-width: 78ch; margin: -4px 0 12px; }

.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.team-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border);
  border-radius: var(--radius); padding: 14px 16px;
}
.team-card.kind-human { border-left-color: var(--green); }
.team-card.kind-ai { border-left-color: var(--accent); }
.team-card.kind-bot { border-left-color: var(--muted); }

.team-head { display: flex; align-items: flex-start; gap: 12px; }
.team-id { min-width: 0; flex: 1; }
.team-id h4 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.team-role { font-size: 12.5px; color: var(--accent-ink); margin-top: 2px; }
.team-card.kind-bot .team-role { color: var(--text-2); }
.team-reports { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.team-bio { margin: 10px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-2); }

/* The monogram is the base layer, not the fallback. The photo sits on top and
   is only revealed once it has actually loaded, so a missing file degrades to
   initials rather than to a broken-image icon. */
.team-avatar { position: relative; width: 44px; height: 44px; flex: none; }
.team-mono {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  font-weight: 800; font-size: 14px; letter-spacing: .02em;
  background: var(--surface-2); color: var(--accent-ink);
  border: 1px solid var(--border);
}
.team-mono.bot {
  border-radius: 7px; font-family: var(--mono); font-size: 13px;
  color: var(--text-2); letter-spacing: .04em;
}
.team-photo {
  position: absolute; inset: 0; width: 44px; height: 44px;
  border-radius: 50%; object-fit: cover; border: 1px solid var(--border);
}

/* Active is the only state that earns green. "Planned" and "Not running" are
   honest states rather than faults, so they are muted, never red. */
.team-status {
  flex: none; align-self: flex-start;
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px;
  color: var(--muted); border: 1px solid currentColor;
}
.team-status.live { color: var(--green); }

@media (max-width: 640px) { .team-grid { grid-template-columns: 1fr; } }

/* Service tier in the Admin candidate table. Premium is a quiet badge rather
   than a trophy — James asked for visible but not gaudy, and a loud treatment
   on a service level sitting next to an authority column invites reading one
   as the other. */
.tier-badge {
  display: inline-block; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  color: var(--accent-ink); background: rgba(34, 211, 238, .10);
  border: 1px solid rgba(34, 211, 238, .35);
}
.tier-cell, .role-cell { white-space: nowrap; }
.make-premium, .make-standard, .promote-admin { margin-left: 8px; }
/* Removing service is not a fault and not an emergency, so it is the same quiet
   control as granting it — no red. The armed state is what makes it deliberate,
   not the colour. */
.make-standard.is-armed { color: var(--amber); border-color: var(--amber); background: rgba(245, 176, 66, .10); }
/* Authority and service level are separate dimensions, so their controls are
   never styled alike: promotion borrows the Admin role colour, elevation stays
   in the accent family. Two identical buttons in adjacent columns would invite
   reaching for the wrong one. */
.promote-admin { color: var(--violet); border-color: rgba(162, 116, 255, .4); }
.promote-admin:hover { border-color: var(--violet); background: rgba(162, 116, 255, .1); }
.promote-admin.is-armed { color: var(--violet); border-color: var(--violet); background: rgba(162, 116, 255, .16); }
/* Armed state for the second click. Amber, not red: elevating somebody is not a
   fault, it is just a thing with no undo. */
.make-premium.is-armed { color: var(--amber); border-color: var(--amber); background: rgba(245, 176, 66, .10); }

/* Stored preference on, worker not running. Neither "On" nor "Off" is true on
   its own, so the cell says both rather than picking the flattering one. */
.watch-idle { display: inline-flex; flex-direction: column; line-height: 1.25; }
.watch-note { font-size: 10.5px; color: var(--amber); }

/* The candidate's own service badge sits beside the role pill in the sidebar
   footer. It reuses .tier-badge so the word means the same thing here as in the
   Admin table, and stays in the accent family rather than borrowing either role
   colour — service level is not authority. */
.identity-chip .tier-badge { margin-left: 6px; vertical-align: middle; }

/* ===================================================================
   Portal notifications — the candidate's action centre
   A bell in the shell rather than a toast, because a toast that carries a
   decision is a decision you can miss by looking away. It sits outside the
   toggle cluster: those are preferences, this is something that wants you.
   =================================================================== */
.sysbar-alerts { position: relative; display: inline-flex; }
.sysbar-bell {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 13px; font-weight: 700; line-height: 1;
  background: var(--surface-2); color: var(--text-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; cursor: pointer;
}
.sysbar-bell:hover { color: var(--accent-ink); border-color: var(--accent); }
.sysbar-bell:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Unread earns the accent. Zero unread is a normal state, not a dimmed one. */
.sysbar-bell.has-unread { color: var(--accent-ink); border-color: rgba(34, 211, 238, .5); }
.bell-count {
  min-width: 17px; padding: 0 5px; border-radius: 999px;
  background: var(--accent); color: #04121a;
  font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center;
}

.alert-panel {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  width: min(380px, calc(100vw - 32px)); max-height: min(60vh, 460px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  text-align: left;
}
.alert-head-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.alert-empty { padding: 14px 12px; font-size: 13px; }
.alert-empty p { margin: 6px 0 0; }
.alert-empty.warn { color: var(--amber); }
.alert-empty.warn p { color: var(--text-2); }

.alert-item { border-bottom: 1px solid var(--border); }
.alert-item:last-child { border-bottom: 0; }
.alert-head {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  padding: 10px 12px; color: var(--text); font-size: 13px;
}
.alert-head:hover { background: var(--surface-2); }
.alert-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.alert-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.alert-dot.read { background: var(--border); box-shadow: none; }
.alert-title { flex: 1; min-width: 0; }
.alert-item.unread .alert-title { font-weight: 650; }
/* "Needs you" is amber rather than red: a decision waiting is not a fault. */
.alert-flag {
  flex: none; font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--amber); border: 1px solid currentColor; border-radius: 999px; padding: 2px 6px;
}
.alert-body { padding: 0 12px 12px 29px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 720px) { .alert-panel { width: calc(100vw - 32px); } }

/* ===================================================================
   Admin — build identity
   Which build am I looking at. Deliberately plain: this is an operator's
   readout, not part of the terminal costume, and it has to be readable at a
   glance from across a desk when someone says "I don't see the new work".
   =================================================================== */
.build-id {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .03em;
  margin: 0 0 14px; padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.build-id-val { color: var(--text-2); }
/* Not styled as an error. Nothing is broken when the server has not been
   taught to report this yet — but it must not read as a build number either. */
.build-id-none { color: var(--muted); font-style: italic; }