/* app.css — SIERRA Grid Data: dark dev-console design system.
 *
 * A public data explorer + developer portal for the Grid Info Service. The
 * guiding idea: every value on screen is a browser fetch of a public, keyless,
 * CORS-open /v1 endpoint — you can replay every request yourself — and feeds
 * report OK / STALE / UNAVAILABLE honestly (absence is never an all-clear).
 *
 * Dark only (a deliberate dev-console sibling to the warm marketing site).
 * IBM Plex Mono is the default for UI, data, labels, and code; IBM Plex Sans
 * is used only for prose. Color is never the only signal — severity and status
 * always carry a text label.
 *
 * Sections:
 *   0. Fonts            5. Data tables            10. Code, kv, tabs, primer
 *   1. Tokens           6. Chips / badges / pills 11. Endpoint & section rows
 *   2. Base/reset       7. Status dots + freshness 12. Map + fail-loud
 *   3. App shell        8. Forms                  13. Home: hero + support
 *   4. Context/main/footer 9. Errors / notices    14. Motion + responsive
 */

/* ------------------------------------------------------------------ */
/* 0. Fonts (vendored — no CDN; site is self-contained)               */
/* ------------------------------------------------------------------ */

@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-mono-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-sans-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-sans-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/lib/fonts/ibm-plex-sans-600.woff2") format("woff2"); }

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                          */
/* ------------------------------------------------------------------ */

:root {
  color-scheme: dark;

  /* surfaces */
  --bg: #131619;            /* page */
  --bg-rail: #0f1215;       /* sidebar, footer, page rails */
  --bg-card: #171b1f;       /* cards, tables, panels */
  --bg-code: #0e1215;       /* request primer, query bar, JSON, inspector */
  --bg-header: #1b2025;     /* table headers, form controls */
  --bg-ctx: rgba(19, 22, 25, 0.9);
  --bg-nav-active: #16211b;
  --bg-hover: #1a211d;      /* green-tinted row hover */
  --bg-hover-2: #1b2025;
  --bg-selected: #1a2229;
  --bg-failed: #1c1512;

  /* borders */
  --border: #2a3138;        /* primary card/table border */
  --border-rail: #21262c;   /* sidebar / context / footer dividers */
  --border-rail-2: #1c2126;
  --border-row: #21272d;    /* row dividers */
  --border-input: #313940;
  --border-soft: #242b31;

  /* text */
  --text-hi: #f2f5f7;
  --text: #dfe4e8;
  --text-2: #c3cbd2;
  --text-prose: #a7b0b8;
  --text-muted: #9aa3ab;
  --text-faint: #8b949d;
  --text-fainter: #6a747d;
  --text-dim: #5f6b74;
  --text-dimmer: #4f5860;

  /* brand accents (SIERRA, dark-adapted) */
  --grn: #7fdcab;           /* links, brand, primary */
  --grn-dot: #3ec27f;       /* OK dot */
  --grn-line: #4ac78a;      /* active border / tab underline */
  --grn-bg: #14261d;
  --grn-border: #235c40;
  --grn-border-2: #2b7a55;

  --blu: #5aa6e8;           /* methods, paths, JSON numbers */
  --blu-2: #9db8cf;
  --blu-bg: #12222f;
  --blu-border: #234356;

  --brass: #d0a24a;         /* STALE, secondary map */
  --brass-2: #c78a3c;

  --org: #e2673f;           /* risk / SEVERE / fail-loud */
  --org-2: #e88f70;
  --org-3: #f2b8a5;
  --org-bg: #241615;
  --org-border: #52281f;

  --red: #e5544e;           /* UNAVAILABLE / EXTREME */

  /* severity ramp (canonical — do not restyle) */
  --sev-EXTREME: #e5544e;
  --sev-SEVERE: #e2673f;
  --sev-MODERATE: #d0a24a;
  --sev-MINOR: #6ba15a;
  --sev-INFO: #5aa6e8;

  /* source status */
  --st-OK: #3ec27f;
  --st-STALE: #d0a24a;
  --st-UNAVAILABLE: #e5544e;

  /* area mode */
  --mode-QUIET: #aab3bb;
  --mode-WATCH: #d0a24a;
  --mode-ACTIVE: #e5544e;

  /* JSON syntax */
  --json-key: #7fdcab;
  --json-str: #d9a05b;
  --json-num: #5aa6e8;
  --json-punc: #5a646d;

  /* type */
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-sans: "IBM Plex Sans", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --radius: 5px;      /* cards, panels, tables */
  --radius-sm: 3px;   /* chips, inputs, buttons */

  --sidebar-w: 250px;
  --content-max: 1220px;
}

