/* ==========================================================================
   app.css — THE one hand-written stylesheet (B08 §1.2).
   Design tokens per B08 §2 (complete, both themes), components §2.5,
   responsive rules §1.3 (single breakpoint 880 px), badge grammar §2.3,
   chrome §2.4, print stylesheet. No second stylesheet, no inline styles
   (CSP), no framework, no external asset of any kind — the B08 §1.2
   CI grep for remote references must stay clean, comments included.
   Light is default; dark follows prefers-color-scheme, and an explicit
   html[data-theme] attribute overrides in BOTH directions (the theme
   toggle probe in bead 0.9's battery flips it).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens — §2.1 type + spacing, §2.2 color (light default)
   -------------------------------------------------------------------------- */
:root {
  /* type scale (px values per §2.1) */
  --fs-7: 32px;  /* stat-tile value */
  --fs-6: 28px;  /* h1 — exactly one per page */
  --fs-5: 22px;  /* h2 */
  --fs-4: 18px;  /* h3 */
  --fs-3: 16px;  /* prose */
  --fs-2: 14px;  /* body default — tables, forms, nav */
  --fs-1: 13px;  /* dense tables, meta */
  --fs-0: 12px;  /* captions, badges */
  --font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --lh-body: 1.5;
  --lh-heading: 1.25;
  --lh-stat: 1.1;

  /* spacing — 4 px grid */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius-control: 4px; /* controls, badges */
  --radius-card: 8px;    /* cards, tables */

  /* layout (§1.3) */
  --sidebar-w: 232px;
  --content-max: 1200px;

  /* color roles — light (§2.2) */
  --bg: #f6f6f3;
  --surface: #fcfcfb;
  --surface-inset: #f0efec;
  --text-1: #171715;
  --text-2: #52514e;
  --text-3: #6d6c66;
  --link: #1c5cab;
  --link-hover: #104281;
  --success-text: #175c17;
  --danger-text: #9c1f1f;
  --border: #e1e0d9;
  --border-strong: #c3c2b7;
  --focus: #2a78d6;
  --btn-primary-bg: #1c5cab;
  --btn-primary-text: #ffffff;
  --btn-danger-bg: #a92222;
  --btn-danger-text: #ffffff;
  --solid-critical-bg: #a92222;
  --solid-critical-text: #ffffff;

  /* semantic tints (badge/flash bg/text pairs — light) */
  --tint-good-bg: #dff1df;     --tint-good-text: #175c17;
  --tint-info-bg: #ddeafb;     --tint-info-text: #17518f;
  --tint-warning-bg: #faeecb;  --tint-warning-text: #6b4d00;
  --tint-serious-bg: #fbe3d7;  --tint-serious-text: #8a3a10;
  --tint-critical-bg: #f9dcdc; --tint-critical-text: #9c1f1f;
  --tint-violet-bg: #e7e3f7;   --tint-violet-text: #46389b;
  --tint-teal-bg: #d8f0e9;     --tint-teal-text: #0d5c44;
  --tint-neutral-bg: #eceae4;  --tint-neutral-text: #4c4b46;
  --tint-slate-bg: #e2e7ee;    --tint-slate-text: #3f4c5e;

  /* chart series (cap 3 — §2.2) */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
}

