/* ============================================================================
   CONSOLE — the Operate/Monitor layer.

   WHY THIS IS NOT THE MARKETING DESIGN
     The public site is Decide/Learn: big type, one message per screen, generous
     emptiness. The console is Operate/Monitor: a person is here to find a value,
     change a value, or notice something is wrong. Copying the marketing composition
     would actively hurt — a 76px centred headline on a dashboard wastes the only
     screen the operator has.

     So the SAME LANGUAGE is applied with a different instrument:
       shared    dark ladder, Inter + mono, hairline elevation, one accent, 4px base
       changed   density up, type down, spacing 32 not 96, cards -> hairlines,
                 motion 100-160ms not 700ms, no scroll reveals on data

   THE RULES THIS FILE ENFORCES
     1. NO scroll reveals. Motion on data the operator is about to read is noise.
        Reveals are for persuasion; this surface has nothing to persuade.
     2. Cards are the exception, not the default. Most regions are hairline-divided
        so the eye follows rule lines instead of counting boxes.
     3. Numbers are tabular and right-aligned, always.
     4. Colour means state. The accent marks the current nav item and the primary
        action; --ok/--warn/--bad mark status. Nothing else is tinted.
     5. Motion is feedback, not decoration: it confirms a transition (nav indicator,
        row hover, meter fill, value change). Every animation is <=160ms, except the
        two that report progress, which are bounded by the work they describe.
   ========================================================================== */

/* ---------------------------------------------------------- 1. SHELL ------- */
/* A console wants MORE width than a marketing page: tables, log lines and hashes do
   not benefit from a 1200px cap on a 2560px monitor. 1440 is the compromise. */
.c-shell { max-width: 1440px; margin: 0 auto; padding: 0 var(--sp-24); }

/* The topbar becomes a real command bar: brand, grouped nav, a search affordance and
   the account action. Sticky, and it owns the scroll-progress rule on console pages. */
.topbar-in {
  max-width: 1440px; margin: 0 auto;
  padding: 0 var(--sp-24);
  display: flex; align-items: center; gap: var(--sp-16);
  height: 56px;
}
.topbar {
  background: rgba(8, 9, 10, .82);
  -webkit-backdrop-filter: saturate(150%) blur(16px);
          backdrop-filter: saturate(150%) blur(16px);
}
.brand { gap: 8px; font-size: 15px; letter-spacing: -0.01em; }
.brand .dot {
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 590;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}
.brand .tag {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-wash);
  border: 1px solid var(--accent-line);
  padding: 2px 6px; border-radius: var(--r-sm);
}

/* nav: tighter, with a SLIDING indicator. The indicator is a single absolutely
   positioned rule that animates between items -- a real state transition, which is
   the only kind of motion worth 160ms of the operator's attention. */
.nav { position: relative; display: flex; gap: 2px; }
.nav a {
  position: relative;
  padding: 6px 11px; border-radius: var(--r-btn);
  font-size: 13.5px; font-weight: 450; color: var(--fog);
  transition: color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.nav a:hover { color: var(--mist); background: rgba(255,255,255,.04); }
.nav a.active {
  color: var(--paper); background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px var(--line);
}
/* the accent underline marks location without a filled pill, which reads calmer in a
   row of six items than six competing backgrounds */
.nav a.active::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--accent);
}

/* command palette trigger — the audit log is the 12th nav item, and the honest fix
   for "too many destinations" is a search box, not more links */
.cmdk {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 10px; min-width: 210px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: rgba(255,255,255,.03);
  color: var(--ash); font-size: 13px;
  transition: border-color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.cmdk:hover { border-color: var(--line-strong); background: rgba(255,255,255,.05); color: var(--fog); }
.cmdk .kbd {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--fog); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 1px 5px; background: var(--void);
}
@media (max-width: 900px) { .cmdk { min-width: 0; } .cmdk .lbl { display: none; } }

