/* Marine1 design system — single source of truth.

   One stylesheet, served with cache headers, consumed by the dashboard SPA
   and (via the same token names) by the brief PDF renderer. Cycle 14 lifted
   this out of a Python triple-quoted string in dashboard.py; previously the
   browser saw it as part of the page payload on every request.

   Layers, top to bottom:
     1. Tokens          - colour, spacing, type, motion, radii, shadow
     2. Reset           - box model, body defaults
     3. Layout shell    - sidebar / topbar / main grid
     4. Typography      - headings, labels, mono
     5. Surfaces        - cards, drawers, modals, toasts, cmdk
     6. Inputs          - buttons, fields, segmented controls
     7. Data display    - tables (table.tbl), badges, kpis, bar rows
     8. Map + overlay   - leaflet legend, login overlay, ticker
     9. Primitives      - sort indicators, bulk-action bar, empty state,
                          status chip, key-value grid, evidence card
*/

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

:root[data-theme="dark"] {
  --bg:#0b0e13; --bg-2:#11151c; --card:#161b24; --card-2:#1d242f;
  --line:#232b38; --line-2:#2c3645; --fg:#e6e9ef; --fg-2:#c0c6d2;
  --muted:#8c95a6; --accent:#4f9cff; --accent-2:#2c7bdc;
  --green:#34c38f; --amber:#f1b44c; --red:#f46a6a; --crit:#ef3838;
  --bg-map:#08090d;
  --legend-bg:rgba(20,24,32,.92);
  --login-bg:rgba(8,10,15,.96);
  --backdrop-soft:rgba(0,0,0,.4);
  --backdrop-modal:rgba(0,0,0,.55);
  --backdrop-cmdk:rgba(0,0,0,.6);
  --tooltip-bg:rgba(14,16,22,.96);
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 4px 12px rgba(0,0,0,.5);
}
:root[data-theme="light"] {
  --bg:#f7f8fa; --bg-2:#fff; --card:#fff; --card-2:#fafbfc;
  --line:#e2e6ec; --line-2:#cdd3dc; --fg:#1c2230; --fg-2:#3a4150;
  --muted:#6b7280; --accent:#1e6dd8; --accent-2:#1758b3;
  --green:#16a070; --amber:#c98213; --red:#e04a4a; --crit:#c62828;
  --bg-map:#eef0f4;
  --legend-bg:rgba(255,255,255,.94);
  --login-bg:rgba(247,248,250,.96);
  --backdrop-soft:rgba(10,18,32,.28);
  --backdrop-modal:rgba(10,18,32,.40);
  --backdrop-cmdk:rgba(10,18,32,.45);
  --tooltip-bg:rgba(255,255,255,.98);
  --shadow-sm:0 1px 2px rgba(0,0,0,.06);
  --shadow-md:0 4px 12px rgba(0,0,0,.10);
}

:root {
  /* Spacing scale (4-px base, doubling). Used for padding, margins, gaps. */
  --space-0:0;
  --space-1:.25rem;   /* 4px  */
  --space-2:.5rem;    /* 8px  */
  --space-3:.75rem;   /* 12px */
  --space-4:1rem;     /* 16px */
  --space-5:1.5rem;   /* 24px */
  --space-6:2rem;     /* 32px */
  --space-7:3rem;     /* 48px */
  --space-8:4rem;     /* 64px */

  /* Type scale. Body is 14px (--text-base). Headings sit above. */
  --text-xs:.7rem;     /* 11.2 */
  --text-sm:.78rem;    /* 12.5 */
  --text-base:.85rem;  /* 13.6 */
  --text-md:.92rem;    /* 14.7 */
  --text-lg:1.05rem;   /* 16.8 */
  --text-xl:1.4rem;    /* 22.4 */

  /* Weight + line-height scale. */
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;
  --leading-tight:1.2;
  --leading-normal:1.45;
  --leading-loose:1.6;

  /* Radii. */
  --radius-xs:3px;
  --radius-sm:4px;
  --radius-md:6px;
  --radius-lg:8px;
  --radius-xl:10px;

  /* Motion. */
  --dur-fast:.12s;
  --dur-base:.18s;
  --ease:ease-out;

  /* Brand surfaces with opacity (semantic badge backgrounds). */
  --tint-green:rgba(52,195,143,.16);
  --tint-amber:rgba(241,180,76,.18);
  --tint-red:rgba(244,106,106,.20);
  --tint-crit:rgba(239,56,56,.22);
  --tint-danger-soft:rgba(239,56,56,.10);
  --tint-danger-strong:rgba(239,56,56,.20);
  --border-danger:rgba(239,56,56,.4);
  --dot-orange:#ef8f38;
}

