/* ===========================================================================
   Epoch Checkor — console styling.

   Governing rule: MONO IS THE SYSTEM'S VOCABULARY, SANS IS THE CUSTOMER'S DATA.
   Labels, column heads, status words, plans and licence keys are set in the
   system mono, uppercase and tracked. Everything that came from a customer —
   company names, emails, dates, figures — is set in the system sans. The
   licence key (EPCH-XXXX-XXXX-XXXX) is the artifact this product revolves
   around, which is why mono is native here rather than decorative.

   Colour: a cool slate ground with an IRIS accent. Iris is chosen because the
   four fixed status colours (green / amber / orange / red) occupy the whole
   warm half of the wheel, so an iris accent can never be mistaken for a
   status. Light and dark are two selected sets, not an inversion.

   Status colours are fixed across both modes and always ship with an icon and
   the word. No status is ever carried by colour alone.
   =========================================================================== */

:root {
  color-scheme: light;

  /* Ground */
  --plane:          #ecedf3;
  --surface-1:      #fbfbfe;
  --surface-2:      #e6e8f1;
  --surface-3:      #f3f4f9;

  /* Ink */
  --text-primary:   #14161f;
  --text-secondary: #4a5065;
  --muted:          #6c7285;   /* 4.6:1 on surface-1 */

  /* Lines */
  --grid:           #dee1eb;
  --baseline:       #c2c7d6;
  --border:         rgba(20, 22, 31, 0.13);
  --ring:           rgba(74, 58, 217, 0.22);

  /* Iris accent ramp */
  --accent:         #4a3ad9;
  --accent-strong:  #372aad;
  --accent-wash:    #e9e7fb;
  --meter-track:    #d3cff7;   /* lighter step of the accent's own ramp */
  --on-accent:      #ffffff;

  /* Status palette — fixed, never themed. */
  --good:           #0ca30c;
  --warning:        #fab219;
  --serious:        #ec835a;
  --critical:       #d03b3b;
  --good-text:      #006300;   /* the good mark, stepped for a light ground */

  --radius:         5px;
  --radius-sm:      3px;
  --radius-pill:    999px;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* Dark set. Declared twice on purpose: the media block follows the OS, the
   [data-theme] block follows the in-page toggle and must win both ways.
   Keep the two blocks in sync. */
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;

    --plane:          #0a0b10;
    --surface-1:      #15161e;
    --surface-2:      #1e2029;
    --surface-3:      #101219;

    --text-primary:   #f2f3f9;
    --text-secondary: #b6bcce;
    --muted:          #8a90a4;

    --grid:           #23252f;
    --baseline:       #333744;
    --border:         rgba(255, 255, 255, 0.11);
    --ring:           rgba(154, 146, 252, 0.3);

    --accent:         #9a92fc;
    --accent-strong:  #b9b3fd;
    --accent-wash:    #22214a;
    --meter-track:    #332c78;
    --on-accent:      #0a0b10;

    --good-text:      #0ca30c;
  }
}

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

  --plane:          #0a0b10;
  --surface-1:      #15161e;
  --surface-2:      #1e2029;
  --surface-3:      #101219;

  --text-primary:   #f2f3f9;
  --text-secondary: #b6bcce;
  --muted:          #8a90a4;

  --grid:           #23252f;
  --baseline:       #333744;
  --border:         rgba(255, 255, 255, 0.11);
  --ring:           rgba(154, 146, 252, 0.3);

  --accent:         #9a92fc;
  --accent-strong:  #b9b3fd;
  --accent-wash:    #22214a;
  --meter-track:    #332c78;
  --on-accent:      #0a0b10;

  --good-text:      #0ca30c;
}

/* ---------------------------------------------------------------------------
   Base
   --------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;      /* the body never scrolls sideways; tables do */
}