/* ------------------------------------------------------ 2. PAGE HEADER ----- */
/* Not a hero. A compact bar: title, one-line purpose, actions on the right, and a
   hairline under it. The h1 is 20px — this is a tool, and the operator already knows
   where they are. */
.c-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-24); flex-wrap: wrap;
  padding: var(--sp-24) 0 var(--sp-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-24);
}
.c-head h1 {
  font-size: 20px; font-weight: 510; letter-spacing: -0.022em;
  color: var(--paper); margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.c-head .sub { color: var(--fog); font-size: 13px; margin: 4px 0 0; max-width: 74ch; }
.c-head .c-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* breadcrumb — gives the operator a sense of depth that a flat title cannot */
.c-crumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ash); margin-bottom: 7px;
}
.c-crumb a { color: var(--ash); }
.c-crumb a:hover { color: var(--fog); }
.c-crumb .sep { color: var(--smoke); }

/* ------------------------------------------------------ 3. METRIC BAND ---- */
/* Full-bleed strip of the numbers that justify the page's existence. Deliberately NOT
   a rounded card of boxes: hairlines between cells, the value in mono at 26px, and a
   label small enough to disappear until looked at. */
.c-band {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--carbon);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 calc(var(--sp-24) * -1) var(--sp-24);
  padding: 0 var(--sp-24);
}
@media (max-width: 760px) { .c-band { grid-auto-flow: row; } }
.c-band .m {
  padding: 18px var(--sp-20) 18px 0;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.c-band .m:last-child { border-right: 0; }
.c-band .m .lbl {
  display: block; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
  margin-bottom: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-band .m .val {
  display: block; font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--paper);
  font-variant-numeric: tabular-nums;
}
.c-band .m .val.accent { color: var(--accent); }
.c-band .m .val.ok { color: var(--ok); }
.c-band .m .val.bad { color: var(--bad); }
.c-band .m .sub { display: block; font-size: 12px; color: var(--fog); margin-top: 4px; }
/* a value that changes animates ONCE, so a polled dashboard shows you what moved */
.c-band .m .val.changed { animation: valFlash 900ms var(--ease-out); }
@keyframes valFlash {
  0%   { color: var(--accent); }
  100% { color: inherit; }
}

/* ------------------------------------------------------ 4. SECTIONS ------- */
/* A section is a label + a rule + content. No card wrapper unless the content NEEDS
   containment (a table that scrolls, a form that submits). */
.c-sec { margin-bottom: var(--sp-32); }
.c-sec > .head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16); margin-bottom: var(--sp-16);
}
.c-sec h2 {
  font-size: 13px; font-weight: 510; letter-spacing: -0.005em;
  color: var(--mist); margin: 0; text-transform: none;
  display: flex; align-items: center; gap: 8px;
}
.c-sec h2 .n {
  font-family: var(--mono); font-size: 10.5px; color: var(--ash);
  font-weight: 500; letter-spacing: .06em;
}
.c-sec .hint { color: var(--ash); font-size: 12px; }

/* ------------------------------------------------------ 5. TABLES --------- */
/* The console's primary instrument. Denser than the marketing tables, with a sticky
   header, zebra-free hover, and a right-edge fade that signals horizontal overflow
   instead of hiding it. */
