/* HAYL restyle (owner-approved 22 Oct 2026) — taste-skill app rules, style "Data terminal", shell "Open plane".
   Kept from the brand: E2 mark, gold accent, teal hydro, dark default, Instrument Sans + Geist Mono.
   The style's move: every selection is a 1px gold line as wide as its label; figures carry signs, not colour. */
:root:not([data-theme="light"]) {
  --bg: #131715;          /* ground: cards sit darker than it */
  --side: #131715;
  --panel: #0d100f;       /* cards darker than the ground */
  --panel-2: #181d1a;     /* nested / raised */
  --seam: #232a26;        /* structural line */
  --seam-2: #3a443e;      /* control outline */
  --text: #ededea;        /* neutral ink (no cream) */
  --muted: #b2b8b3;       /* secondary text */
  --dim: #949b95;         /* meta, still 4.5:1 on the card */
}
html, body { font-size: 14px; }
/* Two faces: Instrument Sans for words, Geist Mono for every figure (the style's face). The serif goes. */
.title h1 { font-family: var(--sans); font-weight: 600; font-size: 24px; letter-spacing: -.01em; }
.title p { font-size: 14px; color: var(--muted); }
.sec-head h2 { font-family: var(--sans); font-weight: 600; font-size: 20px; letter-spacing: -.005em; }