body {
  margin: 0;
  background: var(--plane);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

svg { display: block; flex: none; }

/* The mono utility register: labels, column heads, status words, plans, keys. */
.eyebrow,
.panel-title,
.tag,
.role-badge,
.field > label,
thead th,
.fact-key,
.stat-label,
.hero-label,
.disclosure > summary {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
  font-size: 0.6875rem;
}

h1, h2, h3 { margin: 0; line-height: 1.2; font-weight: 600; }
h1 {
  font-size: 1.625rem;
  letter-spacing: -0.02em;
}
h2, h3 { font-size: 0.9375rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }

p { margin: 0; }

.dim { color: var(--muted); }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Top bar. A divided rail: brand · sections · account.
   Sections are underlined tabs, not filled pills — the underline is the only
   thing that moves, so the bar reads as one continuous strip.
   --------------------------------------------------------------------------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
}
.topbar-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: stretch;
  gap: 20px;
  min-height: 52px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-primary);
  white-space: nowrap;
  align-self: center;
  padding-right: 20px;
  border-right: 1px solid var(--border);
}
.brand:hover { text-decoration: none; }
.brand:hover .brand-name { color: var(--accent); }
.brand-name {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
/* The key mark: the product is a key registry, so the brand mark is a key. */
.keymark { color: var(--accent); }

.nav {
  display: flex;
  gap: 2px;
  margin-right: auto;
  align-items: stretch;
  min-width: 0;
}
.nav a {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.nav a:hover { color: var(--text-primary); text-decoration: none; border-bottom-color: var(--baseline); }
.nav a.is-current { color: var(--text-primary); border-bottom-color: var(--accent); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 12px;
  align-self: center;
  min-width: 0;
}
.whoami {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  min-width: 0;
}
.whoami-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }

.role-badge {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-secondary);
  font-size: 0.625rem;
  letter-spacing: 0.09em;
}
.role-admin { color: var(--text-primary); border-color: var(--baseline); }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }

/* The theme button shows the theme it will switch TO, so the icon is a
   promise rather than a status. Driven by CSS in all three states —
   OS-dark, stamped light, stamped dark. */
.theme-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) .theme-sun { display: block; }
  :root:where(:not([data-theme="light"])) .theme-moon { display: none; }
}
:root[data-theme="dark"] .theme-sun { display: block; }
:root[data-theme="dark"] .theme-moon { display: none; }
:root[data-theme="light"] .theme-sun { display: none; }
:root[data-theme="light"] .theme-moon { display: block; }

/* ---------------------------------------------------------------------------
   Page scaffold
   --------------------------------------------------------------------------- */
.page { max-width: 1240px; margin: 0 auto; padding: 28px 24px 80px; }
.page-bare { max-width: 420px; padding-top: 10vh; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.page-head > div { min-width: 0; }
.eyebrow {
  display: block;
  color: var(--muted);
  margin-bottom: 7px;
}
.lede {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.875rem;
  max-width: 68ch;
}
.lede a { color: var(--accent); }

/* Panels separate by value against a darker plane, not by shadow. */
.panel {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  min-width: 0;
}
.panel:last-child { margin-bottom: 0; }
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.panel-head > div { min-width: 0; }
.panel-title { color: var(--text-primary); }
.panel-note {
  margin-top: 5px;
  font-size: 0.8125rem;
  color: var(--text-secondary);
  max-width: 62ch;
}
.panel-body { padding: 18px; }
.panel-body > .facts + .form-actions { margin-top: 18px; }

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}
.split > * { min-width: 0; }

/* ---------------------------------------------------------------------------
   The fleet band — the signature of the overview.

   One hero figure, then the whole customer base as a single stacked bar
   split by status, with 2px surface gaps doing the separating. The legend
   beside it is the dependable channel: mark + word + count on every row.
   --------------------------------------------------------------------------- */
.band {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 16px;
  overflow: hidden;
}
.band-top {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 28px;
  padding: 22px 24px 24px;
}

.hero-label { display: block; color: var(--muted); }
.hero-figure {
  /* Proportional figures: this is a standalone number, not a column. */
  font-size: 3.5rem;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.035em;
  margin: 10px 0 6px;
}
.hero-note { font-size: 0.8125rem; color: var(--text-secondary); }