/* ---- 2. Reset ----------------------------------------------------------- */

* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  background:var(--bg); color:var(--fg);
  font:14px/var(--leading-normal) -apple-system,BlinkMacSystemFont,"Segoe UI","Inter",system-ui,sans-serif;
}
code, pre, .mono {
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---- 3. Layout shell ---------------------------------------------------- */

.shell {
  display:grid;
  grid-template:"side top" 52px "side main" 1fr / 230px 1fr;
  height:100vh;
}
.topbar {
  grid-area:top; background:var(--bg-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:var(--space-4); padding:0 var(--space-4);
}
.sidebar {
  grid-area:side; background:var(--bg-2); border-right:1px solid var(--line);
  overflow:auto; padding:var(--space-4) var(--space-3);
}
.main { grid-area:main; overflow:auto; padding:1.25rem var(--space-5); }

.brand {
  display:flex; align-items:center; gap:var(--space-2);
  padding:0 var(--space-2) var(--space-4);
  font-weight:var(--weight-bold); letter-spacing:.04em; font-size:var(--text-md);
}
.brand .logo {
  width:22px; height:22px; background:linear-gradient(135deg,var(--accent),var(--green));
  border-radius:var(--radius-sm); display:inline-block;
}

/* ---- 4. Typography ------------------------------------------------------ */

h1 { font-size:var(--text-xl); font-weight:var(--weight-semibold); margin:0 0 var(--space-4); letter-spacing:-.01em; }
h2 { font-size:var(--text-lg); font-weight:var(--weight-semibold); margin:0 0 var(--space-2); }
h3 { font-size:var(--text-md); font-weight:var(--weight-semibold); margin:0 0 var(--space-2); }
.label {
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
}
.breadcrumbs { color:var(--muted); font-size:var(--text-sm); margin-bottom:var(--space-3); }
.breadcrumbs a { color:var(--muted); text-decoration:none; }
.breadcrumbs a:hover { color:var(--fg-2); }

a.link { color:var(--accent); text-decoration:none; }
a.link:hover { text-decoration:underline; }

/* ---- 5. Surfaces -------------------------------------------------------- */

.row { display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap; }
.grow { flex:1; }
.stack { display:flex; flex-direction:column; gap:var(--space-3); }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4); }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-4); }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-4); }
@media (max-width:1100px){ .grid-3,.grid-4 { grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; } }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:var(--space-4) 1.1rem;
}
.card-pad-sm { padding:.65rem .9rem; }
.card-hover { cursor:pointer; transition:border-color var(--dur-fast); }
.card-hover:hover { border-color:var(--line-2); }
.card.selected { outline:1px solid var(--accent); }
.card-row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }
.card-flush { padding:0; }
.card-flush-top { margin-top:var(--space-2); padding:0; }
.ev { color:var(--muted); font-size:.8rem; line-height:1.4; margin:.15rem 0; }

/* ---- 6. Navigation + topbar -------------------------------------------- */

.nav-group {
  font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted); padding:.9rem var(--space-2) .35rem;
}
.nav a {
  display:flex; align-items:center; gap:var(--space-2); padding:.42rem var(--space-2);
  color:var(--fg-2); text-decoration:none; border-radius:var(--radius-sm); font-size:.88rem;
}
.nav a:hover { background:var(--card); color:var(--fg); }
.nav a.active { background:var(--card-2); color:var(--fg); border-left:2px solid var(--accent); }
.nav .icon { width:14px; opacity:.7; display:inline-block; text-align:center; }
.nav .badge { margin-left:auto; font-size:.65rem; padding:1px 5px; background:var(--card); border-radius:8px; }

