/* nc.css — the NeuralCore design system ("core").
   One file every page links. Tokens first, then base elements, then the
   shared components staff pages and the customer portal both use.
   Brand: the NeuralCore logo (public/nc-mark.png, nc-logo.png). Deep
   navy-black ground, electric blue to cyan, one glowing "core" — the
   orbiting sphere and the lit O of CORE. Dark is the default; light is an
   explicit choice (data-theme="light"). The rail is dark in both, so the
   logo always sits on its own ground. Blue/cyan is brand and action;
   green, amber and red only ever carry state, and every state also has a
   word and a shape. */

@font-face {
  font-family: "Archivo NC";
  src: url("/nc-archivo.woff2") format("woff2-variations"), url("/nc-archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face { font-family: "Michroma NC"; src: url("/nc-michroma.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono NC"; src: url("/nc-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "JetBrains Mono NC"; src: url("/nc-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

/* ---------------------------------------------------------------- tokens */
:root {                      /* dark: the brand ground */
  color-scheme: dark;
  --ground: #060a14;
  --surface: #0d1424;
  --surface-2: #0a101d;
  --surface-3: #17213a;
  --line: #1b2640;
  --line-2: #2a3858;
  --ink: #eaf1ff;
  --ink-2: #a9b7d2;
  --ink-3: #8697b8;
  --rail: #03060d;
  --rail-2: #101a2e;
  --rail-line: #22304d;
  --on-rail: #eaf1ff;
  --on-rail-2: #94a5c6;
  --brand: #1e6bff;          /* electric blue (the X) */
  --brand-2: #00c8ff;        /* cyan (the orbit, CORE) */
  --brand-grad: linear-gradient(90deg, #1e5bff 0%, #00c8ff 100%);
  --glow: 0 0 6px rgba(0, 200, 255, .85), 0 0 18px rgba(0, 160, 255, .45);
  --primary: #1e6bff;
  --on-primary: #ffffff;
  --primary-hover: #1557e8;
  --link: #5aaeff;
  --signal: #ffb020;         /* caution fill (amber); never text on light */
  --on-signal: #0b1020;
  --go: #2fd08a;
  --caution: #ffb020;
  --danger: #ff5c6c;
  --on-danger: #0b1020;
  --info: #5aaeff;
  --violet: #a58bff;
  --orange: #ff8a4c;
  --go-tint: color-mix(in srgb, var(--go) 12%, var(--surface));
  --caution-tint: color-mix(in srgb, var(--signal) 14%, var(--surface));
  --danger-tint: color-mix(in srgb, var(--danger) 12%, var(--surface));
  --info-tint: color-mix(in srgb, var(--brand) 16%, var(--surface));
  --focus: 0 0 0 2px var(--ground), 0 0 0 4px var(--brand-2);
  --elev-1: 0 1px 0 rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .015);
  --elev-2: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(90, 174, 255, .08);

  --sans: "Archivo NC", "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --wide: "Michroma NC", "Archivo NC", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono NC", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --fs-xs: 12px; --fs-sm: 13px; --fs-md: 14px; --fs-lg: 16px; --fs-xl: 19px; --fs-2xl: 24px; --fs-3xl: 30px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Aliases for the staff pages' original token names, so their page-
     specific rules adopt the system without being rewritten line by line. */
  --bg: var(--ground); --panel: var(--surface); --panel-2: var(--surface-2);
  --edge: var(--line); --edge-2: var(--line-2);
  --ink-dim: var(--ink-2); --ink-faint: var(--ink-3);
  --accent: var(--info); --accent-dim: var(--info-tint); --on-accent: #0b1020;
  --novel: var(--go); --correction: var(--orange); --refine: var(--violet); --demo: var(--violet);
  --shadow: var(--elev-1);
}
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #eef2f8; --surface: #ffffff; --surface-2: #f5f7fb; --surface-3: #e4eaf3;
  --line: #d6deea; --line-2: #b8c4d6;
  --ink: #0b1426; --ink-2: #3c4a63; --ink-3: #56647d;
  --primary: #1c5cf0; --on-primary: #ffffff; --primary-hover: #0f47d0;
  --link: #1253d6; --info: #1253d6;
  --go: #0a7a3b; --caution: #8a5300; --danger: #b3121f; --on-danger: #ffffff;
  --violet: #6b3fa0; --orange: #b54708;
  --caution-tint: color-mix(in srgb, var(--signal) 20%, var(--surface));
  --info-tint: color-mix(in srgb, var(--brand) 9%, var(--surface));
  --focus: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --elev-1: 0 1px 0 rgba(11, 20, 38, .04), 0 1px 3px rgba(11, 20, 38, .08);
  --elev-2: 0 2px 6px rgba(11, 20, 38, .08), 0 14px 36px rgba(11, 20, 38, .14);
  --on-accent: #ffffff;
}

/* ------------------------------------------------------------------ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-md);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
::selection { background: color-mix(in srgb, var(--brand-2) 40%, transparent); color: var(--ink); }
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
h1, h2, h3, h4 { font-stretch: 82%; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: 0; text-wrap: balance; }
p { margin: 0; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: .92em; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }

/* ------------------------------------------------------------ the rail */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 52px;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) var(--sp-5) 8px;
  background: var(--rail); color: var(--on-rail);
  border-bottom: 2px solid transparent;
  border-image: var(--brand-grad) 1;
}
.topbar a { color: inherit; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--on-rail); text-decoration: none; }
.brand .mark { height: 26px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(0, 170, 255, .35)); }
/* The wordmark, set in type: NEURAL in white, CORE in brand blue with a lit O. */
.wm { font-family: var(--wide); font-size: 13px; letter-spacing: .1em; color: var(--on-rail); line-height: 1; }
.wm b { font-weight: 400; color: #1fa0ff; }
.wm i { font-style: normal; position: relative; display: inline-block; color: #1fa0ff; text-shadow: 0 0 8px rgba(0, 200, 255, .55); }
.wm i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; border-radius: 50%; background: #c8f4ff; box-shadow: var(--glow); }
.brand small { font-family: var(--sans); font-weight: 500; font-size: var(--fs-sm); color: var(--on-rail-2); letter-spacing: 0; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--rail-line); }
.brand .dot { display: none; }
nav.pages { display: flex; gap: 2px; flex-wrap: wrap; }
nav.pages a {
  position: relative; padding: 7px 9px; border-radius: var(--r-md);
  color: var(--on-rail-2); font-weight: 600; font-size: var(--fs-sm); text-decoration: none;
  transition: color .15s var(--ease), background-color .15s var(--ease);
}
nav.pages a:hover { color: var(--on-rail); background: var(--rail-2); text-decoration: none; }
nav.pages a.active, nav.pages a[aria-current="page"] { color: var(--on-rail); background: var(--rail-2); }
nav.pages a.active::after, nav.pages a[aria-current="page"]::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -11px; height: 3px; background: var(--on-rail);
}
.spacer { margin-left: auto; }
.who { display: flex; align-items: center; gap: 10px; color: var(--on-rail-2); font-size: var(--fs-sm); }
.who .avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--rail-2); border: 1px solid var(--rail-line); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--on-rail); font-size: var(--fs-xs); }
.topbar .btn { background: transparent; color: var(--on-rail); border-color: var(--rail-line); }
.topbar .btn:hover { background: var(--rail-2); border-color: var(--on-rail-2); }
.topbar .icon-btn { background: transparent; color: var(--on-rail-2); border-color: var(--rail-line); }
.topbar .icon-btn:hover { color: var(--on-rail); border-color: var(--on-rail-2); }
.topbar :focus-visible { box-shadow: 0 0 0 2px var(--rail), 0 0 0 4px var(--brand-2); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 34px; padding: 6px 14px;
  border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  font: inherit; font-weight: 600; font-size: var(--fs-sm); line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.btn:hover { border-color: var(--ink-3); background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.btn.primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); box-shadow: 0 0 0 1px rgba(0, 200, 255, .25), 0 4px 18px rgba(30, 107, 255, .35); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--surface-3); color: var(--ink); }
