/* Shared shell polish. Research panels use their own wb-* classes to avoid
   changing the legacy SVG, translation, and allocation layout contracts. */
:root { --accent: #245d55; --accent-soft: #e4eee9; }
:root[data-theme="dark"] { --accent: #8fcebd; --accent-soft: #203b34; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #8fcebd; --accent-soft: #203b34; } }
body { font-size: 14px; }
.app > header { padding: 18px 28px 0; border-top: 4px solid var(--accent); background: var(--surface); }
.brandline { display: flex; gap: 16px; align-items: center; justify-content: space-between; }
.brandline h1 { font-size: 23px; letter-spacing: -.6px; }
.brandline h1 span { font-weight: 400; color: var(--ink2); }
.research-tag { font-size: 11px; border: 1px solid var(--line2); border-radius: 20px; padding: 5px 10px; color: var(--ink2); }
.app header .sub { font-size: 12px; margin-top: 3px; }
.tabs { gap: 8px; margin-top: 15px; overflow-x: auto; }
.tab { padding: 10px 13px; white-space: nowrap; }
.tab.on { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.gbar { padding: 10px 28px; }
.gbar .chips { gap: 5px; }
button, input, select, textarea { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--secA); outline-offset: 3px; }
.workbenchMode .main, .workbenchMode #tabCtl, .workbenchMode #chips, .workbenchMode .gbar > .ctl:first-child, .workbenchMode #dl { display: none; }
.workbenchMode .gbar { padding-top: 5px; padding-bottom: 5px; }
.wb-page[hidden] { display: none; }
.wb-page { overflow: auto; min-height: 0; flex: 1; padding: 26px 28px 48px; }
.wb-wrap { max-width: 1440px; margin: auto; }
.wb-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.wb-heading h2 { font-size: 27px; font-weight: 500; letter-spacing: -.8px; margin: 0 0 7px; }
.wb-heading p { max-width: 820px; margin: 0; color: var(--ink2); line-height: 1.65; }
.wb-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 1.8px; color: var(--accent); font-weight: 600; margin-bottom: 7px; }
.wb-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px; margin-bottom: 18px; }
.wb-card h3 { font-size: 16px; margin: 0 0 8px; font-weight: 600; }
.wb-card p { color: var(--ink2); margin: 6px 0 12px; line-height: 1.65; }
.wb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 20px; align-items: start; }
.wb-grid > *, .wb-columns > * { min-width: 0; }
.wb-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.context-summaries { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:18px; align-items:start; }
.context-summaries > * { min-width:0; }
.context-summaries th { white-space:normal; }
.context-summaries td:first-child { white-space:normal; }
.neighbor-category { font:inherit; text-align:left; white-space:normal; }
.neighbor-category[aria-expanded=true] { color:var(--ink); font-weight:600; }
.neighbor-breakdown th, .neighbor-breakdown td:first-child { white-space:normal; overflow-wrap:anywhere; }
.context-summaries .wb-table td, .context-summaries .wb-table th { padding:10px 6px; }
.context-meter { height:5px; background:var(--line); margin-top:6px; min-width:70px; }
.context-meter i { display:block; height:100%; background:var(--secA); }
.context-meter.compare i { background:var(--secB); }
@media(max-width:1100px) { .context-summaries { grid-template-columns:1fr; } }
.wb-fields { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; }
.wb-field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 125px; min-width: 0; }
.wb-field.wide { flex: 2 1 250px; }
.wb-field label { color: var(--ink2); font-size: 11px; font-weight: 600; }
.wb-field input, .wb-field select, .wb-page textarea { color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; background: var(--bg); padding: 9px 10px; width: 100%; min-width: 0; }
/* a choice too long for its field ends in an ellipsis rather than a hard cut */
.wb-field select { text-overflow: ellipsis; }
.wb-page textarea { resize: vertical; font: 12px/1.5 'JetBrains Mono', monospace; }
.wb-button { border: 1px solid var(--line2); border-radius: 6px; background: var(--surface); color: var(--ink); padding: 8px 12px; cursor: pointer; font-size: 12px; white-space: nowrap; }
.wb-button:hover { border-color: var(--accent); color: var(--accent); }
.wb-button.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.wb-button:disabled { cursor: default; opacity: .45; }
.wb-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.wb-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 18px 0; }
.wb-metric { padding: 17px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; }
.wb-metric strong { display: block; font-size: 25px; font-weight: 500; letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin: 3px 0; }
.wb-metric span, .wb-small { font-size: 11px; color: var(--ink2); line-height: 1.6; }
.wb-caption { font-size: 12px; color: var(--ink2); line-height: 1.65; margin: 10px 0; }
.wb-notice { padding: 12px 15px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.6; margin: 14px 0; }
.wb-error { border-color: var(--trn); color: var(--trn); background: var(--surface); }
.wb-scroll { overflow: auto; max-height: 580px; }
.wb-table { font-size: 12px; }
.wb-table td, .wb-table th { padding: 11px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wb-table th { color: var(--ink2); font-size: 10px; letter-spacing: .3px; background: var(--surface); position: sticky; top: 0; z-index: 1; }
.wb-table td { font-variant-numeric: tabular-nums; }
.wb-table tr:hover td { background: var(--bg); }
.wb-table td.wrap { white-space: normal; text-align: left; min-width: 160px; }
.wb-word { background: none; border: 0; padding: 0; color: var(--accent); font: 500 13px 'JetBrains Mono', monospace; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line2); text-underline-offset: 4px; }
.wb-badge { display: inline-block; font-size: 10px; padding: 3px 7px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }
.wb-badge.neutral { color: var(--ink2); background: var(--bg); }
.wb-good { color: var(--secBt); }
.wb-loss { color: var(--trn); }
.wb-empty { padding: 30px; text-align: center; color: var(--ink2); }
.wb-pager { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; color: var(--ink2); }
.wb-pager span { flex: 1; }
.wb-context { display: grid; grid-template-columns: 115px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.wb-context .mono { line-height: 1.9; overflow-wrap: anywhere; }
.wb-context mark { background: var(--accent-soft); color: var(--accent); border-radius: 3px; padding: 3px 5px; }
.wb-link { color: var(--accent); }
/* a chart opened from a shared link is outlined for a moment */
.share-target { outline: 2px solid var(--accent); outline-offset: 4px; }
.wb-bar { height: 5px; background: var(--line); border-radius: 3px; margin: 5px 0 9px; }
.wb-bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.wb-rule { border: 1px solid var(--line2); border-radius: 8px; padding: 15px; margin: 10px 0; }
.wb-rule-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wb-rule-head b { flex: 1; font-size: 12px; }
.wb-rule-head input { accent-color: var(--accent); }
.wb-rule details { margin-top: 12px; }
.wb-page summary { cursor: pointer; font-size: 12px; color: var(--ink2); margin-bottom: 10px; }
.wb-preview-line { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.wb-preview-token { padding: 7px 9px; font: 12px/1.7 'JetBrains Mono', monospace; border-radius: 5px; }
.wb-preview-token.changed { background: var(--accent-soft); }
.wb-preview-token small { display: block; color: var(--accent); font: 10px/1.7 'JetBrains Mono', monospace; }
.wb-row-title { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; }
/* The original analysis views share the workbench's surfaces and typography.
   Preserve their canvas/scroll contracts; only layout containers are restyled. */
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.legacy-intro[hidden] { display:none; }
.legacy-intro { padding:18px 28px 16px; flex-shrink:0; }
.legacy-intro h2 { font-size:25px; font-weight:500; letter-spacing:-.6px; margin:0 0 5px; }
.legacy-intro p { margin:0; color:var(--ink2); font-size:12px; }
.intro-row { display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.page-chart > summary .pc-share { margin-left:auto; align-self:center; }
.controls { padding:12px 28px; gap:12px 22px; background:var(--surface); }
.controls .ctl { font-size:12px; flex-wrap:wrap; max-width:100%; }
.gbar .ctl.theme { flex-wrap:wrap; gap:8px; }
.gbar .seg { flex-shrink:0; }
.controls select, .controls input[type=search], .trBar select { padding:8px 10px; background:var(--bg); }
.controls #minHint { max-width:190px; font-size:11px; }
.main, .secPage, .trPage { padding:0 28px 20px; gap:20px; grid-template-columns:minmax(0,1fr) minmax(350px,420px); }
.main, .secPage { grid-template-columns:minmax(0,1fr) 320px; }
.main > *, .secPage > *, .trPage > * { min-width:0; }
.stage, .secMain, .trMain { border:1px solid var(--line); border-radius:12px; }
.side { border:0; padding:0 3px 0 0; background:transparent; }
.detail, .rcard { border-radius:12px; box-shadow:none; padding:18px; }
.side > details { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:15px; margin-bottom:15px; }
.side details summary, details.grp > summary { color:var(--ink2); font-size:12px; }
.side table td, .side table th { padding:5px 4px; }
.side .detail { overflow-x:auto; }
.app.wideCanvas .main, .app.wideCanvas .secPage { grid-template-columns:minmax(0,1fr); }
.app.wideCanvas .main > .side, .app.wideCanvas .secPage > .side { display:none; }
.secHead { height:130px; }
.skey { font-size:11px!important; bottom:8px; line-height:1.5; }
.rulesPage { padding:0 28px 30px; }
.rulesPage > .rbar, .rulesPage .rtable { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:12px; }
.rtable th { color:var(--ink2); }
.seg { border-radius:6px; }
.seg button { padding:6px 10px; }
.seg button.on { background:var(--accent); color:var(--bg); }
.gbar .chip { padding:7px 10px; border-radius:6px; font-size:11px; }
.chips .chip:not(.off) { background:var(--accent-soft); color:var(--accent); border-color:transparent; }
.chips .chip b { color:inherit; }
.family-audit { font:10px Inter,system-ui,sans-serif; fill:var(--ink2); }
.word-mass { font:10px Inter,system-ui,sans-serif; pointer-events:none; }
.mass-left { color:#bf791a; fill:#d99836; }
.mass-missing { color:#c35464; fill:#d96b77; }
.mass-ledger { width:100%; font-size:12px; margin:10px 0; }
.mass-ledger th, .mass-ledger td { white-space:normal; text-align:left; }
.mass-ledger td:last-child { text-align:right; font-variant-numeric:tabular-nums; }
.mass-audit h3 { font-size:17px; margin:4px 0 8px; }
.mass-pair { padding:12px 0 2px; border-top:1px solid var(--line); }
.mass-title { font-size:12px; font-weight:600; margin-bottom:8px; }
.mass-verdict { color:var(--ink2); font-size:12px; padding:8px; border-radius:5px; background:var(--bg); }
.mass-verdict span { display:block; font-size:11px; margin-top:3px; }
.mass-verdict.within { background:var(--accent-soft); color:var(--accent); }
.mass-values { display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; padding:10px 0; color:var(--ink2); font-size:11px; }
.mass-values b { float:right; color:var(--ink); font-variant-numeric:tabular-nums; }
.mass-track { height:7px; background:var(--line); border-radius:4px; }
.mass-track i { display:block; height:100%; background:var(--accent); border-radius:inherit; }
.mass-audit details { margin-top:12px; }
.mass-ledger { table-layout:fixed; }
.mass-ledger th:first-child, .mass-ledger td:first-child { width:72%; }
.mass-ledger td:last-child { white-space:nowrap; }
.mass-output { margin:10px 0; padding:10px; border:1px solid var(--line); border-radius:6px; }
.mass-output dl { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; margin:8px 0; font-size:12px; }
.mass-output dd { margin:0; text-align:right; font-variant-numeric:tabular-nums; }
.mass-output p { overflow-wrap:anywhere; }
.mass-equation { padding:8px; background:var(--bg); font-size:12px; line-height:1.7; }
/* Keep conditional and population denominators visible in the same cell. */
.context-rates { table-layout:fixed; }
.context-rates td, .context-rates th { white-space:normal; overflow-wrap:anywhere; vertical-align:top; }
.context-rates small { display:block; font-size:10px; color:var(--ink2); line-height:1.5; margin-top:3px; }
.context-rates td:first-child { width:30%; }
.rate-visual { padding:3px 0; min-width:0; cursor:help; }
.rate-top { display:flex; gap:6px; justify-content:space-between; font-variant-numeric:tabular-nums; font-size:12px; }
.rate-top b { font-size:11px; padding:1px 4px; border-radius:3px; background:var(--bg); }
.above { color:#218875; } .below { color:#bb7330; } .neutral { color:var(--ink2); }
:root[data-theme="dark"] .above { color:#8fcebd; } :root[data-theme="dark"] .below { color:#e1b17b; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) .above { color:#8fcebd; } :root:not([data-theme="light"]) .below { color:#e1b17b; } }
.rate-top span { color:var(--ink2); }
.rate-track { height:7px; margin-top:5px; position:relative; border-radius:2px; background:var(--line); }
.rate-track i { display:block; height:100%; border-radius:2px; background:currentColor; opacity:.75; }
.rate-track em { position:absolute; top:-3px; height:13px; width:2px; background:var(--ink); border:1px solid var(--surface); box-sizing:content-box; }
.context-display { display:flex; flex-wrap:wrap; align-items:center; gap:12px 25px; }
.context-display .wb-fields { margin:0; }
.context-signals { display:flex; flex-wrap:wrap; gap:3px 6px; margin-top:5px; }
.context-signal { font:10px/1.5 Inter,system-ui,sans-serif; color:var(--ink2); border:1px solid var(--line); border-radius:3px; padding:1px 4px; white-space:nowrap; cursor:help; }
.context-signal.detected { color:var(--accent); border-color:var(--accent); font-weight:600; }
.context-signal:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.context-exclusions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:12px 0; font-size:12px; color:var(--ink2); }
.context-exclusions .wb-button { padding:4px 8px; }
/* Neighbor "filter to" (inverse of the breakdown Include checkbox) */
.context-only { padding:8px 10px; border-left:3px solid var(--accent); background:var(--accent-soft); border-radius:0 6px 6px 0; color:var(--ink); }
.only-toggle { padding:2px 7px; margin-left:8px; font-size:11px; vertical-align:middle; }
.only-toggle.on { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.only-toggle.on:hover { color:var(--bg); opacity:.85; }
.context-only-note { color:var(--ink); border-left:2px solid var(--accent); padding-left:8px; }
.wb-context .only-mark { font-weight:700; text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px; }
.context-forms .form-excluded { color:var(--ink2); background:var(--bg); }
.context-forms .form-excluded .wb-word { text-decoration:line-through; color:var(--ink2); }
.context-include { accent-color:var(--accent); vertical-align:middle; }
.context-q { display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--ink2); white-space:nowrap; }
.context-q input { accent-color:var(--accent); }
.context-display .context-q, .wb-fields > .context-q { padding:9px 0; }
.neighbor-include { accent-color:var(--accent); vertical-align:middle; }
.neighbor-excluded { background:var(--bg); color:var(--ink2); }
.neighbor-excluded label { text-decoration:line-through; }
.pair-counts { display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:6px; }
.pair-counts .pair-count { font:11px/1.5 Inter,system-ui,sans-serif; text-decoration:underline; }
.pair-counts .pair-count + .pair-count { color:var(--ink2); }
.neighbor-evidence small { display:block; color:var(--ink2); margin-top:5px; }
.neighbor-evidence .mono { overflow-wrap:anywhere; }
.neighbor-evidence u { text-underline-offset:4px; text-decoration-thickness:2px; }
.context-forms { table-layout:fixed; }
.context-forms th:first-child { width:42%; }
.context-forms th:not(:first-child), .context-forms td:not(:first-child) { text-align:right; }
.context-forms small { display:block; color:var(--ink2); font-size:10px; margin-top:3px; }
.context-forms td:first-child small { margin-left:23px; }
.context-forms .wb-word { overflow-wrap:anywhere; white-space:normal; }
#wc-form-find { width:150px; max-width:100%; padding:6px 8px; }
.context-display > .wb-fields { flex:1 1 300px; }
.context-display details { font-size:11px; color:var(--ink2); }
.rate-legend { display:flex; flex-wrap:wrap; gap:8px 16px; font-size:11px; color:var(--ink2); }
.rate-legend i { display:inline-block; width:18px; height:6px; background:var(--accent); margin-right:3px; }
.rate-legend em { display:inline-block; width:2px; height:11px; background:var(--ink); margin-right:4px; }
.context-rates .rate-unit { display:inline; }
.chart-method { margin:14px 0; color:var(--ink2); font-size:12px; }
.chart-min { width:85px; padding:7px; }
/* The reader owns one text scroll area below a stationary toolbar. Do not
   make individual toolbar rows sticky: siblings used to overlap at top:0. */
.app.trMode #legacyIntro { display:none; }
.app.trMode > .gbar { padding-top:6px; padding-bottom:6px; }
.trPage { grid-template-rows:minmax(0,1fr); }
.trMain { display:flex; flex-direction:column; overflow:visible; padding:0; min-height:0; }
.trToolbar { flex:none; position:relative; border-bottom:1px solid var(--line); }
.trToolbar .trBar { position:static; border:0; padding:8px 14px; gap:10px 14px; font-size:12px; }
.trToolbar .trBar + .trBar { padding-top:0; }
.trToolbar .trBar select { padding:5px 7px; max-width:175px; }
.trToolbar #trFolio { width:142px; }
.trToolbar .seg button { padding:5px 8px; }
.trToolbar .ctl { gap:6px; min-width:0; }
.trToolbar [hidden] { display:none!important; }
.trText { flex:1; min-height:0; overflow:auto; padding:4px 14px 20px; overscroll-behavior:contain; }
.trSum { flex:none; display:flex; justify-content:space-between; gap:8px; margin:0; padding:7px 14px; font-size:10px; color:var(--ink2); }
.trOverlayLegend { display:flex; align-items:center; flex-wrap:wrap; gap:5px 14px; padding:0 14px 8px; font-size:10px; color:var(--ink2); }
.trOverlayLegend:empty { display:none; }
.legend-item { display:inline-flex; gap:5px; align-items:center; }
.legend-item i { width:8px; height:8px; border-radius:2px; }
.gap-summary { margin-left:auto; }
.trOptions { position:relative; margin-left:auto; }
.trOptions > summary, .ruleMenu > summary { cursor:pointer; color:var(--ink2); font-size:12px; }
.trOptionsBody { position:absolute; z-index:20; right:0; top:calc(100% + 8px); width:min(340px,calc(100vw - 50px)); max-height:55vh; overflow:auto; padding:16px; border:1px solid var(--line2); border-radius:8px; background:var(--surface); box-shadow:var(--shadow); font-size:12px; }
.trOptionsBody h3 { font-size:12px; margin:0 0 10px; }
.trOptionsBody .novgrid { display:grid; grid-template-columns:1fr 90px; gap:8px; align-items:center; }
.trOptionsBody p:empty { display:none; }
.trOptionsBody p { color:var(--ink2); line-height:1.6; margin:12px 0 0; }
.rm-dialog { width:min(900px,calc(100vw - 40px)); max-height:85vh; padding:22px; border:1px solid var(--line2); border-radius:12px; background:var(--surface); color:var(--ink); box-shadow:var(--shadow); }
.rm-dialog[open] { display:flex; flex-direction:column; }
.rm-dialog::backdrop { background:#0008; }
.rm-head,.rm-toolbar,.rm-presets,.rm-footer { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.rm-head { justify-content:space-between; }
.rm-head h2 { margin:0 0 4px; font-size:20px; }
.rm-toolbar input { flex:1; min-width:160px; }
.rm-toolbar input,.rm-toolbar select { padding:8px; border:1px solid var(--line2); border-radius:6px; color:var(--ink); background:var(--surface); }
.rm-list { overflow:auto; min-height:0; }
.rm-card { border:1px solid var(--line2); border-radius:8px; padding:12px; margin-bottom:9px; }
.rm-title { display:flex; align-items:center; gap:10px; font-size:13px; }
.rm-title > div { flex:1; min-width:0; }
.rm-title .wb-badge { max-width:190px; white-space:normal; text-align:right; }
.rm-title input { width:17px; height:17px; accent-color:var(--accent); flex-shrink:0; }
.rm-pattern { color:var(--ink2); font-size:12px; margin-top:4px; overflow-wrap:anywhere; }
.rm-evidence { font-size:11px; font-weight:650; padding:4px 8px; border:1px solid currentColor; border-radius:5px; white-space:nowrap; }
/* confidence (ECHO_RULES.md): Rule, Theory, Hypothesis; Mixed for containers; Not rated */
.rm-evidence-rule { color:var(--accent); background:transparent; background:color-mix(in srgb, var(--accent) 9%, transparent); }
.rm-evidence-mixed { color:var(--ink); border-style:dotted; }
.rm-evidence-theory { color:#cf942f; background:#cf942f12; }
.rm-evidence-hypothesis { color:#cf942f; background:#cf942f12; border-style:dashed; }
.rm-evidence-none { color:var(--muted); border-style:dashed; }
/* a word mapping that is not a Rule */
.rm-theory:not(.rm-entry), .rm-hypothesis:not(.rm-entry), .rm-none:not(.rm-entry) { border-left:3px solid #cf942f; }
.rm-presets select { padding:6px; margin-left:6px; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:5px; }
.rm-preset-options { margin-bottom:14px; font-size:12px; color:var(--ink2); }
.rm-preset-options summary { cursor:pointer; }
.rm-preset-options .rm-presets { margin:10px 0 0; }
.rm-dialog > .rm-head,.rm-dialog > .rm-toolbar,.rm-dialog > .rm-presets,.rm-dialog > .rm-footer,.rm-dialog > .rm-preset-options { flex-shrink:0; }
@media(max-width:600px) { .rm-evidence { margin-left:27px; white-space:normal; } }
.rm-card details { margin:8px 0 0 27px; font-size:12px; color:var(--ink2); line-height:1.6; }
.rm-card summary { cursor:pointer; }
.rm-example { font-family:monospace; overflow-wrap:anywhere; }
.rm-footer { justify-content:space-between; margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line2); }
#rulesPage > .rm-footer { position:sticky; bottom:0; background:var(--surface); padding:12px; }
@media(max-width:600px) { .rm-dialog { padding:14px; } .rm-title { flex-wrap:wrap; } .rm-title .wb-badge { margin-left:27px; max-width:none; text-align:left; } }
.tw .src { position:relative; border-radius:3px; padding:3px 5px; border-bottom:2px solid transparent; }
.tw .src[style] { color:var(--ink); }
.tw:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.gap-dot { color:#d19442; font-size:8px; position:absolute; top:-5px; right:-2px; }
.gap-unknown { color:var(--ink2); font-size:9px; }
.tr-evidence-note { font-size:11px; color:var(--ink2); line-height:1.6; margin:8px 0; }
.tr-evidence-note:empty { display:none; }
.trPage .pstat td, .trPage .nctab td { white-space:normal; }
.trTableScroll { max-width:100%; overflow-x:auto; }
.trPage .cand2 { table-layout:fixed; width:100%; }
.trPage .cand2 td, .trPage .cand2 th { white-space:normal; overflow-wrap:anywhere; font-size:10px; padding:6px 3px; }
.trPage .cand2 th:nth-child(1) { width:22%; }
.trPage .cand2 th:nth-child(2) { width:19%; }
.trPage .cand2 th:nth-child(3) { width:14%; }
.trPage .cand2 th:nth-child(4) { width:18%; }
.trPage .cand2 th:nth-child(5) { width:14%; }
.trPage .cand2 th:nth-child(6) { width:13%; }
.trPage .cand2 .sbar { display:block; width:100%; margin:0 0 3px; }
.trPage .rgmat { width:100%; table-layout:fixed; }
.trPage .rgmat th:first-child { width:100px; }
.trPage .rgmat th, .trPage .rgmat td { padding:3px 1px; font-size:10px; }
.trPage .gdl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; font-size:11px; }
.trPage .side .detail { overflow-x:auto; }
/* Shared before/after scatter, with a separate zero rail on both axes. */
.distribution-plots { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.distribution-plot { min-width:0; margin:0; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.distribution-plot figcaption { font-weight:600; font-size:14px; margin-bottom:6px; }
.distribution-plot svg { display:block; width:100%; height:auto; }
.plot-area { fill:var(--surface); stroke:var(--line2); }
.plot-grid { stroke:var(--line); stroke-width:1; }
.plot-tick { fill:var(--ink2); font:10px Inter,system-ui,sans-serif; }
.plot-axis { fill:var(--ink2); font:11px Inter,system-ui,sans-serif; }
.zero-rail { stroke:var(--line2); stroke-dasharray:3 4; }
.equality-line { stroke:var(--ink2); stroke-width:1; stroke-dasharray:6 4; opacity:.7; }
.frequency-point { cursor:pointer; opacity:.55; stroke:var(--surface); stroke-width:.5; }
.frequency-point.before, .dot.before { fill:var(--secA); background:var(--secA); }
.frequency-point.improved, .dot.improved { fill:var(--accent); background:var(--accent); }
.frequency-point.worsened, .dot.worsened { fill:var(--trn); background:var(--trn); }
.frequency-point.unchanged, .dot.unchanged { fill:var(--muted); background:var(--muted); opacity:.4; }
.frequency-point.selected { opacity:1; stroke:var(--ink); stroke-width:2.5; r:5; }
.frequency-point.underflow { fill:var(--surface); stroke:var(--ink2); stroke-width:1; }
.plot-label, .selected-label { fill:var(--ink2); font:10px 'JetBrains Mono',monospace; paint-order:stroke; stroke:var(--surface); stroke-width:3px; stroke-linejoin:round; pointer-events:none; }
.selected-label { fill:var(--ink); font-weight:600; font-size:12px; }
.distribution-controls { display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center; margin:18px 0; font-size:12px; color:var(--ink2); }
.distribution-controls label { display:flex; align-items:center; gap:8px; }
.distribution-controls input[type=search], .distribution-controls select { padding:7px 9px; }
.distribution-controls input[type=checkbox] { accent-color:var(--accent); }
.distribution-legend { display:flex; align-items:center; flex-wrap:wrap; gap:10px 20px; margin:14px 0; font-size:11px; color:var(--ink2); }
.distribution-legend .dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; }
.chart-count { margin-left:auto; }
.chart-inspector { border:1px solid var(--line); border-radius:6px; padding:12px; display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; min-height:50px; color:var(--ink2); font-size:12px; }
.chart-inspector b { color:var(--accent); }
.overlap-summary { display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin:20px 0 16px; }
.overlap-summary strong { display:block; font-size:23px; font-weight:500; font-variant-numeric:tabular-nums; }
.overlap-summary span { display:block; font-size:11px; color:var(--ink2); margin-top:5px; }
.overlap-bars { padding:12px; background:var(--bg); border-radius:8px; }
.overlap-bars > div { display:grid; grid-template-columns:48px 1fr 64px; gap:12px; align-items:center; font-size:11px; color:var(--ink2); margin:5px 0; }
.overlap-bars b { text-align:right; }
.overlap-track { height:12px; border-radius:3px; background:var(--line); overflow:hidden; }
/* The diagnostic is opt-in and scrolls internally: no extra analysis toolbar
   or long help block displaces the network itself. */
.ci-dialog { width:min(1050px,94vw); max-height:90vh; padding:20px; color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:12px; }
.ci-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.ci-dialog::backdrop { background:#0009; }
.ci-dialog header,.ci-dialog footer,.ci-controls { display:flex; align-items:center; gap:12px; flex-wrap:wrap; flex-shrink:0; }
.ci-dialog header { justify-content:space-between; }
.ci-dialog h2,.ci-dialog h3 { margin:0; }
.ci-dialog h3 { font-size:14px; margin-bottom:8px; }
.ci-dialog footer { border-top:1px solid var(--line); padding-top:12px; }
.ci-dialog footer span { margin-right:auto; }
.ci-dialog input:not([type=checkbox]) { color:var(--ink); background:var(--surface); border:1px solid var(--line2); border-radius:5px; padding:8px; max-width:100%; }
.ci-body { overflow:auto; min-height:0; }
.ci-summary { margin:0 0 6px; }
.ci-direct { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.ci-body section { border-top:1px solid var(--line); padding:14px 0; }
.ci-direct section { max-height:270px; overflow:auto; }
.ci-route { border-bottom:1px solid var(--line); padding:8px 0; font-size:12px; overflow-wrap:anywhere; }
.ci-route .rm-evidence { display:inline-block; margin:4px 4px 0 0; }
.ci-family { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.ci-impact { width:100%; border-collapse:collapse; font-size:12px; }
.ci-impact th,.ci-impact td { text-align:left; padding:7px 5px; border-bottom:1px solid var(--line); }
.ci-impact label { display:flex; align-items:center; gap:6px; }
@media(max-width:650px) { .ci-direct { grid-template-columns:1fr; gap:0; } .ci-dialog { padding:12px; } .ci-impact .rm-evidence { white-space:normal; } }
.overlap-track i { display:block; height:100%; background:var(--accent); }
.overlap-bars > div:first-child i { background:var(--secA); }
@media(max-width:1000px) {
  .main, .secPage, .trPage { grid-template-columns:minmax(0,1fr) 340px; gap:14px; padding-left:14px; padding-right:14px; }
  .side { max-height:none; }
}
@media(max-width:760px) {
  .app { height:auto; min-height:100vh; }
  .app > .main, .app > .secPage, .app > .trPage { flex:none; }
  .main, .secPage, .trPage { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(300px,55vh) auto; overflow:auto; }
  .main .stage { min-height:300px; } .side { overflow:visible; max-height:none; }
  .secPage .status { grid-row:3; }
  .legacy-intro { padding:14px; } .legacy-intro h2 { font-size:22px; }
  .controls { padding:10px 14px; } .rulesPage { padding:0 14px 25px; }
  .distribution-plots { grid-template-columns:1fr; }
  .overlap-summary { grid-template-columns:1fr; gap:12px; }
  .overlap-summary strong { font-size:21px; }
  .distribution-plot { padding:8px; }
  .trBar .ctl { flex-wrap:wrap; min-width:0; }
  .trBar select { max-width:100%; }
  .app.trMode > .trPage { overflow:visible; grid-template-rows:auto auto; }
  .trToolbar .ctl { flex-wrap:wrap; }
  .trToolbar .trBar select { max-width:145px; }
  .trToolbar .trBar:first-child > .ctl:nth-child(2) { order:3; }
  .trText { overflow:visible; }
  .trPage .side { max-height:none; }
  #findCtl input { width:135px; }
  #findCtl select { max-width:180px; }
}
@media (max-width: 1050px) { .wb-grid { grid-template-columns: 1fr; } .wb-grid > aside { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } }
@media (max-width: 700px) {
  .app > header { padding: 14px 14px 0; } .brandline h1 { font-size: 20px; } .research-tag { display: none; }
  .tabs { gap: 0; } .tab { padding: 10px; font-size: 12px; } .wb-page { padding: 20px 14px; }
  .wb-heading { display: block; } .wb-heading h2 { font-size: 24px; } .wb-card { padding: 14px; }
  .wb-metrics { grid-template-columns: 1fr 1fr; } .wb-columns, .wb-grid > aside { display: block; }
  .wb-context { grid-template-columns: 85px minmax(0, 1fr); } .gloss { left: 10px; right: 10px; width: auto; }
}

/* Words & contexts: matches by page (page_chart.js). "Other" grey clears the
   separation floor against every population/regime colour in both themes. */
:root { --pc-other: #c4c2bb; }
:root[data-theme="dark"] { --pc-other: #484845; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pc-other: #484845; } }
/* Pattern colours for bars stacked by pattern (page_chart.js SERIES_COLOURS): ten families of light, mid and deep
   shades. Each mid is the categorical colour of the theme; light and deep keep its hue one OKLCH step either side. */
:root { --ser-blue-light: #77a4ff; --ser-blue: #2a78d6; --ser-blue-deep: #004f90; --ser-orange-light: #ffaa7c; --ser-orange: #eb6834; --ser-orange-deep: #a74a00; --ser-aqua-light: #72de9a; --ser-aqua: #1baf7a; --ser-aqua-deep: #007b60; --ser-yellow-light: #ffda94; --ser-yellow: #eda100; --ser-yellow-deep: #a97c00; --ser-pink-light: #ffb9d0; --ser-pink: #e87ba4; --ser-pink-deep: #ad4b80; --ser-green-light: #68b22b; --ser-green: #008300; --ser-green-deep: #005200; --ser-violet-light: #8267d8; --ser-violet: #4a3aa7; --ser-violet-deep: #31006f; --ser-red-light: #ff9090; --ser-red: #e34948; --ser-red-deep: #ac0033; --ser-teal-light: #53c3db; --ser-teal: #0090a8; --ser-teal-deep: #00616e; --ser-grey-light: #b8b7b3; --ser-grey: #878682; --ser-grey-deep: #595854; }
:root[data-theme="dark"] { --ser-blue-light: #70bcff; --ser-blue: #3987e5; --ser-blue-deep: #0059b0; --ser-orange-light: #ff965c; --ser-orange: #d95926; --ser-orange-deep: #923f00; --ser-aqua-light: #6dd094; --ser-aqua: #199e70; --ser-aqua-deep: #006c50; --ser-yellow-light: #f6bd4c; --ser-yellow: #c98500; --ser-yellow-deep: #886100; --ser-pink-light: #ff88be; --ser-pink: #d55181; --ser-pink-deep: #9a1b61; --ser-green-light: #4cb546; --ser-green: #008300; --ser-green-deep: #005800; --ser-violet-light: #c8b7ff; --ser-violet: #9085e9; --ser-violet-deep: #7053b2; --ser-red-light: #ffa9ab; --ser-red: #e66767; --ser-red-deep: #ae3341; --ser-teal-light: #66dfee; --ser-teal: #2ca9c2; --ser-teal-deep: #007891; --ser-grey-light: #c8c7c3; --ser-grey: #999894; --ser-grey-deep: #6a6965; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ser-blue-light: #70bcff; --ser-blue: #3987e5; --ser-blue-deep: #0059b0; --ser-orange-light: #ff965c; --ser-orange: #d95926; --ser-orange-deep: #923f00; --ser-aqua-light: #6dd094; --ser-aqua: #199e70; --ser-aqua-deep: #006c50; --ser-yellow-light: #f6bd4c; --ser-yellow: #c98500; --ser-yellow-deep: #886100; --ser-pink-light: #ff88be; --ser-pink: #d55181; --ser-pink-deep: #9a1b61; --ser-green-light: #4cb546; --ser-green: #008300; --ser-green-deep: #005800; --ser-violet-light: #c8b7ff; --ser-violet: #9085e9; --ser-violet-deep: #7053b2; --ser-red-light: #ffa9ab; --ser-red: #e66767; --ser-red-deep: #ae3341; --ser-teal-light: #66dfee; --ser-teal: #2ca9c2; --ser-teal-deep: #007891; --ser-grey-light: #c8c7c3; --ser-grey: #999894; --ser-grey-deep: #6a6965; } }
.page-chart > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; list-style-position: outside; }
.page-chart > summary h3 { display: inline; margin: 0; }
/* The flex summary hides the browser's disclosure triangle; draw one so the row reads as open/close */
.page-chart > summary::before { content: '\25B6'; font-size: 9px; color: var(--muted); margin-right: -6px; }
.page-chart[open] > summary::before { content: '\25BC'; }
.pc-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 6px; }
.pc-controls > .wb-menu:not(.pc-groups) { margin-left: auto; }   /* Export sits at the right; Groups stays by Color by */
.pc-controls .wb-button { padding: 5px 10px; }
/* Under a pattern box: the pattern with its grouping written out, or why it cannot be read (workbench.js reading) */
.wb-reading { margin-top: 5px; font-size: 12px; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.wb-reading:empty { display: none; }
/* A reading makes its field taller, so rows with pattern boxes align fields at the top; items without a label
   (a button, the Merge q switch) start one label line (11px x 1.45) plus the 6px gap lower to meet the boxes */
.wb-fields:has(.wb-pattern) { align-items: start; }
.wb-fields:has(.wb-pattern) > .wb-button, .wb-fields:has(.wb-pattern) > .context-q { margin-top: calc(11px * 1.45 + 6px); }
.wb-reading code { font-family: 'JetBrains Mono', monospace; color: var(--ink); }
.wb-reading-error { color: var(--trn); }
/* the words a column's rates are over (its rate base), under its heading */
.rate-base { display: block; margin-top: 2px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400; color: var(--muted); letter-spacing: 0; text-transform: none; }
/* the pattern syntax under the forms: a collapsed table with its notes */
.wb-syntax { margin-top: 12px; }
.wb-syntax > summary { margin-bottom: 6px; }
.wb-syntax-table { width: auto; margin: 4px 0 6px; }
.wb-syntax-table td, .wb-syntax-table th { padding: 5px 14px 5px 0; text-align: left; }
.wb-syntax-table th { position: static; }
.wb-syntax code, .wb-syntax-notes code { font-family: 'JetBrains Mono', monospace; color: var(--ink); }
.wb-syntax-notes { margin: 0; padding-left: 18px; line-height: 1.6; }
/* Compare patterns (workbench.js patterns): pattern boxes with a Remove link, column heads with a Pin button */
.pt-fields .pt-field { flex: 1 1 220px; }
.pt-label { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pt-remove { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 11px; cursor: pointer; }
.pt-remove:hover, .pt-remove:focus-visible { color: var(--accent); }
/* a column head: the pattern wraps within 13em above its Pin button; heads align at the bottom, so do the buttons */
.pt-table th.pt-head { white-space: normal; vertical-align: bottom; width: 16em; }   /* every pattern column one width, whatever its head */
/* the group names take only their own width and the empty last column the rest, so the pattern columns start next to
   the names (and row lines still span the card) */
.pt-table th:first-child, .pt-table td.pc-name { width: 1%; }
.pt-table .pt-fill { width: 100%; padding: 0; border-left: 1px solid var(--line); }   /* a closing rule after the last column */
/* a column head's buttons: move the column left or right, and pin it */
.pt-head-actions { display: flex; gap: 4px; align-items: center; }
.pt-move { padding: 2px 6px; font-size: 10px; line-height: 1.4; }
.pt-head-actions .pt-pin { margin-left: 6px; }   /* apart from the arrows, against mis-clicks */
.pt-headbox { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; max-width: 13em; margin-left: auto; }
.pt-pattern { font-family: 'JetBrains Mono', monospace; font-weight: 500; text-align: right; overflow-wrap: anywhere; text-transform: none; letter-spacing: 0; }
.pt-n { color: var(--muted); font-family: Inter, system-ui, sans-serif; margin-right: 6px; }
/* a rule before every pattern column, so each bar reads with its own number, not the column to its left */
.pt-table th.pt-head, .pt-table td.pc-m { border-left: 1px solid var(--line); padding-left: 14px; }
/* the Groups menu (workbench.js groupMenu): a checkbox, swatch and name per group; it opens to the right, being on the left */
.pc-groups .wb-menu-list { left: 0; right: auto; max-height: 60vh; overflow: auto; }
.pc-group { display: flex; align-items: center; gap: 7px; }
.pc-groups .pc-group { padding-right: 18px; }   /* room after the longest name (the menu's item padding comes later) */
.pc-group input { accent-color: var(--accent); margin: 0; }
.pc-group .pc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
/* a two-button toggle among the chart selects, at their size */
.pc-controls .seg button { padding: 4px 9px; font-size: 12px; }
.pt-key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--ink2); margin: 2px 0 8px; }
/* Keys above a chart (page_chart.js): a stack's patterns (Bars, each a button for its colour) and the groups */
.pc-keys { position: relative; display: flex; flex-direction: column; gap: 6px; margin: 2px 0 8px; }
.pc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 11px; color: var(--ink2); }
.pc-key-name { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 3.2em; }
.pc-key-item { display: inline-flex; align-items: center; }
.pc-key .pc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; flex-shrink: 0; }
button.pc-key-item { font: inherit; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--ink); background: none; border: 1px solid var(--line2); border-radius: 6px; padding: 3px 8px; cursor: pointer; }
button.pc-key-item:hover, button.pc-key-item:focus-visible, button.pc-key-item[aria-expanded="true"] { border-color: var(--accent); }
.pc-key button.pc-key-item .pc-sw { width: 12px; height: 12px; }
/* the colour families: a column per family, light to deep downwards */
.pc-picker { position: absolute; z-index: 20; padding: 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--pill); box-shadow: var(--shadow), 0 12px 32px rgba(0,0,0,.22); }
.pc-picker-grid { display: grid; grid-template-columns: repeat(10, 22px); gap: 4px; }
.pc-pick { width: 22px; height: 22px; border-radius: 4px; border: 0; padding: 0; cursor: pointer; }
.pc-pick:hover, .pc-pick:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.pc-pick.on { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-picker-auto { display: block; margin-top: 8px; font: inherit; font-size: 12px; color: var(--ink); background: none; border: 1px solid var(--line2); border-radius: 6px; padding: 4px 10px; cursor: pointer; }
.pc-picker-auto:hover, .pc-picker-auto:focus-visible { border-color: var(--accent); }
/* the readout of several patterns: one item per pattern, kept whole when the line wraps */
.pc-rs { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.pc-rs .pc-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; align-self: center; }
.pc-svg .pc-muted { fill: var(--ink2); font-size: 10px; }
/* under a stack the group band and its key are drawn faint, apart from the patterns' colours; a focused group's band
   comes back in full */
.pc-band.pc-soft, .pc-key .pc-sw.pc-soft { opacity: .5; }
.pc-focus .pc-band.pc-soft.on { opacity: 1; }
.pc-sfocus .pc-bar:not(.on) { opacity: .18; }
.pt-key .pc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.pt-pin { padding: 2px 8px; font-size: 11px; }
/* a stacked pattern's colour beside its name, in the form and the table head */
.pt-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; vertical-align: -1px; }
.pt-label .pt-sw { margin-left: 6px; }
.pt-pin.on { border-color: var(--accent); color: var(--accent); }
/* Export menu: a button that opens a short list of actions (workbench.js exportMenu) */
.wb-menu { position: relative; display: inline-block; }
.wb-menu > summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; }
/* .wb-page summary (secondary text, bottom margin) must not restyle the menu's button */
.wb-menu > summary.wb-button { color: var(--ink); margin: 0; }
.wb-menu > summary.wb-button:hover { color: var(--accent); }
.wb-menu[open] > summary.wb-button { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.wb-menu > summary::-webkit-details-marker { display: none; }
/* the same thin chevron as the native selects beside it */
.wb-chevron { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wb-menu[open] .wb-chevron { transform: rotate(180deg); }
.wb-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; display: flex; flex-direction: column; min-width: 150px; padding: 4px; border: 1px solid var(--line2); border-radius: 8px; background: var(--pill); box-shadow: var(--shadow), 0 12px 32px rgba(0,0,0,.22); }
.wb-menu-item { text-align: left; background: none; border: 0; border-radius: 6px; padding: 8px 10px; color: var(--ink); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
.wb-menu-item:hover, .wb-menu-item:focus-visible { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.pc-ctl { display: inline-flex; align-items: center; gap: 8px; }
.pc-ctl .seg button { font-family: Inter, system-ui, sans-serif; }
.pc-ctl .seg button[data-action="pc-pattern"] { font-family: 'JetBrains Mono', monospace; }
.pc-ctl select { font: inherit; font-size: 12px; color: var(--ink); background: var(--bg); border: 1px solid var(--line2); border-radius: 6px; padding: 4px 6px; }
.pc-ctl select[data-pc="pattern"] { font-family: 'JetBrains Mono', monospace; }
.pc-median { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 2; }
.pc-median-halo { stroke: var(--surface); stroke-width: 3; }
.pc-bar.pc-over { opacity: .55; }
/* the comparison pattern: same group colors, lighter, below the axis */
.pc-bar.pc-cmp, .pc-table .pc-ib.pc-cmp i { opacity: .62; }
.pc-svg .pc-tag { font-size: 10.5px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.pc-readout { min-height: 22px; font-size: 12px; margin: 8px 0 4px; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.pc-readout .pc-pin { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border: 1px solid var(--line2); border-radius: 4px; padding: 0 5px; color: var(--ink2); }
.pc-plot { overflow-x: auto; overflow-y: hidden; }
.pc-svg { display: block; }
.pc-svg text { font: 10px Inter, system-ui, sans-serif; fill: var(--ink2); }
.pc-svg .pc-run { font-size: 10.5px; fill: var(--ink); }
.pc-grid { stroke: var(--line); stroke-width: 1; }
.pc-axis, .pc-tick { stroke: var(--ink2); stroke-width: 1; }
.pc-hit { fill: transparent; cursor: pointer; }
.pc-hover { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 2; }
.pc-lit { fill: var(--accent); }
.pc-focus .pc-bar:not(.on), .pc-focus .pc-band:not(.on) { opacity: .18; }
.pc-tablewrap { max-height: none; margin-top: 10px; }
.pc-table td, .pc-table th { padding: 7px 10px; text-align: right; }
.pc-table td:first-child, .pc-table th:first-child { text-align: left; }
.pc-table .pc-sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 8px; vertical-align: -1px; }
.pc-table .pc-ib { display: inline-block; width: 56px; height: 8px; background: var(--bg); border-radius: 2px; margin-right: 8px; vertical-align: 0; overflow: hidden; text-align: left; }
.pc-table .pc-ib i { display: block; height: 100%; border-radius: 2px; }
/* a value above zero shows at least a short bar, so it never reads as an empty track (the number beside it is exact) */
.pc-table .pc-ib i.pc-nz { min-width: 4px; }
/* fixed-width numbers (width set per column) keep every bar in a column on one left margin */
.pc-table td.pc-m { white-space: nowrap; }
.pc-table .pc-num { display: inline-block; text-align: right; font-variant-numeric: tabular-nums; }
.pc-table td.pc-r { font-variant-numeric: tabular-nums; }
.pc-table tr.on td { background: var(--bg); }
.pc-table tr.pc-total td { font-weight: 600; border-top: 1px solid var(--line2); }
.pc-note { margin-top: 8px; }
.pc-sep { stroke: var(--line2); stroke-width: 1; stroke-dasharray: 2 3; }
.pc-info { margin-top: 10px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 6px 6px 0; font-size: 12px; line-height: 1.6; color: var(--ink); }
.pc-info-pages { margin-top: 6px; }
.pc-info-pages > summary { cursor: pointer; color: var(--accent); }
.pc-info-pages > summary:hover { text-decoration: underline; }
.pc-info-pages ul { margin: 6px 0 2px; padding-left: 18px; }

/* Stages view (stage_view.js) */
.st-table td, .st-table th { text-align: right; padding: 7px 10px; }
.st-table td:first-child, .st-table th:first-child { text-align: left; }
.st-table tr.st-off td { color: var(--ink2); }
.st-table tr.st-on td { background: var(--accent-soft); }
.st-table .st-sel { background: var(--bg); font-weight: 600; }
.st-linked tr.st-sub td:first-child { padding-left: 24px; color: var(--ink2); }
.st-cls { display: inline-block; font: 600 9.5px Inter, sans-serif; border-radius: 3px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--line2); color: var(--ink2); }
.st-cls.st-O { border-color: var(--secA); color: var(--secA); }
.st-cls.st-B { border-color: var(--m1n); color: var(--m1n); }
.st-cls.st-M { border-color: var(--secM); color: var(--secM); }
.st-pathcard h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); margin: 16px 0 6px; }
.st-paths td:nth-child(2), .st-paths th:nth-child(2) { text-align: left; color: var(--ink2); }
.st-paths td:first-child { white-space: nowrap; }

/* Saved LC1 evaluation: which sheet half was fitted and which was tested */
.wb-split { margin: -4px 0 14px; font-size: 12px; color: var(--ink2); }
.wb-split > summary { cursor: pointer; }
.wb-split table { border-collapse: collapse; margin-top: 8px; width: auto; max-width: 100%; }
.wb-split th, .wb-split td { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; border-top: 1px solid var(--line); font-weight: 400; }
.wb-split thead th { border-top: 0; font-size: 11px; font-weight: 600; }
.wb-split tbody th { white-space: nowrap; }
.wb-split td { color: var(--ink); line-height: 1.6; font-variant-numeric: tabular-nums; }
.wb-split-n { color: var(--ink2); }
.wb-split p { margin: 8px 0 0; line-height: 1.6; }
.wb-fields + .wb-fields { margin-top: 12px; }
/* Translate: evaluation names are longer than the toolbar default */
.trToolbar .trBar #trLedger { max-width: 100%; }
/* Network ledger: least-most across equally good allocations; repeats switch in the global bar */
.mass-range { display: block; color: var(--ink2); font-size: 10px; white-space: nowrap; font-weight: 400; line-height: 1.2; }
.mass-range-note { margin-top: 4px; }
#repCtl { font-size: 12px; }
#repCtl select { font-size: 12px; padding: 4px 6px; }
#repCtl.error label { color: var(--trn); text-decoration: underline wavy; }


/* Chain tab (chain_view.js): ribbons along Golf's order, the inspector beside them */
.ch-below { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; align-items: start; }
.ch-below > section { margin-bottom: 0; }
.ch-field-cols { flex: 1.3 1 175px; }
.ch-field-order { flex: 2 1 290px; }
.ch-checks { flex: 2 1 330px; }
.ch-checks > div { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; min-height: 37px; }
.ch-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); cursor: pointer; }
.ch-check input { width: auto; margin: 0; }
.ch-help { display: inline-block; width: 14px; height: 14px; line-height: 13px; margin-left: 5px; border: 1px solid var(--line2); border-radius: 50%; color: var(--muted); font-size: 10px; font-weight: 600; text-align: center; cursor: help; vertical-align: middle; }
.ch-help:hover, .ch-help:focus { color: var(--accent); border-color: var(--accent); outline: none; }
.ch-scroll { overflow-x: auto; }
.ch-svg { display: block; max-width: 100%; height: auto; font: 11px Inter, system-ui, sans-serif; }
.ch-svg text { fill: var(--ink2); }
.ch-svg .ch-head { font-size: 12px; font-weight: 600; fill: var(--ink); }
.ch-svg .ch-sub { font-size: 10px; }
.ch-svg .ch-span { fill: var(--muted); font-size: 9px; }
.ch-svg .ch-warn, .ch-table .ch-warn { fill: var(--trn); color: var(--trn); }
.ch-svg .ch-label { font-size: 11px; fill: var(--ink); cursor: pointer; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.ch-svg .ch-label.on { font-weight: 700; }
.ch-svg .ch-label.ch-other { fill: var(--muted); font-style: italic; }
.ch-svg .ch-col { cursor: pointer; }
.ch-svg .ch-step-on { fill: var(--accent-soft); }
.ch-svg .ch-col:hover rect:first-of-type { fill: var(--accent-soft); }
.ch-svg .ch-ribbon { opacity: .6; cursor: pointer; }
.ch-svg .ch-ribbon:hover, .ch-svg .ch-ribbon.on { opacity: .85; }
.ch-svg .ch-flow { opacity: .8; stroke: var(--surface); stroke-width: .75; }
.ch-svg .ch-flow:hover { opacity: 1; }
.ch-svg .ch-stub { opacity: .2; }
.ch-svg .ch-skip { fill: none; stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.ch-svg .ch-skip.on { stroke: var(--ink); stroke-width: 1.5; }
.ch-key .ch-k-skip { background: none; border-top: 2px dashed var(--ink2); height: 0; }
.ch-svg .ch-kin { opacity: .9; }
.ch-svg .ch-label.ch-kin, .ch-svg .ch-inlabel.ch-kin { opacity: 1 !important; font-style: italic; }
.ch-svg .ch-midseg { stroke: var(--ink2); stroke-width: 1; cursor: pointer; }
.ch-svg .ch-midlink { fill: none; stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 2 3; opacity: .85; pointer-events: none; }
.ch-svg .ch-lost { fill: url(#ch-hatch); stroke: var(--muted); stroke-width: .6; pointer-events: none; }
.ch-about summary { cursor: pointer; color: var(--muted); margin-top: 6px; }
.ch-about[open] summary { margin-bottom: 4px; }
.ch-svg .ch-lost-label { font-size: 10px; fill: var(--muted); font-style: italic; }
.ch-svg .ch-midhead { font-size: 10px; fill: var(--muted); }
.ch-svg .ch-pass { stroke: var(--ink2); stroke-width: 1; stroke-dasharray: 4 3; }
.ch-key .ch-k-pass { border: 1px dashed var(--ink2); }
.ch-key .ch-k-lost { background: repeating-linear-gradient(45deg, var(--muted) 0 1px, transparent 1px 5px); opacity: .7; }
.ch-sched { font-size: 11px; }
.ch-sched td, .ch-sched th { padding: 4px 6px; text-align: center; }
.ch-sched td:first-child, .ch-sched th:first-child { text-align: left; white-space: nowrap; }
.ch-sched .ch-deg { font-size: 12px; }
.ch-sched .ch-deg.f { color: var(--secB); } .ch-sched .ch-deg.r { color: var(--secM); } .ch-sched .ch-deg.o { color: var(--muted); }
.ch-svg .ch-seg.ch-sparse { opacity: .4; stroke: var(--ink2); stroke-dasharray: 2 2; }
.ch-svg .ch-seg { stroke: var(--surface); stroke-width: 1; cursor: pointer; }
.ch-svg .ch-seg.on { stroke: var(--ink); stroke-width: 1.5; }
.ch-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 11px; color: var(--ink2); margin: 0 0 10px; align-items: center; }
.ch-key { display: inline-flex; align-items: center; gap: 6px; }
.ch-key i { display: inline-block; width: 22px; height: 10px; border-radius: 2px; background: var(--secA); }
.ch-key .ch-k-ribbon { opacity: .55; }
.ch-key .ch-k-flow { background: var(--secB); clip-path: polygon(0 20%, 100% 0, 100% 100%, 0 80%); }
.ch-key .ch-k-stub { background: var(--ink2); opacity: .35; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ch-key .ch-k-colour { background: linear-gradient(90deg, var(--ser-blue), var(--ser-orange), var(--ser-aqua), var(--ser-yellow)); }
.ch-svg .ch-leader { stroke: var(--muted); stroke-width: 1; opacity: .8; }
.ch-svg .ch-seed-mark { font-size: 9px; fill: var(--ink); }
.ch-side h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink2); margin: 16px 0 6px; }
.ch-table td, .ch-table th { padding: 6px 8px; text-align: right; }
.ch-table td:first-child, .ch-table th:first-child { text-align: left; }
.ch-ledger td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ch-ledger td:first-child { white-space: normal; }
.ch-row { cursor: pointer; }
.ch-dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.ch-mini { padding: 2px 7px; font-size: 11px; margin-left: 4px; }
.ch-svg .ch-inlabel { font-size: 10px; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ch-svg .ch-inlabel.on { font-weight: 700; }
.ch-svg .ch-branch { font-size: 10px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; pointer-events: none; }
.ch-svg .ch-invalue { fill: var(--ink2); font-weight: 400; }
.ch-svg .ch-dim { opacity: .12 !important; }
.ch-svg .ch-label.ch-dim, .ch-svg .ch-inlabel.ch-dim { opacity: .35 !important; }