.search-pill {
  flex:1; max-width:520px; display:flex; align-items:center; gap:var(--space-1);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:5px 10px; cursor:pointer;
}
.search-pill .icon { color:var(--muted); }
.search-pill input {
  flex:1; background:transparent; border:0; outline:0; color:var(--fg);
  font-size:var(--text-base); cursor:pointer;
}
.ws-pill {
  display:flex; align-items:center; gap:var(--space-1); font-size:var(--text-sm);
  color:var(--muted); padding:3px 8px; border-radius:8px;
  background:var(--card); border:1px solid var(--line);
}
.ws-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.ws-pill.live .dot { background:var(--green); box-shadow:0 0 6px var(--green); }
.icon-btn {
  background:transparent; border:1px solid var(--line); color:var(--fg-2);
  width:32px; height:32px; border-radius:var(--radius-md); cursor:pointer;
}
.icon-btn:hover { color:var(--fg); border-color:var(--line-2); }
.user-menu {
  position:relative; display:flex; align-items:center; gap:var(--space-2); padding:4px 10px;
  border:1px solid var(--line); border-radius:var(--radius-md); cursor:pointer; background:var(--card);
}
.user-menu .avatar {
  width:22px; height:22px; border-radius:50%; background:var(--accent);
  color:white; display:inline-flex; align-items:center; justify-content:center;
  font-size:var(--text-xs); font-weight:var(--weight-bold);
}
.user-menu .stack-name { display:flex; flex-direction:column; }
.user-menu .stack-name .name { font-size:.83rem; }
.user-menu .role { font-size:var(--text-xs); color:var(--muted); }
.user-menu .chev { color:var(--muted); }
.menu-pop {
  position:absolute; right:0; top:38px; min-width:220px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:.35rem; box-shadow:var(--shadow-md); z-index:50; display:none;
}
.menu-pop.open { display:block; }
.menu-pop a {
  display:block; padding:6px 10px; border-radius:var(--radius-sm); color:var(--fg-2);
  text-decoration:none; font-size:var(--text-base);
}
.menu-pop a:hover { background:var(--card-2); color:var(--fg); }
.menu-pop hr { border:0; border-top:1px solid var(--line); margin:4px 0; }

/* ---- 7. Inputs --------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; gap:var(--space-1); padding:5px 12px;
  background:var(--card-2); color:var(--fg); border:1px solid var(--line);
  border-radius:var(--radius-md); font-size:.82rem; cursor:pointer;
}
.btn:hover { border-color:var(--line-2); }
.btn-primary { background:var(--accent); color:white; border-color:var(--accent); }
.btn-primary:hover { background:var(--accent-2); border-color:var(--accent-2); }
.btn-danger { background:var(--tint-danger-soft); border-color:var(--border-danger); color:var(--crit); }
.btn-danger:hover { background:var(--tint-danger-strong); }
.btn-sm { padding:2px 8px; font-size:.74rem; }
.btn[disabled], .btn[disabled]:hover, .btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-ghost { background:transparent; }
.btn-icon { padding:4px 8px; }
.btn-submit-wide { justify-content:center; padding:8px 14px; font-size:.9rem; }

.input {
  padding:5px 10px; background:var(--card-2); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-md); font-size:var(--text-base);
}
.input:focus { outline:none; border-color:var(--accent); }

input, textarea, select {
  background:var(--card-2); color:var(--fg);
  border:1px solid var(--line); border-radius:5px;
  padding:6px 9px; font-size:var(--text-base); outline:none;
  font-family:inherit;
}
input:focus, textarea:focus, select:focus { border-color:var(--accent); }
label { font-size:var(--text-sm); color:var(--muted); }
textarea { resize:vertical; min-height:80px; }

/* ---- 8. Data display: tables ------------------------------------------- */