.btn.sm { min-height: 28px; padding: 3px 10px; font-size: var(--fs-xs); }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg, .icon-btn svg { width: 15px; height: 15px; flex: none; }
.btn[aria-busy="true"] { cursor: progress; }
.icon-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--surface); color: var(--ink-2); cursor: pointer; font: inherit;
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-3); }

/* ----------------------------------------------------------------- forms */
label, .label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 5px; }
input, select, textarea {
  font: inherit; font-size: var(--fs-md); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 7px 10px; min-height: 36px;
  transition: border-color .15s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-2) 45%, transparent); border-radius: var(--r-md); }
input[aria-invalid="true"] { border-color: var(--danger); }
.field { margin-bottom: var(--sp-4); }
.field input, .field select, .field textarea { width: 100%; }

/* ------------------------------------------------------------ layout bits */
main { padding: var(--sp-5); max-width: 1280px; margin: 0 auto; }
.page-head { display: flex; align-items: baseline; gap: var(--sp-3) var(--sp-4); margin: var(--sp-2) 0 var(--sp-5); flex-wrap: wrap; }
.page-head h1 { font-family: var(--wide); font-weight: 400; font-size: 20px; letter-spacing: .02em; }
.page-head .sub { color: var(--ink-3); font-size: var(--fs-sm); }
.refresh { margin-left: auto; color: var(--ink-3); font-size: var(--fs-xs); font-family: var(--mono); }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--elev-1); margin-bottom: var(--sp-5); overflow: hidden;
}
.panel > h2, .panel-head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0; padding: 12px var(--sp-4);
  font-size: var(--fs-lg); font-weight: 700; font-stretch: 82%; letter-spacing: -0.005em;
  color: var(--ink); text-transform: none;
  border-bottom: 1px solid var(--line);
}
.panel-head h2, .panel-head h3 { font-size: var(--fs-lg); }
.panel-head .meta { margin-left: auto; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 500; font-stretch: 100%; }
.panel-body { padding: var(--sp-4); }

