/* Origin8 UI — STRUCTURE ONLY. Every color/shape knob is a variable; a
   theme is a file in public/themes/<name>.css that sets them (and may add
   theme-scoped rules). The layout loads ui.css + the operator's theme file
   (Ui::THEMES). The :root block below is the safety net if a theme file
   ever fails to load — it is not a theme. */
:root{
  --bg:#16171b;--card:#1e2025;--head:#24262c;--line:#34373f;--text:#e9e7e2;--muted:#a09d94;--faint:#77746c;
  --accent:#f5a02d;--accent2:#7db8e8;--link:#7db8e8;--ok:#86c67c;--bad:#e07a6a;--warn:#e2b34e;--sb:#e2b34e;
  --glow:none;--grid:none;--label-font:inherit;--label-transform:none;--label-spacing:0;--radius:8px;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;--sans:system-ui,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px var(--sans);line-height:1.45;background-image:var(--grid);background-size:24px 24px}
a{color:var(--link)} .dim{color:var(--faint)} .m{font-family:var(--mono);color:var(--accent)} .sb{color:var(--sb)} .accent{color:var(--accent)}
.ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)}
.wrap{white-space:normal;overflow-wrap:anywhere;word-break:break-word}   /* everything shown, wrapped — long tokens (URLs, JSON) break anywhere so the table never leaves the window */
h1,h2,h3{font-family:var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing)}
h1{font-weight:650;font-size:1.4rem;margin:0 0 .6rem;color:var(--accent)}
h2{font-size:.95rem;margin:1.6rem 0 .4rem;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:.25rem}
h2 .dim,h1 .dim{text-transform:none;letter-spacing:0;font-family:var(--sans);font-weight:400}
h3{margin:1.4rem 0 .3rem;font-size:.85rem;color:var(--muted)}

/* frame */
body.framed{display:grid;grid-template-columns:210px 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top top" "menu main" "foot foot";min-height:100vh}
header.top{grid-area:top;display:flex;align-items:center;gap:.8rem;padding:.55rem 1.2rem;background:var(--head);border-bottom:1px solid var(--line)}
header.top .brand{color:var(--accent);text-decoration:none;font:650 1.05rem var(--mono);letter-spacing:.06em;text-shadow:var(--glow);flex:1}
header.top .who{margin:0} header.top .who button{margin-left:.6rem}
nav.menu{grid-area:menu;background:var(--card);border-right:1px solid var(--line);padding:.8rem 0}
nav.menu ul{list-style:none;margin:0;padding:0}
nav.menu ul.pins{padding-bottom:.5rem;margin-bottom:.4rem;border-bottom:1px solid var(--line)}
nav.menu li{display:flex;align-items:center}
nav.menu li.group{display:block}
nav.menu summary{list-style:none;cursor:pointer;display:flex;gap:.4rem;padding:.6rem 1rem .25rem;font:.68rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);user-select:none}
nav.menu summary::-webkit-details-marker{display:none}
nav.menu summary::before{content:'▸';width:.7rem} nav.menu details[open]>summary::before{content:'▾'}
nav.menu summary:hover{color:var(--accent2)} nav.menu summary .n{margin-left:auto;letter-spacing:0}
nav.menu li a{flex:1;display:block;padding:.35rem 1rem;color:var(--text);text-decoration:none;border-left:3px solid transparent}
nav.menu ul.m1 li a{padding-left:1.7rem}
nav.menu li a:hover{background:var(--head);color:var(--accent2)}
nav.menu li.active>a{color:var(--accent);border-left-color:var(--accent);text-shadow:var(--glow)}
nav.menu .pin{background:none;border:0;padding:.2rem .8rem .2rem .3rem;color:var(--faint);cursor:pointer;font-size:.85rem;opacity:0}
nav.menu li:hover .pin,nav.menu .pin:focus{opacity:1} nav.menu .pin:hover{color:var(--accent)}
nav.menu .pin.on{color:var(--accent)} nav.menu details .pin.on{opacity:.55}
nav.bar{display:none}
main{grid-area:main;padding:1.4rem 1.6rem;min-width:0;overflow-x:auto}
main.bare{max-width:420px;margin:12vh auto;padding:1.6rem}
footer.foot{grid-area:foot;padding:.5rem 1.2rem;border-top:1px solid var(--line);color:var(--faint);font:.72rem var(--mono)}