table.tbl { width:100%; border-collapse:collapse; }
table.tbl th {
  text-align:left; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); padding:8px 10px;
  border-bottom:1px solid var(--line); position:sticky; top:0;
  background:var(--card);
}
table.tbl td {
  padding:8px 10px; border-bottom:1px solid var(--line);
  font-size:var(--text-base); color:var(--fg-2);
}
table.tbl tr:hover td { background:var(--card-2); color:var(--fg); }
table.tbl tr.clickable { cursor:pointer; }

/* Sortable header indicators driven by makeTable. */
table.tbl th.sortable { cursor:pointer; user-select:none; }
table.tbl th.sortable:hover { color:var(--fg-2); }
table.tbl th.sortable::after {
  content:"\2195"; margin-left:.35rem; opacity:.35; font-size:.7em;
}
table.tbl th.sort-asc::after  { content:"\2191"; opacity:.85; color:var(--accent); }
table.tbl th.sort-desc::after { content:"\2193"; opacity:.85; color:var(--accent); }

/* Row-selection column. */
table.tbl th.col-check, table.tbl td.col-check {
  width:32px; padding-right:0; padding-left:10px;
}
table.tbl td.col-check input[type="checkbox"],
table.tbl th.col-check input[type="checkbox"] { margin:0; cursor:pointer; }

/* Bulk-action bar that sits above any selectable table. */
.bulk-bar {
  display:flex; align-items:center; gap:var(--space-2);
  padding:.5rem .75rem; margin-bottom:var(--space-2);
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-md);
  font-size:var(--text-base);
}
.bulk-bar strong { color:var(--fg); }

/* Table toolbar: search + export buttons + row count. */
.toolbar {
  display:flex; align-items:center; gap:var(--space-2);
  margin-bottom:var(--space-2); flex-wrap:wrap;
}
.toolbar .filter-input {
  min-width:240px; padding:5px 10px; background:var(--card-2);
  border:1px solid var(--line); border-radius:var(--radius-md);
  color:var(--fg); font-size:var(--text-base);
}
.toolbar .row-count {
  font-size:var(--text-sm); color:var(--muted); margin-left:auto;
}

/* Pagination. */
.pagination {
  display:flex; align-items:center; gap:var(--space-2);
  padding:.5rem 0; font-size:var(--text-sm); color:var(--muted);
}
.pagination .btn-sm { min-width:28px; justify-content:center; }
.pagination .page-info { margin:0 var(--space-2); }

/* Density toggle on table headers. */
table.tbl.density-compact th, table.tbl.density-compact td { padding:4px 8px; font-size:.78rem; }

/* ---- 9. Data display: badges, kpis, bars ------------------------------ */

.badge {
  display:inline-block; font-size:.68rem; padding:1px 7px; border-radius:var(--radius-sm);
  background:var(--card-2); color:var(--fg-2); font-weight:var(--weight-semibold); letter-spacing:.04em;
}
.badge-low      { background:var(--tint-green); color:var(--green); }
.badge-elevated { background:var(--tint-amber); color:var(--amber); }
.badge-high     { background:var(--tint-red);   color:var(--red); }
.badge-critical { background:var(--tint-crit);  color:var(--crit); }
.badge-ok       { background:var(--tint-green); color:var(--green); }
.badge-warn     { background:var(--tint-amber); color:var(--amber); }
.badge-error    { background:var(--tint-red);   color:var(--red); }
.badge-muted    { background:var(--card-2);     color:var(--muted); }

/* Status chip: bigger than badge, semantic colour with a leading dot. */
.status-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:2px 9px; border-radius:999px; font-size:var(--text-xs);
  background:var(--card-2); color:var(--fg-2); font-weight:var(--weight-medium);
  border:1px solid var(--line);
}
.status-chip::before {
  content:""; width:7px; height:7px; border-radius:50%; background:var(--muted);
}
.status-chip.ok::before       { background:var(--green); }
.status-chip.warn::before     { background:var(--amber); }
.status-chip.error::before    { background:var(--red); }
.status-chip.critical::before { background:var(--crit); }