.fleet {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 13px;
  min-width: 0;
}
.fleet-bar {
  display: flex;
  gap: 2px;                  /* surface gap, not a stroke */
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--surface-2);
}
.fleet-seg { min-width: 3px; border-radius: 1px; }
.fleet-seg-good     { background: var(--good); }
.fleet-seg-warning  { background: var(--warning); }
.fleet-seg-serious  { background: var(--serious); }
.fleet-seg-critical { background: var(--critical); }

.fleet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legend-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
}
.legend-mark-good     { color: var(--good-text); }
.legend-mark-warning  { color: var(--warning); }
.legend-mark-serious  { color: var(--serious); }
.legend-mark-critical { color: var(--critical); }
.legend-word { color: var(--text-secondary); }
.legend-count { font-weight: 600; }
.legend-row.is-zero .legend-count,
.legend-row.is-zero .legend-word { color: var(--muted); font-weight: 400; }

.band-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--border);
  background: var(--surface-3);
}
.band-foot > div {
  flex: 1 1 190px;
  padding: 13px 24px;
  border-right: 1px solid var(--border);
}
.band-foot > div:last-child { border-right: 0; }
.stat-label { display: block; color: var(--muted); margin-bottom: 4px; }
.stat-value { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
thead th {
  text-align: left;
  color: var(--muted);
  padding: 9px 16px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--grid);
  vertical-align: middle;
}
/* The move-company control is a compact inline control, never a full-width
   field, or it pushes the row's other actions out of the table. */
td.actions select {
  width: auto;
  max-width: 160px;
  padding: 5px 8px;
  font-size: 0.8125rem;
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-3); }
/* Columns of figures align; standalone big numbers stay proportional. */
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.actions { text-align: right; white-space: nowrap; }
td.actions > * + * { margin-left: 4px; }
.cell-title { font-weight: 600; }
.cell-sub {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: var(--muted);
}
.empty {
  color: var(--text-secondary);
  font-size: 0.875rem;
  padding: 30px 20px;
  text-align: center;
}
.empty-mark { color: var(--muted); margin: 0 auto 8px; }

/* ---------------------------------------------------------------------------
   Tags: status and plan. Status is a mark + the word, in the mono register.
   --------------------------------------------------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-primary);
  white-space: nowrap;
  font-size: 0.625rem;
  letter-spacing: 0.08em;
}
/* The mark wears the status colour; the word never does. */
.tag-mark { flex: none; }
.tag-good     .tag-mark { color: var(--good-text); }
.tag-warning  .tag-mark { color: var(--warning); }
.tag-serious  .tag-mark { color: var(--serious); }
.tag-critical .tag-mark { color: var(--critical); }
.tag-good     { box-shadow: inset 2px 0 0 var(--good); }
.tag-warning  { box-shadow: inset 2px 0 0 var(--warning); }
.tag-serious  { box-shadow: inset 2px 0 0 var(--serious); }
.tag-critical { box-shadow: inset 2px 0 0 var(--critical); }

/* Plan is ordinal — free < standard < pro < enterprise — so the tag carries
   a tick per tier alongside the word. Monochrome: no palette involved. */
.tag-plan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  white-space: nowrap;
}
.tier { display: inline-flex; gap: 2px; flex: none; }
.tier i {
  width: 3px;
  height: 11px;
  border-radius: 1px;
  background: var(--grid);
}
.tier i.on { background: var(--accent); }

/* ---------------------------------------------------------------------------
   Seat meter. The fill carries severity; the track is a lighter step of the
   accent's own ramp. The used / limit figure is the real channel — the meter
   never carries the state alone.
   --------------------------------------------------------------------------- */
.seats { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.seats-num {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  min-width: 6ch;
}
.meter {
  position: relative;
  display: inline-block;
  width: 86px;
  height: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--meter-track);
  overflow: hidden;
}
.meter-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.meter-warning  .meter-fill { background: var(--warning); }
.meter-critical .meter-fill { background: var(--critical); }
.seats-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.seats-flag .tag-mark { color: var(--critical); }

