/* Nyman Investment — Control Center.
   Design system ported from the Finance Hub (project-finance-hub frontend/src/index.css, docs/designsystem/), so the
   two read as one product: the terminal palette, Space Grotesk headings, IBM Plex text and mono numbers, one card
   pattern, mono badges, the left rail and the bottom status line. The fonts are self-hosted (fonts/, SIL OFL), never
   fetched from a CDN (CSP font-src 'self'). */
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin-wght.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/ibm-plex-sans-latin-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }


* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font: 14px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* Links: the Hub's (no underline, colour from context); an underline only inside running text */
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
:is(p, .md, .note, .lede, td) a:not(.btn):not(.wikilink):not(.cite) { text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
:is(p, .md, .note, .lede, td) a:not(.btn):not(.wikilink):not(.cite):hover { color: var(--text); text-decoration-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--disp); font-weight: 600; letter-spacing: var(--disp-tracking); color: var(--text); }
h2, h3 { font-size: var(--t-ui); }
code { font-family: var(--mono); font-size: .88em; background: var(--surface); border: 1px solid var(--line); border-radius: 2px; padding: 0 4px; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -40px; background: var(--accent); color: var(--accent-ink); padding: 6px 10px; border-radius: var(--r); z-index: 200; }
.skip-link:focus { top: 8px; }
.noscript { padding: 24px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--dim); }