.kpi { display:flex; flex-direction:column; gap:.2rem; }
.kpi .v { font-size:var(--text-xl); font-weight:var(--weight-semibold); color:var(--fg); }
.kpi .l { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }

/* KPI / scorecard strip. Used by /vessels, /alerts, /audit, /admin/storage,
   /intel/cyber and others to lay out a row of stat tiles. Auto-fits as
   many columns as the viewport supports, drops to a column on phones. */
.card-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:var(--space-3);
}
@media (max-width:520px) { .card-grid { grid-template-columns:1fr 1fr; } }

.bar-row { display:flex; align-items:center; gap:var(--space-2); margin:.25rem 0; font-size:var(--text-base); }
.bar-row .lab { width:200px; color:var(--muted); }
.bar-row .bar { flex:1; background:var(--card-2); height:8px; border-radius:3px; overflow:hidden; }
.bar-row .fill { height:100%; }

/* Key-value grid for dossier / brief / detail panels. */
.kv-grid {
  display:grid; grid-template-columns:auto 1fr; gap:.5rem 1rem;
  font-size:var(--text-base);
}
.kv-grid .k { color:var(--muted); font-size:var(--text-sm); }
.kv-grid .v { color:var(--fg-2); }

/* Evidence card primitive: alert pane, audit ledger row, brief evidence. */
.evidence-card {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:.75rem var(--space-4); margin-bottom:var(--space-2);
}
.evidence-card .head {
  display:flex; align-items:center; gap:var(--space-2); margin-bottom:.4rem;
}
.evidence-card .head .ts { font-size:var(--text-xs); color:var(--muted); margin-left:auto; }
.evidence-card .body { font-size:var(--text-base); color:var(--fg-2); line-height:1.5; }

/* Empty state primitive. */
.empty { text-align:center; padding:var(--space-7) var(--space-4); color:var(--muted); }
.empty .big { font-size:1.7rem; opacity:.5; margin-bottom:.4rem; }
.empty-state {
  display:flex; flex-direction:column; align-items:center;
  padding:var(--space-7) var(--space-4); color:var(--muted); text-align:center;
}
.empty-state .icon { font-size:2rem; opacity:.45; margin-bottom:.6rem; }
.empty-state .msg { font-size:var(--text-base); margin-bottom:.6rem; max-width:42ch; }

/* ---- 10. Overlays: drawer, modal, toast, cmdk -------------------------- */

.drawer-backdrop { position:fixed; inset:0; background:var(--backdrop-soft); z-index:60; display:none; }
.drawer-backdrop.open { display:block; }
.drawer {
  position:fixed; top:0; right:0; width:min(540px,92vw); height:100vh;
  background:var(--bg-2); border-left:1px solid var(--line); z-index:65;
  transform:translateX(100%); transition:transform var(--dur-base) var(--ease);
  display:flex; flex-direction:column;
}
.drawer.open { transform:translateX(0); }
.drawer-head {
  padding:.85rem 1.1rem; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between;
}
.drawer-body { padding:var(--space-4) 1.1rem; overflow:auto; flex:1; }
.drawer-foot {
  padding:.65rem 1.1rem; border-top:1px solid var(--line);
  display:flex; gap:var(--space-2); justify-content:flex-end; background:var(--bg-2);
}

.modal-backdrop {
  position:fixed; inset:0; background:var(--backdrop-modal); z-index:80;
  display:none; align-items:center; justify-content:center;
}
.modal-backdrop.open { display:flex; }
.modal {
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-lg);
  min-width:380px; max-width:600px; box-shadow:var(--shadow-md);
}
.modal-head { padding:.8rem 1.1rem; border-bottom:1px solid var(--line); }
.modal-body { padding:var(--space-4) 1.1rem; }
.modal-foot {
  padding:.65rem 1.1rem; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end; gap:var(--space-2);
}

.toasts {
  position:fixed; right:var(--space-4); bottom:var(--space-4); z-index:95;
  display:flex; flex-direction:column; gap:var(--space-1);
}
.toast {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:8px 12px; font-size:var(--text-base); box-shadow:var(--shadow-md); max-width:360px;
}
.toast.error { border-color:var(--crit); }
.toast.ok    { border-color:var(--green); }