.tbl-wrap {
  border: 1px solid var(--line); border-radius: var(--r-card);
  overflow: hidden; background: var(--carbon);
}
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
table.tbl thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--void);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ash);
  text-align: left; white-space: nowrap;
}
table.tbl thead th.num { text-align: right; }
table.tbl tbody tr { transition: background var(--t-fast) var(--ease-ui); }
table.tbl tbody tr:hover td { background: rgba(255,255,255,.022); }
table.tbl tbody tr:last-child td { border-bottom: 0; }
table.tbl td { font-size: 13.5px; color: var(--mist); vertical-align: middle; }
table.tbl td.num {
  text-align: right; font-family: var(--mono); font-size: 13px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.tbl td.mono { font-family: var(--mono); font-size: 12.5px; color: var(--fog); }
table.tbl td.dim { color: var(--fog); }
table.tbl tr.is-new { animation: rowIn 700ms var(--ease-out); }
@keyframes rowIn {
  from { background: var(--accent-wash); }
  to   { background: transparent; }
}
/* a row that needs attention: a 2px accent edge, not a coloured background */
table.tbl tr.flag td:first-child { box-shadow: inset 2px 0 0 var(--accent); }
table.tbl tr.flag.bad td:first-child { box-shadow: inset 2px 0 0 var(--bad); }

/* ------------------------------------------------------ 6. STATUS --------- */
/* One vocabulary for state, used identically in every table and header. */
.st {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 450; white-space: nowrap;
  padding: 2px 8px 2px 6px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--fog);
}
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--smoke); }
.st.ok   { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 30%, transparent);  background: color-mix(in srgb, var(--ok) 11%, transparent); }
.st.ok::before   { background: var(--ok); }
.st.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }
.st.warn::before { background: var(--warn); }
.st.bad  { color: var(--bad);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  background: color-mix(in srgb, var(--bad) 11%, transparent); }
.st.bad::before  { background: var(--bad); }
/* a live indicator for anything the operator is waiting on */
.st.live::before { animation: stPulse 2000ms var(--ease-ui) infinite; }
@keyframes stPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ------------------------------------------------------ 7. METERS --------- */
/* Quota consumption is the console's most important single visual: it answers "am I
   about to be cut off". The fill animates from 0 on first paint so the eye registers
   magnitude rather than reading a number. */
.meter { height: 6px; border-radius: var(--r-pill); background: var(--graphite); overflow: hidden; }
.meter > span {
  display: block; height: 100%; border-radius: var(--r-pill);
  background: var(--accent);
  animation: meterIn 700ms var(--ease-out) both;
}
.meter.warn > span { background: var(--warn); }
.meter.bad  > span { background: var(--bad); }
@keyframes meterIn { from { transform: scaleX(0); transform-origin: left; } to { transform: none; } }
.meter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.meter-row .k { font-size: 12.5px; color: var(--fog); }
.meter-row .v {
  font-family: var(--mono); font-size: 12.5px; color: var(--mist);
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ 8. FORMS ---------- */
/* Console forms are inline tools, not landing-page signups. Field label above a
   compact input, actions in a row at the bottom, and a visible focus ring. */
.c-field { margin-bottom: var(--sp-16); }
.c-field label {
  display: block; font-size: 12px; font-weight: 500; color: var(--fog);
  margin-bottom: 6px;
}
.c-field .help { font-size: 12px; color: var(--ash); margin-top: 5px; }
.c-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); }
@media (max-width: 700px) { .c-grid2 { grid-template-columns: minmax(0, 1fr); } }
.c-form-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: var(--sp-16); border-top: 1px solid var(--line); margin-top: var(--sp-8);
}

/* ------------------------------------------------------ 9. EMPTY / ALERTS -- */
.empty {
  text-align: left; padding: var(--sp-32) var(--sp-24);
  border: 1px dashed var(--line-strong); border-radius: var(--r-card);
  color: var(--fog); background: transparent;
}
.empty .t { font-weight: 510; color: var(--mist); font-size: 14px; margin-bottom: 5px; }
.empty .d { font-size: 13.5px; margin-bottom: var(--sp-16); max-width: 62ch; }