/* ============================================================
   Hub components (ported from the Hub's index.css, same names)
   ============================================================ */
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sub2 { display: block; color: var(--dim); font-size: 11px; }
.dim { color: var(--dim); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); min-width: 0; }
.card.tight { padding: var(--s3); }
.card-hd { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); margin-bottom: var(--s3); }
.card-hd h2, .card-hd h3 { font-family: var(--disp); font-size: 13px; font-weight: 600; margin: 0 auto 0 0; }
.card-hd p, .card-hd .card-sub { font-size: 11px; color: var(--dim); margin: 0; }
.card-hd a.go { font-family: var(--mono); color: var(--accent); text-decoration: none; }
.kv { display: flex; justify-content: space-between; gap: var(--s3); padding: 6px 0; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); }
.kv b { font-family: var(--mono); font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; line-height: 1.2; }
.badge.ok { color: var(--pos); border-color: var(--pos-line); }
.badge.bad { color: var(--neg); border-color: var(--neg-line); }
.badge.mid { color: var(--warn); border-color: var(--warn-line); }
.badge.acc { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.strip { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.strip-hd { padding: 9px 14px; border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); }
.strip-hd p { font-size: 11px; color: var(--dim); margin: 0; }
.strip-body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cell { padding: 13px 14px; border-right: 1px solid var(--line-soft); min-width: 0; }
.cell:last-child { border-right: 0; }
.cell .l { font-size: 10.5px; color: var(--dim); margin-bottom: 3px; }
.cell .v { font-family: var(--mono); font-size: var(--t-body); font-variant-numeric: tabular-nums; }
.cell .v a { text-decoration: none; }
.cell .u { font-family: var(--mono); font-size: 10.5px; color: var(--dim); margin-top: 2px; }
.bignum { border: 1px solid var(--line); border-left: 2px solid var(--accent); background: var(--raised); border-radius: var(--r); padding: var(--s4); }
.meter { height: 5px; background: var(--ink); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.grid { display: grid; gap: var(--s3); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s3); align-items: start; }
.note { font-size: 11.5px; color: var(--dim); border-left: 2px solid var(--line); padding-left: 10px; margin-top: var(--s3); }
.tag { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 2px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.kbd { font-family: var(--mono); font-size: 10.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 2px; padding: 2px 6px; background: var(--surface); }
.todo { display: flex; gap: 10px; align-items: flex-start; padding: 9px 8px; margin: 0 -8px; border-bottom: 1px solid var(--line-soft); border-radius: var(--r); text-decoration: none; color: inherit; }
.todo:last-child { border-bottom: 0; }
.todo:hover { background: var(--raised); color: var(--text); }
.todo .ic { color: var(--accent); font-family: var(--mono); font-size: 12px; width: 16px; text-align: center; flex: none; margin-top: 1px; }
.todo .ic.warn { color: var(--warn); }
.todo .ic.bad { color: var(--neg); }
div.todo .btn { flex: none; align-self: center; }
.todo .t { flex: 1; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.todo .d { display: block; color: var(--dim); font-family: var(--mono); font-size: 11px; margin-top: 2px; }
.todo .go { color: var(--dim); flex: none; font-family: var(--mono); }
.todo:hover .go { color: var(--accent); }
.tom-tekst { color: var(--dim); font-size: 13px; padding: 18px 0; text-align: center; }

/* Buttons: the Hub's .btn, and Control Center's older names drawn the same way */
.btn, .btn-primary {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: var(--r); padding: 8px 14px;
  font: 600 12.5px var(--disp); letter-spacing: 0; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.btn:hover, .btn-primary:hover { filter: brightness(1.08); color: var(--accent-ink); background: var(--accent); }
.btn.ghost, .btn-quiet {
  background: transparent; color: var(--muted); border: 1px solid var(--line); border-radius: var(--r); padding: 6px 12px;
  font: 500 12.5px var(--sans); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}
.btn.ghost:hover, .btn-quiet:hover { color: var(--text); border-color: var(--muted); }
.btn.sm { padding: 5px 10px; font-size: 11.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: none; }

/* Status words in the Hub's badge form (never colour alone: the word is always there) */
.chip { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 3px 7px; border-radius: 2px; border: 1px solid var(--line); color: var(--dim); white-space: nowrap; }
.chip-proto { color: var(--dim); border-style: dashed; }
.chip-off { color: var(--dim); border-style: dashed; }
.chip-fixture { color: var(--dim); border-style: dashed; }
.chip-status { color: var(--muted); }
.chip-source { color: var(--dim); }
.chip-sensitive { color: var(--neg); border-color: var(--neg-line); }
.pill { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; padding: 3px 7px; border-radius: 2px; white-space: nowrap; border: 1px solid var(--line); color: var(--muted); }
.pill-reported { color: var(--muted); border-color: var(--line); }
.pill-unknown { color: var(--muted); border-color: var(--line); }
.pill-not-verified { color: var(--neg); border-color: var(--neg-line); }
.pill-verified { color: var(--pos); border-color: var(--pos-line); }
.pill-inferred { color: var(--muted); border-color: var(--line); }
.pill-other { color: var(--muted); border-color: var(--line); border-style: dashed; }
.pill-ok, .pill-pass { color: var(--pos); border-color: var(--pos-line); }
.pill-warning, .pill-warn, .pill-stale { color: var(--warn); border-color: var(--warn-line); }
.pill-off { color: var(--dim); border-color: var(--line); border-style: dashed; }
.pill-error, .pill-fail { color: var(--neg); border-color: var(--neg-line); }

/* ============================================================
   The shell: rail, content, status line (the Hub's geometry)
   ============================================================ */
.rail {
  position: fixed; top: var(--top-h); left: 0; bottom: var(--status-h); width: var(--rail-w); z-index: 30;
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.rail[hidden], .statuslinje[hidden], .topbar[hidden] { display: none; }

/* The top bar (two rooms, owner decision 7 Nov 2026, mockup C): brand, the room switch, ⌘K. One for the whole app. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: var(--top-h); z-index: 32;
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px; padding: 0 16px;
}
.top-brand { flex: none; font-size: var(--t-dialog); }
.room-switch { display: flex; flex: none; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.room-seg { display: flex; align-items: center; gap: 6px; padding: 6px 16px; font: 500 var(--t-table)/1.3 var(--sans); color: var(--muted); white-space: nowrap; }
.room-seg + .room-seg { border-left: 1px solid var(--line); }
.room-seg:hover { color: var(--text); background: var(--raised); }
.room-seg.on { background: var(--accent-bg); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.room-seg .tag { font-size: 8.5px; padding: 0 4px; }
.top-k {
  margin-left: auto; display: flex; gap: 10px; align-items: center; flex: 0 1 240px; min-width: 0;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 10px; color: var(--dim); font-family: var(--mono); font-size: var(--t-meta); cursor: pointer; text-align: left;
}
.top-k:hover { border-color: var(--accent); color: var(--muted); }
.top-k .ph { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-brand { padding: 14px 16px 10px; flex: none; }
.rail-brand .brand { text-decoration: none; display: block; }
.brand-name { font-family: var(--disp); font-size: 15.5px; font-weight: 600; letter-spacing: var(--disp-tracking); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.rail-k {
  margin: 0 12px 8px; display: flex; gap: 8px; align-items: center; flex: none; width: calc(100% - 24px); text-align: left;
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r);
  padding: 6px 10px; color: var(--dim); font-family: var(--mono); font-size: 11px; cursor: pointer;
}
.rail-k:hover { border-color: var(--accent); color: var(--muted); }
.rail-k .ph { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-g { padding: 10px 8px 2px; }
.rail-gl { display: block; padding: 0 10px 4px; font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.rail-i {
  display: flex; align-items: center; gap: 9px; width: 100%; text-decoration: none;
  color: var(--muted); font-size: 13px; padding: 5px 10px 5px 12px; border-radius: var(--r);
  box-shadow: inset 2px 0 0 transparent;
}
.rail-i:hover { background: var(--raised); color: var(--text); }
.rail-i.on { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.rail-i .ic { width: 16px; flex: none; color: var(--dim); font-family: var(--mono); font-size: 12px; text-align: center; }
.rail-i.on .ic { color: var(--accent); }
.rail-i .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-i .ct { font-family: var(--mono); font-size: 10px; font-weight: 500; color: var(--accent); background: var(--accent-bg); border-radius: 2px; padding: 1px 5px; flex: none; }
.rail-i .ct.warn { color: var(--warn); background: var(--warn-bg); }
.rail-i .ct.bad { color: var(--neg); background: var(--neg-bg); }
.rail-gl .tag { margin-left: 4px; font-size: 8.5px; padding: 0 4px; vertical-align: 1px; }
.badge.demo, .tag.demo { color: var(--dim); border-style: dashed; }
.rail-i .prikk { width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }
.rail-foot { margin-top: auto; padding: 10px 16px 12px; font-family: var(--mono); font-size: 9.5px; color: var(--dim); letter-spacing: .06em; border-top: 1px solid var(--line-soft); flex: none; display: grid; gap: 8px; }
.rail-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rail-demo { display: flex; align-items: center; gap: 6px; cursor: pointer; text-transform: uppercase; }
.rail-demo input { accent-color: var(--accent); margin: 0; }
.rail-lock { background: none; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; cursor: pointer; }
.rail-lock:hover { color: var(--text); border-color: var(--muted); }

body:not(.uten-skall) #app { margin-left: var(--rail-w); padding-top: var(--top-h); padding-bottom: var(--status-h); min-height: 100vh; }
body.uten-skall .rail, body.uten-skall .statuslinje, body.uten-skall .topbar { display: none; }
/* The Finance Hub room with the Hub's own menu in its frame: the frame takes the whole width under the top bar. */
body.hub-menu-in-frame:not(.uten-skall) #app { margin-left: 0; }

.statuslinje {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--status-h); z-index: 31;
  background: var(--surface); border-top: 1px solid var(--line);
  display: flex; align-items: stretch;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .06em;
  color: var(--dim); padding: 0 4px; overflow: hidden; white-space: nowrap;
}
.statuslinje .seg {
  display: flex; align-items: center; gap: 6px; padding: 0 12px; border: 0; border-right: 1px solid var(--line-soft);
  background: none; font: inherit; letter-spacing: inherit; color: inherit; text-transform: uppercase; cursor: pointer; text-decoration: none;
}
.statuslinje .seg:hover { background: var(--raised); color: var(--muted); }
.statuslinje .seg.stat { cursor: default; }
.statuslinje .seg.stat:hover { background: none; color: var(--dim); }
.statuslinje .seg b { color: var(--muted); font-weight: 500; }
.statuslinje .seg .ok { color: var(--pos); }
.statuslinje .seg .warn { color: var(--warn); }
.statuslinje .pdot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos); display: inline-block; }
/* Too little room (e.g. 1440 px with DEMO shown): the left segments shrink and end in "…"; the date, ? and ⌘K never do. */
/* Labels stay whole; the values shorten first, and the "Local · this machine only" text before them (its dot stays). */
.statuslinje > .seg { flex: 0 1 auto; min-width: min-content; overflow: hidden; }
.statuslinje > .seg .sl, .statuslinje > .seg b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.statuslinje > .seg .sl { flex: none; }
.statuslinje > .seg b { flex: 0 1 auto; }
.statuslinje > .seg.stat:first-child { flex-shrink: 4; min-width: 0; }
.statuslinje > .seg.stat:first-child .sl { flex: 0 1 auto; }
.statuslinje .hoyre { margin-left: auto; display: flex; align-items: stretch; flex: none; }
.statuslinje .hoyre .seg { border-right: 0; border-left: 1px solid var(--line-soft); }

/* Full-bleed workspaces fold the rail to icons (body.rail-smal): the Second Brain graph, and the Finance Hub app in
   the frame. The Hub brings its own rail and status line, so there Control Center's status line steps aside too
   (body.hub-modus) — one set of chrome on screen, not two. */
body.rail-smal { --rail-w: 52px; }
body.rail-smal .rail-brand, body.rail-smal .rail-gl, body.rail-smal .rail-i .lbl, body.rail-smal .rail-i .ct,
body.rail-smal .rail-i .prikk, body.rail-smal .rail-k .ph, body.rail-smal .rail-demo, body.rail-smal .rail-foot-row > span { display: none; }
body.rail-smal .rail-foot { padding: 8px 6px; }
body.rail-smal .rail-foot-row { justify-content: center; }
body.rail-smal .rail-lock { padding: 3px 4px; }
body.rail-smal .rail-k { margin: 10px 8px 4px; width: 36px; padding: 6px 0; justify-content: center; }
body.rail-smal .rail-g { padding: 4px 6px 0; border-top: 1px solid var(--line-soft); }
body.rail-smal .rail-i { padding: 7px 0; justify-content: center; }
body.rail-smal .rail-i .ic { font-size: 14px; }

/* Page header (every native page): breadcrumb, title, actions and one line of key numbers right, then underline tabs */
.page { max-width: 1420px; margin: 0; padding: 22px 32px 48px; }
.side-hd {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 16px;
}
.side-hd h1 { font-size: 22px; margin: 2px 0 0; line-height: 1.2; }
.side-hd-l { min-width: 0; }
.side-hd-r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.side-hd.has-tabs { border-bottom: 0; margin-bottom: 0; padding-bottom: 10px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--muted); }
.crumbs .sep { color: var(--line); }
.side-meta { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); text-align: right; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 10px; }
.side-meta .hero-greeting { font-family: var(--sans); font-size: var(--t-table); }
.side-hd .sub { color: var(--dim); font-size: 12.5px; text-align: right; max-width: 52ch; line-height: 1.45; }
.tabs { display: flex; gap: 2px; align-items: center; margin: 0 0 var(--s4); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.tabs .spacer { flex: 1; }
.tabs .side-handlinger { padding: 4px 0; }
/* Underline tabs (GitHub UnderlineNav): the active tab carries the accent line on the row's own border */
.tab { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: var(--t-table); padding: 8px 10px 9px; margin-bottom: -1px; border-radius: 0; white-space: nowrap; text-decoration: none; box-shadow: inset 0 -2px 0 transparent; }
.tab:hover { color: var(--text); box-shadow: inset 0 -2px 0 var(--line); }
.tab.on { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.tab .ct { font-family: var(--mono); font-size: var(--t-label); font-weight: 500; color: var(--muted); background: var(--raised); border-radius: 2px; padding: 1px 5px; line-height: 1.4; }
.tab.on .ct { color: var(--text); }
.side-handlinger { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
tr.krow td { background: var(--raised); box-shadow: inset 2px 0 0 var(--accent); }

/* Command palette, keyboard help (the Hub's .pal / .overlay) */
.pal-bakteppe, .overlay { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 100; overflow: auto; padding: 12vh 16px 40px; }
.overlay { display: flex; align-items: flex-start; justify-content: center; }
.overlay > .card { width: 560px; max-width: 100%; padding: var(--s5); }
.overlay > .card > .card-hd { border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s3); }
.overlay > .card > .card-hd h3 { font-size: 15.5px; }
.pal { width: 560px; max-width: 100%; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-pop); overflow: hidden; }
.pal-in { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 14px 16px; font: 15px var(--sans); color: var(--text); }
.pal-in:focus { outline: none; }
.pal-in::placeholder { color: var(--dim); }
.pal-list { max-height: 54vh; overflow: auto; padding: 6px 0 8px; }
.pal-sec { padding: 10px 16px 4px; }
.pal-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; cursor: pointer; }
.pal-row.on { background: var(--raised); }
.pal-row .ic { width: 20px; flex: none; color: var(--accent); font-family: var(--mono); font-size: 12px; text-align: center; }
.pal-row .nm { flex: 1; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-row .dt { color: var(--dim); font-family: var(--mono); font-size: 11px; white-space: nowrap; }
.pal-sek { flex: none; color: var(--dim); font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.pal-empty { padding: 18px 16px; color: var(--dim); font-size: 13px; }
.hjelp table td:first-child { white-space: nowrap; width: 1%; padding-right: 18px; }

/* Access without server sign-in (the demo entry screen, js/views/access.js): the Hub's tokens and type, like the
   sign-in lock screen (css/login.css). Accent ring and diamond, Space Grotesk title, no gold. */
.access { position: relative; min-height: 100vh; display: grid; place-items: center; overflow: hidden; padding: var(--s6) var(--s4); background: var(--ink); }
.access-tape { position: absolute; inset: 0; width: 100%; height: 100%; }
.access::after { content: ""; position: absolute; inset: 0; background: radial-gradient(420px 360px at 50% 46%, var(--ink) 35%, transparent 100%); pointer-events: none; }
.access-panel { position: relative; z-index: 1; width: min(372px, 100%); text-align: center; }
.seal { position: relative; width: 112px; height: 112px; margin: 0 auto var(--s5); }
.seal-ticks {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(var(--accent) 0 1.2deg, transparent 1.2deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 49px, var(--mask) 50px, var(--mask) 55px, transparent 56px);
          mask: radial-gradient(circle, transparent 49px, var(--mask) 50px, var(--mask) 55px, transparent 56px);
  opacity: .7;
  animation: seal-turn 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.seal-ring { position: absolute; inset: 12px; border-radius: 50%; border: 1px solid var(--accent-line); }
.seal-core {
  position: absolute; inset: 37px; border: 1.5px solid var(--accent); transform: rotate(45deg);
  animation: seal-core 1.6s cubic-bezier(.2, .7, .2, 1) both;
}
.seal-core::after { content: ""; position: absolute; inset: 10px; background: var(--accent); }
@keyframes seal-turn { from { transform: rotate(-90deg); opacity: 0; } to { transform: rotate(0); opacity: .7; } }
@keyframes seal-core { from { transform: rotate(-45deg) scale(.6); opacity: 0; } to { transform: rotate(45deg) scale(1); opacity: 1; } }
.access-title { font-family: var(--disp); font-size: 26px; font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: -.03em; }
.access-sub { color: var(--muted); font-size: var(--t-ui); margin: 6px 0 var(--s5); }
.access-form { display: grid; gap: var(--s2); text-align: left; }
.access-form label { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.access-form input { font: var(--t-ui) var(--sans); color: var(--text); background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px; }
.access-form input:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.access-form .btn-primary { margin-top: 6px; padding: 10px 14px; }
.demo-note { margin-top: var(--s5); text-align: left; font-size: var(--t-small); color: var(--dim); border-left: 2px solid var(--line); padding: 2px 0 2px 10px; }

/* Pages */
.lede { color: var(--muted); max-width: 66ch; margin: 0 0 var(--s3); }
.section-note { color: var(--dim); font-size: var(--t-small); margin: -4px 0 var(--s3); }
.back-link { display: none; }

/* Oversikt (#/control) */
.control .hero { margin-bottom: var(--s3); }
.control .hero .lede { margin: 0 0 var(--s3); }
.state-list { margin: 0; }
.state-list.strip-body { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.state-list .cell { margin: 0; }
.state-list dt { font-size: 10.5px; color: var(--dim); margin-bottom: 3px; }
.state-list dd { margin: 0; font-family: var(--mono); font-size: var(--t-body); font-weight: 400; line-height: 1.5; }
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s3); align-items: start; }
.ov-col { display: grid; gap: var(--s3); min-width: 0; }
.ov-grid .plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.ov-grid .plain-list li:last-child { border-bottom: 0; }

.modules { margin-top: var(--s3); }
.modules h2, .lower h2 { font-size: 13px; margin: 0; }
.module-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--r); overflow: hidden; }
.module-row {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 10px; align-items: baseline;
  padding: var(--s3) 14px; background: var(--surface); text-decoration: none; color: var(--text); min-width: 0;
}
.module-row:hover { background: var(--raised); color: var(--text); }
.module-ic { grid-row: 1; color: var(--dim); font-family: var(--mono); font-size: 12px; }
.module-row:hover .module-ic { color: var(--accent); }
.module-name { grid-row: 1; grid-column: 2; font: 600 var(--t-ui) var(--disp); letter-spacing: var(--disp-tracking); }
.module-state { grid-row: 1; grid-column: 3; justify-self: end; }
.module-blurb { grid-row: 2; grid-column: 2 / 4; color: var(--muted); font-size: var(--t-table); }
.module-meta { display: block; color: var(--dim); font-family: var(--mono); font-size: var(--t-meta); margin-top: 3px; }

.lower { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--s3); margin-top: var(--s3); align-items: start; }
.status-tally { display: flex; flex-wrap: wrap; gap: var(--s3); margin-bottom: 10px; color: var(--muted); font-family: var(--mono); font-size: 11px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 400; text-align: left; padding: 8px 9px; border-bottom: 1px solid var(--line); }
td { padding: 8px 9px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
td.n, th.n { text-align: right; }
.evidence-table td:nth-child(2) { white-space: nowrap; }
.plain-list { list-style: none; padding: 0; margin: 0; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--line-soft); display: grid; gap: 2px; }
.plain-list li .muted { font-size: var(--t-small); }
.unresolved-name { color: var(--text); text-decoration: underline dashed var(--dim); text-underline-offset: 3px; }
.boundary { margin-top: var(--s6); padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--dim); font-size: 11.5px; }
.boundary p { margin: 0; }