/* narrow (owner 2026-09-29): a bottom bar with the first four pins + More; More opens the whole menu as a sheet from below */
@media (max-width:760px){
  body.framed{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"top" "main" "foot";padding-bottom:3.3rem}   /* 1fr on MAIN (hiccup 2026-09-17: short pages sat at the bottom) */
  nav.menu{display:none;position:fixed;left:0;right:0;bottom:3.2rem;max-height:75vh;overflow-y:auto;z-index:20;border-right:0;border-top:1px solid var(--line)}
  body.nav-open nav.menu{display:block}
  nav.menu .pin{opacity:1;padding:.5rem 1rem}   /* no hover on a phone: the stars always show */
  nav.menu details .pin.on{opacity:1}
  nav.menu li a{padding-top:.55rem;padding-bottom:.55rem}
  nav.bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;height:3.2rem;z-index:21;background:var(--head);border-top:1px solid var(--line)}
  nav.bar a,nav.bar button{display:flex;align-items:center;justify-content:center;padding:0 .2rem;background:none;border:0;border-top:2px solid transparent;color:var(--text);text-decoration:none;font:.75rem var(--sans);text-align:center;cursor:pointer}
  nav.bar .active{color:var(--accent);border-top-color:var(--accent)}
  nav.bar .more{color:var(--accent2)} body.nav-open nav.bar .more{color:var(--accent)}
  main{padding:1rem}
  header.top .who .dim{display:none}
}

/* panels, tables, forms */
table{border-collapse:collapse;margin-top:.5rem;width:auto;max-width:100%}
td,th{padding:.35rem .8rem;border-bottom:1px solid var(--line);text-align:left;font-size:.85rem;vertical-align:top}
td{overflow-wrap:anywhere}   /* bad data never widens a table past the window (owner 2026-09-21): a 2000-char token breaks mid-word rather than push everything right */
.nw{white-space:nowrap}      /* …except the short cells: ids, codes, dates, prices stay on one line */
th{color:var(--muted);font:600 .72rem var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing);white-space:nowrap}
tr.total{font-weight:600} tr:hover td{background:var(--head)}
form.card,div.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1rem 1.2rem;margin:.6rem 0;max-width:min(640px,100%);overflow-wrap:anywhere}
label{display:block;margin:.6rem 0 .2rem;color:var(--muted);font:.72rem var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing)}
label input[type=radio],label input[type=checkbox]{margin-right:.4rem}
input[type=text],input[type=password],input[type=email],input[type=datetime-local],select,textarea{width:100%;padding:.45rem .6rem;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);font:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent2);box-shadow:var(--glow)}
textarea{font-family:var(--mono);min-height:7rem}
button,.btn{padding:.4rem .9rem;background:var(--accent);color:#0a0a0a;border:0;border-radius:var(--radius);font:600 .85rem var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing);cursor:pointer;text-decoration:none;display:inline-block}
button.quiet,.btn.quiet{background:transparent;color:var(--accent2);border:1px solid var(--accent2)} button.danger{background:var(--bad);color:#fff}
button:disabled{opacity:.4;cursor:default}
.flash{padding:.6rem .9rem;border-radius:var(--radius);margin:0 0 .8rem;border:1px solid var(--line);background:var(--card)}
.flash.ok{border-color:var(--ok);color:var(--ok)} .flash.error{border-color:var(--bad);color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--card));font-weight:600}
/* a warning (a state to know about) is not an error (a refusal) — owner 2026-10-27: "the warnings and the errors kinda blend together" */
.flash.warn{border:1px dashed var(--warn);color:var(--warn)}
pre{margin:0;font:12px var(--mono);color:var(--accent);white-space:pre-wrap;word-break:break-all}
code{font-family:var(--mono);color:var(--accent);overflow-wrap:anywhere;word-break:break-all}   /* the otpauth URI wraps inside its card (2026-09-17) */
.codes{font:1rem var(--mono);columns:2;max-width:320px;overflow-wrap:anywhere}
.small{font-size:.78rem}
img.flag{vertical-align:-1px;margin-right:.35rem;border:1px solid var(--line)}
h2.country{display:inline-flex;align-items:center;gap:.5rem;margin:0;border:0;padding:0} h2.country img.flag{width:24px;height:17px}
details.country{margin-top:1.2rem;border-bottom:1px solid var(--line);padding-bottom:.4rem}
details.country>summary{cursor:pointer;list-style:none;padding:.3rem 0} details.country>summary::-webkit-details-marker{display:none}
details.country>summary::before{content:"▸";display:inline-block;width:1.1rem;color:var(--accent2);transition:transform .15s} details.country[open]>summary::before{transform:rotate(90deg)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 0}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .6rem;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);color:var(--text);text-decoration:none;font:.8rem var(--mono)}
.chip:hover{border-color:var(--accent2)} .chip.quiet{color:var(--faint)}
.cnt{font:.72rem var(--mono);text-transform:none;letter-spacing:0;cursor:help;border-bottom:1px dotted var(--line)}