.alert {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-card);
  background: var(--carbon); box-shadow: var(--inset-hairline);
  border-left: 2px solid var(--line-strong);
  font-size: 13.5px; color: var(--fog);
  margin-bottom: var(--sp-16);
}
.alert .ic {
  flex: none; width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 590;
  background: rgba(255,255,255,.07); color: var(--mist);
}
.alert strong { color: var(--mist); font-weight: 510; }
.alert.ok   { border-left-color: var(--ok); }
.alert.ok .ic   { background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.alert.warn { border-left-color: var(--warn); }
.alert.warn .ic { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.alert.err  { border-left-color: var(--bad); }
.alert.err .ic  { background: color-mix(in srgb, var(--bad) 18%, transparent); color: var(--bad); }

/* ---------------------------------------------------- 10. STICKY RAIL ----- */
/* Context that should stay visible while scanning a long table. Sticky, hairline-
   divided, and it collapses above the content on narrow screens where sticky is
   actively harmful (it eats the viewport). */
.rail { display: grid; gap: var(--sp-16); align-content: start; position: sticky; top: 80px; }
.rail-card {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--carbon); overflow: hidden;
}
.rail-card .h {
  padding: 12px 16px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
}
.rail-card .b { padding: 14px 16px; }
.dl { display: grid; gap: 0; }
.dl .r {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft);
}
.dl .r:last-child { border-bottom: 0; }
.dl .k { font-size: 12.5px; color: var(--fog); }
.dl .v {
  font-family: var(--mono); font-size: 12.5px; color: var(--mist);
  font-variant-numeric: tabular-nums; text-align: right;
}
@media (max-width: 1000px) { .rail { position: static; } }

/* -------------------------------------------------- 11. CONSOLE MOTION ---- */
/* Feedback only. These confirm a state transition; none of them decorate. */
.js .c-fade { opacity: 0; animation: cFade 300ms var(--ease-out) forwards; }
@keyframes cFade { to { opacity: 1; } }
.js .c-rise { opacity: 0; transform: translateY(6px); animation: cRise 340ms var(--ease-out) forwards; }
@keyframes cRise { to { opacity: 1; transform: none; } }

/* stagger is explicit per element (--d), never :nth-child — a child-count rule
   silently reshuffles the moment a row is added, which I already shipped once. */
.js .c-stagger { animation-delay: var(--d, 0ms); }

/* a thin read-position rule, matching the public site but quieter */
.c-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 200;
  background: var(--accent); width: 0;
  transition: width 90ms linear; pointer-events: none;
}

/* toast: confirms an action that already happened (copy, revoke, provision) */
.c-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(12px);
  padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--obsidian); box-shadow: var(--inset-hairline), var(--shadow-card);
  color: var(--mist); font-size: 13.5px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-ui) var(--ease-ui), transform var(--t-ui) var(--ease-out);
  z-index: 300;
}
.c-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.c-toast.ok::before  { content: "✓"; color: var(--ok); margin-right: 8px; font-weight: 590; }
.c-toast.err::before { content: "!"; color: var(--bad); margin-right: 8px; font-weight: 590; }

/* copy button feedback */
.copied { color: var(--ok) !important; }

/* ------------------------------------------------- 12. TABS / SEGMENTS --- */
/* One control for switching a view, used by usage ranges and filters. The active
   segment has a sliding fill so the change of view is legible. */
.seg {
  display: inline-flex; padding: 2px; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: var(--void);
}
.seg a, .seg button {
  padding: 5px 12px; border-radius: var(--r-sm); border: 0;
  background: transparent; color: var(--fog);
  font-size: 12.5px; font-weight: 450; cursor: pointer;
  transition: color var(--t-fast) var(--ease-ui), background var(--t-fast) var(--ease-ui);
}
.seg a:hover, .seg button:hover { color: var(--mist); }
.seg a.on, .seg button.on { color: var(--paper); background: rgba(255,255,255,.07); }

/* --------------------------------------------- 13. RESPONSIVE DENSITY ---- */
/* Below 900px the console is a phone: reduce padding, drop the rail to a stacked
   block, and let tables scroll rather than trying to reflow them (a reflowed data
   table loses the column association that makes it readable). */