/* Module pages: full width like the Hub's pages, running text kept readable */
.module-page { max-width: 1420px; }
.module-page > p, .module-page .placeholder p, .module-page section > p { max-width: 86ch; }
.module-page section > h2, .module-page > section > h2 { font-size: var(--t-ui); margin: var(--s5) 0 var(--s2); }
.placeholder h2 { font-size: var(--t-ui); margin: var(--s5) 0 var(--s2); }
.placeholder p { color: var(--muted); max-width: 66ch; }
.boundary-text { border-left: 2px solid var(--line); padding-left: 10px; color: var(--muted); font-size: var(--t-small); }
.research-list { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--line-soft); }
.research-item { padding: var(--s3) 0; border-bottom: 1px solid var(--line-soft); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; }
.research-item p { grid-column: 1 / -1; margin: 6px 0 0; color: var(--muted); max-width: 86ch; }
.research-item p.muted { color: var(--dim); font-size: var(--t-small); }
.idea-section h2, .idea-section summary { font-size: var(--t-ui); margin: var(--s5) 0 0; }
.idea-section summary { cursor: pointer; font-family: var(--disp); font-weight: 600; }
.idea-section .muted { font-size: var(--t-meta); font-weight: 400; color: var(--dim); }
.idea-list { list-style: none; padding: 0; margin: 8px 0 0; }
.idea-item { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.idea-title { font: 600 var(--t-ui) var(--disp); letter-spacing: var(--disp-tracking); }
.idea-item p { margin: 4px 0; }
.idea-actions select, .idea-actions input { font: inherit; font-size: 12.5px; }
.idea-capture input[type=text], .idea-capture textarea { width: 100%; box-sizing: border-box; font: inherit; margin-top: 6px; }
.project-list { list-style: none; padding: 0; margin: 14px 0 0; }
.project-card { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.project-card p { margin: 4px 0; }
.project-title { font: 600 var(--t-ui) var(--disp); letter-spacing: var(--disp-tracking); }
.project-items li { margin: 6px 0; }
[data-project-part] h3 .muted { font-weight: 400; font-size: var(--t-meta); color: var(--dim); }
.research-section h2 { font-size: var(--t-ui); margin: var(--s5) 0 0; }
.research-section h2 .muted { font-size: var(--t-meta); font-weight: 400; color: var(--dim); }
.research-section .research-list { margin-top: 8px; }
.research-title { font: 600 var(--t-ui) var(--disp); letter-spacing: var(--disp-tracking); }

/* Form fields everywhere: the Hub's .field look */
/* Form fields everywhere: the Hub's .field (8px 10px, 13px, ink) and .field-l labels */
:where(input[type="text"], input[type="search"], input[type="password"], input[type="number"], textarea, select) {
  background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font: var(--t-ui)/1.5 var(--sans); padding: 7px 10px;
}
:where(select) { cursor: pointer; }
:where(textarea) { resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }
.field-g { display: flex; flex-direction: column; gap: 5px; }
.field-l { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
:where(input[type="text"], input[type="search"], input[type="password"], input[type="number"], textarea, select):focus { outline: none; border-color: var(--accent); background: var(--surface); }
::placeholder { color: var(--dim); }

/* ============================================================
   Second Brain (js/views/brain.js): the Hub's rail grammar for the note list, card titles for sections,
   body type for reading. Folder colours are the --viz-* tokens.
   ============================================================ */
.brain {
  display: grid; grid-template-columns: 260px minmax(0, 1fr) 420px;
  height: calc(100vh - var(--top-h) - var(--status-h)); min-height: 520px;
}
.notes-pane { border-right: 1px solid var(--line); overflow-y: auto; padding: var(--s4) var(--s3); background: var(--surface); }
.pane-head input[type="search"] {
  width: 100%; font: var(--t-ui) var(--sans); color: var(--text); background: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); padding: 7px 10px;
}
.pane-head input[type="search"]:focus { border-color: var(--accent); outline: none; background: var(--surface); }
.note-group h3 { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: var(--s4) 0 4px; padding: 0 10px; }
.note-group ul { list-style: none; margin: 0; padding: 0; }
.note-group a { display: flex; align-items: center; gap: 9px; padding: 5px 10px; border-radius: var(--r); text-decoration: none; color: var(--muted); font-size: var(--t-ui); box-shadow: inset 2px 0 0 transparent; }
.note-group a:hover { background: var(--raised); color: var(--text); }
.note-group a[aria-current] { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.no-match { color: var(--dim); font-size: var(--t-ui); padding: 0 10px; }

.graph-pane { position: relative; min-width: 0; display: flex; flex-direction: column; }
.graph-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); padding: 9px var(--s4); border-bottom: 1px solid var(--line); flex-wrap: wrap; background: var(--surface); }
.graph-stats { display: flex; gap: var(--s4); flex-wrap: wrap; font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.graph-stats b { color: var(--text); font-weight: 500; margin-right: 3px; }
.graph-tools { display: flex; align-items: center; gap: var(--s3); }
.toggle { font-size: var(--t-table); color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }
#graph { flex: 1; width: 100%; min-height: 0; display: block; cursor: grab; touch-action: none; }
#graph:focus-visible { outline-offset: -2px; }
#graph[hidden] { display: none; }
.legend { position: absolute; left: var(--s4); bottom: 40px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--t-meta); color: var(--muted); max-width: calc(100% - 32px); pointer-events: none; }
.legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.legend .ghost-key { border: 1px dashed var(--muted); background: transparent; }
.legend .relation-key { width: 14px; height: 0; border-radius: 0; border-top: 2px dashed var(--viz-relation); background: transparent; vertical-align: 3px; }
.graph-hint { margin: 0; padding: 9px var(--s4); font-size: var(--t-meta); color: var(--dim); border-top: 1px solid var(--line); }

.reader { border-left: 1px solid var(--line); overflow-y: auto; padding: 22px var(--s5) 40px; background: var(--surface); }
.reader-empty h1, .reader-head h1 { font-size: var(--t-title); line-height: 1.2; margin: 2px 0 var(--s2); }
.reader-empty p { color: var(--muted); }
.crumb { margin: 0; font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.props, .ops-board { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s4); margin: var(--s3) 0 6px; font-size: var(--t-table); padding: 10px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.props div, .ops-board div { display: contents; }
.props dt, .ops-board dt { color: var(--muted); }
.props dd, .ops-board dd { margin: 0; }
.md { font-size: var(--t-body); line-height: 1.6; }
.md h2 { font-size: var(--t-dialog); margin: var(--s5) 0 var(--s2); }
.md h3 { font-size: var(--t-body); margin: var(--s4) 0 6px; }
.md h2.is-target, .md h3.is-target { color: var(--accent); }
.md p, .md li { color: var(--text); }
.md ul, .md ol { padding-left: 20px; }
.md li { margin: 4px 0; }
.md li.task { list-style: none; margin-left: -20px; display: flex; gap: 10px; align-items: baseline; }
.md li.task .box { width: 12px; height: 12px; border: 1px solid var(--muted); border-radius: 2px; flex: none; transform: translateY(1px); }
.md li.task.done .box { background: var(--accent); border-color: var(--accent); }
.md li.task.done { color: var(--muted); }
.md blockquote { margin: var(--s3) 0; padding: 2px 0 2px var(--s3); border-left: 2px solid var(--line); }
.md blockquote p { color: var(--muted); font-size: var(--t-ui); margin: 6px 0; }
.md .callout { margin: var(--s3) 0; padding: 4px 0 4px var(--s3); border-left: 2px solid var(--line); }
.md .callout-title { font-weight: 600; margin: 6px 0; }
.md .callout-note, .md .callout-info, .md .callout-quote { border-left-color: var(--line); }
.md .callout-tip, .md .callout-success { border-left-color: var(--pos); }
.md .callout-warning, .md .callout-question { border-left-color: var(--warn); }
.md .callout-danger, .md .callout-failure { border-left-color: var(--neg); }
.md pre { background: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px var(--s3); overflow-x: auto; font-size: var(--t-table); }
.md pre code { background: none; border: 0; padding: 0; }
.md table { margin: 10px 0; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: var(--s5) 0; }
.wikilink { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--accent-line); }
.wikilink:hover { color: var(--text); border-bottom-color: var(--accent); }
.wikilink.is-missing { color: var(--muted); border-bottom: 1px dashed var(--muted); cursor: help; }
.ext-link { text-decoration: underline dotted; }
.link-sec { margin-top: var(--s5); padding-top: var(--s3); border-top: 1px solid var(--line); }
.link-sec h2 { font: 600 var(--t-ui) var(--disp); letter-spacing: var(--disp-tracking); color: var(--text); margin: 0 0 var(--s2); }
.link-sec .count { font-family: var(--mono); font-weight: 400; color: var(--dim); margin-left: 4px; }
.link-sec ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: var(--t-ui); }