/* country picker (Ui::countrypick + ui.js) */
.cpick{position:relative;display:inline-block;min-width:240px;max-width:100%}
.cpick-btn{display:flex;align-items:center;gap:.4rem;width:100%;text-align:left;background:var(--bg);color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:.45rem .6rem;font:inherit;text-transform:none;letter-spacing:0;cursor:pointer}
.cpick-btn::after{content:"▾";margin-left:auto;color:var(--accent2)}
.cpick-list{display:none;position:absolute;z-index:20;top:100%;left:0;min-width:100%;max-height:320px;overflow:auto;background:var(--card);border:1px solid var(--accent2);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.5)}
.cpick.open .cpick-list{display:block}
.cpick-filter{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--head)}
.cpick .opt{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem;cursor:pointer;white-space:nowrap}
.cpick .opt:hover,.cpick .opt.sel{background:var(--head);color:var(--accent)}
.cpick.multi .opt{text-transform:none;letter-spacing:0;font:inherit;margin:0} .cpick.multi .opt input{margin:0 .2rem 0 0}
.cpick.multi .cpick-btn img.flag{margin-right:.2rem}

/* tabs */
.tabs{display:flex;gap:.3rem;margin:.6rem 0 1rem;border-bottom:1px solid var(--line)}
.tabs a{padding:.45rem .9rem;color:var(--muted);text-decoration:none;font:600 .8rem var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing);border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}
.offdef{color:var(--warn);font-weight:700;cursor:help}
.req{color:var(--bad);font-weight:700;cursor:help;margin-left:.15rem} .req[hidden]{display:none}
.reqnote{color:var(--faint);font-size:.74rem;margin:.2rem 0 .6rem} .reqnote .req{margin:0 .2rem 0 0}
.knob{display:grid;grid-template-columns:220px 1fr;gap:.2rem 1rem;align-items:start;padding:.45rem 0;border-bottom:1px dotted var(--line)}
.knob label{margin:.3rem 0 0} .knob .help{color:var(--faint);font-size:.74rem;margin-top:.15rem}
.bad-knob{outline:2px solid var(--bad);outline-offset:4px;border-radius:var(--radius)}
.badge{display:inline-block;min-width:1.3em;padding:0 .35em;margin-left:.35rem;border-radius:1em;background:var(--warn);color:var(--bg);font-size:.7rem;font-weight:700;line-height:1.4;text-align:center;letter-spacing:0}   /* a count on the menu: uploads waiting for you (2026-10-12) */   /* a field behind a refused save (2026-10-08): touching it clears the mark */
.ticklist{columns:3;column-gap:1rem;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .6rem;font:.78rem var(--mono)}
.ticklist label{display:block;margin:.1rem 0;text-transform:none;letter-spacing:0;color:var(--text);break-inside:avoid} .ticklist input{margin-right:.35rem}
@media (max-width:760px){.knob{grid-template-columns:1fr}}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;align-items:end;margin:.4rem 0 .8rem} .filters label{margin:0 0 .2rem} .filters>div{min-width:120px}

/* tiles + gauges (the HUD numbers, real data behind them) */
/* charts (2026-09-30, Statistics › Trend — Ui\Chart): the series slots are the validated dark categorical set (fixed
   order; every slot ≥ 3:1 on both themes' card surface — memnarch #0a0e12, plain dark #1e2025). A color follows the
   entity, never its rank; status colors (--ok/--bad/--warn) are never a series. Text never wears a series color. */
