/* K18: light theme by default (dark ready), Cobalt accent, accent-filled top bar. Tokens: K15 family (abcZ mockup), UI mockup v2. */
:root {
  color-scheme: light;
  --bg:#EDF0EA; --surface:#FFFFFF; --raised:#F7F9F4; --sunken:#E4E8DF; --chrome:#DFE4DA;
  --ink:#141A1B; --muted:#5A676B; --faint:#7D888C; --line:#D9DFD6; --line-2:#C2CABE;
  --ok:#2B7554; --ok-soft:#E1EFE8; --warn:#9A5A11; --warn-soft:#F6EBDA; --bad:#A32E3D; --bad-soft:#F8E3E5; --info:#3D6175; --info-soft:#E4EDF1;
  --accent:#2A56C6; --accent-fill:#2A56C6; --accent-soft:#E3EAF9; --on-accent:#FFFFFF; --brand-block:#141A1B; --brand-ink:#E3EAE8;
  --r-s:4px; --r-m:7px; --r-l:11px;
  --f-head:"Bahnschrift","DIN Alternate","Segoe UI",system-ui,sans-serif;
  --f-body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-mono:"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0D1215; --surface:#141A1E; --raised:#1A2227; --sunken:#090E11; --chrome:#111A1E;
  --ink:#E3EAE8; --muted:#94A3A8; --faint:#76838A; --line:#232E33; --line-2:#33424A;
  --ok:#59C495; --ok-soft:#10261D; --warn:#DE9B45; --warn-soft:#291D0F; --bad:#E86D7E; --bad-soft:#2B1317; --info:#84AAC0; --info-soft:#132029;
  --accent:#86A8F2; --accent-fill:#3A66D4; --accent-soft:#16203A; --brand-block:#090E11;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 13px; line-height: 1.45; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { font-family: var(--f-head); font-size: 21px; font-weight: 700; margin: 2px 0 0; text-wrap: balance; }
h2 { font-family: var(--f-head); font-size: 14px; font-weight: 600; margin: 0; }
.eyebrow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); }
.muted { color: var(--muted); }
.mono { font-family: var(--f-mono); font-size: 12px; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.note { font-size: 11.5px; color: var(--faint); margin: 0; }

.btn { border: 1px solid var(--line-2); background: var(--surface); padding: 6px 14px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: var(--on-accent); }
.btn.danger { color: var(--bad); }
.btn.small { padding: 3px 10px; font-size: 12px; }
.btn:disabled { opacity: .45; cursor: default; }
a.btn { display: inline-block; color: var(--ink); text-decoration: none; }
a.btn.primary { color: var(--on-accent); }
.linkbtn { border: 0; background: none; padding: 0; color: var(--accent); cursor: pointer; }

.card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-m); padding: 14px 16px; min-width: 0; }
.card > header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.card > header .meta { margin-left: auto; font-size: 12px; color: var(--muted); }
.card.flush { padding: 4px 6px; }

.ph { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.ph .actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field > label, .field > .lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
.input { background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-s); padding: 6px 9px; min-width: 0; }
.input:focus { border-color: var(--accent); outline: none; }
.check { display: inline-flex; gap: 6px; align-items: center; }

.grid { display: grid; gap: 16px; }
.g-kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2 { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.kpi .v { font-family: var(--f-head); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi .s { font-size: 12px; color: var(--muted); }
.kpi.bad .v { color: var(--bad); }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 100px; font-size: 11px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.ok { background: var(--ok-soft); color: var(--ok); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.info { background: var(--info-soft); color: var(--info); }
.chip.acc { background: var(--accent-soft); color: var(--accent); }
.chip.plain { background: transparent; color: var(--muted); border-color: var(--line-2); }
.chip.plain::before { display: none; }

.tw { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); padding: 6px 10px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
td { padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td.wrap { white-space: normal; }
/* A path or expression has no spaces: break it anywhere, or it sets the column's width (S13 tour: Import export preview).
   S21: but not narrower than 24 characters, or a wide table squeezes it to one or two characters per line (60 px, 13 lines). */
td.wrap.mono { overflow-wrap: anywhere; min-width: 24ch; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface); }
tbody tr.sel td { background: var(--accent-soft); }

.banner { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 9px 14px; border-radius: var(--r-m); }
.banner.bad { background: var(--bad-soft); color: var(--bad); }
.banner.warn { background: var(--warn-soft); color: var(--warn); }
.banner.ok { background: var(--ok-soft); color: var(--ok); }
.banner b { color: var(--ink); }

.log { background: var(--sunken); border: 1px solid var(--line); border-radius: var(--r-s); padding: 9px 11px; font-family: var(--f-mono); font-size: 11.5px; line-height: 1.55; height: 340px; overflow: auto; white-space: pre; }
.log .tx { color: var(--accent); }
.log .note { color: var(--faint); font-size: 11.5px; }
.log .head { color: var(--ok); }

.kv { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0 12px; font-size: 12.5px; }
.kv > * { padding: 5px 0; border-bottom: 1px solid var(--line); }
.kv .o { font-family: var(--f-mono); font-size: 11px; color: var(--faint); }
.kv .v { font-family: var(--f-mono); text-align: right; font-variant-numeric: tabular-nums; }

.drawer-back { position: fixed; inset: 0; background: rgba(13, 18, 21, .35); display: flex; justify-content: flex-end; z-index: 20; }
.drawer { width: min(440px, 100%); height: 100%; background: var(--surface); border-left: 1px solid var(--line-2); padding: 18px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.drawer.wide { width: min(640px, 100%); }
.drawer .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer footer { display: flex; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.err { color: var(--bad); font-size: 12px; }

@media (max-width: 980px) {
  .g-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.push { margin-left: auto; }
.ml { margin-left: 6px; }
.kpi .v.small-v { font-size: 20px; }