/* Note source: the panel at the top of the note list, and the vault state shown there (never a page-wide banner) */
.source-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 9px 10px; margin: 0 0 var(--s3);
  font-family: var(--mono); font-size: var(--t-meta); color: var(--muted); background: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); overflow-wrap: anywhere;
}
.source-banner b { color: var(--text); font-weight: 500; }
.sb-mode { font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sb-note { color: var(--dim); font-family: var(--sans); }
.sb-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: 6px; }
.sb-item b { font-weight: 500; }
.sb-close { margin-top: 6px; }
.chip-warn { color: var(--warn); border-color: var(--warn-line); }
.source-panel { position: relative; margin: 0 0 var(--s3); padding: 10px; border: 1px solid var(--line); border-radius: var(--r); background: var(--ink); }
.source-line { margin: 0 0 var(--s2); font-size: var(--t-table); color: var(--muted); }
.source-line b { color: var(--text); font-weight: 500; }
.source-hint { margin: var(--s2) 0 0; font-size: var(--t-meta); color: var(--dim); }
.file-input-hidden {
  /* CP6: visually hidden but focusable by script. Explicit size and position so that no other input rule can
     widen it, and a positioned parent (.source-panel) so it can never extend the document. */
  position: absolute; left: 0; top: 0; width: 1px !important; height: 1px; max-width: 1px;
  margin: 0; padding: 0; border: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); pointer-events: none;
}
.name-flag { margin-left: auto; flex: none; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--warn); border: 1px solid var(--warn-line); border-radius: 2px; padding: 1px 4px; }
.note-warn { font-size: var(--t-table); color: var(--text); border-left: 2px solid var(--warn); padding: 2px 0 2px 10px; margin: 10px 0; }
.wikilink.is-ambiguous { color: var(--warn); border-bottom: 1px dashed var(--warn); cursor: help; }
.wikilink.is-skipped { color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; }
.wikilink.is-embed { font-style: italic; }
.attachment-link { color: var(--muted); border-bottom: 1px dotted var(--line); cursor: help; }
.embed-tag { font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--line); border-radius: 2px; padding: 1px 4px; margin-left: 5px; vertical-align: 1px; }
.graph-large { margin: var(--s5) var(--s4); padding: var(--s3) var(--s4); border: 1px dashed var(--line); border-radius: var(--r); color: var(--muted); font-size: var(--t-ui); }
.graph-large p { margin: 0 0 10px; }