/* dark tokens, twice: media default + explicit data-theme override.
   :root[data-theme="light"] must win over the media query, and
   :root[data-theme="dark"] must win over the light default. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121210;
    --surface: #1a1a19;
    --surface-inset: #242422;
    --text-1: #f2f1ea;
    --text-2: #c3c2b7;
    --text-3: #a3a299;
    --link: #6da7ec;
    --link-hover: #9ec5f4;
    --success-text: #86d986;
    --danger-text: #f09a9a;
    --border: #2c2c2a;
    --border-strong: #3a3a37;
    --focus: #3987e5;
    --solid-critical-bg: #c62828;
    --solid-critical-text: #ffffff;
    --tint-good-bg: #10300f;     --tint-good-text: #86d986;
    --tint-info-bg: #10263f;     --tint-info-text: #8fbdf2;
    --tint-warning-bg: #33270a;  --tint-warning-text: #e5b95e;
    --tint-serious-bg: #371a0e;  --tint-serious-text: #f0a381;
    --tint-critical-bg: #3a1313; --tint-critical-text: #f09a9a;
    --tint-violet-bg: #201c3d;   --tint-violet-text: #b3aaf0;
    --tint-teal-bg: #0d2b23;     --tint-teal-text: #6fd3b4;
    --tint-neutral-bg: #2a2a27;  --tint-neutral-text: #c0bfb6;
    --tint-slate-bg: #1d242e;    --tint-slate-text: #a9bbd1;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
  }
}
:root[data-theme="dark"] {
  --bg: #121210;
  --surface: #1a1a19;
  --surface-inset: #242422;
  --text-1: #f2f1ea;
  --text-2: #c3c2b7;
  --text-3: #a3a299;
  --link: #6da7ec;
  --link-hover: #9ec5f4;
  --success-text: #86d986;
  --danger-text: #f09a9a;
  --border: #2c2c2a;
  --border-strong: #3a3a37;
  --focus: #3987e5;
  --solid-critical-bg: #c62828;
  --solid-critical-text: #ffffff;
  --tint-good-bg: #10300f;     --tint-good-text: #86d986;
  --tint-info-bg: #10263f;     --tint-info-text: #8fbdf2;
  --tint-warning-bg: #33270a;  --tint-warning-text: #e5b95e;
  --tint-serious-bg: #371a0e;  --tint-serious-text: #f0a381;
  --tint-critical-bg: #3a1313; --tint-critical-text: #f09a9a;
  --tint-violet-bg: #201c3d;   --tint-violet-text: #b3aaf0;
  --tint-teal-bg: #0d2b23;     --tint-teal-text: #6fd3b4;
  --tint-neutral-bg: #2a2a27;  --tint-neutral-text: #c0bfb6;
  --tint-slate-bg: #1d242e;    --tint-slate-text: #a9bbd1;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--text-1);
  background: var(--bg);
}

h1, h2, h3 { line-height: var(--lh-heading); color: var(--text-1); }
h1 { font-size: var(--fs-6); margin: 0 0 var(--sp-5); }
h2 { font-size: var(--fs-5); margin: var(--sp-6) 0 var(--sp-4); }
h3 { font-size: var(--fs-4); margin: var(--sp-5) 0 var(--sp-3); }
p { margin: 0 0 var(--sp-4); }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}
.num { font-variant-numeric: tabular-nums; text-align: right; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--surface);
  color: var(--text-1);
  padding: var(--sp-2) var(--sp-3);
  z-index: 100;
}
.skip-link:focus { left: var(--sp-2); }

/* --------------------------------------------------------------------------
   3. Chrome (§2.4, §1.3) — sidebar above 880 px, top bar below
   -------------------------------------------------------------------------- */
.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "topbar topbar"
    "nav    main"
    "nav    footer";
  min-height: 100vh;
}
.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 600; }
.nav-toggle-box { position: absolute; opacity: 0; pointer-events: none; }
.nav-toggle { display: none; }

.sidenav {
  grid-area: nav;
  padding: var(--sp-4);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.nav-group { margin-bottom: var(--sp-5); }
.nav-group-label {
  display: block;
  font-size: var(--fs-0);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-bottom: var(--sp-2);
}
.sidenav a {
  display: block;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--radius-control);
  text-decoration: none;
  color: var(--text-1);
  min-height: 24px; /* touch target floor (§1.3) */
}
.sidenav a[aria-current="page"] {
  background: var(--surface-inset);
  font-weight: 600;
}
.sidenav a:hover { background: var(--surface-inset); }
.nav-logout { margin-top: var(--sp-4); }