/* ------------------------------------------------------------------ */
/* 2. Base / reset                                                    */
/* ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { color: var(--text-hi); font-weight: 600; line-height: 1.25; margin: 0; }
h1 { font-size: 27px; letter-spacing: -0.01em; }
h2 { font-size: 14px; color: #eef2f4; margin-top: 34px; }
h2:first-child { margin-top: 0; }
h3 { font-size: 13px; color: #eef2f4; margin-top: 20px; margin-bottom: 8px; }

p { margin: 0 0 12px; }

/* Prose paragraphs opt into Plex Sans + prose color/measure. */
.lead, .prose {
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-prose);
  max-width: 82ch;
}
.lead { margin: 10px 0 0; }

a { color: var(--grn); text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: var(--grn); }

code, pre, kbd { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--grn-line); outline-offset: 1px; }
hr { border: 0; border-top: 1px solid var(--border-rail); margin: 24px 0; }

/* Inline code chip inside prose */
code.inline {
  font-size: 12.5px;
  background: var(--bg-header);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  color: #d7dee4;
}

.muted { color: var(--text-faint); }
.mono { font-family: var(--font-mono); }
.small { font-size: 12px; }
.accent-orange { color: var(--org); }

/* ------------------------------------------------------------------ */
/* 3. App shell (sidebar)                                             */
/* ------------------------------------------------------------------ */

.app { display: flex; min-height: 100vh; }

.sidebar {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w);
  background: var(--bg-rail);
  border-right: 1px solid var(--border-rail);
  display: flex; flex-direction: column; z-index: 40;
}