@media (max-width: 900px) {
  .c-shell, .topbar-in { padding: 0 var(--sp-16); }
  .c-band { margin-left: calc(var(--sp-16) * -1); margin-right: calc(var(--sp-16) * -1); padding: 0 var(--sp-16); }
  .c-band .m { padding: 14px 12px 14px 0; }
  .c-band .m .val { font-size: 20px; }
  .c-head { padding-top: var(--sp-16); }
  .c-head h1 { font-size: 18px; }
}
/* touch: only standalone targets grow. Inline links in prose stay small on purpose. */
@media (hover: none) and (pointer: coarse) {
  .btn.sm, .btn.ghost.sm { min-height: 38px; }
  .nav a { padding: 9px 12px; }
  table.tbl td, table.tbl th { padding: 12px 14px; }
}

/* ============================================================================
   14. LEGACY CLASS BRIDGE
   ----------------------------------------------------------------------------
   app.css defines .page-head / .kpis / .card / table with the old geometry. Rather
   than rewrite 15 templates in one pass (which is how a console breaks in ways you
   only find in production), these overrides restyle the EXISTING classes to the new
   language. Every page improves immediately, and the restructured pages use the
   .c-* classes on top. Once no template uses the legacy names, this block can go.
   ========================================================================== */

/* page-head -> compact tool header, not a hero */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-24); flex-wrap: wrap;
  padding: var(--sp-24) 0 var(--sp-16);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--sp-24);
}
.page-head h1 {
  font-size: 20px; font-weight: 510; letter-spacing: -0.022em;
  color: var(--paper); margin: 0;
}
.page-head .sub { color: var(--fog); font-size: 13px; margin: 4px 0 0; max-width: 74ch; }
.page-head .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* h2 -> section label, not an uppercase shout */
h2 {
  font-size: 13px; font-weight: 510; letter-spacing: -0.005em;
  color: var(--mist); text-transform: none; margin: var(--sp-24) 0 var(--sp-12);
}
h2:first-child { margin-top: 0; }

/* kpis -> the full-bleed metric band */
.kpis {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  background: var(--carbon); border: 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  border-radius: 0; overflow: visible;
  margin: 0 calc(var(--sp-24) * -1) var(--sp-24);
  padding: 0 var(--sp-24);
}
@media (max-width: 760px) { .kpis { grid-auto-flow: row; } }
.kpi {
  padding: 18px var(--sp-20) 18px 0; border-right: 1px solid var(--line);
  border-bottom: 0; min-width: 0;
}
.kpi:last-child { border-right: 0; }
.kpi .lbl, .kpi .k {
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ash);
  margin-bottom: 7px; display: block;
}
.kpi .val, .kpi .v {
  font-family: var(--mono); font-size: 26px; font-weight: 500;
  letter-spacing: -0.03em; line-height: 1.05; color: var(--paper);
  font-variant-numeric: tabular-nums; display: block;
}
.kpi .sub { font-size: 12px; color: var(--fog); margin-top: 4px; }
.rail .kpis { grid-auto-flow: row; grid-auto-columns: auto; margin: 0; padding: 0; border: 0; background: transparent; }
.rail .kpi { border-right: 0; border-bottom: 1px solid var(--line-soft); padding: 8px 0; }
.rail .kpi:last-child { border-bottom: 0; }
.rail .kpi .val, .rail .kpi .v { font-size: 15px; letter-spacing: -0.01em; }

/* card -> hairline container, no ambient shadow */
.card, .panel {
  background: var(--carbon); border: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: none;
  padding: var(--sp-24);
}
.card.flush { padding: 0; overflow: hidden; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-16); padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.card-head h3 { font-size: 13.5px; font-weight: 510; color: var(--mist); margin: 0; }
.card-body { padding: var(--sp-24); }
.card h3 { font-size: 13.5px; font-weight: 510; color: var(--mist); }