main#main {
  grid-area: main;
  padding: var(--sp-5) var(--sp-6);
  max-width: var(--content-max);
  width: 100%;
}
main#main.standalone {
  grid-area: auto;
  margin: 0 auto;
  max-width: 44rem;
  padding: var(--sp-6) var(--sp-4);
}

.page-footer {
  grid-area: footer;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6);
  border-top: 1px solid var(--border);
  color: var(--text-3);
  font-size: var(--fs-1);
}

.breadcrumbs { font-size: var(--fs-1); color: var(--text-3); margin-bottom: var(--sp-3); }
.breadcrumbs a { color: var(--text-3); }

/* --------------------------------------------------------------------------
   4. Components (§2.5)
   -------------------------------------------------------------------------- */

/* C-2 badge — §2.3 grammar: label text IS the state; four loudness
   levels: solid (machine fail-closed only), tint, outline, dashed. */
.badge {
  display: inline-block;
  font-size: var(--fs-0);
  line-height: 1.4;
  padding: 1px var(--sp-2);
  border-radius: var(--radius-control);
  white-space: nowrap;
}
.badge-good     { background: var(--tint-good-bg);     color: var(--tint-good-text); }
.badge-info     { background: var(--tint-info-bg);     color: var(--tint-info-text); }
.badge-warning  { background: var(--tint-warning-bg);  color: var(--tint-warning-text); }
.badge-serious  { background: var(--tint-serious-bg);  color: var(--tint-serious-text); }
.badge-critical { background: var(--tint-critical-bg); color: var(--tint-critical-text); }
.badge-violet   { background: var(--tint-violet-bg);   color: var(--tint-violet-text); }
.badge-teal     { background: var(--tint-teal-bg);     color: var(--tint-teal-text); }
.badge-neutral  { background: var(--tint-neutral-bg);  color: var(--tint-neutral-text); }
.badge-slate    { background: var(--tint-slate-bg);    color: var(--tint-slate-text); }
.badge-solid-critical { background: var(--solid-critical-bg); color: var(--solid-critical-text); font-weight: 600; }
.badge-neutral-outline, .badge-outline {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-strong);
}
.badge-test {
  background: transparent;
  color: var(--tint-violet-text);
  border: 1px solid var(--tint-violet-text);
}
.badge-unclassifiable {
  background: transparent;
  color: var(--text-2);
  border: 1px dashed var(--border-strong);
}

/* C-4 flash */
.flash {
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-control);
  margin-bottom: var(--sp-4);
}
.flash-info    { background: var(--tint-info-bg);     color: var(--tint-info-text); }
.flash-success { background: var(--tint-good-bg);     color: var(--tint-good-text); }
.flash-warning { background: var(--tint-warning-bg);  color: var(--tint-warning-text); }
.flash-error, .flash-fail { background: var(--tint-critical-bg); color: var(--tint-critical-text); }

/* C-5 form field */
.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-1);
}
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit;
  color: var(--text-1);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  padding: var(--sp-2) var(--sp-3);
  min-height: 24px;
}
.hint { font-size: var(--fs-1); color: var(--text-3); margin: var(--sp-1) 0 0; }
.field-error { font-size: var(--fs-1); color: var(--danger-text); margin: var(--sp-1) 0 0; }
.form-narrow { max-width: 26rem; }
.inline-form { display: inline; }