/* Dialogs (folder picker): the Hub's overlay card and dialog scale */
.picker-backdrop { position: fixed; inset: 0; z-index: 100; background: var(--scrim); backdrop-filter: blur(2px); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--s4) var(--s4); overflow-y: auto; }
.picker-backdrop[hidden] { display: none; }
.picker-dialog { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s5); box-shadow: var(--shadow-pop); }
.picker-dialog h2 { margin: 0 0 var(--s3); padding-bottom: var(--s3); border-bottom: 1px solid var(--line-soft); font-size: var(--t-dialog); line-height: 1.3; overflow-wrap: anywhere; }
.picker-dialog p { color: var(--muted); font-size: var(--t-ui); }
.picker-counts { margin: 10px 0; padding-left: 18px; font-size: var(--t-ui); color: var(--muted); }
.picker-counts li { margin: 4px 0; }
.picker-large { font-size: var(--t-table); color: var(--muted); margin: 6px 0 10px; overflow-wrap: anywhere; }
.picker-root-warn { margin: var(--s3) 0; padding: 10px var(--s3); border: 1px solid var(--warn-line); border-radius: var(--r); }
.picker-root-warn p { margin: 0 0 var(--s2); }
.picker-fine { font-size: var(--t-small) !important; color: var(--dim) !important; }
.picker-progress { min-height: 1.2em; font-size: var(--t-ui); }
.picker-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }
.picker-actions button[disabled] { opacity: .45; cursor: not-allowed; }
.picker-refused { color: var(--text) !important; }

/* Vault mapping (Settings) */
.mapping-section { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.mapping-section h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.mapping-section h2 .muted { font-family: var(--sans); font-size: var(--t-meta); font-weight: 400; color: var(--dim); }
.mapping-rule { margin: 6px 0; overflow-wrap: anywhere; font-size: var(--t-table); }
.mapping-label { color: var(--muted); margin-right: 4px; }
.mapping-rule code, .mapping-status code { overflow-wrap: anywhere; }
.mapping-notes { margin-top: 10px; }
.mapping-notes li, .mapping-status li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.mapping-status li { padding: 6px 0; border-bottom: 0; }

/* Finance Hub export status */
.fh-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; color: var(--muted); }
.fh-section { margin-top: var(--s3); }
.fh-table td, .fh-table th { white-space: nowrap; }
.fh-table td.fh-prov, .fh-table td.muted { white-space: normal; min-width: 12ch; }
.fh-value { font-variant-numeric: tabular-nums; text-align: right; font-family: var(--mono); }
.fh-problems code { overflow-wrap: anywhere; white-space: normal; }

/* Messages inside a page: a line with a coloured left edge. --neg: something failed; --warn: stale or broken and
   fixable; neutral: information. Inside a line (status boards) they are just the coloured word. */
p.fh-warn, p.fh-bad, p.fh-info, div.fh-bad {
  margin: var(--s3) 0; padding: 2px 0 2px 10px; font-size: var(--t-table); color: var(--text);
  border-left: 2px solid var(--warn); background: none;
}
p.fh-bad, div.fh-bad { border-left-color: var(--neg); }
p.fh-info { border-left-color: var(--line); color: var(--muted); }
span.fh-warn { color: var(--warn); }
span.fh-bad { color: var(--neg); }
span.fh-info { color: var(--muted); }