/* No tiny tracked capitals anywhere: sentence case, readable size. */
.nav-label, .item .cat, .opp-issuer, .opp .next-k, .opp .why span, .chip-lbl, .opp-filters label, .chg, .newtag,
.asset-card .k, .results .k, th, .link-card .cat, .ledger-total .p, .kpi .lbl {
  text-transform: none !important; letter-spacing: 0 !important;
}
.nav-label { font-size: 12px; font-weight: 500; color: var(--dim); padding-bottom: 4px; }
th { font-size: 12px; font-weight: 400; color: var(--dim); }
.item .cat { font-size: 12px; font-weight: 600; }
.opp-issuer { font-size: 13px; font-weight: 600; color: var(--muted); }
.opp .next-k, .opp .why span { font-size: 12px; font-weight: 600; color: var(--muted); }
.chg, .newtag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.chg.added { background: #172a1d; color: #3fc07a; border-color: transparent; }
.chg.updated { background: #2a2414; color: #d9a441; border-color: transparent; }
.newtag { background: #2a2414; border-color: transparent; }
.opp-filters label, .chip-lbl { font-size: 12px; }
/* Nothing under 11px. */
.nav .badge, .search kbd, .kpi .per, .item .when, .results .k, .asset-card .k, .seg button { font-size: 11.5px; }

/* Selection = one 1px gold line, as wide as its label (nav, chips, segmented controls). No pills, no fills. */
.nav a { background: none !important; border: 0 !important; position: relative; color: var(--muted); }
.nav a::before { display: none !important; }
.nav a:hover { color: var(--text); }
.nav a.active { color: var(--text); }
.nav a.active::after { content: ""; position: absolute; left: 12px; right: auto; width: calc(100% - 24px); bottom: 3px; height: 1px; background: var(--gold); }
.nav .badge { background: none; border: 0; color: var(--muted); padding: 0; }
.chip, .seg button { background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: var(--muted); padding: 0 2px; height: 26px; }
.chip[aria-pressed="true"], .seg button[aria-pressed="true"] { color: var(--text) !important; box-shadow: inset 0 -1px 0 var(--gold) !important; }
.chip i { display: none; }
.seg { background: none; border: 0; gap: 14px; }
.chips { gap: 14px; }

/* KPIs: type, not tiles. One container split by 1px dividers; no sparklines, no colour dots. */
.kpis { gap: 0 !important; background: var(--panel); border: 1px solid var(--seam); border-radius: 8px; overflow: hidden; }
.kpis .kpi { border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; border-left: 1px solid var(--seam) !important; }
.kpis .kpi:first-child { border-left: 0 !important; }
.kpi .spark { display: none !important; }
.kpi .lbl i { display: none !important; }
.kpi .lbl { font-size: 13px; color: var(--muted); }
.kpi .val b { font-size: 28px; font-weight: 400; color: var(--text); }
.kpi .per { color: var(--dim); }

/* Cards: darker than the ground, 1px structural line, one tight radius, no shadows at rest. */
.panel { background: var(--panel); border: 1px solid var(--seam); border-radius: 8px; box-shadow: none !important; }
.opp { background: var(--panel-2); border-color: var(--seam); border-radius: 6px; }
.btn, .btn-sm, .theme-btn, .to-top { box-shadow: none !important; border-radius: 6px; }
.to-top { border-radius: 50%; }
.btn-notice { color: var(--text) !important; border-color: var(--seam-2) !important; }
.btn-notice:hover { border-color: var(--gold) !important; }
/* Accent budget: gold only on the selection line, the losses share and the map's interconnectors. */
.kpi-evidence summary, .datatable summary, .opp summary, .aboutdata summary { color: var(--muted) !important; }
.kpi-evidence summary:hover, .datatable summary:hover, .opp summary:hover { color: var(--text) !important; }
.sref { color: var(--muted) !important; }
.read-progress { height: 1px; }
.tibeb { opacity: .9; }

/* Rows that share a line keep their own height instead of stretching into blank bands. */
.grid-main, .grid-2 { align-items: start; }

/* ---- Signature element: where the power went (energy balance strip) ---- */
.flow { margin: 0 0 14px; padding: 18px 20px; background: var(--panel); border: 1px solid var(--seam); border-radius: 8px; }
.flow-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; }
.flow-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.flow-head p { margin: 0; font-size: 14px; color: var(--text); }
.flow-head .stamp { font-size: 12px; color: var(--dim); }
.flow-bar { display: flex; gap: 2px; height: 14px; margin: 16px 0 12px; }
.flow-bar span { display: block; height: 100%; }
.flow-nodes { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; gap: 0; }
.flow-node { padding: 2px 16px; border-left: 1px solid var(--seam); }
.flow-node:first-child { border-left: 0; padding-left: 0; }
.flow-node .l { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.flow-node .l i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.flow-node .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 22px; margin-top: 4px; }
.flow-node .v small { font-size: 12px; color: var(--dim); margin-left: 4px; }
.flow-node .s { font-size: 12px; color: var(--dim); margin-top: 2px; font-family: var(--mono); }
.flow-src { font-size: 12px; color: var(--dim); margin-top: 12px; }
@media (max-width: 700px) {
  .flow-nodes { grid-template-columns: 1fr 1fr; gap: 12px 0; }
  .flow-node:first-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
  .flow-node:nth-child(2), .flow-node:nth-child(4) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr 1fr !important; }
  .kpis .kpi { border-left: 0 !important; border-top: 1px solid var(--seam) !important; }
  .kpis .kpi:nth-child(even) { border-left: 1px solid var(--seam) !important; }
  .kpis .kpi:first-child, .kpis .kpi:nth-child(2) { border-top: 0 !important; }
  .navs { padding-right: 16px; }
}
/* refinements */
.kpi .per { position: static !important; display: block; margin: 2px 0 0; }
.kpi .lbl { padding-right: 0 !important; }
.flow { margin-top: 14px; }
.nav a.active::after { display: none; }
.nav a.active { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* light theme counterparts */
[data-theme="light"] { --dim: #5f645e; }
[data-theme="light"] .chg.added { background: #dcfae5; color: #04250e; }
[data-theme="light"] .chg.updated, [data-theme="light"] .newtag { background: #fbf3e1; color: #6e4c0e; }
[data-theme="light"] .opp { background: #fbfaf6; }

/* Access-measures comparison: stack rows as cards on phones */
@media (max-width: 640px) {
  .acc-table thead { display: none; }
  .acc-table, .acc-table tbody { display: block; }
  .acc-table tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
  .acc-table td { display: block; padding: 0; border: 0; }
  .acc-table td:nth-child(1) { grid-column: 1; font-weight: 600; }
  .acc-table td:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; text-align: right; }
  .acc-table td:nth-child(3) { grid-column: 1; color: var(--muted); }
  .acc-table td:nth-child(4) { grid-column: 1 / -1; }
}