.brand-block {
  display: block; padding: 20px 22px 18px;
  border-bottom: 1px solid var(--border-rail-2);
}
.brand-block:hover { text-decoration: none; }
.brand-block:visited { color: inherit; }
.brand-line { display: flex; align-items: baseline; gap: 9px; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; color: #f0f3f5; }
.brand-sub { font-weight: 500; font-size: 13px; color: #c9d0d6; }
.brand-host { margin-top: 5px; font-size: 11px; color: var(--text-dim); }

.health-chip { padding: 13px 22px; border-bottom: 1px solid var(--border-rail-2); }
.health-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.health-sub { margin-top: 6px; font-size: 10.5px; color: var(--text-dim); letter-spacing: 0.02em; }

.nav { flex: 1; overflow-y: auto; padding: 14px 0; }
.nav-group-label {
  font-size: 9.5px; letter-spacing: 0.18em; color: #525c65; text-transform: uppercase;
  padding: 10px 22px 6px;
}
.nav-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 20px; border-left: 2px solid transparent;
  color: var(--text-2); font-size: 13px;
}
.nav-item:hover { text-decoration: none; color: var(--text-hi); background: rgba(255, 255, 255, 0.02); }
.nav-item:visited { color: var(--text-2); }
.nav-item .hint { font-size: 10.5px; color: #5a646d; }
.nav-item.current {
  background: var(--bg-nav-active); border-left-color: var(--grn-line); color: #eef2f4;
}
.nav-item.current .hint { color: var(--grn); }
.nav-item.disabled { color: #565f68; cursor: default; pointer-events: none; }
.nav-item.disabled .hint { color: #454d55; }

.sidebar-foot {
  padding: 14px 22px; border-top: 1px solid var(--border-rail-2);
  font-size: 10.5px; color: var(--text-dimmer); line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* 4. Context bar, main, footer                                      */
/* ------------------------------------------------------------------ */

.content { margin-left: var(--sidebar-w); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.context-bar {
  position: sticky; top: 0; z-index: 30; height: 52px;
  background: var(--bg-ctx); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-rail);
  display: flex; align-items: center;
}
.ctx-inner {
  width: 100%; max-width: var(--content-max); height: 100%;
  display: flex; align-items: center; justify-content: space-between; padding: 0 34px;
}
.crumb { font-size: 12.5px; color: var(--text-faint); }
.crumb .sep { color: #414a52; }
.crumb .here { color: var(--text); }
.ctx-right { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--text-faint); }
.clock { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); }

main {
  flex: 1; width: 100%; max-width: var(--content-max);
  padding: 36px 34px 56px;
}

/* Header row: title/lead on the left, pill badges on the right. The bottom
 * margin is the single source of the gap between a page's head/description and
 * its first content block — every content page uses .page-head, so this spacing
 * is set once here, not per page. */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 26px; }
.page-head > div { min-width: 0; }

.site-footer {
  background: var(--bg-rail); border-top: 1px solid var(--border-rail);
  font-size: 12px; color: var(--text-dimmer);
}
/* Cap footer content to the same column width as <main> so they line up. */
.footer-inner { max-width: var(--content-max); padding: 16px 34px 22px; }
.footer-line { margin: 0 0 8px; max-width: none; color: var(--text-dim); }

/* Request drawer */
.request-log summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 13px; color: #7fdcab;
  list-style: none;
}
.request-log summary::-webkit-details-marker { display: none; }
.request-log summary::before { content: "\25B8 "; color: var(--grn); }
.request-log[open] summary::before { content: "\25BE "; }
.request-count { color: var(--blu); }
.request-log-list {
  margin-top: 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm);
  background: var(--bg-code); padding: 8px 10px; overflow-x: auto;
}
.request-log-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: 12px; white-space: nowrap; }
.request-log-status { min-width: 2.4em; text-align: right; color: var(--st-OK); }
.request-log-row.failed .request-log-status { color: var(--st-UNAVAILABLE); font-weight: 600; }
.request-log-curl { color: #9db8cf; background: #12181d; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); padding: 1px 6px; user-select: all; }
.request-log-empty { font-size: 12px; color: var(--text-dim); }

.copy-btn {
  font-family: var(--font-mono); font-size: 11px; padding: 4px 10px;
  background: var(--bg-header); border: 1px solid var(--border-input); color: var(--text-2);
  border-radius: var(--radius-sm); cursor: pointer;
}
.copy-btn:hover { border-color: var(--grn-line); color: var(--text-hi); }

/* ------------------------------------------------------------------ */
/* Layout primitives                                                  */
/* ------------------------------------------------------------------ */

.panel, .card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; margin-bottom: 16px;
}
.panel > h2:first-child, .panel > h3:first-child, .card > h2:first-child, .card > h3:first-child { margin-top: 0; }