:root{--series-1:#3987e5;--series-2:#d95926;--series-3:#199e70;--series-4:#c98500;--series-5:#d55181;--series-6:#008300;--series-7:#9085e9;--series-8:#e66767}
.chart{position:relative;outline:none}
.chart svg{display:block;width:100%;height:auto}
.chart-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-base{stroke:var(--faint);stroke-width:1;vector-effect:non-scaling-stroke}
.chart-axis{fill:var(--faint);font:11px var(--mono)}
.chart-label{fill:var(--muted);font:11px var(--sans)}
.chart-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.chart-dot{stroke:var(--card);stroke-width:2;vector-effect:non-scaling-stroke}
.chart-cross{stroke:var(--muted);stroke-width:1;vector-effect:non-scaling-stroke}
.chart:focus-visible{box-shadow:0 0 0 1px var(--accent2)}
.chart-tip{position:absolute;top:6px;z-index:5;background:var(--head);border:1px solid var(--line);border-radius:var(--radius);padding:.4rem .65rem;font-size:.78rem;line-height:1.5;pointer-events:none;white-space:nowrap}
.chart-tip .d{color:var(--muted);font:.72rem var(--mono)}
.chart-tip b{color:var(--text);font:600 .82rem var(--mono);margin-right:.45rem}
.chart-tip .n{color:var(--muted)}
.chart-tip .k,.chart-legend .k{display:inline-block;width:14px;height:2px;border-radius:1px;vertical-align:middle;margin-right:.45rem}
.chart-legend{display:flex;flex-wrap:wrap;gap:.3rem 1.1rem;margin:.2rem 0 .5rem;font-size:.8rem;color:var(--muted)}
/* heatmaps (2026-09-30, Statistics › Heatmap): ONE hue, dark (few) → light (many) on the dark themes — the palette's
   sequential blue ramp (700 → 200); zero is its own neutral cell (--head), never "a little"; a 2px surface gap between cells */
.heat-wrap{overflow-x:auto;overflow-y:hidden}   /* scroll INSIDE the card, only when a grid is wider than the screen — never on .card (the theme's corner brackets sit on its edge: a scrollbar every time) */
.heat{border-collapse:separate;border-spacing:2px;margin:0}
.heat th,.heat td{padding:0;border:0;background:none}
.heat tr:hover td{background:none}
.heat th.hd{font:11px var(--mono);color:var(--faint);text-align:left;white-space:nowrap;height:16px;vertical-align:bottom}
.heat th.rl{font:.78rem var(--sans);color:var(--muted);text-align:left;white-space:nowrap;padding-right:.7rem;text-transform:none;letter-spacing:0}
.heat td.c{width:14px;min-width:14px;height:16px;border-radius:2px;cursor:pointer}
.heat.hours td.c{width:24px;min-width:24px;cursor:default}
.heat td.c:hover{outline:1px solid var(--text);outline-offset:0}
.h0{background:var(--head)!important}.h1{background:#0d366b!important}.h2{background:#184f95!important}.h3{background:#256abf!important}.h4{background:#3987e5!important}.h5{background:#6da7ec!important}.h6{background:#9ec5f4!important}
.heat-legend{display:flex;align-items:center;gap:3px;margin-top:.6rem;font-size:.75rem;color:var(--faint)}
.heat-legend i{display:inline-block;width:14px;height:12px;border-radius:2px}
.heat-legend span{margin:0 .4rem}
/* sparklines (2026-09-30, Statistics › Watchdog): one series (slot 1), the dashed line = normal, the band = the finding's days */
.spark{display:block}
.spark-line{fill:none;stroke:var(--series-1);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.spark-dot{fill:var(--series-1)}
.spark-base{stroke:var(--faint);stroke-width:1;stroke-dasharray:3 3}
.spark-mark{stroke:var(--warn);stroke-width:1.5}   /* a day the coreg (or the system) was changed — the watchdog, 2026-10-05 */
.spark-hi{fill:var(--line)}
.spark-hit{fill:transparent;cursor:default}
.spark-hit:hover{fill:var(--line);opacity:.5}
.tiles{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0}
.tile{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:.7rem 1rem;min-width:150px;display:flex;align-items:center;gap:.8rem}
.tile b{display:block;font:650 1.5rem var(--mono);color:var(--accent);text-shadow:var(--glow);line-height:1.1}
.tile span{color:var(--muted);font:.68rem var(--label-font);text-transform:var(--label-transform);letter-spacing:var(--label-spacing)}
.gauge{--v:0;width:56px;height:56px;border-radius:50%;flex:none;display:grid;place-items:center;font:600 .8rem var(--mono);color:var(--accent2);
  background:conic-gradient(var(--accent2) calc(var(--v)*1%),var(--line) 0)}
.gauge::before{content:"";position:absolute;width:44px;height:44px;border-radius:50%;background:var(--card)} .gauge i{position:relative;font-style:normal}
.bar{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-top:.3rem} .bar i{display:block;height:100%;background:var(--accent2);box-shadow:var(--glow)}
/* date fields (2026-10-21): typed or picked, one format everywhere — ui.js */
.dp-wrap{position:relative;display:inline-flex;align-items:center;gap:.25rem}
.dp-btn{padding:.3rem .45rem;line-height:1}
input.dp-bad{border-color:var(--bad)}
.dpick{position:absolute;z-index:30;top:100%;left:0;margin-top:.25rem;padding:.4rem;background:var(--card);border:1px solid var(--accent2);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,.5);min-width:230px}
.dp-head{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin-bottom:.3rem}
.dp-head button{padding:.15rem .5rem}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.dp-w{font-size:.75rem;color:var(--faint)}
.dp-d{padding:.25rem 0;border:1px solid transparent;border-radius:4px;background:none;color:var(--text);font:inherit;cursor:pointer;text-transform:none;letter-spacing:0}
.dp-d:hover{background:var(--head)}
.dp-d.today{border-color:var(--line)}
.dp-d.sel{background:var(--head);color:var(--accent);border-color:var(--accent)}
/* long lists (2026-10-21): the filter box above a select of more than 12 — ui.js */
.sel-find{display:block;width:100%;min-width:160px;margin-bottom:.2rem}