.cmdk-back {
  position:fixed; inset:0; background:var(--backdrop-cmdk); z-index:90;
  display:none; padding-top:12vh;
}
.cmdk-back.open { display:block; }
.cmdk {
  max-width:560px; margin:0 auto; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md); overflow:hidden;
}
.cmdk input {
  width:100%; padding:.9rem var(--space-4); background:transparent; border:0;
  color:var(--fg); font-size:1rem; border-bottom:1px solid var(--line);
}
.cmdk-list { max-height:360px; overflow-y:auto; }
.cmdk-item {
  padding:9px 14px; font-size:.88rem; cursor:pointer; display:flex;
  align-items:center; gap:var(--space-2); border-bottom:1px solid var(--line);
}
.cmdk-item:hover, .cmdk-item.active { background:var(--card-2); }
.cmdk-item .kind { font-size:var(--text-xs); color:var(--muted); margin-left:auto; }
.cmdk-item.no-match { cursor:default; }

/* ---- 11. Tabs + ticker + map + login ----------------------------------- */

.tabs { display:flex; gap:.25rem; border-bottom:1px solid var(--line); margin-bottom:var(--space-4); }
.tabs button {
  background:transparent; border:0; color:var(--muted); padding:8px 14px;
  font-size:var(--text-base); cursor:pointer; border-bottom:2px solid transparent;
}
.tabs button.active { color:var(--fg); border-bottom-color:var(--accent); }

#map-root, #vmap-root { background:var(--bg-map); border-radius:var(--radius-lg); min-height:320px; }
.legend {
  background:var(--legend-bg); padding:.5rem .65rem; border-radius:var(--radius-sm);
  border:1px solid var(--line); font-size:.75rem; line-height:1.55;
}
.legend .swatch {
  display:inline-block; width:10px; height:10px; margin-right:6px;
  vertical-align:middle; border-radius:2px;
}

/* Leaflet tooltip themed to the dashboard. Larger than default so live
   snapshot data fits cleanly. */
.leaflet-tooltip.m1-tooltip {
  background:var(--tooltip-bg); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--radius-md);
  padding:.5rem .65rem; box-shadow:var(--shadow-md);
  font-size:.8rem; line-height:1.4; max-width:320px;
}
.leaflet-tooltip.m1-tooltip:before { display:none; }
.leaflet-tooltip.m1-tooltip .ttl { font-weight:var(--weight-semibold); }
.leaflet-tooltip.m1-tooltip .dim { opacity:.7; margin-top:.2rem; }
.leaflet-tooltip.m1-tooltip .row-warn { color:var(--dot-orange); }
.leaflet-tooltip.m1-tooltip .row-crit { color:var(--crit); }
.leaflet-tooltip.m1-tooltip .row-indented { margin-left:.6rem; opacity:.9; }
.leaflet-tooltip.m1-tooltip .dot-band {
  display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:.3rem;
}

.login-back {
  position:fixed; inset:0; background:var(--login-bg); z-index:100;
  display:flex; align-items:center; justify-content:center;
}
.login-card {
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius-xl);
  padding:1.6rem 1.8rem; min-width:360px; box-shadow:var(--shadow-md);
}
.login-card .brand { padding:0; margin-bottom:var(--space-4); }
.login-card .stack-fields { gap:var(--space-2); margin-top:var(--space-3); }
.login-card .error-line {
  color:var(--crit); font-size:var(--text-sm); min-height:1em; margin-top:.4rem;
}

.ticker { display:flex; gap:var(--space-2); overflow-x:auto; padding:.25rem 0; }
.ticker-item {
  background:var(--card-2); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:4px 10px; font-size:var(--text-sm); white-space:nowrap;
  color:var(--fg-2); flex-shrink:0;
}

/* ---- 12. Small utilities used across views ---------------------------- */