/* buttons */
.btn {
  display: inline-block;
  font: inherit;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  padding: var(--sp-2) var(--sp-4);
  min-height: 24px;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn-danger  { background: var(--btn-danger-bg);  color: var(--btn-danger-text); }
.btn-quiet {
  background: transparent;
  color: var(--link);
  border-color: var(--border-strong);
}
.btn-quiet:hover { color: var(--link-hover); }

/* C-1 data table */
.table-wrap { overflow-x: auto; } /* the page body never scrolls sideways (§1.3) */
table.data-table {
  border-collapse: collapse;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}
table.data-table caption {
  caption-side: top;
  text-align: left;
  font-size: var(--fs-1);
  color: var(--text-3);
  padding: var(--sp-2) 0;
}
table.data-table th {
  position: sticky;
  top: 0;
  background: var(--surface-inset);
  text-align: left;
  font-size: var(--fs-1);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border-strong);
}
table.data-table td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

/* C-3 stat tile */
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-4);
}
.stat-tile .stat-label { font-size: var(--fs-1); color: var(--text-3); }
.stat-tile .stat-value {
  font-size: var(--fs-7);
  line-height: var(--lh-stat);
  font-variant-numeric: tabular-nums;
}
.stat-tile .stat-footnote { font-size: var(--fs-0); color: var(--text-3); }

/* C-9 empty state — the C.1 vehicle */
.empty-state {
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}
.empty-state .empty-title { font-weight: 600; margin-bottom: var(--sp-2); }
.empty-state .empty-hint { color: var(--text-2); margin-bottom: 0; }

/* C-10 pagination */
.pagination { display: flex; gap: var(--sp-1); list-style: none; padding: 0; }
.pagination a, .pagination span {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-control);
  min-height: 24px;
}
.pagination [aria-current="page"] { background: var(--surface-inset); font-weight: 600; }

/* C-11 detail list */
.detail-list {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--sp-2) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.detail-list dt { color: var(--text-3); }
.detail-list dd { margin: 0; }

/* typed-phrase inputs (G2/G3, §1.3) */
.typed-phrase { font-family: var(--font-mono); }
.phrase-indicator { font-size: var(--fs-1); color: var(--text-3); }
.phrase-indicator.match { color: var(--success-text); }

/* --------------------------------------------------------------------------
   5. Responsive (§1.3) — single breakpoint 880 px
   -------------------------------------------------------------------------- */
@media (max-width: 880px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "nav"
      "main"
      "footer";
  }
  /* sidebar collapses to a top bar with a CSS-only disclosure
     (checkbox pattern — no JS required) */
  .nav-toggle {
    display: inline-block;
    margin-left: auto;
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-control);
    cursor: pointer;
    min-height: 24px;
  }
  .sidenav { display: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .nav-toggle-box:checked ~ .sidenav { display: block; }
  main#main { padding: var(--sp-4); }
  .page-footer { padding: var(--sp-3) var(--sp-4); }

  /* phone-critical surfaces: stacked card layout — each row becomes a
     card of label/value lines; primary actions ≥44 px */
  table.cards-below-break thead { display: none; }
  table.cards-below-break, table.cards-below-break tbody,
  table.cards-below-break tr, table.cards-below-break td { display: block; }
  table.cards-below-break tr {
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2);
  }
  table.cards-below-break td { border: 0; padding: var(--sp-1) var(--sp-2); }
  table.cards-below-break td::before {
    content: attr(data-label) ": ";
    color: var(--text-3);
    font-size: var(--fs-1);
  }
  .btn-primary, .btn-danger { min-height: 44px; }
}

/* guard/ceremony pages: single-column at every width (§1.3) */
.guard-page { max-width: 40rem; margin: 0 auto; }

/* --------------------------------------------------------------------------
   6. Print (§2.5): chrome hidden, black on white, bordered cells,
   links flatten to text
   -------------------------------------------------------------------------- */
@media print {
  .sidenav, .topbar, .page-footer, .skip-link, .btn, .nav-logout { display: none; }
  body { background: #fff; color: #000; }
  .shell { display: block; }
  a { color: #000; text-decoration: none; }
  table.data-table td, table.data-table th { border: 1px solid #000; }
  .print-provenance { display: block; font-size: var(--fs-1); margin-top: var(--sp-4); }
}
.print-provenance { display: none; }