/* X-Ray cockpit - styles (split out of index.html 2026-10-10, queue item 8; no rule changed) */
/* concept-13 project cockpit: goal first, the map is the workspace, grey by default - colour means "look here",
   talk on the map. Scroll areas keep their scrollbar space (scrollbar-gutter) so nothing shifts (user 2026-10-10). */
/* ---------- tokens (rulebook K1; change plan 2026-10-12 phase 7, section 7.1): every size, colour, radius and layer
   of the page is one of these - tools/cockpit_i18n.py css_audit (CK-4) counts every literal outside this block.
   Sizes are theme-independent (:root); colours per theme; the derived tints follow the theme through var(). */
:root {
  --disabled-o: .45; --strip: 112px; --side: 360px; --rail: 200px; --crumb-min: 120px; --sbw: 17px;
  --h: 28px; --t: 24px; --h-chip: 16px; --icon: 18px;   /* --icon: the rail glyph slot - a drawn icon set (D-118, later) drops into it */
    /* control heights: 28 default, 24 small (the smallest pointer target, WCAG 2.5.8 / A6); 16 = an indicator chip (not a target) */
  /* spacing: one 4-px scale + a 2-px hairline for nudges inside one component (rulebook L1, D-15) */
  --sp-hair: 2px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;   /* 48 (the scale's last step) is declared when a rule first needs it */
  --frame-top: calc(var(--sp-3) + var(--h) + var(--sp-3)); --frame-bottom-map: calc(2 * var(--h) + 3 * var(--sp-2));
  /* type: one family, six roles (title > brand > section > body > meta > label), weights 400 / 600 / 700 (D-14) */
  --fs-title: 20px; --fs-brand: 18px; --fs-section: 16px; --fs-body: 13px; --fs-meta: 12px; --fs-label: 12px;
  /* radii, concentric (inner = outer - padding) */
  --r-xs: 2px; --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-round: 50%;
  /* layers, strictly rising (rulebook L6) */
  --z-sticky: 1; --z-map: 10; --z-map-note: 11; --z-bar: 20; --z-menu: 30; --z-tooltip: 40; --z-toast: 50; --z-dialog: 60; --z-lightbox: 70;
  /* the alpha ladder of lens and chart fills: color-mix(in srgb, var(--<hue>) var(--tint-n), transparent) (views-meta.js tint) */
  --tint-1: 8%; --tint-2: 16%; --tint-3: 27%; --tint-4: 40%; --tint-5: 55%;
}
:root, [data-theme="dark"] {
  --bg: #15171a; --canvas: #1a1d21; --panel: #202328; --card: #272b31; --card2: #2e333a; --line: #33373e; --line2: #4a4f58;
  --text: #e6e8eb; --muted: #a3aab4; --dim: var(--muted);   /* every text colour >= 4.5:1 on every surface (WCAG AA); --dim is an alias: one secondary tier (A-111) */
  --prop: #b48cf2; --claude: #4fc3b0; --warn: #e9a23b; --bad: #f37f7f; --good: #7fc97f; --info: #79b3ec;
  --s-hit: #3987e5; --s-rel: #d95926; --s-f1: #1aa37a; --s-neg: #4a90e2; --s-pos: #e0703f;   /* A-127 chart series + diverging pair, not a status hue (dataviz validator: normal dE >= 15, CVD dE >= 8, >= 3:1 on --card) */
  --control-border: #767c86;   /* a border that identifies a control: >= 3:1 on every surface (A-100) */
  --focus: #e6e8eb; --sel-bar: #e6e8eb; --sel-bg: rgba(230,232,235,.09); --hover-bg: color-mix(in srgb, var(--text) 6%, transparent);
  --shadow: 0 8px 28px rgba(0,0,0,.45); --shadow-ctrl: 0 1px 0 rgba(0,0,0,.2); --scrim: rgba(0,0,0,.45); --scrim-strong: rgba(0,0,0,.72);
}
/* the browser draws scrollbars, form fields and the like in the theme's scheme; the thumb uses our own line colours */
:root, [data-theme="dark"] { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
* { scrollbar-color: var(--line2) transparent; box-sizing: border-box; }
[data-theme="light"] {
  --bg: #eef0f2; --canvas: #f6f7f8; --panel: #ffffff; --card: #ffffff; --card2: #f1f3f5; --line: #dde0e4; --line2: #b9bec5;
  --text: #1d2126; --muted: #5d6570; --dim: var(--muted);
  --prop: #7c3aed; --claude: #0b7666; --warn: #965900; --bad: #c62828; --good: #276c2b; --info: #1f63a8;
  --s-hit: #2a78d6; --s-rel: #c94f1c; --s-f1: #0f8a62; --s-neg: #256abf; --s-pos: #b4481a;  --control-border: #80868f;
  --focus: #1d2126; --sel-bar: #1d2126; --sel-bg: rgba(29,33,38,.09); --hover-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --shadow: 0 8px 28px rgba(0,0,0,.14); --shadow-ctrl: 0 1px 0 rgba(0,0,0,.08); --scrim: rgba(0,0,0,.32); --scrim-strong: rgba(0,0,0,.6);
}
/* A-114 (D-114): nothing stored, no ?theme= -> the OS theme from the first paint, without a script; a byte-identical copy of
   the light block (css_audit checks it) */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
  --bg: #eef0f2; --canvas: #f6f7f8; --panel: #ffffff; --card: #ffffff; --card2: #f1f3f5; --line: #dde0e4; --line2: #b9bec5;
  --text: #1d2126; --muted: #5d6570; --dim: var(--muted);
  --prop: #7c3aed; --claude: #0b7666; --warn: #965900; --bad: #c62828; --good: #276c2b; --info: #1f63a8;
  --s-hit: #2a78d6; --s-rel: #c94f1c; --s-f1: #0f8a62; --s-neg: #256abf; --s-pos: #b4481a;  --control-border: #80868f;
  --focus: #1d2126; --sel-bar: #1d2126; --sel-bg: rgba(29,33,38,.09); --hover-bg: color-mix(in srgb, var(--text) 5%, transparent);
  --shadow: 0 8px 28px rgba(0,0,0,.14); --shadow-ctrl: 0 1px 0 rgba(0,0,0,.08); --scrim: rgba(0,0,0,.32); --scrim-strong: rgba(0,0,0,.6);
  color-scheme: light;
  }
}
/* derived tints: one rule for both themes (var() resolves on <html>, where the theme sits) */
:root {
  --prop-bg: color-mix(in srgb, var(--prop) 12%, transparent); --warn-bg: color-mix(in srgb, var(--warn) 9%, transparent);
  --bad-bg: color-mix(in srgb, var(--bad) 8%, transparent); --stripe: color-mix(in srgb, var(--text) 3%, transparent);
}
[hidden] { display: none !important; }
html { scrollbar-gutter: stable; overflow: hidden; }
@media (max-width: 859.98px), (max-height: 599.98px) { html { overflow: auto; } body { min-height: 600px; } }   /* A-12 (D-A12 variant A): at 200 % zoom the 860-px frame scrolls as one piece - nothing is cut off */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: var(--fs-body)/1.45 "Segoe UI", system-ui, -apple-system, sans-serif; }
body { min-width: 860px; overflow: hidden; }   /* a 900 px window minus the reserved scrollbar */
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); } .dim { color: var(--dim); }
button, input, textarea, select { font: inherit; color: var(--text); }
input, select, textarea { border-color: var(--control-border); }   /* A-100: the browser's own field border at >= 3:1 too */
button { height: var(--h); padding: 0 var(--sp-2); border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--panel); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); flex-shrink: 0; }
button:hover:not(:disabled):not([aria-disabled="true"]):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.prop):not(.claude) { border-color: var(--muted); }   /* R15: open / pressed / accent keep their border under the pointer */
button:disabled, button[aria-disabled="true"] { opacity: var(--disabled-o); cursor: default; }   /* A-10: one disabled look; a pale control does not answer the hover */
button[aria-busy="true"] { opacity: .7; cursor: progress; }   /* R1: a working button is not an unavailable one */
button.small { height: var(--t); padding: 0 var(--sp-2); font-size: var(--fs-meta); }
button.ghost { background: transparent; border-color: transparent; }
button.ghost:hover:not(:disabled) { border-color: var(--control-border); }
button.prop { border-color: var(--prop); color: var(--prop); }
button.prop.fill { background: var(--prop-bg); }
button.claude { border-color: var(--claude); color: var(--claude); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg { display: inline-flex; border: 1px solid var(--control-border); border-radius: var(--r-md); overflow: hidden; background: var(--panel); flex-shrink: 0; }
.seg button { border: 0; border-radius: 0; border-right: 1px solid var(--line2); background: transparent; color: var(--muted); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--sel-bg); color: var(--text); }   /* R14: the one selection tint */
.seg button:hover:not(.on):not(:disabled) { color: var(--text); background: var(--hover-bg); }
.seg button:focus-visible { outline-offset: -2px; }   /* R6: .seg cuts overflow - the ring stays inside (as the crumb, PA U1) */
#btnLines { justify-content: space-between; }
#zoomLab { min-width: 58px; justify-content: center; }
#btnSend { min-width: 96px; justify-content: center; flex: none; }   /* compact: 'Send · n'; the full sentence is the tooltip */
.seg.prop button.on { color: var(--prop); }
/* ---------- level 1: project strip */
.strip { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--side); height: var(--strip); background: var(--panel); border-bottom: 1px solid var(--line); }
.idc { padding: 0; border-right: 1px solid var(--line); min-width: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }   /* mark + name centred in the cell (user: variant B) */
.idc h1 { margin: 0; font-size: var(--fs-brand); font-weight: 600; display: flex; align-items: center; gap: var(--sp-3); white-space: nowrap; }
.idc p { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--fs-meta); line-height: 1.35; }
.goals { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);   /* live action · hybrid · animation · scan time (· library, A-138) */ padding: var(--sp-2) var(--sp-1); min-width: 0; }
.goal { padding: var(--sp-hair) var(--sp-2); border-right: 1px solid var(--line); min-width: 0; cursor: pointer; border-radius: var(--r-md); container-type: inline-size; }
.goal:last-child { border-right: 0; }
.goal:hover { background: var(--hover-bg); }
.goal .k { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.gl { display: grid; grid-template-columns: 30px minmax(0, 1fr) 34px 48px; align-items: center; gap: var(--sp-1); margin-top: var(--sp-1); font-size: var(--fs-label); }   /* A-124: label | bullet | value | verdict (fixed slot, N8) */
@container (max-width: 149.98px) { .gl { grid-template-columns: 26px minmax(0, 1fr) 30px 10px; gap: var(--sp-1); } .gl .vgap { display: none; } }   /* a narrow tile keeps the glyph, the gap is in the tooltip */
.gl .n { font-size: var(--fs-body); font-weight: 600; text-align: right; }
.gl .lbl { color: var(--dim); }
.bullet { position: relative; height: 8px; background: var(--card2); border-radius: var(--r-xs); }
.bullet .bar { position: absolute; left: 0; top: 1px; height: 6px; background: var(--muted); border-radius: var(--r-xs); }   /* A-124: bar in the secondary ink, the target tick in the text ink with a halo (S-2) */
.bullet .was { position: absolute; top: -2px; width: 1px; height: 12px; background: var(--dim); }
.bullet .tgt { position: absolute; top: -4px; height: 16px; border-left: 2px solid var(--text); box-shadow: 0 0 0 2px var(--panel); z-index: var(--z-sticky); }
.bullet.time::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: var(--stripe); border-radius: var(--r-xs); }   /* the target zone of a time row (scale 0..2 x target) */
.bullet .cap { position: absolute; right: calc(-1 * var(--sp-1)); top: -5px; font-size: var(--fs-label); line-height: 1; color: var(--text); }   /* the value runs past the scale */
.gl .vd { text-align: left; font-size: var(--fs-label); overflow: hidden; }
.goal.gtime { cursor: default; }
.goal.gtime:hover { background: transparent; }
.gtime .gl[data-ent] { min-height: var(--t); margin-top: 0; cursor: pointer; border-radius: var(--r-sm); }   /* each time row is its own 24-px control (A-125) */
.gtime .gl[data-ent]:hover { background: var(--hover-bg); }
.gtime .gl[data-ent]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bullet .tgt::after { content: ''; position: absolute; left: -4px; top: -3px; border: 3px solid transparent; border-top-color: var(--text); }
.health { font-size: var(--fs-label); margin-top: var(--sp-2); white-space: nowrap; display: flex; gap: var(--sp-2); min-width: 0; }
.health .hs { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* freshness: the date of the stalest number in the tile; older than STALE_DAYS = hatched tile + warn colour */
.health .asof { margin-left: auto; color: var(--dim); flex: none; }
.goal.stale { background: repeating-linear-gradient(135deg, transparent 0 6px, var(--line) 6px 9px); }
.goal.stale .asof { color: var(--warn); }
.hs { font-weight: 700; white-space: nowrap; }
.find { position: relative; flex: 1 1 auto; min-width: 90px; }   /* the global search gets the free space */
#langSeg { margin-right: var(--sp-1); flex: none; }   /* shrinks before anything else in the header */
.find input { width: 100%; height: var(--h); border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--card); color: var(--text); padding: 0 var(--sp-2); font: inherit; font-size: var(--fs-body); }
.findres { position: absolute; left: 0; top: calc(var(--h) + 4px); width: 330px; z-index: var(--z-menu); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-1); }
.findres button, .findres [role=option] { display: grid; cursor: pointer; grid-template-columns: 74px minmax(0, 1fr); gap: var(--sp-2); width: 100%; text-align: left; border: 0; background: transparent; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--text); font-size: var(--fs-meta); }
.findres button span, .findres [role=option] span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.findres button .k, .findres [role=option] .k { color: var(--dim); font-size: var(--fs-label); }
.findres button:hover, .findres [role=option]:hover { background: var(--hover-bg); }   /* A-82: the active option is aria-selected (the selection look above) */
.hov { position: fixed; z-index: var(--z-tooltip); max-width: 320px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-meta); line-height: 1.4; pointer-events: auto; }   /* A-90: the pointer may rest on the card (SC 1.4.13) */
.hov .kind, .pane .kind { font-size: var(--fs-label); color: var(--dim); margin-bottom: var(--sp-hair); font-weight: 600; }
.hov .tiny { font-size: var(--fs-label); margin-top: var(--sp-1); }
.navbar { display: flex; align-items: center; gap: var(--sp-1); margin: calc(-1 * var(--sp-1)) 0 var(--sp-2); min-height: calc(var(--t) + var(--sp-hair)); }
.navbar .crumbs { margin-left: var(--sp-2); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--fs-meta); }
.pane .open { color: var(--dim); font-style: italic; font-size: var(--fs-meta); }
.pane .grp { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: var(--sp-2); align-items: start; margin: var(--sp-1) 0; }
.pane .grp .k { font-size: var(--fs-label); color: var(--muted); padding-top: var(--sp-1); }
button.lnk.ent { text-decoration: underline dotted; text-underline-offset: 2px; }
/* folder layout tree (wiki layout pages): ok plain, problems in the warn / bad colour */
.lay { padding: var(--sp-hair) 0 var(--sp-hair) var(--sp-2); border-left: 3px solid var(--line); margin: var(--sp-hair) 0; }
.lay code, .pane .path { font-size: var(--fs-meta); overflow-wrap: anywhere; } .lay.ok { border-left-color: var(--good); } .lay.missing, .lay.unexpected, .lay.bad-name { border-left-color: var(--bad); }
.lay.missing code, .lay.unexpected code, .lay.bad-name code { color: var(--bad); }
/* the current entry: a calm tint + an accent bar on the left (list-selection practice) - no frames; a ring only for keyboard focus */
#html tr.cur td, #html tr.selrow td { background: var(--sel-bg); }
#html tr.cur td:first-child, #html tr.selrow td:first-child { box-shadow: inset 3px 0 0 var(--sel-bar); }
#html .card.cur, #html .card.selc, .lcard.cur, #html .opow button.on, .findres button.on, .findres [role=option][aria-selected="true"], .rail button.on { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--sel-bar); }   /* A-102: selected = tint + bar, in both themes */
svg .cur circle { stroke: var(--sel-bar); stroke-width: 2.5; }
svg g.cur > rect.box, svg g.cur > rect:first-of-type, .blk.sel .box { stroke: var(--sel-bar); stroke-width: 2.5; }
[data-ent]:not(button) { cursor: pointer; }
[data-ent]:not(button):focus { outline: none; }
[data-ent]:not(button):focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: var(--r-sm); }   /* keyboard only */
.newpill { position: absolute; left: 50%; transform: translateX(-50%); bottom: 150px; z-index: var(--z-map); border-radius: var(--r-lg); background: var(--card2); }
.hs.on { color: var(--good); } .hs.risk { color: var(--warn); } .hs.off { color: var(--bad); } .hs.unknown, .hs.partial { color: var(--dim); }
.work { padding: var(--sp-3) var(--sp-4); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.wrow { display: grid; grid-template-columns: 146px minmax(0, 1fr); gap: var(--sp-2); align-items: baseline; }
.wrow .lab { font-size: var(--fs-label); color: var(--muted); white-space: nowrap; font-weight: 600; }
.wrow .lab.you { color: var(--prop); font-weight: 600; }
.wrow .t { white-space: nowrap; overflow: hidden; display: flex; gap: var(--sp-2); min-width: 0; }
.wrow .t .one { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.wrow .t .more { flex: none; }
.wrow .t .one > button.lnk { display: block; max-width: 100%; min-height: var(--t); line-height: var(--t); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* A-70: the title is the link (24 px tall), cut with "..." */
.wrow .t .wid { flex: none; }
.gl abbr { text-decoration: none; }   /* A-70: the cut label keeps its full word in the tooltip */
.wrow .t button.lnk { color: var(--text); }
.lnk { background: none; border: 0; height: auto; padding: 0; color: var(--text); text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 3px; cursor: pointer; font: inherit; display: inline; }
.lnk:hover { text-decoration-color: var(--text); }
/* ---------- level 2: map */
.main { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr) var(--side); height: calc(100% - var(--strip)); }
/* ---------- concept-14 frame: view rail, lens, zoom level, view head, html views */
.rail { background: var(--panel); border-right: 1px solid var(--line); overflow: auto; scrollbar-gutter: stable; padding: var(--sp-2) 0 var(--sp-3); min-height: 0; }
.rail .rg { margin: var(--sp-1) 0 0; padding: 0; font-size: var(--fs-label); line-height: var(--t); font-weight: 600; }   /* A-80: the group head is a button inside an h2, same metrics as the old h4 */
.rail .rg button { display: block; width: 100%; height: auto; min-height: var(--t); padding: 0 var(--sp-3) 0 var(--sp-2); text-indent: -2px; border: 0; border-radius: 0; background: transparent; font: inherit; line-height: var(--t); color: var(--dim); text-align: left; cursor: pointer; user-select: none; white-space: nowrap; overflow: hidden; font-weight: 600; }
.rail .rg button > i { display: inline-block; width: 10px; font-style: normal; color: inherit; text-align: left; }   /* fold mark: a fixed slot, the label never shifts */
.rail .rg button:hover { color: var(--text); background: transparent; }
.rail button { display: grid; grid-template-columns: var(--icon) minmax(0, 1fr) 10px; align-items: center; gap: var(--sp-2); width: 100%; min-height: var(--t); height: auto; padding: 0 var(--sp-3) 0 var(--sp-3); border: 0; border-radius: 0; background: transparent; color: var(--muted); text-align: left; }
.rail button span.n { overflow: hidden; text-overflow: ellipsis; }
.rail button i { font-style: normal; color: var(--dim); text-align: center; }
.rail button b { width: 6px; height: 6px; border-radius: var(--r-round); background: transparent; justify-self: end; }
.rail button b.has { background: var(--text); opacity: .6; }
.rail button:hover { background: var(--hover-bg); color: var(--text); }
.rail button.on { color: var(--text); font-weight: 600; }
.rail .foot { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: var(--sp-1); }
#vhead { padding: 0 var(--sp-4) var(--sp-2); }
#vhead .vt { display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0; }
#vhead .vt b, #vhead .vt h2 { font-size: var(--fs-title); white-space: nowrap; }
#vhead .vt h2 { margin: 0; font-weight: 600; line-height: inherit; }   /* A-07: the view title is the h2 the focus goes to - same look as the old <b> */
#vtitle:focus { outline: none; } #vtitle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: var(--r-xs); }
/* Back / Up + the location path: the start of the centre's top row (explorer pattern). 28 px icon buttons, Back left, Up
   right of it; the path fills the room up to the view's tools (it is cut first, the tools never move) */
.ctrl #grpNav { gap: var(--sp-1); flex: none; }
.ctrl .navb { width: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.ctrl .navb[aria-disabled="true"] { box-shadow: none; }   /* A-10 / U4: the shared disabled look (opacity token), no hover change */
.ctrl .crumb { flex: 1 1 0; min-width: var(--crumb-min); display: flex; align-items: center; gap: var(--sp-1); overflow: hidden; white-space: nowrap; font-size: var(--fs-body); pointer-events: auto; margin-left: var(--sp-1); }
.ctrl .crumb > button, .ctrl .crumb > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; height: var(--t); line-height: var(--t); padding: 0; }
.ctrl .crumb > button:focus-visible { outline-offset: -2px; }   /* the crumb cuts overflow: the ring stays inside (PA U1) */
.ctrl .crumb > button { color: var(--muted); flex: 0 1 auto; min-width: var(--t); min-height: var(--t); } .ctrl .crumb > b { flex: 0 4 auto; font-weight: 600; }   /* the current place shrinks first, a parent never below 24 px (PA U3) */
.ctrl .crumb .sep2 { color: var(--dim); flex: none; }
.ctrl > .grp, .ctrl > .sep { flex: none; }   /* tools never shrink: their place depends only on the bar width (P20) */
.ctrl.notools > .grp:not(#grpNav), .ctrl.notools > .sep { display: none; }   /* no tools in this view: no empty slots */
.ctrl.dense3:not(.notools) .crumb { display: none; }   /* narrowest step on a view with tools: the path is only the view name (also in the view head) - the tools keep their room */
#vhead .vt span { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#vhead .vl { font-size: var(--fs-meta); color: var(--dim); margin-top: var(--sp-1); display: flex; gap: var(--sp-3); flex-wrap: wrap; min-height: 18px; }
#vhead .vl i { display: inline-block; width: 12px; height: 10px; border-radius: var(--r-xs); margin-right: var(--sp-1); vertical-align: -1px; border: 1px solid var(--line2); }
#html { padding: var(--sp-1) var(--sp-4) var(--sp-6); }
#html table.t { border-collapse: collapse; width: 100%; font-size: var(--fs-body); }
#html table.t th, #html table.t td { border-bottom: 1px solid var(--line); padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; text-align: left; vertical-align: top; overflow-wrap: break-word; }
#html table.t td * { overflow-wrap: break-word; }   /* only a word longer than the cell breaks - never a normal word */
#html table.t td button.lnk { white-space: normal; text-align: left; overflow-wrap: anywhere; min-height: var(--t); vertical-align: middle; }   /* A-79: a table link is 24 px tall */
#html table.t td .dim { overflow-wrap: anywhere; }   /* names and paths may break anywhere, words in sentences never */
#html table.t th:first-child, #html table.t td:first-child { padding-left: var(--sp-3); }   /* always reserved: the selection bar sits in it, the text never moves */
#html table.t th { color: var(--dim); font-weight: 600; font-size: var(--fs-meta); white-space: nowrap; }
#html tr[data-sel] { cursor: pointer; } #html tr[data-sel]:hover td { background: var(--hover-bg); }
#html .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-2); margin: 0 0 var(--sp-2); font-size: var(--fs-body); cursor: pointer; }
#html .card .dim { font-size: var(--fs-meta); }
#html .kan { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
#html .kan h5, #html .kan h3.kanh { margin: 0 0 var(--sp-2); font-weight: 600; font-size: var(--fs-label); color: var(--dim); }
#html .grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
#html .lab { font-size: var(--fs-label); color: var(--dim); margin: var(--sp-3) 0 var(--sp-2); font-weight: 600; }
#html .st-adopted { color: var(--good); } #html .st-rejected { color: var(--bad); } #html .st-parked { color: var(--warn); }

.mapcell { position: relative; background: var(--canvas); min-width: 0; }
/* the centre is three fixed rows + one scroll body (user 2026-10-12: one structure for every view, no sticky bars - only table heads stick - no
   offsets computed per view): view head, the view's own bar (filters / path / legend - views return it as r.bar), and
   below them the content, the only part that scrolls. Nothing can show above or between the fixed rows. */
#center { position: absolute; inset: 0; display: flex; flex-direction: column; padding-top: var(--frame-top); }
#xtitle, #vhead, #vbar { flex: none; }
#vbar { padding: 0 var(--sp-4) var(--sp-1); background: var(--canvas); position: relative; z-index: var(--z-bar); }   /* above #scroll: the Actions menu opens over the page */
#vbar:empty { display: none; }
#scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; scrollbar-gutter: stable; padding: 0 0 var(--sp-5); }
/* the one rule for long tables: their header row stays at the top of the content (the scroll body starts under the bar) */
#html table.t > thead th { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--canvas); }

body[data-bar="1"] #scroll { padding-bottom: var(--frame-bottom-map); }   /* only the map has the second control row; the controls stay put, the content starts under them */
#map { display: block; margin: 0 auto; }
.ctrl { position: absolute; left: var(--sp-3); right: calc(var(--sp-3) + var(--sbw)); top: var(--sp-3); display: flex; flex-wrap: nowrap; gap: var(--sp-3); align-items: center; z-index: var(--z-map); pointer-events: none; }
/* one row, two groups (what you see | map tools); every control the same height and family: dropdown = "Name Value ▾",
   toggle = box + name, action = icon + name (toolbar practice: group by purpose, one look per control type) */
.ctrl .grp { display: flex; gap: var(--sp-2); align-items: center; }
.ctrl .sep { width: 1px; height: calc(var(--h) - var(--sp-2)); background: var(--line2); box-shadow: none; }
.ctrl button { height: var(--h); white-space: nowrap; padding: 0 var(--sp-2); }
.ctrl .dd { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ctrl .dd .k { color: var(--muted); }
.ctrl .dd b { font-weight: 600; text-align: left; }
.ctrl .dd i { font-style: normal; color: var(--dim); font-size: var(--fs-label); }
.ctrl .tog { display: inline-flex; align-items: center; gap: var(--sp-1); }
.ctrl .tog .box { width: 13px; height: 13px; border: 1.5px solid var(--control-border); border-radius: var(--r-xs); }
.ctrl .tog[aria-pressed="true"] { color: var(--prop); border-color: var(--prop); }
.ctrl .tog[aria-pressed="true"] .box { background: var(--prop); border-color: var(--prop); box-shadow: inset 0 0 0 2px var(--panel); }
.ctrl.dense1 .act-walk span { display: none; }   /* 1st: the action keeps its icon, the tooltip names it */
.ctrl.dense2 .dd .k { display: none; }             /* 2nd: the dropdowns keep their value */
.ctrl.dense3 .act-mine span[data-i18n] { display: none; } .ctrl.dense3 { gap: var(--sp-1); } .ctrl.dense3 .grp { gap: var(--sp-1); }   /* classes, not ids: the measuring copy has no ids */
/* map furniture: legend bottom-left, zoom bottom-right, above the reserved scrollbar (map practice) */
.mapfloat { position: absolute; bottom: var(--sp-4); z-index: var(--z-map); box-shadow: var(--shadow); border-radius: var(--r-md); }
.mapfloat.bl { left: var(--sp-4); }
.mapfloat.br { right: calc(var(--sp-4) + var(--sbw)); }
body[data-bar="1"] .mapfloat { bottom: calc(2 * var(--h) + var(--sp-4)); }
.ctrl .grp > * { pointer-events: auto; box-shadow: var(--shadow-ctrl); }
/* live state = a dot in the Conversation tab (tooltip + the line under the message box say it in words) */
.live { display: inline-flex; align-items: center; margin-right: var(--sp-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.live i { width: 8px; height: 8px; border-radius: var(--r-round); background: var(--dim); }
.live.on i { background: var(--claude); } .live.on.wait i { background: var(--warn); }
.pop { position: absolute; top: calc(var(--sp-3) + var(--h) + var(--sp-1)); z-index: var(--z-menu); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: var(--sp-3) var(--sp-3); min-width: 260px; }
.pop h4 { margin: var(--sp-2) 0 var(--sp-1); font-size: var(--fs-label); color: var(--muted); font-weight: 600; }
.pop h4:first-child { margin-top: 0; }
.pop label { display: flex; align-items: center; gap: var(--sp-2); min-height: calc(var(--t) + var(--sp-hair)); cursor: pointer; white-space: nowrap; }
.pop .sw { width: 18px; height: 0; border-top: 2px solid; display: inline-block; }
.key { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--sp-2) var(--sp-2); align-items: center; font-size: var(--fs-meta); }
.key .s { height: 18px; border-radius: var(--r-sm); }
.key .pin { width: 18px; height: 18px; border-radius: var(--r-round); font-size: var(--fs-label); font-weight: 700; color: var(--bg); display: inline-flex; align-items: center; justify-content: center; }
.stepper { position: absolute; left: 50%; bottom: var(--sp-4); transform: translateX(-50%); z-index: var(--z-map); display: grid; grid-template-columns: auto 52px minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-2); background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-2); box-shadow: var(--shadow); width: min(620px, calc(100% - 24px)); }
.stepper > .num { text-align: center; }
.focusbar { grid-template-columns: minmax(0, 1fr) auto auto; bottom: 62px; }
.stepper .st { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.focusbar .fbb { visibility: hidden; }  /* the Back slot is always there, only shown when there is a view to go back to */
.focusbar .fbb.on { visibility: visible; }
.stepper .st b { color: var(--text); }
svg text { font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
svg .t-label { font-size: var(--fs-label); } svg .t-meta { font-size: var(--fs-meta); } svg .t-body { font-size: var(--fs-body); } svg .t-title { font-size: var(--fs-title); }   /* A-106: drawn text in the type roles (core.js tx, views.js t) */
.blk { cursor: pointer; }
.blk:focus { outline: none; }
.blk.dim { opacity: .25; }
.blk .box { transition: stroke .1s; }
.blk:hover .box { stroke: var(--muted); }
.blk:focus-visible .box { stroke: var(--focus); stroke-width: 2; stroke-dasharray: 4 3; }   /* focus: a dashed ring - never the selection look */
.ln { fill: none; stroke: var(--line2); stroke-width: 1.2; }
.ln.hot { stroke: var(--text); stroke-width: 1.6; opacity: .85; }
.ln.flow { stroke: var(--muted); stroke-dasharray: 4 3; }
.ln.task { stroke: var(--warn); stroke-dasharray: 2 4; }
.ln.mine { stroke: var(--prop); stroke-width: 1.8; stroke-dasharray: 7 4; }
.ln.gone { stroke: var(--prop); stroke-width: 2.2; stroke-dasharray: 1 5; }
.ln.selE { stroke: var(--sel-bar); stroke-width: 2.6; }
.hit { fill: none; stroke: transparent; stroke-width: 12; cursor: pointer; }
/* ---------- side */
aside { position: relative; background: var(--panel); border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.sidehead { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tabs { display: flex; gap: var(--sp-4); padding: 0 var(--sp-4); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tabs button { min-height: 38px; height: auto; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 0; background: transparent; color: var(--muted); }
.tabs button.on { color: var(--text); border-bottom-color: var(--text); }
.tabs .cnt { display: inline-block; min-width: 1.6em; text-align: left; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--prop); } .tabs .cnt.c { color: var(--claude); }
.pane { flex: 1; overflow: auto; scrollbar-gutter: stable; padding: var(--sp-3) var(--sp-4) var(--sp-4); min-height: 0; }
.pane h2 { margin: 0; font-size: var(--fs-section); }
.meta { color: var(--muted); font-size: var(--fs-meta); margin: var(--sp-1) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.meter { display: inline-flex; gap: var(--sp-hair); }
.meter i { width: 10px; height: 6px; background: var(--line2); border-radius: var(--r-xs); }
.meter i.f { background: var(--muted); }
.sec { font-size: var(--fs-label); color: var(--muted); margin: var(--sp-4) 0 var(--sp-2); display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
.note { border-left: 3px solid; padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; border-radius: 0 var(--r-md) var(--r-md) 0; }
.note.off { border-color: var(--bad); background: var(--bad-bg); } .note.risk { border-color: var(--warn); background: var(--warn-bg); }
.note b.off { color: var(--bad); } .note b.risk { color: var(--warn); }
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { border: 1px solid var(--control-border); border-radius: var(--r-sm); padding: 0 var(--sp-2); font-size: var(--fs-meta); color: var(--muted); background: transparent; height: auto; min-height: var(--t); line-height: calc(var(--t) - 2px); display: inline-block; vertical-align: middle; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }   /* a long name ends in ... - the full name is in the hover card */
button.chip:hover { color: var(--text); border-color: var(--muted); }
/* task chains (tasks view, F25): chips with arrows; the critical path in the accent colour */
.chains { margin: var(--sp-1) 0 var(--sp-3); } .chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin: var(--sp-1) 0; }
.chain .arr { color: var(--dim); font-size: var(--fs-meta); } .chip.crit { border-color: var(--text); color: var(--text); font-weight: 600; }   /* R20: the critical path - weight, not the selection token */
.chain .chip { cursor: pointer; }
.kv { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-1) var(--sp-2); font-size: var(--fs-meta); }
.kv .k { color: var(--muted); }
.thread { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); background: var(--card); margin: var(--sp-2) 0; }
.thread.resolved { border-style: dashed; }   /* R3: no fading - history is read again (>= 4.5:1) */
.thread .th { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-meta); margin-bottom: var(--sp-1); }
.thread .th .st { margin-left: auto; font-size: var(--fs-label); font-weight: 600; }
.st.open { color: var(--prop); } .st.answered { color: var(--claude); } .st.resolved { color: var(--dim); }
.msg { margin: var(--sp-2) 0; }
.msg .who { font-size: var(--fs-label); font-weight: 600; }
.msg.user .who { color: var(--prop); } .msg.claude .who { color: var(--claude); }
.msg .who .t { font-weight: 400; color: var(--dim); margin-left: var(--sp-2); letter-spacing: 0; }
.msg p { margin: 0 0 0; white-space: pre-wrap; }
.msg .who .pend { color: var(--warn); font-weight: 400; letter-spacing: 0; }   /* A-65: " · not sent yet" is drawn through T() (chat.js), no text in CSS */
.composer { border-top: 1px solid var(--line); padding: var(--sp-3) var(--sp-4) var(--sp-3); flex-shrink: 0; background: var(--panel); }
.composer .row { display: flex; align-items: center; gap: var(--sp-2) var(--sp-2); margin-bottom: var(--sp-2); }
.composer textarea { width: 100%; height: 64px; resize: none; background: var(--card); border: 1px solid var(--control-border); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-2); overflow-y: auto; scrollbar-gutter: stable; }
.about { display: inline-flex; align-items: center; gap: var(--sp-1); height: var(--t); padding: 0 var(--sp-1) 0 var(--sp-2); border-radius: var(--r-sm); border: 1px solid var(--control-border); font-size: var(--fs-meta); white-space: nowrap; flex: 1 1 0; min-width: 0; }
.about span { overflow: hidden; text-overflow: ellipsis; }
.about button { height: var(--t); width: var(--t); padding: 0; border: 0; background: transparent; justify-content: center; }
.empty { color: var(--dim); padding: var(--sp-2) 0; }
details.prop { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); margin: var(--sp-3) 0; }
details.prop summary { cursor: pointer; color: var(--prop); font-weight: 600; }
.field { margin: var(--sp-2) 0; } .field label { display: block; font-size: var(--fs-label); color: var(--muted); margin-bottom: var(--sp-hair); }
.field input, .field select { width: 100%; height: var(--h); background: var(--card); border: 1px solid var(--control-border); border-radius: var(--r-md); padding: 0 var(--sp-2); }
.brow { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-2) 0; }
.chg { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-meta); }
.chg .w { color: var(--dim); }
.toast { position: fixed; left: 50%; top: calc(var(--strip) + var(--frame-top)); transform: translateX(-50%); z-index: var(--z-toast); background: var(--card2); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: center; box-shadow: var(--shadow); width: min(460px, 80vw); }
.toast > span { min-width: 0; }
.toast:not(.on) { display: none; }   /* A-28: the live region stays in the DOM; shown by .on */
.toast .tbtns { display: inline-flex; gap: var(--sp-2); align-items: center; }
.toast.low { top: auto; bottom: var(--sp-4); }   /* R20: never over the focused control (core.js toastPlace) */
.toast[data-kind="error"] { border-color: var(--bad); } .toast[data-kind="error"] b { color: var(--bad); }
.banner { position: absolute; left: 50%; top: calc(var(--sp-3) + var(--h) + var(--sp-2)); transform: translateX(-50%); z-index: var(--z-map-note); background: var(--prop-bg); border: 1px solid var(--prop); color: var(--text); border-radius: var(--r-lg); padding: var(--sp-2) var(--sp-3); display: flex; gap: var(--sp-3); align-items: center; backdrop-filter: blur(6px); }
.dlg-back { position: fixed; inset: 0; background: var(--scrim); display: flex; align-items: center; justify-content: center; z-index: var(--z-dialog); }
.dlg { background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--sp-4); width: min(520px, 92vw); box-shadow: var(--shadow); }
.dlg h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-section); }
.dlg table { width: 100%; border-collapse: collapse; }
.dlg td { padding: var(--sp-1) var(--sp-2) var(--sp-1) 0; border-bottom: 1px solid var(--line); }
kbd { font: var(--fs-meta) Consolas, monospace; border: 1px solid var(--control-border); border-bottom-width: 2px; border-radius: var(--r-sm); padding: 0 var(--sp-1); }
/* export mode (tools/layer_charts.py) */
#xtitle { display: none; }
body.export { overflow: visible; min-width: 0; }
body.export .strip, body.export aside, body.export .ctrl, body.export .stepper { display: none; }
body.export .main { display: block; height: auto; }
body.export #center { position: static; display: block; padding: var(--sp-4) var(--sp-4); }
body.export #scroll { overflow: visible; padding: 0; }
body.export #map { margin: 0; }
body.export #xtitle { display: block; padding: 0 0 var(--sp-2); }
#xtitle h2 { margin: 0; font-size: var(--fs-title); } #xtitle p { margin: var(--sp-hair) 0 0; color: var(--muted); }
.sh { display: none; }
@media (max-width: 1250px) { .lg { display: none; } .sh { display: inline; } :root { --side: 330px; } }
@media (max-width: 1050px) { .ctrl .zoomlab { display: none; } }
@media (max-width: 1100px) { .idc h1 span { display: none; } .idc .mark { width: 32px; height: 32px; } .rail .rg { visibility: hidden; height: 4px; margin: var(--sp-1) 0; overflow: hidden; } .rail button { grid-template-columns: var(--icon) 0 6px; padding: 0 var(--sp-2) 0 var(--sp-4); } .rail button span.n { display: none; } }
@media (max-width: 1000px) { :root { --side: 300px; } .goal { padding: var(--sp-hair) var(--sp-2); }  #btnSend { min-width: 84px; } .find { min-width: 60px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* end marker: check.js tests that this last rule applied (an unclosed comment above would swallow it) */
:root { --css-end: 1; }

/* phase B operations views (ops.js): fixed slots, bars with fixed widths, state as glyph + word */
#html .opow { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
#html .opow button { height: var(--h); min-width: 190px; text-align: left; }
#html .obar { display: inline-block; height: 9px; border: 1px solid var(--control-border); border-radius: var(--r-xs); vertical-align: middle; overflow: hidden; }
#html .obar i { display: block; height: 100%; }
#html .ogauge { display: grid; grid-template-columns: 60px 130px 80px auto; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0; }
#html .oscroll { overflow-x: auto; max-width: 100%; }
#html table.ocov { table-layout: fixed; width: 100%; }
#html table.ocov col.cn { width: 24%; } #html table.ocov col.cm { width: 7%; } #html table.ocov col.ch { width: 6%; }   /* start values; ops.js fitCov() sets the real widths */
#html table.ocov th { white-space: nowrap; font-size: var(--fs-label); }
#html table.ocov td { white-space: nowrap; font-size: var(--fs-meta); line-height: 1.3; padding-right: var(--sp-1); }   /* stacked lines, none breaks inside */
/* the group name scrolls inside its cell; the scrollbar is always there (fixed slot, nothing jumps) */
#html table.ocov .oname { overflow-x: scroll; white-space: nowrap; scrollbar-width: none; }   /* scrolls - driven by the one name scrollbar */
#html table.ocov .oname::-webkit-scrollbar { display: none; }
/* one fixed scrollbar for all group names, under the Group header - always shown */
#html table.ocov .ogh { display: flex; align-items: center; gap: var(--sp-2); }
#html table.ocov .onamebar { overflow-x: scroll; height: 12px; flex: 1; min-width: 40px; scrollbar-width: thin; }
#html table.ocov .oc1 { display: flex; gap: var(--sp-1); }
#html table.ocov.ostack .oc1 { flex-direction: column; gap: 0; }   /* narrow window: glyph and count on two lines */
#html table.ocov .onamebar > div { height: 1px; }
#html table.ocov thead th { vertical-align: bottom; }
#html .ocmp { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin: var(--sp-1) 0 var(--sp-2); }
#html .ocmp select { max-width: 420px; height: var(--h); }
#html table.ocov button.osort { all: unset; cursor: pointer; display: inline; font: inherit; color: inherit; }
#html table.ocov button.osort:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
#html table.ocov button.osort i { display: inline-block; width: 1em; font-style: normal; text-align: center; }   /* fixed arrow slot */
#html table.ocov .oshort { display: none; }
#html table.ocov.ostack .olong { display: none; } #html table.ocov.ostack .oshort { display: inline; }   /* narrow: short names */
#html table.ocov.ostack td, #html table.ocov.ostack th { padding-right: var(--sp-hair); }
#html table.ocov.ostack th:first-child, #html table.ocov.ostack td:first-child { padding-left: var(--sp-2); }
#html table.ocov.ostack button.osort i { width: 9px; }
/* coverage head in the view bar: the label left, the legend as a wrapping line below it (one entry per sign) */
.ocovhead .lab { font-size: var(--fs-label); color: var(--dim); margin: var(--sp-1) 0; font-weight: 600; }
.olegend { display: flex; flex-wrap: wrap; gap: var(--sp-hair) var(--sp-4); font-size: var(--fs-meta); line-height: 1.5; }
.olegend .og { display: inline-block; min-width: 28px; text-align: center; margin-right: var(--sp-1); }
#html .oalert { border: 1px solid var(--bad); background: var(--bad-bg); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); margin: 0 0 var(--sp-3); font-size: var(--fs-meta); }

/* header badge (M11): build errors / old data; absolute in the logo cell, so nothing else moves when it appears */
.hbadge { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 16px; min-height: 0; font-size: var(--fs-label); font-weight: 400; line-height: 16px; padding: 0 var(--sp-hair); margin: 0;
  border: 0; border-radius: 0; background: transparent; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.hbadge::before { content: '●'; color: var(--bad); margin-right: var(--sp-1); }   /* a quiet hint: one red dot, grey words (user 2026-10-12) */
.hbadge:hover { color: var(--text); }
.hbadge[hidden] { display: none; }

/* system model pages (model.js): neighbour lists, status words, Jellyfin line comparison */
.mlist { list-style: none; margin: var(--sp-hair) 0 var(--sp-2); padding: 0; }
.mlist li { padding: 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mst { white-space: nowrap; }
table.mcmp th { text-align: right; font-weight: 600; } table.mcmp td.num { text-align: right; }
.pmark { margin-right: var(--sp-1); white-space: nowrap; } .pmark .dim { margin-left: 0; font-size: var(--fs-label); }
.mpic { float: right; max-width: 96px; max-height: 144px; margin: 0 0 var(--sp-2) var(--sp-3); border-radius: var(--r-sm); border: 1px solid var(--line); }

/* Library views (library.js): one fixed toolbar, a card grid below; images lazy, a dash where there is none */
.lbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
.pimg.pnofile { display: inline-flex; align-items: center; padding: var(--sp-1) var(--sp-2); font-size: var(--fs-label); color: var(--dim); border-style: dashed; word-break: break-all; }
.pwarn { color: var(--warn); margin: var(--sp-2) 0; }
.lpicks { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-meta); }
.llegend { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); font-size: var(--fs-meta); }
.lbar .lq { width: 220px; } .lbar .seg { display: inline-flex; gap: var(--sp-hair); } .lbar .lcount { margin-left: auto; }
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
.lcard { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-hair); height: auto; white-space: normal; text-align: left; padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--panel); color: var(--text); min-width: 0; }
.lcard img, .lcard .noimg { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: var(--r-sm); background: var(--line); display: flex; align-items: center; justify-content: center; color: var(--dim); }
.lcard b, .lcard span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-meta); }
.lcard b { font-size: var(--fs-body); }
.lcard:hover { background: var(--hover-bg); border-color: var(--muted); }   /* A-117: a card answers the pointer like a table row */
.nocopy { cursor: default; color: var(--dim); }   /* online copy: a page that is not in the copy - plain dim text, no link look */
.nocopy:hover { background: none; text-decoration: none; }
span.lcard.nocopy { opacity: .8; color: var(--text); }
.lnote { margin: var(--sp-hair) 0 var(--sp-2); font-size: var(--fs-meta); }