.text-muted { color:var(--muted); }
.text-crit  { color:var(--crit); }
.text-warn  { color:var(--dot-orange); }
.fw-semibold { font-weight:var(--weight-semibold); }
.dim { opacity:.8; }
.dim-strong { opacity:.7; }
.mt-1 { margin-top:.2rem; }

/* Loading placeholder used inside Leaflet tooltips and similar callouts. */
.loading-inline { padding:var(--space-2); }

/* ---- 13. Utility classes ---------------------------------------------- */

/* Spacing classes snap to the token scale. Numbers map to --space-N:
   1 = .25rem (4px), 2 = .5rem (8px), 3 = .75rem (12px), 4 = 1rem (16px),
   5 = 1.5rem (24px), 6 = 2rem (32px), 7 = 3rem (48px). */
.mt-0 { margin-top:var(--space-0); }
.mt-1 { margin-top:var(--space-1); }
.mt-2 { margin-top:var(--space-2); }
.mt-3 { margin-top:var(--space-3); }
.mt-4 { margin-top:var(--space-4); }
.mt-5 { margin-top:var(--space-5); }
.mt-6 { margin-top:var(--space-6); }

.mb-0 { margin-bottom:var(--space-0); }
.mb-1 { margin-bottom:var(--space-1); }
.mb-2 { margin-bottom:var(--space-2); }
.mb-3 { margin-bottom:var(--space-3); }
.mb-4 { margin-bottom:var(--space-4); }
.mb-5 { margin-bottom:var(--space-5); }

.ml-1 { margin-left:var(--space-1); }
.ml-2 { margin-left:var(--space-2); }
.ml-3 { margin-left:var(--space-3); }
.ml-4 { margin-left:var(--space-4); }
.ml-auto { margin-left:auto; }

.mr-1 { margin-right:var(--space-1); }
.mr-2 { margin-right:var(--space-2); }
.mr-3 { margin-right:var(--space-3); }
.mr-4 { margin-right:var(--space-4); }

.p-0 { padding:var(--space-0); }
.p-1 { padding:var(--space-1); }
.p-2 { padding:var(--space-2); }
.p-3 { padding:var(--space-3); }
.p-4 { padding:var(--space-4); }
.px-3 { padding-left:var(--space-3); padding-right:var(--space-3); }
.py-2 { padding-top:var(--space-2); padding-bottom:var(--space-2); }
.py-3 { padding-top:var(--space-3); padding-bottom:var(--space-3); }

.gap-1 { gap:var(--space-1); }
.gap-2 { gap:var(--space-2); }
.gap-3 { gap:var(--space-3); }
.gap-4 { gap:var(--space-4); }

/* Flex utilities. */
.flex-col   { display:flex; flex-direction:column; }
.flex-wrap  { flex-wrap:wrap; }
.flex-row   { display:flex; flex-direction:row; align-items:center; }

/* Sizing (fixed widths used by table toolbars, search boxes, KPI cells). */
.w-narrow    { max-width:90px; }
.w-medium    { max-width:200px; }
.w-medium-2  { max-width:220px; }
.w-wide      { max-width:260px; }
.w-xwide     { max-width:320px; }
.min-w-220   { min-width:220px; }
.min-w-320   { min-width:320px; }

/* Map container heights. */
.h-map-sm { height:320px; }
.h-map-md { height:420px; }
.h-map-lg { height:440px; }
.h-map-xl { height:480px; }

/* Card flush variants used when a card hosts a flush-top table. */
.p0 { padding:0; }

/* Text rendering. */
.preline { white-space:pre-wrap; }

/* Big stat number (used by KPI tiles outside .kpi). */
.stat-big {
  font-size:var(--text-xl); font-weight:var(--weight-semibold); color:var(--fg);
}

/* Bar-fill colour modifiers driven by row state. */
.fill-accent { background:var(--accent); }
.fill-crit   { background:var(--crit); }
.fill-warn   { background:var(--amber); }
.fill-ok     { background:var(--green); }

/* Initial-hidden helper for elements that toggle via JS style.display. */
.is-hidden-init { display:none; }

/* ---- Progressive disclosure ------------------------------------------- */