.row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.section-gap { margin-top: 32px; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-head .left { display: flex; align-items: center; gap: 12px; }
.section-head .cap { font-size: 11.5px; color: var(--text-fainter); }

/* ------------------------------------------------------------------ */
/* 5. Data tables                                                     */
/* ------------------------------------------------------------------ */

.table-wrap {
  overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); margin-bottom: 16px;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.data-table th {
  position: sticky; top: 0; z-index: 1; background: var(--bg-header);
  color: var(--text-fainter); font-weight: 500; font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.11em; text-align: left; padding: 10px 20px;
  border-bottom: 1px solid var(--border);
}
.data-table td { padding: 13px 20px; border-bottom: 1px solid var(--border-row); vertical-align: top; }
.data-table tbody tr:hover { background: var(--bg-hover-2); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .num, .data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.wrap { white-space: normal; min-width: 16rem; }
.data-table .src { color: var(--grn); }

/* Expandable diff value: truncated by default, click/Enter reveals the full
   text (both before/after cells expand together). Dotted underline signals it. */
.diff-val.diff-expandable { cursor: pointer; text-decoration: underline dotted var(--text-dim); text-underline-offset: 3px; }
.diff-val.diff-expandable:hover { text-decoration-color: var(--text-2); }
.diff-val.is-expanded { white-space: pre-wrap; word-break: break-word; text-decoration: none; }

/* ------------------------------------------------------------------ */
/* 6. Chips, badges, pills                                            */
/* ------------------------------------------------------------------ */

/* method / path / status pill chips */
.chip { display: inline-block; font-size: 11px; border-radius: var(--radius-sm); padding: 5px 10px; line-height: 1.4; white-space: nowrap; }
.chip-green { color: var(--grn); background: var(--grn-bg); border: 1px solid var(--grn-border); }
.chip-blue { color: var(--blu-2); background: var(--blu-bg); border: 1px solid var(--blu-border); }
/* API call chip: blue "GET /v1/..." */
.chip-get { font-size: 11.5px; color: var(--blu); background: var(--blu-bg); border: 1px solid var(--blu-border); border-radius: var(--radius-sm); padding: 3px 9px; }
.chip-get b, .method { color: var(--grn); font-weight: 600; }

/* method chip inside endpoint rows (green, centered) */
.chip-method {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--grn);
  background: var(--grn-bg); border: 1px solid var(--grn-border); border-radius: var(--radius-sm);
  padding: 3px 0; text-align: center;
}

/* severity badge — outlined, text + border in ramp color, label always shown */
.sev-badge {
  display: inline-block; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; border: 1px solid currentColor; border-radius: var(--radius-sm);
  padding: 2px 6px; line-height: 1.3;
}
.sev-badge.sev-EXTREME { color: var(--sev-EXTREME); }
.sev-badge.sev-SEVERE { color: var(--sev-SEVERE); }
.sev-badge.sev-MODERATE { color: var(--sev-MODERATE); }
.sev-badge.sev-MINOR { color: var(--sev-MINOR); }
.sev-badge.sev-INFO { color: var(--sev-INFO); }
.sev-badge.sev-unknown { color: var(--text-faint); }

/* legacy .chip.sev-* (kept for format.js) rendered as outlined badges */
.chip.sev-EXTREME, .chip.sev-SEVERE, .chip.sev-MODERATE, .chip.sev-MINOR, .chip.sev-INFO, .chip.sev-unknown {
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  border: 1px solid currentColor; background: transparent; padding: 2px 6px; color: var(--text-faint);
}
.chip.sev-EXTREME { color: var(--sev-EXTREME); }
.chip.sev-SEVERE { color: var(--sev-SEVERE); }
.chip.sev-MODERATE { color: var(--sev-MODERATE); }
.chip.sev-MINOR { color: var(--sev-MINOR); }
.chip.sev-INFO { color: var(--sev-INFO); }

/* toggle pill (filter selectors) */
.pill {
  font-size: 12px; padding: 5px 11px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid #2f3740; background: var(--bg-card); color: var(--text-faint);
  font-family: var(--font-mono);
}
.pill:hover { border-color: var(--grn-border); color: var(--text-2); }
.pill.on { border-color: var(--grn-border-2); background: var(--grn-bg); color: #bfe9d2; }

/* state pill (mode) — QUIET / WATCH / ACTIVE */
.state-pill {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  border-radius: var(--radius-sm); padding: 3px 9px; border: 1px solid #39424a;
  background: #242a30; color: var(--mode-QUIET);
}
.state-pill.mode-WATCH { color: var(--mode-WATCH); border-color: #4a3f2a; background: #241f16; }
.state-pill.mode-ACTIVE { color: var(--mode-ACTIVE); border-color: #4a2a28; background: #241615; }

/* query filter chip (Events) */
.qchip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  background: #1a2129; border: 1px solid #2f3944; border-radius: var(--radius-sm);
  padding: 4px 9px; color: var(--text-2);
}
.qchip .k { color: var(--text-faint); }
.qchip .x { cursor: pointer; color: var(--text-faint); }
.qchip .x:hover { color: var(--org-2); }

/* stat tiles */
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.stat-n { font-size: 22px; font-weight: 600; color: #eef2f4; }
.stat-label { margin-top: 2px; font-size: 10.5px; letter-spacing: 0.08em; color: var(--text-fainter); text-transform: uppercase; }

/* pill badge pair (no key / CORS-open) */
.badges { display: flex; gap: 8px; flex-shrink: 0; }

/* ------------------------------------------------------------------ */
/* 7. Status dots + freshness                                         */
/* ------------------------------------------------------------------ */

.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--text-faint); display: inline-block; }
.dot.st-OK { background: var(--st-OK); }
.dot.st-STALE { background: var(--st-STALE); }
.dot.st-UNAVAILABLE { background: var(--st-UNAVAILABLE); }
.dot.live { box-shadow: 0 0 6px rgba(62, 194, 127, 0.6); animation: blink 2.4s ease-in-out infinite; }

.dot-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; }
.dot-status.st-OK { color: var(--text-muted); }
.dot-status.st-STALE { color: var(--st-STALE); }
.dot-status.st-UNAVAILABLE { color: var(--st-UNAVAILABLE); font-weight: 600; }
/* format.js sourceDot() builds a bare .dot inside .dot-status — color it by the wrapper. */
.dot-status.st-OK .dot { background: var(--st-OK); }
.dot-status.st-STALE .dot { background: var(--st-STALE); }
.dot-status.st-UNAVAILABLE .dot { background: var(--st-UNAVAILABLE); }

.chip-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0; }