/* Library page in the centre (R2): the path bar keeps its place at the top of the view */
.lpath { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-2) 0; }
.lpage { max-width: 1100px; }
.lpage .mpic { max-width: 160px; max-height: 240px; }
.obtns { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); align-items: center; } .oreason { width: 220px; }
.ltrail { font-size: var(--fs-meta); margin: 0 0 var(--sp-2); }
/* the link rows of a Library page bar (Recently, On this page): one line each, 24 px targets, the same height on every page -
   a row longer than the bar scrolls sideways inside itself, the page below never moves (audit #1 / #9) */
.ltrail, .ljump { font-size: var(--fs-meta); margin: 0; height: calc(var(--t) + var(--sp-hair)); display: flex; align-items: center; gap: 0 var(--sp-2); white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.ltrail button, .ljump button { min-height: var(--t); flex: none; }
.ljump .ljs { display: contents; }
.flash-mark { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-xs); transition: outline-color 1s ease-out; }   /* A-11: the one timed mark (jump target, the card you came back to) */
.flash-mark.fading { outline-color: transparent; } .lmore { grid-column: 1 / -1; padding: var(--sp-2) 0; }

/* person page (person.js): vanilla block, X-Ray tree with thumbnails, clips, card - everything open (R10) */
.phead { overflow: hidden; margin-bottom: var(--sp-2); }
.pcardbox > summary { cursor: pointer; list-style: none; user-select: none; }   /* the card: last on the page, folded by default */
.pcardbox > summary::-webkit-details-marker { display: none; }
.pcardbox > summary::before { content: '▸'; display: inline-block; width: 10px; }
.pcardbox[open] > summary::before { content: '▾'; }
.pcardbox > summary:hover { color: var(--text); }
/* Actions menu (server.js): right end of the fixed path row (#vbar) - the page below never moves; the menu opens over it */
.acts { margin-left: auto; position: relative; z-index: var(--z-bar); }
body.snap .acts, body.export .acts { display: none; }
.actsmenu { position: absolute; right: 0; top: var(--h); min-width: 240px; max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow); padding: var(--sp-1); display: flex; flex-direction: column; gap: var(--sp-hair); }
.actsmenu > .dim { padding: var(--sp-2) var(--sp-2); }
.actsitem { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-hair); text-align: left; height: auto; padding: var(--sp-2) var(--sp-2);
  border: 0; background: none; border-radius: var(--r-sm); cursor: pointer; }