/* Responsive */
@media (max-width: 1180px) {
  .brain { grid-template-columns: 240px minmax(0, 1fr); grid-template-rows: minmax(420px, 62vh) auto; height: auto; }
  .notes-pane { grid-row: 1 / 3; }
  .graph-pane { height: 62vh; min-height: 420px; }
  .reader { border-left: 0; border-top: 1px solid var(--line); grid-column: 2; }
}
@media (max-width: 860px) {
  /* Narrow screens: the rail becomes a block above the page with its groups side by side (every destination
     visible without sideways scrolling), and the status line sits at the end of the page instead of over it. */
  body:not(.uten-skall) #app { margin-left: 0; padding-top: 0; padding-bottom: 0; min-height: 0; }
  body.rail-smal { --rail-w: 0px; }
  .topbar { position: static; height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 8px 12px; }
  .top-brand { flex: 1 1 auto; }
  .top-k { flex: 0 0 auto; margin-left: 0; }
  .room-switch { order: 3; flex: 1 1 100%; }
  .room-seg { flex: 1 1 50%; justify-content: center; }
  .rail, body.rail-smal .rail { position: static; width: auto; bottom: auto; flex-direction: row; flex-wrap: wrap; align-items: flex-start; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 4px 4px 8px; }
  .rail-brand { flex: 1 1 auto; padding: 10px 10px 6px; }
  .rail-k { width: auto; flex: 0 0 auto; margin: 6px 8px; }
  .rail-g { flex: 1 1 140px; padding: 6px 4px 0; min-width: 0; }
  .rail-foot { flex: 1 1 100%; margin-top: 6px; }
  body.rail-smal .rail-brand, body.rail-smal .rail-gl { display: block; }
  body.rail-smal .rail-demo { display: flex; }
  body.rail-smal .rail-foot-row > span { display: inline; }
  body.rail-smal .rail-foot { padding: 10px 16px 12px; }
  body.rail-smal .rail-i .lbl, body.rail-smal .rail-k .ph { display: block; }
  body.rail-smal .rail-k { width: auto; margin: 6px 8px; padding: 6px 10px; }
  body.rail-smal .rail-g { border-top: 0; padding: 6px 4px 0; }
  body.rail-smal .rail-i { justify-content: flex-start; padding: 5px 10px 5px 12px; }
  .statuslinje, body.hub-modus .statuslinje { position: static; display: flex; flex-wrap: wrap; height: auto; white-space: normal; padding: 4px; }
  .statuslinje .seg { padding: 6px 10px; }
  .statuslinje .hoyre { margin-left: 0; }
  .side-hd { flex-direction: column; align-items: flex-start; gap: 8px; }
  .side-hd-r { align-items: flex-start; }
  .side-hd .sub { text-align: left; }
  .side-meta { justify-content: flex-start; text-align: left; }
  .hero { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .lower, .ov-grid, .split, .g2, .g3 { grid-template-columns: minmax(0, 1fr); }
  .state-list.strip-body, .strip-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .brain { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; }
  .notes-pane { grid-row: auto; border-right: 0; border-bottom: 1px solid var(--line); max-height: 280px; }
  .reader { grid-column: auto; }
}
@media (max-width: 560px) {
  .page { padding: 16px 16px 32px; }
  .top-k .ph { display: none; }
  .rail-g { flex-basis: 120px; }
  .graph-bar { padding: 10px 16px; }
  .reader { padding: 20px 16px 36px; }
  .legend { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* AI Council: the Hub's field labels (.field-l), card titles and mono meta */
.chip-live { color: var(--pos); border-color: var(--pos-line); }
.pill-mock { color: var(--muted); border-color: var(--line); border-style: dashed; }
.pill-done { color: var(--pos); border-color: var(--pos-line); }
.pill-answering, .pill-synthesizing { color: var(--accent); border-color: var(--accent-line); }
.pill-queued { color: var(--dim); border-color: var(--line); }
.pill-interrupted { color: var(--warn); border-color: var(--warn-line); }
.cc-form { display: grid; gap: var(--s3); margin: 0 0 var(--s5); max-width: 920px; }
.cc-label { display: grid; gap: 5px; font-family: var(--mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.cc-label textarea { width: 100%; box-sizing: border-box; font: var(--t-ui)/1.5 var(--sans); letter-spacing: 0; text-transform: none; padding: 8px 10px; border-radius: var(--r); border: 1px solid var(--line); background: var(--ink); color: var(--text); resize: vertical; }
.cc-inline { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; font-size: var(--t-table); color: var(--muted); }
.cc-inline select { padding: 5px 8px; }
.cc-members { border: 1px solid var(--line); border-radius: var(--r); padding: 10px var(--s3); display: grid; gap: 6px; min-width: 0; font-size: var(--t-table); }
.cc-members legend { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); padding: 0 4px; }
.cc-member { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.cc-off { opacity: .6; }
.cc-note { margin: 4px 0 0; font-size: var(--t-small); color: var(--dim); }
.cc-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin: 0; }
.cc-problems li { color: var(--neg); }
.cc-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--s3); margin: var(--s3) 0; }
.cc-answer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s4); min-width: 0; overflow-wrap: anywhere; font-size: var(--t-ui); }
.cc-answer.cc-mock { border-style: dashed; }
.cc-answer h3 { margin: 0; font-size: var(--t-ui); }
.cc-meta { margin: 4px 0 var(--s2); font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.cc-synth { background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--accent); border-radius: var(--r); padding: var(--s4); margin: var(--s3) 0 var(--s5); overflow-wrap: anywhere; font-size: var(--t-ui); }
.cc-synth h3 { margin-top: 0; }
.cc-disagree { border-left: 2px solid var(--line); padding-left: 10px; margin: var(--s2) 0; }
.cc-task { border-top: 1px solid var(--line-soft); margin-top: var(--s3); padding-top: var(--s2); }
.cc-pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-table); max-height: 420px; overflow: auto; background: var(--ink); border: 1px solid var(--line-soft); border-radius: var(--r); padding: 10px var(--s3); }
.cc-round { margin-top: var(--s5); }
.cc-round-head { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.cc-md { overflow-wrap: anywhere; }
.cc-page .plain-list li { display: block; padding: 6px 0; }
.btn-primary:disabled, .btn-quiet:disabled { opacity: .45; cursor: not-allowed; }
.cc-notes { display: grid; gap: 6px; }
.cc-notes input[type=text] { padding: 5px 8px; min-width: 0; max-width: 100%; }
.cc-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cc-x { background: none; border: 0; color: inherit; cursor: pointer; font: inherit; padding: 0 2px; }

/* Unified Chat: thread list in the rail grammar, the answer as plain reading text, one page title */
.chat-page { max-width: 1420px; }
.chat-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.chat-side { position: sticky; top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.chat-side-head { display: flex; flex-direction: column; gap: var(--s2); }
.chat-side select, .chat-composer select, .chat-regen select { font: var(--t-table) var(--sans); padding: 5px 8px; max-width: 100%; }
.chat-new { align-self: flex-start; }
.chat-threads { list-style: none; margin: 0; padding: 0; max-height: 46vh; overflow: auto; border-top: 1px solid var(--line-soft); }
.chat-threads li { border-bottom: 1px solid var(--line-soft); }
.chat-threads a { display: flex; flex-direction: column; padding: 7px 10px; text-decoration: none; color: var(--muted); font-size: var(--t-ui); box-shadow: inset 2px 0 0 transparent; }
.chat-threads a:hover { background: var(--raised); color: var(--text); }
.chat-threads a[aria-current="page"] { background: var(--raised); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }
.chat-tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-tm { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.chat-proj summary { cursor: pointer; color: var(--muted); font-size: var(--t-table); }
.chat-proj form { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.chat-proj textarea, .chat-proj input, .chat-composer textarea { font: var(--t-ui)/1.5 var(--sans); padding: 8px 10px; width: 100%; resize: vertical; }
.chat-budget { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.chat-main { min-width: 0; display: flex; flex-direction: column; gap: var(--s3); }
.chat-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s2); }
.chat-title { margin: 0; font-size: var(--t-dialog); overflow-wrap: anywhere; }
.chat-log { display: flex; flex-direction: column; gap: var(--s4); min-height: 200px; max-height: calc(100vh - 330px); overflow-y: auto; padding-right: 4px; }
.chat-turn { display: flex; flex-direction: column; gap: var(--s2); }
.chat-user { align-self: flex-end; max-width: 85%; background: var(--raised); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s2) var(--s3); overflow-wrap: anywhere; font-size: var(--t-ui); }
.chat-answer { border-left: 2px solid var(--line); padding: 2px 0 2px var(--s3); overflow-wrap: anywhere; min-width: 0; font-size: var(--t-body); }
.chat-answer.chat-hidden { display: none; }
.chat-pending { border-left-style: dashed; }
.chat-answer-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); font-size: var(--t-meta); }
.chat-who { font-family: var(--disp); font-size: var(--t-ui); font-weight: 600; color: var(--text); }
.chat-meta { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.chat-md p:first-child { margin-top: 4px; }
.chat-md pre { overflow-x: auto; }
.chat-answer-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: var(--t-meta); margin-top: 4px; }
.chat-regen { display: inline-flex; gap: 6px; align-items: center; }
.btn-link { font: 500 var(--t-small) var(--sans); color: var(--muted); background: none; border: 0; padding: 2px 0; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; cursor: pointer; }
.btn-link:hover { color: var(--text); text-decoration-color: var(--accent); }
.cite { color: var(--accent); text-decoration: none; font-size: .85em; vertical-align: .1em; font-family: var(--mono); }
.cite-bad { color: var(--neg); }
.chat-cites { font-size: var(--t-table); color: var(--muted); margin: 6px 0 0; padding-left: 20px; }
.chat-cites li { margin: 2px 0; }
.cite-flash { background: var(--accent-bg); }
.chat-variants { display: flex; flex-wrap: wrap; gap: 6px; }
.chat-variant { font: 500 var(--t-small) var(--sans); color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 10px; cursor: pointer; }
.chat-variant[aria-selected="true"] { border-color: var(--accent); color: var(--text); }
.chat-composer { position: sticky; bottom: 0; background: var(--ink); padding: var(--s2) 0; display: flex; flex-direction: column; gap: var(--s2); border-top: 1px solid var(--line); }
.chat-composer-bar { display: flex; gap: var(--s2); justify-content: space-between; align-items: center; flex-wrap: wrap; }
.chat-composer-bar select { flex: 1 1 200px; min-width: 0; }
.chat-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(720px, 100vw); background: var(--surface); border-left: 1px solid var(--line); overflow-y: auto; padding: var(--s4) var(--s5); z-index: 60; box-shadow: var(--shadow-drawer); font-size: var(--t-ui); }
.chat-ctx-head { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); border-bottom: 1px solid var(--line-soft); padding-bottom: var(--s3); }
.chat-ctx-head h2 { margin: 0; font-size: var(--t-dialog); overflow-wrap: anywhere; }
.chat-welcome { padding: var(--s6) 0; color: var(--muted); }
@media (max-width: 900px) {
  .chat-layout { grid-template-columns: minmax(0, 1fr); }
  .chat-side { position: static; }
  .chat-threads { max-height: 30vh; }
  .chat-log { max-height: none; }
  .chat-user { max-width: 100%; }
}
.chat-head-actions { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.chat-sum { flex-basis: 100%; margin: 2px 0 0; font-size: var(--t-small); color: var(--dim); }
.chat-proj h4 { margin: var(--s2) 0 4px; font-family: var(--mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.mem-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-table); }
.mem-item { overflow-wrap: anywhere; border-left: 2px solid var(--line); padding-left: var(--s2); }
.mem-by { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.mem-actions { display: block; }
.chat-councils { flex-basis: 100%; display: flex; flex-direction: column; gap: 6px; }
.chat-council { border: 1px solid var(--line); border-left: 2px solid var(--line); border-radius: var(--r); padding: 6px 10px; font-size: var(--t-table); overflow-wrap: anywhere; background: var(--surface); }
.chat-council p { margin: 4px 0; }
.chat-council-form { flex-basis: 100%; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; margin-top: 6px; background: var(--surface); }
.chat-council-form textarea { font: var(--t-ui)/1.5 var(--sans); padding: 8px 10px; width: 100%; }

/* Finance Hub app in a frame (js/modules/finance-hub.js, server/hub/app.mjs) */
.hub-main { padding: 0; }
.hub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: 6px var(--s4); border-bottom: 1px solid var(--line); background: var(--surface); min-height: 38px; }
.hub-demo { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); border: 1px dashed var(--line); padding: 3px 7px; border-radius: 2px; }
.hub-crumb { font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.hub-note { font-size: var(--t-ui); flex: 1; min-width: 0; }
.hub-frame { display: block; width: 100%; border: 0; background: var(--ink); }
.fh-oldapp { margin: var(--s2) 0 var(--s4); }

/* Operations: AI costs (js/modules/operations.js) */
.ops-meter { position: relative; height: 5px; border-radius: 3px; background: var(--ink); overflow: hidden; max-width: 560px; margin-top: 5px; }
.ops-meter span { display: block; height: 100%; background: var(--accent); }
.ops-meter span.ops-meter-alert { background: var(--warn); }
.ops-meter i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.ops-days { display: grid; grid-template-columns: repeat(31, 1fr); gap: 2px; align-items: end; height: 120px; max-width: 760px; border-bottom: 1px solid var(--line); }
.ops-day { height: 100%; display: flex; align-items: flex-end; }
.ops-day span { display: block; width: 100%; background: var(--accent); border-radius: 1px 1px 0 0; }
.ops-axis { display: flex; justify-content: space-between; max-width: 760px; font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); margin-top: 4px; }