/* ------------------------------------------------------------------ */
/* 8. Forms                                                           */
/* ------------------------------------------------------------------ */

label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--text-fainter); }

input, select, button, textarea {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--text);
  background: var(--bg-header); border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  padding: 6px 8px;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
select { cursor: pointer; }
button { cursor: pointer; background: var(--bg-header); color: var(--text-2); }
button:hover { border-color: var(--grn-line); color: var(--text-hi); }
button:disabled { opacity: 0.5; cursor: default; }

.filter-bar, .filters {
  display: grid; grid-template-columns: auto 1fr; gap: 16px 24px; align-items: start;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 16px;
}
.filter-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 4px; }

/* Filter-grid row helpers, shared by every filter panel (Events, History):
   the label sits in column 1, its control(s) in column 2 of the .filters grid. */
.fcell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fcell-actions { gap: 10px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lbl-note { display: block; margin-top: 3px; font-size: 9px; letter-spacing: 0.08em; color: var(--text-dim); text-transform: none; }

/* ------------------------------------------------------------------ */
/* 9. Errors, notices, fail-loud                                      */
/* ------------------------------------------------------------------ */

.error-block {
  border: 1px solid var(--org-border); border-left-width: 3px; border-radius: var(--radius-sm);
  background: var(--org-bg); color: var(--org-2); padding: 9px 12px; margin: 10px 0;
  font-size: 11.5px; line-height: 1.5; overflow-x: auto;
}
.error-block strong { color: var(--org); }
.error-block .error-url { color: var(--org); word-break: break-all; }

.notice {
  border: 1px solid var(--border-input); border-left: 3px solid var(--st-STALE);
  border-radius: var(--radius-sm); background: var(--bg-card); padding: 9px 12px; margin: 10px 0; font-size: 12.5px;
}
.loading { color: var(--text-faint); font-size: 12.5px; padding: 8px 0; }

/* fail-loud banner (map / place — absence is not an all-clear) */
.fail-banner {
  font-size: 12px; color: var(--org-3); background: rgba(45, 16, 12, 0.94);
  border: 1px solid #6b2c1f; border-radius: 4px; padding: 9px 13px; line-height: 1.5; margin: 10px 0;
}
.fail-banner strong { color: var(--org); }

/* ------------------------------------------------------------------ */
/* 10. Code, kv, tabs, request primer                                 */
/* ------------------------------------------------------------------ */

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0 16px; font-size: 12.5px; }
.kv dt { color: var(--text-fainter); text-align: right; }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.code, pre.code {
  display: block; background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 16px; font-size: 13px; line-height: 1.7; overflow-x: auto; margin: 12px 0 16px; white-space: pre;
  color: #cfe6da;
}