.actsitem:hover:not(:disabled), .actsitem:focus-visible { background: var(--hover-bg); }
.actsitem:disabled, .actsitem[aria-disabled="true"] { cursor: default; }   /* A-86: greyed but reachable */
.actsitem:disabled > b, .actsitem[aria-disabled="true"] > b { opacity: var(--disabled-o); }   /* R4: the reason beside it keeps full --muted */
.actsitem .dim { font-size: var(--fs-label); }
.pblock, .ptree { margin: var(--sp-hair) 0 var(--sp-2); }
.pnode { border-left: 2px solid var(--line2); padding: var(--sp-hair) 0 var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; }
.pleaf { margin: var(--sp-1) 0 var(--sp-1) var(--sp-2); }
.plab { display: inline-block; min-width: 90px; font-weight: 600; margin-right: var(--sp-2); }
.pthumbs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-1) 0; }
.pimg { position: relative; display: block; width: 84px; height: 112px; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.pimg img { width: 100%; height: 100%; object-fit: cover; }
.pimg i { position: absolute; right: 3px; bottom: 2px; font-style: normal; font-size: var(--fs-body); text-shadow: 0 0 3px var(--bg); }
.pclips { columns: 3 220px; column-gap: var(--sp-4); margin: var(--sp-1) 0; font-size: var(--fs-meta); }
.pclips button { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pstate { margin: var(--sp-hair) 0; }
.pcard { max-height: none; white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-meta); background: var(--card); padding: var(--sp-2); border-radius: var(--r-md); }
.ltabs { display: flex; gap: var(--sp-1); margin: var(--sp-2) 0 var(--sp-1); }

/* the large view of a person image (person.js): over everything, the picture left, the facts right */
.lbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: var(--scrim-strong); display: flex; align-items: center; justify-content: center; padding: var(--sp-4); }
.lbin { position: relative; display: flex; gap: var(--sp-4); max-width: min(1100px, 100%); max-height: 100%; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r-lg); padding: var(--sp-4); }
.lbin img { max-width: 70vw; max-height: calc(100vh - 64px); object-fit: contain; border-radius: var(--r-sm); background: var(--card); }
.lbinfo { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-meta); overflow: auto; }
.lbfacts div { word-break: break-all; }
.lbx { position: absolute; top: 6px; right: 6px; }
@media (max-width: 700px) { .lbin { flex-direction: column; } .lbin img { max-width: 100%; max-height: 60vh; } .lbinfo { width: auto; } }
.pfiles { font-size: var(--fs-meta); line-height: 1.6; }
.proll { font-weight: 700; margin-left: var(--sp-1); }