/* tables -> the console instrument */
table { width: 100%; border-collapse: collapse; }
table th, table td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--void);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ash);
  text-align: left; white-space: nowrap;
}
table thead th.num { text-align: right; }
table tbody tr { transition: background var(--t-fast) var(--ease-ui); }
table tbody tr:hover td { background: rgba(255,255,255,.022); }
table tbody tr:last-child td { border-bottom: 0; }
table td { font-size: 13.5px; color: var(--mist); vertical-align: middle; }
table td.num { text-align: right; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
table td .mono, table td.mono { font-family: var(--mono); font-size: 12.5px; }

/* neutralise app.css's centred empty state */
.empty { text-align: left; padding: var(--sp-32) var(--sp-24);
         border: 1px dashed var(--line-strong); border-radius: var(--r-card);
         background: transparent; color: var(--fog); }
.empty .t { font-weight: 510; color: var(--mist); font-size: 14px; margin-bottom: 5px; }
.empty .d { font-size: 13.5px; margin-bottom: var(--sp-16); max-width: 62ch; }

/* buttons: the console's own sizes, on the shared accent */
.btn { border-radius: var(--r-btn); font-weight: 500; }
.btn.sm { padding: 5px 11px; font-size: 12.5px; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--fog); }
.btn.ghost:hover { color: var(--paper); border-color: var(--line-strong); background: rgba(255,255,255,.04); }
.btn.block { width: 100%; justify-content: center; }

/* pills keep one vocabulary across every page */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; font-weight: 450; line-height: 1;
  padding: 3px 8px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--fog);
  white-space: nowrap;
}

/* forms */
.field { margin-bottom: var(--sp-16); }
.field label { display: block; font-size: 12px; font-weight: 500; color: var(--fog); margin-bottom: 6px; }
input, select, textarea {
  border-radius: var(--r-btn); border: 1px solid var(--line);
  background: var(--void); color: var(--mist);
  padding: 7px 10px; font-size: 13.5px; width: 100%;
  transition: border-color var(--t-fast) var(--ease-ui);
}
input:focus, select:focus, textarea:focus { border-color: var(--accent-line); outline: none; }
input::placeholder { color: var(--ash); }