/* Builds (js/modules/builds.js) */
.build-form label { display: block; margin: 0 0 var(--s3); font-size: var(--t-table); color: var(--muted); }
.build-form textarea, .build-form select { width: 100%; max-width: 760px; margin-top: 5px; }
.build-row { display: flex; flex-wrap: wrap; gap: var(--s3); }
.build-row label { flex: 1 1 200px; }
.build-list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.build-done { color: var(--pos); border-color: var(--pos-line); }
.build-failed { color: var(--neg); border-color: var(--neg-line); }
.build-running { color: var(--accent); border-color: var(--accent-line); }
.build-queued, .build-waiting { color: var(--dim); border-color: var(--line); }
.build-events li { padding: 3px 0; font-size: var(--t-table); }
.build-ev-status { font-weight: 600; }
.build-goal { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Engine measurements (Builds page): the Hub's table and tags */
.eval-table { margin: var(--s2) 0 var(--s4); }
.eval-tasks span { display: inline-block; font-family: var(--mono); font-size: 9px; letter-spacing: .08em; padding: 2px 5px; border-radius: 2px; margin: 0 3px 3px 0; }
.eval-ok { color: var(--pos); border: 1px solid var(--pos-line); } .eval-part { color: var(--muted); border: 1px solid var(--line); } .eval-fail { color: var(--neg); border: 1px solid var(--neg-line); }

/* The page's main element is focused by script after each route change (screen readers start there); it is not a
   control, so it gets no focus ring. */
main[tabindex="-1"]:focus, main[tabindex="-1"]:focus-visible { outline: none; }

/* Module pages built from Hub cards: a steady 12 px rhythm between blocks */
.module-page > * + .card, .module-page > * + .grid, .module-page > div > .card { margin-top: var(--s3); }
.card .ops-board { border: 0; margin: 0; padding: 0; }
.card > h2:first-child, .card section > h2:first-child { margin-top: 0; }
.ops-costs h2 { font-size: var(--t-ui); margin: var(--s5) 0 var(--s2); }
.ops-costs .card-hd h2 { margin: 0; }
.cc-label.cc-inline { font-size: var(--t-label); color: var(--dim); }
.cc-notes { font-size: var(--t-table); color: var(--muted); }

/* Notes page: the page header above the three panes, the panes fill the rest of the window */
.brain-page { display: flex; flex-direction: column; height: calc(100vh - var(--top-h) - var(--status-h)); min-height: 600px; }
.brain-head { flex: none; padding: 16px var(--s5) 0; }
.brain-head .side-hd { margin-bottom: 0; }
.brain-head .tabs { margin-bottom: 0; }
.brain-page .brain { flex: 1; height: auto; min-height: 0; }
@media (max-width: 1180px) { .brain-page { height: auto; } .brain-page .brain { height: auto; } }
@media (max-width: 560px) { .brain-head { padding: var(--s4) var(--s4) 0; } }

/* Operations: one tab's sections at a time */
.ops-page[data-ops-on="status"] [data-tab]:not([data-tab="status"]),
.ops-page[data-ops-on="costs"] [data-tab]:not([data-tab="costs"]),
.ops-page[data-ops-on="agents"] [data-tab]:not([data-tab="agents"]) { display: none; }

/* Related panel (Linear/GitHub right panel) on entity pages: properties, backlinks, decisions, chats, builds, tags */
.entity-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--related-w); gap: var(--s5); align-items: start; }
.related { font-size: var(--t-table); min-width: 0; border-left: 1px solid var(--line); padding-left: var(--s4); }

.rel-sec { padding: var(--s3) 0; border-top: 1px solid var(--line-soft); }
.rel-sec:first-child { border-top: 0; padding-top: 0; }
.related .rel-sec h2 { font-family: var(--mono); font-size: var(--t-label); font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0 0 var(--s2); display: flex; gap: 6px; align-items: baseline; }
.related .rel-sec h2 .ct { letter-spacing: 0; color: var(--muted); }
.rel-sec ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rel-sec li { min-width: 0; overflow-wrap: anywhere; }
.rel-sec li a { color: var(--text); }
.rel-sec li a:hover { color: var(--accent); }
.rel-meta { display: block; font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); }
.rel-more, .rel-empty { color: var(--dim); }
.rel-props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px var(--s3); margin: 0; }
.rel-props div { display: contents; }
.rel-props dt { color: var(--muted); }
.rel-props dd { margin: 0; font-family: var(--mono); overflow-wrap: anywhere; }
.rel-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
@media (max-width: 1080px) { .entity-layout { grid-template-columns: minmax(0, 1fr); } .related { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--s4); } }
.reader-related { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.chat-related { padding-top: var(--s3); border-top: 1px solid var(--line-soft); }
.reader-related .related, .chat-related .related { border-left: 0; padding-left: 0; }
.entity-body { min-width: 0; }

/* A Hub page inside Control Center: Control Center's breadcrumb above the Hub's page, shown only when the shell draws the
   Hub's menu (an older Hub). With the Hub's own menu in the frame the Hub's page header says where you are; the
   breadcrumb stays for screen readers. */
.hub-crumbs { padding: 12px 32px 0; }
@media (max-width: 560px) { .hub-crumbs { padding: 12px 16px 0; } }
body.hub-menu-in-frame .hub-crumbs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
/* The Finance Hub room's waiting state (no real Hub data here, demo hidden): honest, no figures. */
.hub-wait-card { max-width: 760px; }
.hub-wait-card p { margin: 0 0 var(--s3); }
.hub-wait-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }

/* Overview, money first (owner decision 3): the Hub's big numbers, the P&L line, Inbox beside it, then activity */
.v-label { display: flex; align-items: center; gap: var(--s2); font-family: var(--mono); font-size: var(--t-label); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.v-main { font-family: var(--disp); font-size: var(--t-hero); font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.v-main .v-cur { font-size: var(--t-dialog); font-weight: 500; color: var(--muted); letter-spacing: 0; }
.v-unc { font-family: var(--mono); font-size: var(--t-meta); color: var(--dim); margin-top: 6px; display: flex; gap: var(--s3); flex-wrap: wrap; }
.v-unc span { white-space: nowrap; }
.ov-money { margin-bottom: var(--s3); }
.ov-row { display: grid; gap: var(--s3); margin-bottom: var(--s3); align-items: start; }
.ov-row-2 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; }
/* P&L and Needs action share one height: the cards stretch to the row and the P&L line grows into the space (capped). */
.ov-row-2 > .card { display: flex; flex-direction: column; }
.ov-row-2 > .card > .pnl-chart { flex: 1 1 auto; display: flex; flex-direction: column; }
.ov-row-2 .pnl-chart svg { flex: 1 1 180px; height: auto; min-height: 180px; max-height: 360px; }
.ov-row-3 { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.ov-sec { font-size: var(--t-ui); margin: var(--s5) 0 var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.pnl-total { font-family: var(--mono); font-size: var(--t-table); }
.pnl-total.pos { color: var(--pos); } .pnl-total.neg { color: var(--neg); }
.pnl-chart svg { display: block; width: 100%; height: 180px; }
.pnl-chart .zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.pnl-chart .ln { fill: none; stroke: var(--muted); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pnl-chart.pos .ln { stroke: var(--pos); } .pnl-chart.neg .ln { stroke: var(--neg); }
.pnl-axis { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-label); color: var(--dim); margin-top: 6px; }
.ov-activity li { grid-template-columns: 9.5em minmax(0, 1fr); display: grid; gap: var(--s3); align-items: baseline; }
.ov-when { font-size: var(--t-meta); color: var(--dim); }
@media (max-width: 860px) { .ov-row-2, .ov-row-3 { grid-template-columns: minmax(0, 1fr); } .ov-activity li { grid-template-columns: minmax(0, 1fr); gap: 2px; } .v-main { font-size: 26px; } }

/* Brain Core (js/views/brain-core.js): the Overview card and the after-unlock reveal. Tokens only. */
.bc-card .card-hd h2 a { color: inherit; text-decoration: none; }
.bc-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: var(--s3); align-items: center; }
.bc-orb { width: 230px; height: 196px; display: block; margin: -8px 0 -6px -10px; }
.bc-stats { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.bc-stat small { display: block; font: 500 9px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.bc-stat span { font: 600 17px var(--disp); letter-spacing: -.02em; }
.bc-stat span i { font: 500 var(--t-meta) var(--mono); color: var(--accent); font-style: normal; margin-left: 6px; }
.bc-t { font: 500 var(--t-ui) var(--sans); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bc-key { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.bc-sparse { font: var(--t-meta) var(--sans); color: var(--muted); margin: 0; }
.bc-go { font: 500 var(--t-label) var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.bc-go:hover, .bc-go:focus-visible { text-decoration: underline; }
@media (max-width: 560px) {
  .bc-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .bc-stats { justify-self: stretch; }
}
.bc-unlock { position: fixed; inset: 0; z-index: 1000; background: var(--ink); overflow: hidden; cursor: pointer; transition: opacity .25s ease; }
.bc-unlock[data-state="closing"] { opacity: 0; pointer-events: none; }
.bc-unlock[data-state="static"], .bc-unlock[data-state="static"] .bc-prog i { transition: none; }
.bc-grid { position: absolute; inset: 0; opacity: .75;
  background-image: linear-gradient(var(--line-soft) 1px, transparent 1px), linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 48px 48px; background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 44%, var(--mask) 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 62% 60% at 50% 44%, var(--mask) 15%, transparent 72%); }
.bc-full { position: absolute; left: 0; top: 0; }
.bc-wel { position: absolute; left: var(--s4); right: var(--s4); bottom: 15vh; text-align: center; }
.bc-wel h2 { font: 600 30px var(--disp); letter-spacing: -.03em; margin: 0; color: var(--text); }
.bc-m2 { font: 500 10.5px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.bc-m2 b { color: var(--text); font-weight: 500; }
.bc-sep { color: var(--line); }
.bc-prog { width: 260px; max-width: 70vw; height: 2px; background: var(--line); margin: 18px auto 0; border-radius: 1px; overflow: hidden; }
.bc-prog i { display: block; height: 100%; width: 0; background: var(--accent); }
.bc-foot { position: absolute; left: 24px; right: 24px; bottom: 18px; display: flex; justify-content: space-between; gap: var(--s3); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
@media (prefers-reduced-motion: reduce) { .bc-unlock { transition: none; } }
/* ============================================================
   Accounting (js/modules/accounting.js): tiles, charts, forms. Colours only from tokens; series colours by class.
   ============================================================ */
.acct .acct-bar-top { display: flex; justify-content: flex-end; margin: 0 0 var(--s3); }
.acct-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: var(--s3); }
.acct-tile .eyebrow { margin-bottom: 6px; }
.acct-tile .v-main { font-size: 26px; }
.acct-tile .pos { color: var(--pos); } .acct-tile .neg { color: var(--neg); }
.acct-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s3); margin-bottom: var(--s3); align-items: start; }
.acct-col { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.acct .acct-col .card + .card { margin-top: 0; }
.acct-plot { position: relative; }
.acct-endlbl { position: absolute; transform: translateY(-50%); font: 10.5px var(--mono); color: var(--muted); white-space: nowrap; max-width: 13%; overflow: hidden; text-overflow: ellipsis; }
.acct-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.acct-seg-b { background: transparent; color: var(--muted); border: 0; padding: 6px 12px; font: 500 var(--t-table) var(--sans); cursor: pointer; }
.acct-seg-b + .acct-seg-b { border-left: 1px solid var(--line); }
.acct-seg-b:hover { color: var(--text); }
.acct-seg-b.on { background: var(--accent-bg); color: var(--accent); }
.acct-chart svg { display: block; width: 100%; height: 190px; overflow: visible; }
.acct-chart .acct-hit { vector-effect: non-scaling-stroke; }
.acct-chart .acct-zero { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.acct-chart .acct-ln { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.acct-chart .acct-ln.pos { stroke: var(--pos); } .acct-chart .acct-ln.neg { stroke: var(--neg); }
.acct-chart .acct-ln.s1, .acct-legend i.s1 { stroke: var(--viz-1); background: var(--viz-1); }
.acct-chart .acct-ln.s2, .acct-legend i.s2 { stroke: var(--viz-3); background: var(--viz-3); }
.acct-chart .acct-ln.s3, .acct-legend i.s3 { stroke: var(--viz-2); background: var(--viz-2); }
.acct-chart .acct-ln.s4, .acct-legend i.s4 { stroke: var(--viz-6); background: var(--viz-6); }
.acct-chart .acct-hit { fill: transparent; stroke: none; }
.acct-chart .acct-hit:hover { fill: var(--text); fill-opacity: .25; }
.acct-chart .acct-be { fill: var(--surface); stroke: var(--pos); stroke-width: 2; vector-effect: non-scaling-stroke; }
.acct-chart .acct-bar.in, .acct-legend i.in { fill: var(--pos); background: var(--pos); }
.acct-chart .acct-bar.out, .acct-legend i.out { fill: var(--neg); background: var(--neg); }
.acct-chart .acct-hitbar { fill: transparent; }
.acct-chart g:hover .acct-hitbar { fill: var(--raised); }
.acct-chart .acct-lbl { fill: var(--muted); font: 10.5px var(--mono); }
.acct-axis { display: flex; justify-content: space-between; color: var(--dim); font-size: var(--t-meta); margin-top: 6px; }
.acct-months { display: flex; justify-content: space-around; color: var(--dim); font-size: 10px; margin-top: 4px; }
.acct-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--t-small); color: var(--muted); }
.acct-legend i { display: inline-block; width: 10px; height: 3px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.acct-form { display: flex; flex-direction: column; gap: var(--s3); }
.acct-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s3); align-items: end; }
.acct-fields .wide { grid-column: span 2; }
.acct-fields input, .acct-fields select { width: 100%; }
.acct-form input[type="date"], .acct-form input[type="month"], .acct-form input[type="file"] { background: var(--ink); border: 1px solid var(--line); border-radius: var(--r); color: var(--text); font: var(--t-ui)/1.5 var(--sans); padding: 6px 10px; color-scheme: dark; }
.acct-help { font-size: var(--t-small); color: var(--muted); margin: 0; max-width: 820px; }
.acct-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.acct-check { display: flex; gap: 6px; align-items: center; font-size: var(--t-table); color: var(--muted); }
.acct-filter { display: flex; gap: var(--s4); align-items: center; margin-bottom: var(--s3); flex-wrap: wrap; }
.acct td.pos, .acct .pos { color: var(--pos); } .acct td.neg, .acct .neg { color: var(--neg); }
tr.acct-reversed td { color: var(--dim); text-decoration: line-through; text-decoration-color: var(--line); }
tr.acct-reversed td .badge, tr.acct-reversed td .tag { text-decoration: none; }
.acct-cell-r { text-align: right; white-space: nowrap; }
.acct-attach { position: relative; }
.acct-file { font-family: var(--mono); text-decoration: none; padding: 0 4px; }
.acct-preview { border-top: 1px solid var(--line-soft); padding-top: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.acct-kv3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.acct-hints { margin: 0; padding-left: 18px; font-size: var(--t-table); color: var(--text); display: flex; flex-direction: column; gap: 4px; }
.acct-hints li[data-hint="ok"] { color: var(--pos); list-style: none; margin-left: -18px; }
.acct-card { border: 1px solid var(--line-soft); border-radius: var(--r); padding: var(--s3); margin-bottom: var(--s2); display: flex; flex-direction: column; gap: 4px; }
.acct-card-hd { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); font-size: var(--t-ui); }
.acct-checklist ul { list-style: none; margin: 4px 0 0; padding: 0; font-size: var(--t-table); display: flex; flex-direction: column; gap: 4px; }
.acct-checklist li { display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.acct-checklist li.done { color: var(--dim); }
.acct-details { margin-top: var(--s3); }
.acct-details summary { cursor: pointer; color: var(--accent); font-size: var(--t-table); }
.acct-details[open] summary { margin-bottom: var(--s3); }
.acct-inline .acct-fields { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.acct .card + .card { margin-top: var(--s3); }
.acct .acct-grid .card + .card { margin-top: 0; }
@media (max-width: 860px) {
  .acct-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .acct-grid { grid-template-columns: minmax(0, 1fr); }
  .acct-kv3 { grid-template-columns: minmax(0, 1fr); }
  .acct-fields .wide { grid-column: auto; }
}
.acct-preview > .btn, .acct-form > .btn { align-self: flex-start; }
.acct-link { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line-soft); }