/* media-kind + genre chips (title pages) and the List view (library.js) */
.tlchips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); margin-top: var(--sp-2); }
.tlchip { white-space: nowrap; font-size: var(--fs-meta); line-height: calc(var(--t) - 2px); min-height: var(--t); height: auto; padding: 0 var(--sp-2); border-radius: var(--r-sm); border: 1px solid var(--control-border); background: var(--panel); color: var(--text); cursor: pointer; }
.tlchip.tltop { font-weight: 600; border-color: var(--text); }
.tlchip.tlgen { color: var(--muted); }
.tlchip:hover { border-color: var(--text); }
.tlsep { width: 1px; height: 14px; background: var(--line2); margin: 0 var(--sp-1); }
.tlist td { vertical-align: top; }
.tlist td:first-child { min-width: 200px; }
/* indicators, not buttons (user): small, one line. E1b: the button is the 24-px hit area (transparent, 4 px above and
   below), the small chip is its inner span - no position: relative + ::after per chip any more: 15 000 positioned chips
   made every hit test of the List cost ~13 ms (hover, clicks, the oracle timed out at 1920x1080) */
.tlist .tlchip { display: inline-block; vertical-align: middle; white-space: nowrap; margin: 0 var(--sp-hair) 0 0; font-size: var(--fs-label); height: auto; min-height: 0; line-height: 1; padding: var(--sp-1) 0; border: 0; border-radius: 0; background: transparent; }
.tlist .tlchip .tlc { display: inline-block; height: var(--h-chip); line-height: calc(var(--h-chip) - 2px); padding: 0 var(--sp-1); border: 1px solid var(--control-border); border-radius: var(--r-sm); background: var(--panel); color: var(--text); }
.tlist .tlchip:hover .tlc { border-color: var(--text); }
.tlist td:nth-child(2), .tlist td:nth-child(3), .tlist td:nth-child(4), .tlist td:nth-child(7) { white-space: nowrap; }   /* sub levels + genres wrap between chips: one long row never widens the table */
.tlist th button { font-weight: 600; color: var(--text); }
/* Evidence view (library.js): one compact cell per sub level x scanner part */
.evid td.evc, .evid th { text-align: center; } .evid td.evc b { font-size: var(--fs-body); } .evid td.evc .dim { font-size: var(--fs-label); }
/* line comparison (title / person / model pages): a value that differs from the first line (prod) */
.mcmp td.ldiff { color: var(--warn); font-weight: 600; }
.chip.ind { min-height: 0; height: var(--h-chip); line-height: calc(var(--h-chip) - 2px); font-size: var(--fs-label); border-color: var(--line2); cursor: default; }   /* R24: an indicator, not a control (A-108) */
.pop button[data-trace][aria-pressed="true"] { background: var(--sel-bg); box-shadow: inset 3px 0 0 var(--sel-bar); color: var(--text); }   /* R16: the trace direction chosen - not by colour alone */
.key .s.k-exists { background: var(--card); border: 1px solid var(--line); } .key .s.k-concept { border: 1px dashed var(--line2); }
.key .s.k-off { background: var(--card); border-left: 4px solid var(--bad); } .key .s.k-risk { background: var(--card); border-left: 4px solid var(--warn); }
.key .s.k-new { background: var(--prop-bg); border: 1.5px dashed var(--prop); }
.key .pin.p-prop { background: var(--prop); } .key .pin.p-claude { background: var(--claude); } .key .pin.p-line { background: var(--line2); }   /* R22: the legend swatches as classes */
/* A-109: status colour as one class set with a fixed meaning (the maps in the views return a tone name); bars fill with it */
.tone-good { color: var(--good); } .tone-warn { color: var(--warn); } .tone-bad { color: var(--bad); } .tone-info { color: var(--info); }
.tone-dim, .tone-muted { color: var(--muted); } .tone-text { color: var(--text); } .tone-prop { color: var(--prop); } .tone-claude { color: var(--claude); }
#html .obar i.tone-good { background: var(--good); } #html .obar i.tone-warn { background: var(--warn); } #html .obar i.tone-bad { background: var(--bad); } #html .obar i.tone-info { background: var(--info); }
.chip.hit { border-color: var(--text); color: var(--text); } .chip.bad { border-color: var(--bad); color: var(--bad); }
td.raci { font-weight: 700; }
.pop .sw.sw-sel { border-color: var(--text); } .pop .sw.sw-flow { border-color: var(--muted); border-top-style: dashed; } .pop .sw.sw-task { border-color: var(--warn); border-top-style: dotted; } .pop .sw.sw-mine { border-color: var(--prop); border-top-style: dashed; }
/* A-115: column widths of the fixed tables (operations views, Files view) - one rule per column, by table */
#html table.t.fixed { table-layout: fixed; }
#html table.t.live-tasks col:nth-child(1) { width: 120px; }
#html table.t.live-tasks col:nth-child(3) { width: 28%; }
#html table.t.live-tasks col:nth-child(4) { width: 110px; }
#html table.t.live-sweep col:nth-child(1) { width: 26%; }
#html table.t.live-sweep col:nth-child(2) { width: 150px; }
#html table.t.live-sweep col:nth-child(3) { width: 16%; }
#html table.t.live-procs col:nth-child(1) { width: 18%; }
#html table.t.live-procs col:nth-child(2) { width: 90px; }
#html table.t.live-jobs col:nth-child(1) { width: 24%; }
#html table.t.live-jobs col:nth-child(2) { width: 12%; }
#html table.t.live-jobs col:nth-child(3) { width: 150px; }
#html table.t.live-jobs col:nth-child(4) { width: 16%; }
#html table.t.live-jobs col:nth-child(5) { width: 12%; }
#html table.t.live-events col:nth-child(1) { width: 80px; }
#html table.t.live-events col:nth-child(2) { width: 120px; }
#html table.t.live-events col:nth-child(3) { width: 16%; }
#html table.t.cov-refs col:nth-child(1) { width: 22%; }
#html table.t.cov-refs col:nth-child(2) { width: 170px; }
#html table.t.res-runs col:nth-child(1) { width: 110px; }
#html table.t.res-runs col:nth-child(2) { width: 24%; }
#html table.t.res-runs col:nth-child(3) { width: 14%; }
#html table.t.res-runs col:nth-child(5) { width: 90px; }
#html table.t.res-compare col:nth-child(1) { width: 22%; }
#html table.t.res-compare col:nth-child(2) { width: 22%; }
#html table.t.res-compare col:nth-child(3) { width: 12%; }
#html table.t.res-compare col:nth-child(4) { width: 12%; }
#html table.t.prov-runs col:nth-child(1) { width: 24%; }
#html table.t.prov-ablation col:nth-child(1) { width: 20%; }
#html table.t.prov-ablation col:nth-child(2) { width: 16%; }
#html table.t.prov-ablation col:nth-child(3) { width: 34%; }
#html table.t.req-list col:nth-child(1) { width: 60px; }
#html table.t.req-list col:nth-child(2) { width: 110px; }
#html table.t.req-list col:nth-child(4) { width: 30%; }
#html table.t.procx-plans col:nth-child(1) { width: 34%; }
#html table.t.procx-plans col:nth-child(2) { width: 90px; }
#html table.t.procx-rules col:nth-child(1) { width: 60px; }
#html table.t.procx-rules col:nth-child(2) { width: 26%; }
#html table.t.procx-rules col:nth-child(4) { width: 28%; }
#html table.t.procx-gates col:nth-child(1) { width: 30%; }
#html table.t.procx-gates col:nth-child(2) { width: 90px; }
#html table.t.procx-gates col:nth-child(3) { width: 120px; }
#html table.t.procx-defer col:nth-child(1) { width: 22%; }
#html table.t.procx-defer col:nth-child(2) { width: 100px; }
#html table.t.procx-events col:nth-child(1) { width: 52px; }
#html table.t.procx-events col:nth-child(2) { width: 96px; }
#html table.t.procx-events col:nth-child(3) { width: 120px; }
#html table.t.health-build col:nth-child(1) { width: 18%; }
#html table.t.health-build col:nth-child(3) { width: 20%; }
#html table.t.health-audit col:nth-child(1) { width: 60px; }
#html table.t.health-audit col:nth-child(3) { width: 28%; }
#html table.t.health-tests col:nth-child(1) { width: 32%; }
#html table.t.health-decisions col:nth-child(1) { width: 70px; }
#html table.t.health-decisions col:nth-child(2) { width: 90px; }
#html table.t.health-decisions col:nth-child(4) { width: 90px; }
#html table.t.files-products col:nth-child(1) { width: 30%; }
#html table.t.files-products col:nth-child(2) { width: 16%; }
#html table.t.files-products col:nth-child(4) { width: 22%; }
#html table.t.files-places col:nth-child(1) { width: 38%; }
/* A-113: every control state has a look - pressed, open, busy, read-only (no motion added, C12) */
button:active:not(:disabled):not([aria-disabled="true"]) { background: var(--sel-bg); }
button[aria-expanded="true"] { border-color: var(--text); }   /* Lines, Actions, the "+ n" list and later menus: open */
[aria-busy="true"] { cursor: progress; opacity: .7; }   /* the words ("Sending …") come from core.js busy(), never from CSS */
input[readonly], textarea[readonly] { background: transparent; border-style: dashed; }   /* read-only is not disabled */
.tabs button:hover:not(.on) { color: var(--text); }
/* A-115: the classes that replaced the static inline styles of the views (one look per meaning) */
#html .card.static { cursor: default; } .pick { cursor: pointer; }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nw { white-space: nowrap; } .brk { overflow-wrap: anywhere; word-break: break-word; }
#html .kan.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } #html .kan.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #html .grid2.g32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
#html th.tleft { text-align: left; } svg.dbar { display: block; } svg.fitsvg { max-width: 100%; height: auto; display: block; } svg.chart { display: block; max-width: 100%; }
.vlead { margin-bottom: var(--sp-2); } .brow.end { justify-content: flex-end; } .brow.tight { margin: var(--sp-1) 0 0; } .brow.keytight { margin: var(--sp-hair) 0 var(--sp-2); }
.findres .fempty { padding: var(--sp-2); } .composer .row.foot { margin: var(--sp-2) 0 0; } .role-label { font-size: var(--fs-label); } .grow { flex: 1; min-width: 0; }
.opreply { font-size: var(--fs-meta); margin-top: var(--sp-2); } .thread .th .st.first { margin-left: 0; } .kv.kvrow { margin: var(--sp-1) 0; } .bullet .tgt.mid { left: 50%; }
#html table.t.dec td, #html table.t.dec td * { overflow-wrap: anywhere; } #html table.t.dec th:nth-child(3) { width: 28%; } #html table.t.dec th:nth-child(4) { width: 30%; }   /* decisions: long ids / paths in the text never widen the table past the centre (200 % zoom) */
#html .obar.wide { width: 160px; } .lempty { grid-column: 1 / -1; padding: var(--sp-2) 0; } select.small { height: var(--t); font-size: var(--fs-meta); } .gapabove { margin-top: var(--sp-2); }
/* phase 4 (focus, keyboard, accessibility) */
.wrow .t button.more { color: var(--muted); }   /* A-76: "+ n" is a button in the same slot */
#morePop { position: fixed; z-index: var(--z-menu); max-width: 420px; }
#morePop .morelist { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-hair); }
#morePop .morelist button { min-height: var(--t); text-align: left; white-space: normal; }
.dlg .optkeys { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--t); margin: var(--sp-3) 0 var(--sp-1); cursor: pointer; }
.skip { position: fixed; left: 8px; top: -40px; z-index: var(--z-lightbox); }   /* A-80: the first Tab shows it */
.skip:focus { top: 8px; padding: var(--sp-1) var(--sp-3); background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-md); }
.goal:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }   /* A-75 */
.lpick { display: inline; white-space: nowrap; }   /* A-78: the old <label> wrapper's place */
button.rowlnk { background: none; border: 0; height: auto; min-height: 0; padding: 0; margin: 0; color: inherit; font: inherit; line-height: inherit; text-align: left; display: inline; white-space: inherit; max-width: 100%; overflow-wrap: anywhere; cursor: pointer; }   /* A-87: the row's control, same look as the cell text */
#html table.t > thead td { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--canvas); }   /* A-93: an empty corner is a td, sticky like the heads */
/* A-79: pointer targets of at least 24 x 24 CSS px; where the look must stay small, an invisible hit area */
.hbadge::after { content: ''; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }   /* 16 -> 24 px, the quiet hint keeps its look */
.wrow .t button.lnk, .wrow .t button.more { min-height: var(--t); display: inline-flex; align-items: center; }
.lbar select, .lpicks select { min-height: var(--t); }
.tlist td:nth-child(4), .tlist td:nth-child(5), .tlist td:nth-child(6) { line-height: 25px; }   /* wrapped chip lines 25 px apart: hit areas never overlap */
/* A-89: Windows contrast themes - every state stays visible in system colours */
@media (forced-colors: active) {
  .rail button.on, .rail button[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .seg button.on, .seg button[aria-pressed="true"], #html .opow button.on, .ctrl .tog[aria-pressed="true"], .ltabs button[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .ctrl .tog[aria-pressed="true"] .box, .meter i.f, .bullet .bar, .obar i, .live.on i { forced-color-adjust: none; background: CanvasText; }
  #html tr.cur td:first-child, #html tr.selrow td:first-child, #html .card.cur, #html .card.selc, .lcard.cur { outline: 2px solid Highlight; outline-offset: -2px; }
  .tabs [aria-selected="true"] { border-bottom-color: Highlight; }
  :focus-visible { outline-color: Highlight; }
  #map .blk.sel .box, #map g[aria-current="true"] .box { stroke: Highlight; }
  .chip, .tlchip, .tlist .tlchip .tlc, .pop, .actsmenu, .toast, .hov { border-color: CanvasText; }
  .findres [role=option][aria-selected="true"] { outline: 2px solid Highlight; outline-offset: -2px; }
}
#pane button.lnk { min-height: var(--t); min-width: var(--t); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }   /* A-79: the links of a wiki page (block ids) are 24 x 24 px */

/* phase 5 (change plan 2026-10-12): skeleton grid (A-46), chunked tables (A-43), error box + Try again (A-41), late notes (A-47), restart slot (A-48) */
.lskel { opacity: 0; animation: lskelin 0s linear 300ms forwards; } @keyframes lskelin { to { opacity: 1; } }
.lcard.skel { pointer-events: none; min-height: 0; } .lcard.skel::before { content: ''; display: block; width: 100%; aspect-ratio: 2 / 3; border-radius: var(--r-sm); background: var(--line); }
.lcard.skel::after { content: ''; display: block; height: 52px; margin-top: var(--sp-1); border-radius: var(--r-xs); background: var(--line); opacity: .6; }
tbody.chunk { content-visibility: auto; contain-intrinsic-size: auto 6000px; }
.lfail { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; padding: var(--sp-3) 0; color: var(--text); } .lfail::before { content: '✕'; color: var(--bad); }
.later { opacity: 0; animation: lskelin 0s linear 300ms forwards; }
.obtns .obtns-end { margin-left: auto; display: inline-flex; padding-left: var(--sp-4); }
.lsib { display: inline-flex; gap: var(--sp-2); margin-left: var(--sp-3); flex: none; } .lsib button { width: 92px; justify-content: center; }   /* R16: fixed slots */
.lsib button > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* a long episode name ends in "…" inside its slot */
.lpath > .ltrail { flex: 1 1 0; min-width: 0; }   /* the trail takes the rest: the neighbour slots and Actions keep their place */
/* ---------- phase 8 (A-123 / A-126 / A-127): Goals & trend - one card per goal, one small panel per truth set */
#html .gcards { display: flex; flex-direction: column; gap: var(--sp-1); }
#html .card.plain { cursor: default; }
#html .gch { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
#html .gnum { margin-top: var(--sp-1); }
#html .gkey { margin: var(--sp-1) 0; }
.vd { display: inline-block; font-weight: 700; white-space: nowrap; }   /* the verdict: a glyph and the gap, never colour alone */
.sk { font-weight: 700; } .sk.s-hit { color: var(--s-hit); } .sk.s-rel { color: var(--s-rel); } .sk.s-f1 { color: var(--s-f1); }   /* the mark beside its word: identity, the word stays in text ink */
#html .sparks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--sp-2) var(--sp-4); margin: var(--sp-2) 0; }   /* E1b m9: never narrower than the 300 px drawing - its 12 px labels stay >= 12 px */
#html .spark { min-width: 0; }
#html .sph { font-size: var(--fs-meta); overflow-wrap: anywhere; }
svg.sparksvg { display: block; width: 100%; max-width: 360px; height: auto; }   /* fixed viewBox + meet: the marks stay round at every width */
svg.dbar.abar { width: 100%; max-width: 330px; height: auto; }   /* A-131: fixed viewBox + meet, the cap marks keep their shape */

/* phase 10 (change plan 2026-10-12, inbox.js): Today (A-137), the decision inbox cards (A-134), read states (A-135), the library tile (A-138) */
.today { column-width: 26rem; column-gap: var(--sp-3); }   /* two columns from ~1333 px, one below; the long waiting list fills the first */
.tcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); min-width: 0; break-inside: avoid; margin: 0 0 var(--sp-3); }
.tcard h3 { margin: 0 0 var(--sp-2); font-size: var(--fs-section); font-weight: 600; }
.tcard h3 button.lnk { min-height: var(--t); }
.tcard .kv { grid-template-columns: minmax(8rem, 40%) minmax(0, 1fr); padding: var(--sp-hair) 0; }
.tbar { display: block; width: 100%; height: var(--sp-2); margin: var(--sp-1) 0 var(--sp-2); }
.tbar .bg { fill: var(--line); } .tbar .fg { fill: var(--muted); }
.wlist { display: flex; flex-direction: column; gap: var(--sp-3); }
.wcard { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-2) var(--sp-3); font-size: var(--fs-body); min-width: 0; }
.wcard.compact { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--sp-2) 0; }
.wcard:focus-visible { outline: 2px solid var(--focus); outline-offset: var(--sp-hair); }
.whead { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: baseline; }
.wst { font-size: var(--fs-meta); font-weight: 600; white-space: nowrap; }
.wmeta { font-size: var(--fs-meta); margin: var(--sp-hair) 0 var(--sp-1); }
.wctx { margin: var(--sp-1) 0; color: var(--muted); overflow-wrap: anywhere; }
.wopts { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 var(--sp-1); }
.wopt { min-height: var(--t); padding: 0 var(--sp-2); border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--panel); color: var(--text); font-size: var(--fs-meta); text-align: left; white-space: normal; height: auto; }
.wopt::before { content: '○'; margin-right: var(--sp-1); color: var(--muted); }
.wopt[aria-checked="true"] { background: var(--sel-bg); border-color: var(--text); }
.wopt[aria-checked="true"]::before { content: '●'; color: var(--text); }
.wopt[aria-disabled="true"] { opacity: var(--disabled-o); cursor: not-allowed; }
.wrec { color: var(--muted); font-weight: 600; }
.wwhy { font-size: var(--fs-meta); }
.wnote textarea { width: 100%; resize: vertical; background: var(--card); border: 1px solid var(--control-border); border-radius: var(--r-md); padding: var(--sp-1) var(--sp-2); }
.wsend { align-items: center; margin: var(--sp-2) 0 var(--sp-1); }
.wlinks { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; font-size: var(--fs-meta); margin-top: var(--sp-1); }
.wcat { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.wlat { font-size: var(--fs-meta); margin-top: var(--sp-3); }
.wreply { font-size: var(--fs-meta); margin: var(--sp-1) 0; }   /* E1b M4: the reply's first lines under the state line */
.wreply button.lnk { min-height: var(--t); }
.wstat { font-size: var(--fs-meta); margin: 0 0 var(--sp-1); }   /* E1b m10: one status line per list, never per card */
.tgoal .gch button.lnk { min-height: var(--t); }   /* E1b: Today's goal names are 24-px targets (the key line above moved them next to other targets) */
.msg .rd { font-weight: 400; }
.wrow button.lab { min-height: var(--t); text-align: left; text-decoration: none; }
.lnote:not(:empty) { padding: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-meta); }   /* A-141: the "not planned" hint above the grid */
.tgoal { padding: var(--sp-2) 0; border-bottom: 1px solid var(--line); } .tgoal:last-child { border-bottom: 0; }   /* Today: one goal per block (phase 8 verdicts + panels) */
@media (max-width: 1299.98px) { .goal.glib { display: none; } }   /* A-138: below 1300 px (1180 DE overflowed, layout test) the strip keeps its four tiles; Today shows the library tile */