/* scroll containers */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.rail-list .r { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.rail-list .r:last-child { border-bottom: 0; }
.rail-list .r .k { font-size: 12.5px; color: var(--fog); }
.rail-list .r .v { font-family: var(--mono); font-size: 12.5px; color: var(--mist);
                   font-variant-numeric: tabular-nums; }

/* ============================================================ nav at 8 items ====
   The admin nav grew to EIGHT destinations when Settings was added, and the bar was
   already at its limit: brand + nav + "My console" + "Sign out" need ~1015px to sit on
   one line. Below that the nav (a nowrap flex row) could not shrink, so its labels were
   squeezed and pushed under the action buttons — the "menu doesn't fit" report.

   Two changes, in order:
     1. tighter item metrics, which buys ~45px and keeps the single-line bar at the
        widths people actually use on a laptop;
     2. below 1120px the nav drops to its own full-width row (topbar becomes two rows,
        brand + actions on the first). All eight destinations stay visible and reachable
        — wrapping the *bar* is honest, clipping the *labels* is not. The threshold keeps
        headroom for a longer brand name, now that the brand is an editable setting.

   `.spacer` is hidden in two-row mode: it exists to push the actions right in one-row
   mode, and left in place it would collapse the first row to nothing. */

.nav { flex-wrap: nowrap; min-width: 0; }
.nav a { padding: 6px 10px; }

@media (max-width: 1300px) {
  .topbar-in { gap: var(--sp-12); }
  .nav { gap: 1px; }
  .nav a { padding: 6px 8px; font-size: 13px; }
}

@media (max-width: 1120px) {
  .topbar-in {
    height: auto;
    flex-wrap: wrap;
    row-gap: 2px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .topbar .spacer { display: none; }
  .topbar .actions { margin-left: auto; }
  .nav {
    order: 3;
    flex-basis: 100%;
    /* Eight items still exceed a phone width: scroll the row rather than wrap or clip.
       Scrollbar hidden so the bar keeps a single visual height. */
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
}

@media (max-width: 420px) {
  .nav a { padding: 6px 7px; font-size: 12.5px; }
}

/* ============================================================ console hamburger ====
   Three states, in order of width:

     > 1120px   one-line bar, all destinations inline
     768–1120   nav drops to its own row (all destinations still visible)
     <= 768px   HAMBURGER. The nav moves behind the toggle button.

   Why a hamburger on phones rather than the scrolling row it replaced: eight items need
   ~540px and a phone gives ~342px, so the row could only ever be partially visible — you
   had to swipe a menu to discover that Audit and Settings existed. A panel that lists all
   eight with full-width tap targets is honest about being a menu.

   LOAD ORDER MATTERS: app.css carries an older `max-width: 860px` block that wraps the bar
   and lets the nav fill its own row. console.css loads last, so these rules win — but every
   property that block sets must be restated here or it leaks back through. */

.nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--line); border-radius: var(--r-btn);
  background: transparent; color: var(--mist); box-shadow: none;
}
.nav-toggle:hover { background: var(--graphite); color: var(--paper); }
.nav-toggle[aria-expanded="true"] {
  color: var(--accent); border-color: var(--accent);
  background: var(--accent-wash, rgba(232,160,85,.12));
}
/* Two glyphs, one shown: an open menu that still displays "≡" gives no feedback that
   it is open, nor that tapping again closes it. */
.nav-toggle .ic-close { display: none; }
.nav-toggle[aria-expanded="true"] .ic-bars { display: none; }
.nav-toggle[aria-expanded="true"] .ic-close { display: block; }
.nav-mobile-actions { display: none; }

@media (max-width: 768px) {
  /* one-line bar again: brand + hamburger, nothing else */
  .topbar-in {
    flex-wrap: nowrap;
    height: 56px;
    row-gap: 0;
    padding-top: 0;
    padding-bottom: 0;
    gap: var(--sp-12);
  }
  .topbar .spacer { display: block; }    /* undo the two-row `display: none` */
  .topbar .actions { display: none; }    /* their items live in the panel below */
  /* 44x44: measured 36x40 before, i.e. the tightest target on the screen and the only
     one below the 44px touch guideline — while the rows it opens are 49px. */
  .nav-toggle { display: inline-flex; width: 44px; height: 44px; }

  .nav { display: none; }
  .nav.open {
    display: flex;
    position: absolute;
    top: 56px; left: 0; right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 8px;
    overflow: visible;                   /* the two-row rule set overflow-x: auto */
    background: var(--carbon);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 34px rgba(0,0,0,.45);
    z-index: 61;
  }
  .nav.open a {
    padding: 13px 12px;
    border-radius: var(--r-sm);
    font-size: 14.5px;
  }
  /* the desktop underline marker is drawn with left/right insets tuned for a horizontal
     row; stacked, it belongs along the bottom edge of the row instead */
  .nav.open a.active::after { left: 12px; right: 12px; bottom: 2px; }

  .nav-mobile-actions {
    display: block;
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 6px;
  }
  .nav-mobile-actions a,
  .nav-mobile-actions button {
    display: block; width: 100%;
    padding: 13px 12px; margin: 0;
    text-align: left; font: inherit; font-size: 14.5px;
    color: var(--mist); background: transparent;
    border: 0; border-radius: var(--r-sm); box-shadow: none;
    cursor: pointer;
  }
  .nav-mobile-actions a:hover,
  .nav-mobile-actions button:hover { background: var(--graphite); color: var(--paper); }
  .nav-mobile-actions form { margin: 0; }
}

@media (max-width: 420px) {
  .nav.open a, .nav-mobile-actions a, .nav-mobile-actions button { padding: 12px 10px; }
}