/* request primer (tab strip + code) */
.primer { margin-top: 26px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-code); overflow: hidden; }
.tab-strip { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-rail); background: #12171b; padding-right: 6px; }
.tab-strip .tabs { display: flex; }
.tab {
  font-family: var(--font-mono); font-size: 12.5px; padding: 9px 15px; background: transparent;
  border: none; border-bottom: 2px solid transparent; color: var(--text-faint); border-radius: 0;
}
.tab:hover { color: var(--text-2); border-color: transparent; }
.tab.on { color: #eef2f4; border-bottom-color: var(--grn-line); }
.primer pre { margin: 0; padding: 18px 22px; font-size: 13px; line-height: 1.7; color: #cfe6da; white-space: pre; overflow-x: auto; }

/* JSON inspector */
.inspector { background: var(--bg-code); border: 1px solid var(--border); border-radius: var(--radius); }
.inspector .inspector-head { padding: 12px 16px; border-bottom: 1px solid var(--border-rail); font-size: 12.5px; color: var(--text-2); display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.inspector .inspector-head .meta { color: var(--text-faint); font-size: 11.5px; }
.inspector pre { margin: 0; padding: 14px 16px; font-size: 12.5px; line-height: 1.75; white-space: pre; overflow-x: auto; }
.jkey { color: var(--json-key); } .jstr { color: var(--json-str); } .jnum { color: var(--json-num); } .jpunc { color: var(--json-punc); } .jbool { color: var(--blu); }

/* ------------------------------------------------------------------ */
/* 11. Endpoint & section rows                                        */
/* ------------------------------------------------------------------ */

.endpoint-list { border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); overflow: hidden; margin-top: 12px; }
.endpoint-row {
  display: grid; grid-template-columns: 52px minmax(0, 340px) 1fr; gap: 18px; align-items: baseline;
  padding: 14px 20px; border-bottom: 1px solid var(--border-row); transition: background 0.1s; color: var(--text);
}
.endpoint-row:last-child { border-bottom: none; }
.endpoint-row:hover { text-decoration: none; background: var(--bg-hover); }
.endpoint-row:visited { color: var(--text); }
.endpoint-row .path { font-size: 13px; color: var(--blu-2); word-break: break-all; }
.endpoint-row .desc { font-family: var(--font-sans); font-size: 13px; color: #98a2ab; line-height: 1.55; }

/* legacy section-card grid (kept; restyled as endpoint-ish cards) */
.section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 12px; margin: 16px 0; }
.section-card { display: block; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; color: var(--text); }
.section-card:visited { color: var(--text); }
.section-card:hover { text-decoration: none; border-color: var(--grn-border); background: var(--bg-hover); }
.section-card .card-title { display: block; font-weight: 600; color: var(--text-hi); margin-bottom: 4px; }
.section-card .card-endpoint { display: block; font-size: 11.5px; color: var(--blu-2); margin-bottom: 6px; }
.section-card .card-desc { display: block; font-family: var(--font-sans); font-size: 13px; color: #98a2ab; }

/* Home status strip (legacy pages) */
.status-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 16px; margin: 16px 0; }
.status-strip .panel { margin-bottom: 0; }
.status-list { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 12.5px; }
.status-item { display: inline-flex; align-items: center; gap: 7px; }
.freshness { font-size: 11px; color: var(--text-faint); margin-top: 10px; }

/* ------------------------------------------------------------------ */
/* 12. Map + fail-loud ledger                                         */
/* ------------------------------------------------------------------ */

.map-box, .map-canvas {
  width: 100%; height: 560px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #0f1417; position: relative; overflow: hidden;
}
.map-box.small { height: 320px; }
.map-fail-overlay {
  position: absolute; left: 14px; top: 14px; right: 64px; z-index: 5;
  font-size: 12px; color: var(--org-3); background: rgba(45, 16, 12, 0.94);
  border: 1px solid #6b2c1f; border-radius: 4px; padding: 9px 13px; line-height: 1.5;
}
.map-fail-overlay strong { color: var(--org); }

.ledger-failed { background: var(--bg-failed); }
.time-cell { white-space: nowrap; }
.time-cell .time-rel { color: var(--text); }
.time-cell .time-abs { color: var(--text-faint); font-size: 11px; }

/* color swatch (map layer list, severity legend) */
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 8px; border: 1px solid rgba(255,255,255,0.12); }

/* ------------------------------------------------------------------ */
/* 13. Home: hero + support                                           */
/* ------------------------------------------------------------------ */

.hero-kicker { font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grn); margin-bottom: 10px; }
.mission { font-family: var(--font-sans); font-size: 15px; line-height: 1.75; color: var(--text-prose); max-width: 78ch; }
.mission strong { color: var(--text); font-weight: 600; }

