:root {
  --bg: #f7f8fa; --panel: #fff; --ink: #1d2329; --muted: #66707a; --line: #dde1e6; --accent: #2f5fb3; --sel: #eaf1ff;
  --v1: #9aa7b8; --v2: #2f5fb3; --ok: #2e9e6a; --part: #d9a21b; --no: #c4473a; --x: #8a8f96;
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 16px; }
.brand span { font-weight: 500; color: var(--accent); }
#tabs { display: flex; flex-wrap: wrap; gap: 4px; }
#tabs button { border: 1px solid var(--line); background: none; padding: 5px 11px; border-radius: 4px; font: inherit; cursor: pointer; color: var(--ink); }
#tabs button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.versions { margin-left: auto; font-size: 13px; }
main { padding: 8px 16px 48px; max-width: 1400px; margin: 0 auto; }
h1 { font-size: 21px; margin: 14px 0 4px; }
h2 { font-size: 16px; margin: 0 0 8px; }
h2.group { margin: 22px 0 8px; }
h2 small, h2.group small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 6px; }
.lead { color: var(--muted); max-width: 900px; margin: 0 0 12px; }
.muted { color: var(--muted); }
.err { color: var(--no); }
a { color: var(--accent); }
input, select, button { font: inherit; padding: 4px 8px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
button { cursor: pointer; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin: 12px 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid2 .card { margin: 0 0 12px; }
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.kpis div { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kpis strong { display: block; font-size: 24px; }
.kpis span { color: var(--muted); font-size: 12.5px; }
.legend { font-size: 12px; margin: 0 0 8px; }
.sw { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin: 0 4px 0 8px; }
.sw.v1, .bar.v1 { background: var(--v1); } .sw.v2, .bar.v2 { background: var(--v2); }
.pair { display: grid; grid-template-columns: minmax(120px, 34%) 1fr; gap: 0 10px; margin: 6px 0; align-items: center; }
.pair .pl { grid-row: span 2; font-size: 13px; }
.bars { display: flex; align-items: center; gap: 6px; height: 11px; }
.bars span { font-size: 11px; color: var(--muted); min-width: 32px; }
.bar { height: 8px; border-radius: 4px; display: inline-block; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { padding: 5px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: #f0f2f5; position: sticky; top: 0; }
td.name { font-weight: 600; white-space: nowrap; }
td.note { color: var(--muted); font-size: 12.5px; }
ul.plain { padding-left: 18px; margin: 0 0 8px; }
ul.plain li { margin: 4px 0; }
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 10px 0; }
.filters label { display: flex; gap: 6px; align-items: center; }
.check { display: inline-flex; gap: 4px; }
.persona { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin: 8px 0; padding: 0 14px; }
.persona[open] { padding-bottom: 12px; }
.persona summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 0; }
.pname { font-weight: 700; font-size: 15px; }
.pmeta { color: var(--muted); font-size: 12.5px; }
.mini { width: 70px; height: 8px; background: #eef0f3; border-radius: 4px; display: inline-flex; }
.mini:first-of-type { margin-left: auto; }
.pscore { font-size: 12.5px; min-width: 84px; text-align: right; }
.tags { font-size: 12.5px; }
.tags span { color: var(--muted); }
.b { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11.5px; white-space: nowrap; color: #fff; }
.b-F { background: var(--ok); } .b-P { background: var(--part); } .b-N { background: var(--no); } .b-X { background: var(--x); }
.chip { display: inline-block; padding: 0 6px; border-radius: 4px; font-size: 11.5px; border: 1px solid var(--line); white-space: nowrap; margin: 1px 0; }
.chip.st-built { background: #e5f4ec; border-color: #a9d8bf; }
.chip.st-proposed { background: #fff6dc; border-color: #ecd98c; }
.chip.st-needs-decision { background: #fde8e5; border-color: #f0b8b0; }
.chip.st-planned { background: #eef0f3; }
.chip.int { background: #f2ecfb; border-color: #d3c2ef; }
.inl { display: inline-flex; width: 80px; height: 8px; background: #eef0f3; border-radius: 4px; vertical-align: middle; }
.scroll { overflow-x: auto; }
.heat td.h { text-align: center; font-size: 12px; background: color-mix(in srgb, var(--ok) calc(var(--p) * 100%), #fbe1dd); }
.heat td.hx { text-align: center; color: var(--x); }
.heat th { white-space: nowrap; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.col { background: #eef1f5; border-radius: 8px; padding: 10px; }
.col h2 { margin-bottom: 0; }
.tcard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--part); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.tcard.st-needs-decision { border-left-color: var(--no); }
.tcard.st-planned { border-left-color: var(--x); }
.tcard p { margin: 4px 0; }
.tcard span { font-size: 12px; }
.decisions { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.dec { margin: 0; }
.dec h3 { font-size: 15px; margin: 0 0 6px; }
.did { background: var(--accent); color: #fff; border-radius: 4px; padding: 0 6px; font-size: 12px; margin-right: 4px; }
.opts { margin: 4px 0; padding-left: 18px; }
.rec { background: var(--sel); padding: 6px 8px; border-radius: 4px; }
.flow { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 14px; align-items: start; }
.lane { background: #eef1f5; border-radius: 8px; padding: 10px; }
.hub { position: sticky; top: 90px; display: grid; gap: 8px; justify-items: center; }
.hubbox { background: var(--accent); color: #fff; border-radius: 10px; padding: 16px 14px; text-align: center; display: grid; gap: 6px; }
.hubbox span { font-size: 12.5px; opacity: .9; }
.arrows { font-size: 28px; color: var(--accent); }
.icard { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--part); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-size: 13px; }
.icard.st-built { border-left-color: var(--ok); }
.icard p { margin: 4px 0; }
.ihead { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
dialog { border: 1px solid var(--line); border-radius: 8px; }
dialog::backdrop { background: rgba(0, 0, 0, .35); }
#login-form { display: grid; gap: 8px; min-width: 280px; }
@media (max-width: 1000px) {
  .grid2, .flow { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr 1fr; }
  .hub { position: static; }
  .arrows { transform: rotate(90deg); }
}
@media (max-width: 640px) {
  .board { grid-template-columns: 1fr; }
  .decisions { grid-template-columns: 1fr; }
  .versions { margin-left: 0; }
  table.uc, table.changes, table.cov { display: block; overflow-x: auto; }
}

/* ---- How the pipeline works (pipeline.js) ---- */
:root { --k-improve: #2f5fb3; --k-assumption: #c98a00; --k-unused: #7b4fc4; --k-misrep: #c4473a; }
.eye { width: 18px; height: 18px; fill: none; stroke: var(--kc); stroke-width: 2; flex: none; vertical-align: -4px; }
.eye circle { fill: var(--kc); stroke: none; }
.k-improve { --kc: var(--k-improve); } .k-assumption { --kc: var(--k-assumption); } .k-unused { --kc: var(--k-unused); } .k-misrep { --kc: var(--k-misrep); }
.kinds { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 12px; }
.kind { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-left: 4px solid var(--kc); background: var(--panel); border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer; }
.kind input { margin: 0; }
.pl-strip { position: relative; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 4px 0 10px; }
.pl-line { position: absolute; left: 5%; right: 5%; top: 17px; height: 3px; background: var(--line); border-radius: 2px; }
.pl-dot { position: absolute; top: -5px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(47, 95, 179, .2); transition: left .7s cubic-bezier(.4, 0, .2, 1); }
.pl-pill { position: relative; display: grid; justify-items: center; gap: 3px; border: 0; background: none; padding: 0 2px; font-size: 12px; color: var(--muted); cursor: pointer; text-align: center; }
.pl-n { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid var(--line); font-weight: 700; color: var(--ink); transition: background .3s, border-color .3s, color .3s; }
.pl-n.big { width: 30px; height: 30px; background: var(--accent); border-color: var(--accent); color: #fff; margin-right: 4px; }
.pl-pill.done .pl-n { border-color: var(--accent); }
.pl-pill.on .pl-n { background: var(--accent); border-color: var(--accent); color: #fff; }
.pl-pill.on .pl-t { color: var(--ink); font-weight: 600; }
.pl-t { line-height: 1.25; }
.pl-eyes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.pl-eyes .eye { width: 13px; height: 13px; }
.pl-stage { padding: 14px 16px; }
.pl-grid { display: grid; grid-template-columns: minmax(300px, 520px) 1fr; gap: 18px; align-items: start; }
.pl-svg { width: 100%; height: auto; display: block; }
.pl-svg text { font-size: 11.5px; text-anchor: middle; fill: var(--ink); }
.pl-svg .pc rect { fill: #fff; stroke: #9aa7b8; }
.pl-svg .pc.out rect { fill: #e5f4ec; stroke: #7cc39d; }
.pl-svg .pc { opacity: 0; animation: pl-in .5s ease-out var(--d) forwards; }
.pl-svg .pc.in { transform: translateX(-24px); }
.pl-svg .pc.out { transform: translateX(24px); }
.pl-svg .pbox rect { fill: var(--accent); }
.pl-svg .pbox text { fill: #fff; font-weight: 600; }
.pl-svg .pbox .pnum { font-size: 11px; opacity: .85; font-weight: 400; }
.pl-svg .pbox { opacity: 0; transform-box: fill-box; transform-origin: center; animation: pl-pop .5s ease-out var(--d) forwards, pl-pulse 2.4s ease-in-out calc(var(--d) + .6s) infinite; }
.pl-svg .pflow { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 6; opacity: 0; animation: pl-fade .3s var(--d) forwards, pl-dash 1s linear var(--d) infinite; }
.pl-svg .pflow.out { stroke: #2e9e6a; }
.pl-svg .pflagcount { opacity: 0; animation: pl-fade .4s var(--d) forwards; }
.pl-svg .pflagcount circle { fill: var(--k-misrep); }
.pl-svg .pflagcount text { fill: #fff; font-weight: 700; }
.pl-svg .pflagcount .plabel { fill: var(--muted); text-anchor: start; font-weight: 400; }
@keyframes pl-in { to { opacity: 1; transform: none; } }
@keyframes pl-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }
@keyframes pl-pulse { 50% { transform: scale(1.03); } }
@keyframes pl-fade { to { opacity: 1; } }
@keyframes pl-dash { to { stroke-dashoffset: -22; } }
.pl-text h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 17px; }
.src { font-size: 11.5px; font-weight: 500; border-radius: 10px; padding: 1px 8px; border: 1px solid var(--line); }
.src-spec { background: #eaf1ff; } .src-files { background: #e5f4ec; } .src-inferred { background: #fff6dc; }
table.facts th { width: 42%; font-weight: 600; color: var(--muted); background: none; position: static; }
.pl-fh { display: flex; align-items: center; gap: 6px; margin: 14px 0 6px; font-size: 14px; }
.pl-flags { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; align-items: start; }
.flag { border: 1px solid var(--line); border-left: 4px solid var(--kc); border-radius: 6px; background: #fff; padding: 6px 10px; font-size: 13px; }
.flag summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.flag summary::-webkit-details-marker { display: none; }
.flag .ftitle { font-weight: 600; flex: 1; }
.flag[open] { box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.flag p { margin: 6px 0; }
.fkind { color: var(--muted); font-size: 12px; }
.sev { font-size: 11px; border-radius: 9px; padding: 0 7px; color: #fff; white-space: nowrap; }
.sev-high { background: var(--k-misrep); } .sev-medium { background: var(--k-assumption); } .sev-low { background: var(--x); }
.pl-ctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
table.flags tr.pick { cursor: pointer; }
table.flags tr.pick:hover { background: var(--sel); }
.kpilink { color: inherit; text-decoration: none; display: block; }
.alt-grid { display: grid; gap: 0; min-width: 900px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.alt-grid > div { padding: 8px 10px; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 13px; transition: background .35s, box-shadow .35s; }
.ah { display: grid; gap: 3px; align-content: start; background: #f0f2f5; }
.ah strong { font-size: 14px; }
.ah span { font-size: 12px; color: var(--muted); }
.ah .refs { font-style: italic; }
.ah .anote { color: var(--k-assumption); }
.ah.this, .acell.this { background: #eef4ff; }
.arow-label { font-weight: 600; background: #f7f8fa; }
.altmini svg { width: 100%; height: 70px; display: block; }
.altmini text { font-size: 10px; fill: var(--muted); }
.alt-grid.diff .acell.c-D { box-shadow: inset 0 0 0 2px rgba(196, 71, 58, .55); }
.alt-grid.diff .acell.c-P { box-shadow: inset 0 0 0 2px rgba(217, 162, 27, .6); }
.alt-grid .now { background: #fff6dc !important; }
.alt-grid .arow-label.now { box-shadow: inset 4px 0 0 var(--accent); }
.celleye { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 0 6px; background: #fff; font-size: 11px; vertical-align: middle; }
.celleye .eye { width: 14px; height: 14px; }
/* mini animations */
.am-paths line { stroke: var(--v2); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: m-draw 4s ease-out infinite; animation-delay: calc(var(--k) * .25s); }
.m-drug { fill: #5b8ff9; stroke: #333; }
.m-int { fill: #eceff3; stroke: #9aa3ad; }
.m-gene { fill: #fbf0a6; stroke: #a08a00; }
@keyframes m-draw { 0% { stroke-dashoffset: 1; } 40%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.m-bg { fill: #c9d3e0; animation: m-flick 3s ease-in-out infinite; animation-delay: calc(var(--k) * .21s); }
@keyframes m-flick { 50% { fill: #8a8f96; } }
.m-pp { fill: none; stroke: #c4473a; stroke-width: 2; stroke-dasharray: 4 4; animation: pl-dash 1.2s linear infinite; }
.m-dis.up, .m-sig.up { fill: #c4473a; } .m-dis.dn, .m-sig.dn { fill: #2f5fb3; }
.m-sig { transform-box: fill-box; transform-origin: center; animation: m-flip 4s ease-in-out infinite; animation-delay: calc(var(--k) * .12s); }
@keyframes m-flip { 0%, 20% { transform: scaleY(0); } 45%, 90% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.m-axis { stroke: #9aa3ad; }
.m-kge line { stroke: #9aa3ad; stroke-width: 1.5; }
.m-pred { fill: none; stroke: #2e9e6a; stroke-width: 2.5; stroke-dasharray: 6 5; animation: m-blink 2.4s ease-in-out infinite, pl-dash 1s linear infinite; }
@keyframes m-blink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.m-pt { fill: #c9d3e0; }
.m-pt.ev { animation: m-event 4s ease-in-out infinite; animation-delay: calc(var(--k) * .3s); }
@keyframes m-event { 0%, 25% { fill: #c9d3e0; } 45%, 90% { fill: #c4473a; } 100% { fill: #c9d3e0; } }
@media (prefers-reduced-motion: reduce) {
  .pl-svg .pc, .pl-svg .pbox, .pl-svg .pflow, .pl-svg .pflagcount { animation: none; opacity: 1; transform: none; }
  .altmini * { animation: none !important; stroke-dashoffset: 0 !important; }
}
@media (max-width: 1000px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-strip { grid-template-columns: repeat(5, 1fr); row-gap: 12px; }
  .pl-line { display: none; }
}
@media (max-width: 640px) {
  .pl-strip { grid-template-columns: repeat(2, 1fr); }
  .pl-flags { grid-template-columns: 1fr; }
}

/* ---- Critiques tab (critiques.js) ---- */
.chip.st-built-v25 { background: #efe8fa; border-color: #c7b2ea; }
.cr-lenses { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 10px; }
.cr-lens { margin: 0; }
.cr-lens h3 { margin: 0 0 4px; font-size: 15px; }
.cr-area { margin-top: 22px; font-size: 17px; }
.cr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; align-items: start; }
.cr { margin: 0; border-left: 4px solid var(--line); }
.cr h3 { font-size: 14.5px; margin: 6px 0; }
.cr p { margin: 4px 0; }
.cr-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cr-st { font-size: 11px; border-radius: 9px; padding: 0 7px; border: 1px solid var(--line); white-space: nowrap; }
.cr.cr-done, .cr-k.cr-done { border-left-color: #2e9e6a; } .cr-st.cr-done { background: #e5f4ec; }
.cr.cr-shown, .cr-k.cr-shown { border-left-color: #7b4fc4; } .cr-st.cr-shown { background: #efe8fa; }
.cr.cr-team, .cr-k.cr-team { border-left-color: #c98a00; } .cr-st.cr-team { background: #fff6dc; }
.cr.cr-you, .cr-k.cr-you { border-left-color: #c4473a; } .cr-st.cr-you { background: #fde8e6; }
.kpis .cr-k { border-left-width: 4px; }
@media (max-width: 640px) { .cr-grid { grid-template-columns: 1fr; } }
.small { font-size: 12.5px; }

/* ---- Watch it compute (walk.js) ---- */
.wk { margin: 14px 0; border-color: #c9d6ee; }
.wk-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; }
.wk-head h3 { margin: 0; font-size: 15px; }
.wk-head h3 .muted { font-weight: 400; font-size: 12.5px; }
.wk-phases { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.wk-phases i { font-style: normal; color: var(--line); }
.wk-phases span { display: inline-flex; gap: 5px; align-items: center; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--line); transition: background .3s, color .3s; }
.wk-phases b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--line); color: var(--ink); font-size: 11px; }
.wk-phases span.done { color: var(--ink); } .wk-phases span.done b { background: #b9cbe9; }
.wk-phases span.on { background: var(--accent); border-color: var(--accent); color: #fff; } .wk-phases span.on b { background: #fff; color: var(--accent); }
.wk-body { min-height: 300px; margin: 10px 0; }
.fade { animation: wkfade .45s ease-out; }
@keyframes wkfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wk-file { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.wk-doc { font-size: 34px; }
.wk-file h4, .wk-pane h4, .wk-side h4 { margin: 0; font-size: 14px; }
.wk-file p { margin: 2px 0 0; }
.wk-tab { font-size: 12.5px; }
.wk-tab td, .wk-tab th { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.wk-tab .use { background: #fff4c7; }
.wk-tab tr.use th, .wk-tab tr.use td { background: #fff4c7; }
.wk-tab.rec th { width: 1%; white-space: nowrap; }
.wk-tab tr.ok td:last-child { color: var(--ok); font-weight: 700; } .wk-tab tr.bad td:last-child { color: var(--no); font-weight: 700; }
.wk-scope { background: var(--sel); padding: 8px 10px; border-radius: 6px; }
.wk-run { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: 14px; }
.wk-origin { font-size: 12.5px; padding: 6px 9px; border-radius: 6px; margin-bottom: 6px; border-left: 4px solid; }
.wk-origin.o-indra { background: #eef6ee; border-color: var(--ok); }
.wk-origin.o-explorer { background: var(--sel); border-color: var(--accent); }
.wk-origin.o-rebuilt { background: #fff6dc; border-color: var(--part); }
.wk-codes { position: relative; max-height: 380px; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fbfbfd; scroll-behavior: smooth; }
.wk-fname { position: sticky; top: 0; background: #f0f2f5; font-size: 11.5px; padding: 3px 8px; border-bottom: 1px solid var(--line); z-index: 1; }
.wk-code { margin: 0; padding: 4px 0; font: 12px/1.55 ui-monospace, Consolas, monospace; white-space: pre; }
.wk-l { display: block; padding: 0 8px 0 0; transition: background .25s; }
.wk-l i { display: inline-block; width: 40px; padding-right: 8px; text-align: right; color: #a0a7b0; font-style: normal; user-select: none; }
.wk-l.now { background: #ffe58a; box-shadow: inset 4px 0 0 #d9a21b; }
.wk-say { padding: 7px 9px; border-radius: 6px; background: var(--sel); font-size: 13px; margin-bottom: 8px; }
.wk-say.ret { background: #e5f4ec; } .wk-say.skip { background: #f0f2f5; color: var(--muted); }
.wk-vars th { width: 1%; white-space: nowrap; font: 12px ui-monospace, Consolas, monospace; }
.wk-vars td { font: 12px ui-monospace, Consolas, monospace; word-break: break-word; }
.wk-vars tr.chg th, .wk-vars tr.chg td { background: #fff4c7; animation: wkfade .4s; }
.wk-ctrl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wk-ctrl input[type=range] { flex: 1; min-width: 140px; padding: 0; }
@media (max-width: 800px) { .wk-run { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fade, .wk-vars tr.chg td { animation: none; } .wk-codes { scroll-behavior: auto; } }

/* ---- Spec (spec.js) ---- */
:root { --sp1: #9aa7b8; --sp2: #2f5fb3; --sp25: #b5489b; }
.sw.sp-v1, .sp-v1 { background: var(--sp1); } .sw.sp-v2, .sp-v2 { background: var(--sp2); } .sw.sp-v25, .sp-v25 { background: var(--sp25); }
.sp-chart { display: grid; gap: 4px; }
.sp-row { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: 10px; align-items: center; text-align: left; border: 1px solid transparent; background: none; padding: 4px 6px; border-radius: 6px; }
.sp-row:hover, .sp-row.on { border-color: var(--line); background: #f6f8fb; }
.sp-name { display: grid; font-weight: 600; font-size: 13px; } .sp-name small { font-weight: 400; color: var(--muted); }
.sp-bars { display: grid; gap: 2px; }
.sp-bar { display: flex; align-items: center; gap: 6px; height: 11px; }
.sp-bar span { display: block; height: 9px; border-radius: 3px; min-width: 2px; transition: width .6s; }
.sp-bar b { font-size: 11px; font-weight: 600; color: var(--muted); }
.sp-detail h3 { margin: 12px 0 4px; font-size: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .grid3 h4 { margin: 0; }
.sp-table td { min-width: 170px; }
.sp-q { margin: 0; font-style: italic; max-width: 420px; }
.sp-c .sp-st { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 8px; margin-bottom: 2px; color: #fff; background: var(--ok); }
.sp-c.sp-extended .sp-st { background: var(--accent); } .sp-c.sp-open .sp-st { background: var(--part); }
@media (max-width: 800px) { .grid3 { grid-template-columns: 1fr; } .sp-row { grid-template-columns: 1fr; } }

/* ---- Modeling decisions (params.js) ---- */
:root { --pb-spec: #2e9e6a; --pb-measured: #c4473a; --pb-convention: #2f5fb3; --pb-arbitrary: #d9a21b; --pb-ours: #7b4fc4;
  --pe-v2: #2e9e6a; --pe-v25: #3fb58a; --pe-candidate: #2f5fb3; --pe-precompute: #d9a21b; --pe-no: #9aa7b8; }
.pb-spec { background: var(--pb-spec); } .pb-measured { background: var(--pb-measured); } .pb-convention { background: var(--pb-convention); } .pb-arbitrary { background: var(--pb-arbitrary); } .pb-ours { background: var(--pb-ours); }
.pe-v2 { background: var(--pe-v2); } .pe-v25 { background: var(--pe-v25); } .pe-candidate { background: var(--pe-candidate); } .pe-precompute { background: var(--pe-precompute); } .pe-no { background: var(--pe-no); }
.pa-stack { display: flex; height: 26px; border-radius: 6px; overflow: hidden; margin: 6px 0; }
.pa-stack span { display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; }
.pa-pill { color: #fff; font-size: 11px; padding: 1px 7px; border-radius: 9px; white-space: nowrap; }
.pa-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.pa-preset { display: grid; gap: 4px; text-align: left; margin: 0; cursor: pointer; }
.pa-preset.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; background: var(--sel); }
.pa { margin: 8px 0; padding: 0 14px; border-left: 4px solid var(--line); }
.pa.pb-b-measured { border-left-color: var(--pb-measured); } .pa.pb-b-arbitrary { border-left-color: var(--pb-arbitrary); } .pa.pb-b-spec { border-left-color: var(--pb-spec); }
.pa.pb-b-convention { border-left-color: var(--pb-convention); } .pa.pb-b-ours { border-left-color: var(--pb-ours); }
.pa[open] { padding-bottom: 10px; }
.pa summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 9px 0; }
.pa-id { font-weight: 700; color: var(--muted); font-size: 12px; } .pa-name { font-weight: 700; }
.pa-val { flex-basis: 100%; color: var(--muted); font-size: 12.5px; }
.pa-set { flex-basis: 100%; background: var(--sel); padding: 2px 8px; border-radius: 4px; font-size: 12.5px; }
.pa-dl { display: grid; grid-template-columns: 180px 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.pa-dl dt { color: var(--muted); } .pa-dl dd { margin: 0; }
.pa-pt th { width: 1%; white-space: nowrap; } .pa-pt tr.on th, .pa-pt tr.on td { background: var(--sel); font-weight: 600; }
.pa-ref { text-decoration: none; font-size: 12px; }
.pa-refs { font-size: 12.5px; } .pa-refs li { margin: 3px 0; } .pa-refs li:target { background: #fff4c7; }
@media (max-width: 700px) { .pa-dl { grid-template-columns: 1fr; } .pa-dl dt { font-weight: 600; } }
@media (max-width: 640px) { .filters label { flex-wrap: wrap; max-width: 100%; } .filters select, .filters input { max-width: 100%; min-width: 0; } }

/* Keeping users tab */
.en-built { background: #2e9e6a; } .en-proposed { background: #2f5fb3; } .en-needs-decision { background: #d9a21b; } .en-spec { background: #9aa7b8; }
.en-q { font-size: 14px; }
.en-themes th { font-weight: 600; } .en-themes td, .en-themes th { padding: 3px 8px; }
.en-table td { vertical-align: top; white-space: normal; min-width: 120px; }
.en-table td.name { min-width: 220px; }
.chip.en-who { font-size: 10.5px; padding: 0 6px; margin: 2px 2px 0 0; display: inline-block; }