/* ---------------------------------------------------------------------------
   Runway. Used only where a real fixed domain exists: the 30-day window before
   a licence lapses. The bar fills toward the deadline, so length and severity
   colour always agree; the day count beside it is the label.
   --------------------------------------------------------------------------- */
.runway { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.runway-days {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  min-width: 5ch;
  text-align: right;
}
.runway-track {
  position: relative;
  width: 104px;
  height: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--meter-track);
  overflow: hidden;
}
.runway-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: var(--radius-pill);
  background: var(--warning);
}
.runway-critical .runway-fill { background: var(--critical); }

/* ---------------------------------------------------------------------------
   Licence keys. The artifact, given artifact treatment.
   --------------------------------------------------------------------------- */
.keyrow { display: inline-flex; align-items: center; gap: 6px; }
.key {
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  white-space: nowrap;
}
.key-revoked { text-decoration: line-through; color: var(--muted); }
.key-block {
  display: block;
  white-space: pre-wrap;
  padding: 14px 16px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------------------
   Forms & buttons
   --------------------------------------------------------------------------- */
.field { margin-bottom: 14px; min-width: 0; }
.field > label {
  display: block;
  margin-bottom: 6px;
  color: var(--text-secondary);
}
.hint {
  display: block;
  margin-top: 5px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}
label .hint { display: inline; margin: 0 0 0 6px; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="number"], input[type="search"],
select, textarea {
  width: 100%;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.875rem;
  color: var(--text-primary);
  background: var(--surface-1);
  border: 1px solid var(--baseline);
  border-radius: var(--radius-sm);
}
input::placeholder { color: var(--muted); }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--ring);
  outline: none;
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
}
textarea { min-height: 70px; resize: vertical; }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: start;
}
.form-actions { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.btn:hover { background: var(--accent-strong); text-decoration: none; }
.btn-secondary {
  background: var(--surface-1);
  color: var(--text-primary);
  border-color: var(--baseline);
}
.btn-secondary:hover { background: var(--surface-2); color: var(--text-primary); }
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn-danger { background: transparent; color: var(--critical); border-color: var(--border); }
.btn-danger:hover { background: var(--critical); color: #ffffff; border-color: var(--critical); }
.btn-sm { padding: 6px 10px; font-size: 0.625rem; }
.btn-xs { padding: 4px 7px; font-size: 0.625rem; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.inline-form { display: inline; }

.filters { display: flex; width: 100%; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.filters .field { margin-bottom: 0; }
.filters .btn { margin-bottom: 1px; }
.filters input[type="search"] { min-width: 0; }
.filters-grow { flex: 0 1 360px; }

/* ---------------------------------------------------------------------------
   Flash messages
   --------------------------------------------------------------------------- */
.flashes { display: grid; gap: 8px; margin-bottom: 20px; }
.flash {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--surface-1);
  font-size: 0.875rem;
}
.flash-mark { margin-top: 2px; }
.flash-good     { box-shadow: inset 3px 0 0 var(--good); }
.flash-good     .flash-mark { color: var(--good-text); }
.flash-warning  { box-shadow: inset 3px 0 0 var(--warning); }
.flash-warning  .flash-mark { color: var(--warning); }
.flash-critical { box-shadow: inset 3px 0 0 var(--critical); }
.flash-critical .flash-mark { color: var(--critical); }

/* ---------------------------------------------------------------------------
   Facts list — a two-column grid so a long value can never collide with its
   label the way a justified row does.
   --------------------------------------------------------------------------- */
.facts { margin: 0; display: grid; gap: 0; max-width: 640px; }
.facts > div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--grid);
}
.facts > div:first-child { padding-top: 0; }
.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
.fact-key { color: var(--muted); }
/* An API field name is an identifier, not vocabulary: mono, but never shouted. */
.fact-code { text-transform: none; letter-spacing: 0.02em; }
.facts dd { margin: 0; font-size: 0.875rem; min-width: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------------------
   Lookup verdict. The answer is a sentence in a text token; the status colour
   sits in the mark beside it and in the tag, never in the words.
   --------------------------------------------------------------------------- */
.verdict {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
}
.verdict-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.verdict-good     .verdict-mark { color: var(--good-text); box-shadow: inset 0 0 0 1px var(--good); }
.verdict-serious  .verdict-mark { color: var(--serious); box-shadow: inset 0 0 0 1px var(--serious); }
.verdict-critical .verdict-mark { color: var(--critical); box-shadow: inset 0 0 0 1px var(--critical); }
.verdict-text { min-width: 0; }
.verdict-answer { font-size: 1.1875rem; letter-spacing: -0.01em; }
.verdict-email {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.verdict-note { margin-top: 8px; font-size: 0.8125rem; color: var(--text-secondary); max-width: 56ch; }
.verdict-tag { margin-left: auto; padding-top: 3px; }
.verdict-body { border-top: 1px solid var(--border); }

/* Attention rows */
.stack { list-style: none; margin: 0; padding: 0; }
.stack li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--grid);
  font-size: 0.875rem;
}
.stack li:last-child { border-bottom: 0; }
.stack-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Disclosure */
.disclosure { border-top: 1px solid var(--border); }
.disclosure:first-child { border-top: 0; }
.disclosure > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 18px;
  cursor: pointer;
  color: var(--text-secondary);
  list-style: none;
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary:hover { color: var(--text-primary); }
.disclosure[open] > summary { color: var(--text-primary); border-bottom: 1px solid var(--grid); }
.disclosure > summary .chev { transition: transform 0.15s ease; color: var(--muted); }
.disclosure[open] > summary .chev { transform: rotate(90deg); }

.prose { font-size: 0.8125rem; color: var(--text-secondary); max-width: 70ch; }
.prose code {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--surface-2);
  border-radius: 2px;
  padding: 1px 4px;
}
.prose + .prose, .prose + .key-block, .key-block + .prose { margin-top: 12px; }