/* Native <details>/<summary> styled to match the dashboard. Used for
   tech-detail rows, collapsible panels, and the sidebar nav-groups. */
details.tech-detail {
  margin-top:var(--space-1);
  border-top:1px dashed var(--line);
  padding-top:var(--space-1);
}
details.tech-detail > summary {
  cursor:pointer;
  list-style:none;
  font-size:var(--text-xs);
  color:var(--muted);
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}
details.tech-detail > summary::-webkit-details-marker { display:none; }
details.tech-detail > summary::before {
  content:"\25B8"; transition:transform var(--dur-fast);
  display:inline-block; font-size:.7em;
}
details.tech-detail[open] > summary::before { transform:rotate(90deg); }
details.tech-detail > summary:hover { color:var(--fg-2); }
details.tech-detail .tech-detail-body {
  margin-top:var(--space-1); padding:var(--space-2) var(--space-3);
  background:var(--card-2); border-radius:var(--radius-sm);
  font-size:var(--text-sm); color:var(--fg-2);
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  word-break:break-all;
}

/* Panel-level <details> used for collapsible content cards. */
details.panel {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:0;
  margin-bottom:var(--space-3);
}
details.panel > summary {
  cursor:pointer;
  list-style:none;
  padding:var(--space-3) var(--space-4);
  display:flex; align-items:center; gap:var(--space-2);
  font-weight:var(--weight-semibold);
  font-size:var(--text-md);
  user-select:none;
}
details.panel > summary::-webkit-details-marker { display:none; }
details.panel > summary::after {
  content:"\25B8"; margin-left:auto; font-size:.85em; opacity:.6;
  transition:transform var(--dur-fast);
}
details.panel[open] > summary::after { transform:rotate(90deg); }
details.panel > summary:hover { background:var(--card-2); }
details.panel > .panel-body {
  padding:var(--space-2) var(--space-4) var(--space-4);
  border-top:1px solid var(--line);
}

/* Info hint glyph: small ⓘ that holds long help text in a native
   hover tooltip. Replaces blocks of explanatory prose that crowd the
   surface. The user's screen reader picks it up via aria-label. */
.info-hint {
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:.35rem;
  background:var(--card-2); color:var(--muted);
  border:1px solid var(--line); border-radius:50%;
  font-size:.7rem; font-weight:var(--weight-semibold);
  cursor:help; user-select:none;
  vertical-align:middle;
}
.info-hint:hover { color:var(--accent); border-color:var(--accent); }

/* Sidebar nav-groups become collapsible. The visual chevron sits in
   the .nav-group header itself. */
.sidebar details.nav-group-d > summary {
  list-style:none;
  cursor:pointer;
  user-select:none;
  font-size:var(--text-xs);
  font-weight:var(--weight-bold);
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--fg-2);
  padding:.9rem var(--space-2) .35rem;
  display:flex; align-items:center; gap:.35rem;
}
.sidebar details.nav-group-d > summary::-webkit-details-marker { display:none; }
.sidebar details.nav-group-d > summary::before {
  content:"\25B8"; font-size:.65em; opacity:.5;
  transition:transform var(--dur-fast);
}
.sidebar details.nav-group-d[open] > summary::before { transform:rotate(90deg); }
.sidebar details.nav-group-d > summary:hover { color:var(--fg-2); }

/* The browser default [hidden] rule has specificity (0,0,1,0), equal to
   any single class selector. Author CSS like .shell { display:grid } and
   .login-back { display:flex } therefore win and the element renders
   even with the hidden attribute set. Combined selectors below restore
   the expected behaviour; the JS toggles el.hidden which adds/removes
   the attribute and re-evaluates these rules. */
.shell[hidden],
.login-back[hidden],
.nav[hidden],
.nav-group[hidden] { display:none; }

/* Padding-left, used for indented sub-blocks. */
.pl-4 { padding-left:var(--space-4); }
.pt-2 { padding-top:var(--space-2); }
.pt-3 { padding-top:var(--space-3); }

/* Vertically-stacked dividers (used by ledger detail panels). */
.div-top { border-top:1px solid var(--line); }