/* three-up capability cards */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cap-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.cap-card .cap-h { font-weight: 600; font-size: 13.5px; color: #eef2f4; margin-bottom: 6px; }
.cap-card .cap-p { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: #98a2ab; }

/* support / donate card */
.support-card {
  margin-top: 32px; border: 1px solid var(--grn-border); border-left: 3px solid var(--grn-line);
  border-radius: var(--radius); background: color-mix(in srgb, var(--grn-bg) 55%, var(--bg-card));
  padding: 20px 22px;
}
.support-card h2 { margin-top: 0; color: #eef2f4; }
.support-card .support-p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.7; color: var(--text-prose); max-width: 74ch; margin: 8px 0 14px; }
.btn-primary {
  display: inline-block; font-family: var(--font-mono); font-size: 13px; font-weight: 500;
  color: #08130d; background: var(--grn); border: 1px solid var(--grn); border-radius: var(--radius-sm);
  padding: 8px 16px; cursor: pointer;
}
.btn-primary:hover { text-decoration: none; background: #96e6bd; }
.btn-ghost {
  display: inline-block; font-family: var(--font-mono); font-size: 13px; color: var(--grn);
  border: 1px solid var(--grn-border); border-radius: var(--radius-sm); padding: 8px 16px; margin-left: 8px;
}
.btn-ghost:hover { text-decoration: none; border-color: var(--grn-line); background: var(--grn-bg); }

/* ------------------------------------------------------------------ */
/* 14. Motion + responsive                                            */
/* ------------------------------------------------------------------ */

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }

/* Tablet / mobile: sidebar becomes a static top block, content full width. */
@media (max-width: 900px) {
  .app { flex-direction: column; }
  .sidebar {
    position: static; width: 100%; flex-direction: column;
    border-right: none; border-bottom: 1px solid var(--border-rail);
  }
  .nav { display: flex; flex-wrap: wrap; padding: 8px 12px; gap: 2px; }
  .nav-group-label { width: 100%; padding: 8px 10px 2px; }
  .nav-item { border-left: none; border-radius: var(--radius-sm); padding: 6px 10px; }
  .nav-item.current { border-left: none; box-shadow: inset 0 -2px 0 var(--grn-line); }
  .nav-item .hint { display: none; }
  .sidebar-foot { display: none; }
  .content { margin-left: 0; }
  main { padding: 24px 16px 40px; }
  .ctx-inner { padding: 0 16px; }

  /* Stack every two-column layout; let heads and chip rows wrap. */
  .grid-2, .cap-grid, .filters { grid-template-columns: 1fr; }
  .filter-bar { gap: 10px 14px; }
  .section-head { flex-wrap: wrap; }
  .section-head .cap { width: 100%; }
  .page-head { gap: 14px; }
  .footer-inner { padding: 16px; }

  /* Endpoint rows: method + path on one line, description wraps beneath. */
  .endpoint-row { grid-template-columns: 44px 1fr; gap: 6px 14px; }
  .endpoint-row .desc { grid-column: 1 / -1; }

  /* A sticky JSON inspector column has nothing to stick to once stacked. */
  .inspector { position: static !important; top: auto !important; }

  /* A fixed 560px map dominates a phone; shrink the shared map containers
     (map.html's own #map-canvas already does this). */
  .map-box, .map-canvas { height: 60vh; }
  .map-box.small { height: 300px; }
}

@media (max-width: 560px) {
  h1 { font-size: 22px; }
  .cap-grid, .stat-grid { grid-template-columns: 1fr; }
  main { padding: 20px 12px 36px; }
  .card, .panel { padding: 14px 15px; }
  .data-table th, .data-table td { padding: 10px 12px; }
}