/* ---------------------------------------------------------------------------
   The gate: sign-in and the read-only wall.
   --------------------------------------------------------------------------- */
.gate {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
/* A keyed head band, so the sign-in page says what this console is for
   before asking for anything. */
.gate-head {
  padding: 22px 26px 24px;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--border);
}
.gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--accent);
  margin-bottom: 18px;
}
.gate-brand span {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.gate h1 { font-size: 1.375rem; }
.gate-note { margin-top: 8px; font-size: 0.875rem; color: var(--text-secondary); }
.gate-body { padding: 24px 26px 26px; }
.gate form .btn { width: 100%; }
.gate-foot {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--grid);
  font-size: 0.75rem;
  color: var(--muted);
}

/* ---------------------------------------------------------------------------
   Responsive. Usable at 640px: the nav becomes one scrollable strip, the
   band stacks, wide tables scroll inside their own container.
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .band-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero-rule { display: none; }
}

@media (max-width: 700px) {
  .topbar-inner { padding: 8px 16px; gap: 10px; min-height: 0; }
  .brand { border-right: 0; padding-right: 0; }
  .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-top: 1px solid var(--grid);
    padding-top: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 7px 10px 8px; }
  .topbar-user { margin-left: auto; }
  .whoami-email { max-width: 14ch; }

  .page { padding: 20px 16px 60px; }
  .page-bare { padding-top: 5vh; }
  h1 { font-size: 1.375rem; }
  .hero-figure { font-size: 2.75rem; }
  .band-top { padding: 18px 18px 20px; }
  .band-foot > div { flex: 1 1 46%; padding: 11px 18px; border-right: 0; }
  .band-foot > div:nth-child(odd) { border-right: 1px solid var(--border); }
  .band-foot > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .panel-head, .panel-body { padding: 14px 16px; }
  .stack li { padding: 11px 16px; }
  thead th, tbody td { padding: 9px 12px; }
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .filters .field, .filters-grow { flex: 1 1 100%; }
  .gate-head { padding: 18px 20px 20px; }
  .gate-body { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}