.tiles { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--elev-1); }
.tile { flex: 1 1 120px; background: var(--surface); padding: 12px var(--sp-4); border: 0; border-radius: 0; box-shadow: 1px 0 0 var(--line), 0 1px 0 var(--line); }
.tile .k { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; text-transform: none; letter-spacing: 0; }
.tile .v { font-size: var(--fs-2xl); font-weight: 700; font-stretch: 85%; font-family: var(--sans); margin-top: 2px; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
th {
  text-align: left; padding: 8px 14px; white-space: nowrap;
  color: var(--ink-2); font-weight: 600; font-size: var(--fs-xs); text-transform: none; letter-spacing: 0;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
}
td { padding: 9px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
td.num, th.num { text-align: right; }

/* ------------------------------------------------- state: word + shape + colour */
.state { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; color: var(--ink); }
.state::before { content: ""; width: 10px; height: 10px; flex: none; }
.state[data-s="ok"]::before { border-radius: 50%; background: var(--go); box-shadow: 0 0 6px color-mix(in srgb, var(--go) 60%, transparent); }
.state[data-s="warn"]::before { width: 12px; height: 11px; background: var(--signal); clip-path: polygon(50% 0, 100% 100%, 0 100%); box-shadow: none; outline: none; }
.state[data-s="warn"] { color: var(--caution); }
.state[data-s="bad"]::before { width: 11px; height: 11px; background: var(--danger); clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.state[data-s="bad"] { color: var(--danger); }
.state[data-s="idle"]::before { border-radius: 50%; border: 2px dashed var(--ink-3); }
.state[data-s="idle"] { color: var(--ink-2); }
.state[data-s="off"]::before { border-radius: 50%; border: 2px solid var(--ink-3); background: linear-gradient(135deg, transparent 43%, var(--ink-3) 43% 57%, transparent 57%); }
.state[data-s="off"] { color: var(--ink-2); }
.state small { font-weight: 400; color: var(--ink-3); }

.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.pill.novel, .pill.good { background: var(--go-tint); color: var(--go); border-color: color-mix(in srgb, var(--go) 35%, transparent); }
.pill.correction, .pill.bad { background: color-mix(in srgb, var(--orange) 10%, var(--surface)); color: var(--orange); border-color: color-mix(in srgb, var(--orange) 35%, transparent); }
.pill.refine, .pill.demo { background: color-mix(in srgb, var(--violet) 10%, var(--surface)); color: var(--violet); border-color: color-mix(in srgb, var(--violet) 35%, transparent); }
.pill.none { background: var(--surface-2); color: var(--ink-3); border-color: var(--line); }
.subj { display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 0 6px; margin: 1px 3px 1px 0; font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
.lvl-none { color: var(--ink-3); } .lvl-read { color: var(--info); } .lvl-write { color: var(--violet); font-weight: 700; } .lvl-admin { color: var(--go); font-weight: 700; }

/* --------------------------------------------------------------- notices */
.msg { padding: 10px 14px; border-radius: var(--r-md); margin-bottom: var(--sp-4); font-size: var(--fs-sm); border: 1px solid var(--line); background: var(--surface); }
.msg.err { background: var(--danger-tint); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.msg.warn { background: var(--caution-tint); border-color: color-mix(in srgb, var(--signal) 70%, var(--line)); color: var(--ink); }
.msg.ok { background: var(--go-tint); border-color: color-mix(in srgb, var(--go) 35%, transparent); color: var(--go); }
.empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--ink-2); font-size: var(--fs-sm); }
.empty strong { display: block; color: var(--ink); font-size: var(--fs-md); margin-bottom: 4px; }

/* -------------------------------------------- THE TAG (signature component)
   <div class="tag" data-signal="caution|danger|notice">
     <div class="tag-band">Single use</div>
     <div class="tag-body">…</div>
     <div class="tag-stub">…</div>
   </div>                                                                    */
.tag {
  --band: var(--signal); --on-band: var(--on-signal);
  position: relative; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--elev-1); overflow: hidden;
}
.tag[data-signal="danger"] { --band: var(--danger); --on-band: var(--on-danger); }
.tag[data-signal="notice"] { --band: var(--brand); --on-band: #ffffff; }
.tag[data-signal="notice"] .tag-band { background: linear-gradient(90deg, #1747d6, #1468e8); }
.tag-band {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px 8px 32px; position: relative;
  background: var(--band); color: var(--on-band);
  font-family: var(--wide); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
.tag-band::before { /* the lit core, as in the logo's O */
  content: ""; position: absolute; left: 13px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: #ffffff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--on-band) 25%, transparent), 0 0 10px rgba(255, 255, 255, .9);
}
.tag-band .aside { margin-left: auto; font-family: var(--sans); font-weight: 600; letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); opacity: .92; }
.tag-body { padding: 14px; }
.tag-stub {
  position: relative; padding: 10px 14px; font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface-2);
  border-top: 1px dashed var(--line-2);
}
.tag-secret { font-family: var(--mono); font-weight: 600; font-size: var(--fs-2xl); letter-spacing: .06em; color: var(--ink); word-break: break-all; }
/* A one-time secret staff copy (a reset password, #26): a readonly field, so it
   can always be selected, with Copy beside it. Never stored in the browser. */
.secret-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
input.tag-secret { flex: 1 1 16ch; min-width: 0; font-size: var(--fs-lg); background: var(--surface-2); }

/* ------------------------------------------------------ staff sign-in gate */
.gate { position: relative; overflow: hidden; max-width: 420px; margin: 10vh auto; text-align: left; padding: var(--sp-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--elev-2); }
.gate::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-grad); }
.gate .dot { width: 46px; height: 34px; border-radius: 0; background: url("/nc-mark.png") left center / contain no-repeat; box-shadow: none; margin: 0 0 18px; filter: drop-shadow(0 0 8px rgba(0, 170, 255, .4)); }
.gate h1 { font-size: var(--fs-2xl); margin: 0 0 6px; } .gate p { color: var(--ink-2); margin: 0 0 22px; line-height: 1.5; }
.g-btn { display: flex; width: 100%; justify-content: center; align-items: center; gap: 10px; background: #ffffff; color: #1f1f1f; border: 1px solid #c7ccd1; padding: 10px 18px; border-radius: var(--r-md); font-weight: 600; font-size: var(--fs-md); cursor: pointer; text-decoration: none; }
.g-btn:hover { border-color: #8d959d; text-decoration: none; }
.g-btn svg { width: 18px; height: 18px; }

/* --------------------------------------------------------------- Xe panel */
.xe-fab { position: fixed; right: 20px; bottom: 20px; z-index: 9000; display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); border: none; border-radius: 999px; padding: 10px 16px; font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; box-shadow: var(--elev-2); }
.xe-fab-dot { width: 8px; height: 8px; border-radius: 50%; background: #c8f4ff; display: inline-block; box-shadow: var(--glow); }
.xe-panel { position: fixed; right: 20px; bottom: 20px; z-index: 9001; width: 390px; max-width: calc(100vw - 32px); height: 560px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-lg); box-shadow: var(--elev-2); overflow: hidden; }
.xe-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 2px solid transparent; border-image: var(--brand-grad) 1; background: var(--rail); color: var(--on-rail); }
.xe-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-stretch: 82%; font-size: var(--fs-lg); color: var(--on-rail); }
.xe-head-actions { display: flex; gap: 4px; }
.xe-ic { background: transparent; border: 1px solid var(--rail-line); color: var(--on-rail-2); min-width: 30px; height: 30px; border-radius: var(--r-md); cursor: pointer; font: inherit; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; padding: 0 6px; }
.xe-ic:hover { border-color: var(--on-rail-2); color: var(--on-rail); }
.xe-ic.on { background: var(--brand); color: #ffffff; border-color: var(--brand); }
.xe-thread { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--ground); }
.xe-inrow { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); align-items: center; }
.xe-inrow input { flex: 1; }
.xe-send { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.xe-foot { padding: 0 12px 10px; font-size: 11px; color: var(--ink-3); }
.xe-b { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 9px 12px; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; max-width: 92%; }
.xe-b.you { align-self: flex-end; background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.xe-b.xe { align-self: flex-start; background: var(--surface); color: var(--ink); }

/* ------------------------------------------------- additions (staff pages) */
input[type="checkbox"], input[type="radio"] { min-height: 0; padding: 0; width: 16px; height: 16px; accent-color: var(--primary); vertical-align: middle; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { box-shadow: var(--focus); }
.btn[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.msg:empty { display: none; }
.state[data-s="info"]::before { width: 10px; height: 10px; background: var(--info); transform: rotate(45deg) scale(.85); }
.state[data-s="info"] { color: var(--info); }
.pill.danger { background: var(--danger-tint); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }
.pill.warn { background: var(--caution-tint); color: var(--caution); border-color: color-mix(in srgb, var(--signal) 70%, transparent); }
.pill.info { background: var(--info-tint); color: var(--info); border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.topbar .pill { background: var(--rail-2); color: var(--on-rail-2); border-color: var(--rail-line); }
.topbar .pill.good, .topbar .pill.ok { color: var(--on-rail); }
.topbar .pill.good::before, .topbar .pill.ok::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--go); }
/* in-page tab strip */
.nc-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.nc-tabs > button, .nc-tabs > a { all: unset; position: relative; padding: 9px 12px; font-weight: 600; font-size: var(--fs-sm); color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.nc-tabs > button:hover, .nc-tabs > a:hover { color: var(--ink); }
.nc-tabs > [aria-selected="true"], .nc-tabs > .active { color: var(--ink); }
.nc-tabs > [aria-selected="true"]::after, .nc-tabs > .active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--ink); }
.nc-tabs > :focus-visible { box-shadow: var(--focus); border-radius: var(--r-sm); }
@media (max-width: 460px) { .gate { margin-left: var(--sp-4); margin-right: var(--sp-4); padding: var(--sp-6); } }

/* Head version badge (public/head-version.js): which commit the Head runs, on every staff page. */
.head-badge { display: inline-block; flex: 0 0 auto; min-width: 0; max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 3px 10px; border: 1px solid var(--rail-line); border-radius: 999px; background: var(--rail-2); color: var(--on-rail-2) !important; font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.5; text-decoration: none; }
.head-badge:hover, .head-badge[aria-current="page"] { color: var(--on-rail) !important; border-color: var(--on-rail-2); }
.head-badge.stale { color: var(--on-rail) !important; border-color: var(--signal); }

/* ------------------------------------------------------------ responsive */
/* Staff rails carry a dozen links: below 1500px the wordmark steps back to the mark alone. */
@media (max-width: 1500px) { .topbar:has(nav.pages a:nth-child(8)) .wm { display: none; } }
@media (max-width: 760px) {
  main { padding: var(--sp-3); }
  .topbar { flex-wrap: wrap; row-gap: 6px; padding-left: var(--sp-3); padding-right: var(--sp-3); }
  .who .email, .brand small { display: none; }
  .head-badge { flex: 0 1 auto; max-width: 62vw; }
  .head-badge .hb-w { display: none; }
  nav.pages { order: 3; width: calc(100% + 24px); margin: 0 -12px; padding: 0 8px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  nav.pages::-webkit-scrollbar { display: none; }
  nav.pages a { white-space: nowrap; flex: 0 0 auto; }
  nav.pages a.active::after, nav.pages a[aria-current="page"]::after { bottom: -6px; }
  .xe-panel { right: 8px; bottom: 8px; left: 8px; width: auto; }
  .xe-fab { right: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}