/* Adaptive Signal: the sidebar rail and the two added pages, Strongest Signals (the output layer) and System Integrity
   (the methodological layer). Same tokens, same type, same radius 0; the home and the workspace are untouched. */

/* ---------------------------------------------------------------- the rail */
:root { --rail: 52px; }
body.rail-open { --rail: 216px; }
.rail { position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail); background: var(--bg1); border-right: 1px solid var(--line); z-index: 30; display: flex; flex-direction: column; overflow: hidden; transition: width 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms ease-out; }
.rail-toggle { height: var(--top); width: 52px; display: grid; place-items: center; color: var(--t2); border-bottom: 1px solid var(--line2); flex: none; }
.rail-toggle:hover { color: var(--acc); }
.rail .chev { display: block; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(-45deg); transition: transform 200ms; margin-left: -3px; }
body.rail-open .rail .chev { transform: rotate(135deg); margin-left: 3px; }
.rail-brand { display: flex; align-items: center; height: 44px; padding-left: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t0); border-bottom: 1px solid var(--line2); white-space: nowrap; flex: none; }
.rail-brand:hover { color: var(--acc); }
.rail .long { display: none; } body.rail-open .rail .long { display: inline; } body.rail-open .rail .short { display: none; }
.rail-group { padding: 6px 0; border-bottom: 1px solid var(--line2); }
.rail-glabel { display: none; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); padding: 6px 18px 4px; }
body.rail-open .rail-glabel { display: block; }
.rail-item { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding-left: 18px; color: var(--t1); white-space: nowrap; }
.rail-item .ico { width: 16px; height: 16px; flex: none; }
.rail-item .ico svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 1.25; }
.rail-item .lbl { display: block; font-size: 13px; line-height: 1.2; opacity: 0; transform: translateX(-6px); transition: opacity 120ms ease-out, transform 180ms cubic-bezier(.16,1,.3,1); }
body.rail-open .rail-item .lbl { opacity: 1; transform: none; }
.rail-item .lbl small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t2); text-transform: uppercase; margin-top: 2px; }
.rail-item:hover { color: var(--t0); background: var(--bg2); }
.rail-item.on { color: var(--acc); }
.rail-item.on::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 2px; background: var(--acc); }
.rail-foot { margin-top: auto; padding: 12px 0 14px 18px; border-top: 1px solid var(--line2); font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--t3); text-transform: uppercase; white-space: nowrap; }
body.has-rail #app { margin-left: var(--rail); transition: margin-left 200ms cubic-bezier(.2,.8,.2,1); }
body.has-rail .top { left: var(--rail); transition: left 200ms cubic-bezier(.2,.8,.2,1); }
/* the rail opens over the page on hover and on keyboard focus to name its sections; the chevron pins it open */
@media (hover: hover) and (pointer: fine) {
  body:not(.rail-open) .rail:hover, body:not(.rail-open) .rail:focus-within { width: 216px; z-index: 50; box-shadow: 14px 0 32px -10px rgba(0,0,0,0.7); transition-delay: 70ms; }
  body:not(.rail-open) .rail:hover .rail-item .lbl, body:not(.rail-open) .rail:focus-within .rail-item .lbl { opacity: 1; transform: none; transition-delay: 90ms; }
  body:not(.rail-open) .rail:hover .long, body:not(.rail-open) .rail:focus-within .long { display: inline; }
  body:not(.rail-open) .rail:hover .short, body:not(.rail-open) .rail:focus-within .short { display: none; }
}
@media (prefers-reduced-motion: reduce) { .rail, body.has-rail #app, body.has-rail .top, .rail .chev, .rail-item .lbl { transition: none; } .rail-item .lbl { transform: none; } }
/* on a phone the pinned rail slides over the page rather than pushing it into a 150-pixel column */
@media (max-width: 760px) { body.rail-open { --rail: 52px; } body.rail-open .rail { width: 216px; z-index: 50; box-shadow: 14px 0 32px -10px rgba(0,0,0,0.7); } }

/* ---------------------------------------------------------------- shared page frame */
.page { padding-top: var(--top); min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) 0px; transition: grid-template-columns 240ms cubic-bezier(.2,.8,.2,1); }
.page.open { grid-template-columns: minmax(0, 1fr) 520px; }
.page-main { min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 24px; padding: 22px 24px 14px; border-bottom: 1px solid var(--line); }
.page-head > div:first-child { flex: 1 1 320px; min-width: 0; }
.page-head .sysgrid { flex: none; }
.page-head h1 { font-family: var(--mono); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--t0); }
.page-head .sub { color: var(--t1); font-size: 13.5px; margin-top: 6px; max-width: 64ch; }
.page-head .sub b { color: var(--t0); font-weight: 500; }
.sysgrid { display: grid; grid-auto-flow: column; border: 1px solid var(--line); background: var(--bg1); box-shadow: inset 0 1px 0 var(--hi); }
.sysgrid > div { padding: 7px 12px; border-right: 1px solid var(--line2); white-space: nowrap; }
.sysgrid > div:last-child { border-right: 0; }
@media (max-width: 760px) { .page-head .sysgrid { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1 1 100%; } .sysgrid > div { border-bottom: 1px solid var(--line2); white-space: normal; min-width: 0; } .sysgrid .v { flex-wrap: wrap; overflow-wrap: anywhere; } }
.sysgrid .v { font-family: var(--mono); font-size: 12.5px; color: var(--t0); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.sysgrid .v small { font-size: 10px; color: var(--t2); }
.chip { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 2px 7px; color: var(--t1); white-space: nowrap; }
.chip.acc { color: var(--acc); border-color: var(--acc2); }
.page-insp { border-left: 1px solid var(--line); background: var(--bg1); overflow: auto; height: calc(100dvh - var(--top)); position: sticky; top: var(--top); min-width: 0; }
.page-insp .insp-in { min-width: 480px; }
.page-insp .actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.page-insp .actions a, .page-insp .actions button { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); padding: 7px 12px; color: var(--t1); background: var(--bg2); box-shadow: inset 0 1px 0 var(--hi); }
.page-insp .actions a.pri { color: var(--acc); border-color: var(--acc2); }
.page-insp .actions a:hover, .page-insp .actions button:hover { color: var(--acc); border-color: var(--acc2); }
.page-insp .head2 { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.page-insp .code { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--acc); text-transform: uppercase; margin-bottom: 6px; }
.page-insp h2 { font-size: 20px; line-height: 1.25; }
.page-insp .lede { color: var(--t1); margin-top: 8px; font-size: 13.5px; }
.page-insp .close { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line); padding: 4px 8px; color: var(--t1); white-space: nowrap; }
.page-insp .close:hover { color: var(--acc); border-color: var(--acc2); }
.page-foot { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px 40px; border-top: 1px solid var(--line2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--t3); text-transform: uppercase; }
@media (max-width: 1180px) { .page.open { grid-template-columns: minmax(0, 1fr) 440px; } .page-insp .insp-in { min-width: 400px; } }
@media (max-width: 900px) { .page.open { grid-template-columns: minmax(0, 1fr); } .page.open .page-main { display: none; } .page-insp { height: auto; position: static; } .page-insp .insp-in { min-width: 0; } }

/* ---------------------------------------------------------------- Strongest Signals: the ranked workspace */
.sig .page-head { align-items: flex-start; }
.eval { position: relative; height: 1px; background: var(--line2); overflow: hidden; }
.eval i { position: absolute; top: 0; bottom: 0; width: 18%; background: linear-gradient(90deg, transparent, var(--acc2), transparent); left: -20%; }
@media (prefers-reduced-motion: no-preference) { .eval i { animation: evalsweep 6s linear infinite; } @keyframes evalsweep { to { left: 100%; } } }
.sig-cols { display: grid; grid-template-columns: 48px 210px 150px 340px minmax(300px, 1fr); gap: 0 18px; padding: 8px 24px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t3); border-bottom: 1px solid var(--line2); background: var(--bg1); position: sticky; top: var(--top); z-index: 3; }
.rank { list-style: none; margin: 0; padding: 0; }
.row { display: grid; grid-template-columns: 48px 210px 150px 340px minmax(300px, 1fr); gap: 0 18px; align-items: center; padding: 14px 24px 14px 22px; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; cursor: pointer; transition: background 160ms, border-color 160ms; position: relative; }
.row:hover { background: var(--bg1); }
.row.sel { background: var(--bg2); border-left-color: var(--acc); }
.row.first { border-left-color: var(--acc2); }
.row.first.sel { border-left-color: var(--acc); }
@media (prefers-reduced-motion: no-preference) { .row.enter { animation: rowin 420ms cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 40ms); } @keyframes rowin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } }
.row .rk { font-family: var(--mono); font-size: 15px; color: var(--t2); letter-spacing: 0.04em; }
.row.first .rk { color: var(--t0); }
.row .tk { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; color: var(--t0); }
.row.first .tk { font-size: 32px; }
.row .nm { font-size: 12.5px; color: var(--t1); margin-top: 5px; }
.row .meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--t3); text-transform: uppercase; margin-top: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .sc .k { display: block; }
.row .sc .n { font-family: var(--mono); font-size: 30px; line-height: 1; color: var(--t0); margin-top: 3px; font-variant-numeric: tabular-nums; }
.row.first .sc .n { font-size: 40px; color: var(--acc); }
.row .sc .bar { height: 3px; background: var(--bg3); margin-top: 9px; position: relative; width: 120px; }
.row .sc .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc2); width: 0; transition: width 700ms cubic-bezier(.2,.8,.2,1); }
.row.first .sc .bar i { background: var(--acc); }
.row .ch { position: relative; height: 110px; background: var(--bg1); border: 1px solid var(--line2); }
.row .ch canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.row .ch .cap { position: absolute; left: 8px; top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--t3); text-transform: uppercase; pointer-events: none; }
.kv6 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.kv6 > div { border-top: 1px solid var(--line2); padding-top: 5px; min-width: 0; }
.kv6 .k { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv6 .v { font-family: var(--mono); font-size: 14px; color: var(--t0); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.kv6 .v.up { color: var(--ok); }
.kv6 .v small { display: block; font-size: 10px; color: var(--t2); margin-top: 2px; }
.sig.open .sig-cols, .sig.open .row { grid-template-columns: 44px 160px 120px 240px minmax(220px, 1fr); gap: 0 14px; }
.sig.open .row .tk { font-size: 21px; } .sig.open .row.first .tk { font-size: 26px; }
.sig.open .row .sc .n { font-size: 26px; } .sig.open .row.first .sc .n { font-size: 32px; }
.sig.open .row .sc .bar { width: 96px; }
.sig.open .kv6 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.sig.open .kv6 .v { font-size: 13px; }
@media (max-width: 1400px) { .sig-cols, .row { grid-template-columns: 44px 180px 130px 280px minmax(260px, 1fr); } }
@media (max-width: 1180px) { .sig-cols, .row { grid-template-columns: 44px 150px 110px 220px minmax(220px, 1fr); } .kv6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sig.open .sig-cols, .sig.open .row { grid-template-columns: 40px 120px 100px 1fr; } .sig.open .row .kv6, .sig.open .sig-cols span:nth-child(5) { display: none; } }
@media (max-width: 760px) {
  .sig-cols { display: none; }
  .row, .sig.open .row { grid-template-columns: 32px minmax(0, 1fr); gap: 10px 12px; padding: 14px 16px; }
  .row > :nth-child(n+3) { grid-column: 2; } .row .meta { white-space: normal; }
  .row .kv6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the detail panel fills the screen: its title row wraps, its values break long ids, its figures sit two to a row */
  .page-insp .head2 { flex-wrap: wrap; } .page-insp .head2 > * { min-width: 0; overflow-wrap: anywhere; }
  .page-insp .kv { grid-template-columns: max-content minmax(0, 1fr); } .page-insp .kv > div { min-width: 0; overflow-wrap: anywhere; }
  .page-insp .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .page-insp .nums > div, .page-insp .metrics > div { min-width: 0; }
}
.dchart { position: relative; height: 210px; background: var(--bg2); border: 1px solid var(--line2); margin-top: 14px; }
.dchart canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dchart .cap { position: absolute; right: 8px; top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--t3); text-transform: uppercase; pointer-events: none; }
.parts > div { display: grid; grid-template-columns: 150px 1fr 48px; gap: 12px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; color: var(--t1); }
.parts .b { height: 4px; background: var(--bg3); position: relative; }
.parts .b i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--acc2); }
.parts .n { font-family: var(--mono); font-size: 11px; color: var(--t0); text-align: right; }
.hist li .r { grid-template-columns: 1fr auto auto; }
.hist .oc { font-family: var(--mono); font-size: 10.5px; }
.hist .oc.up { color: var(--ok); } .hist .oc.dn { color: var(--bad); } .hist .oc.open { color: var(--t1); }

/* ---------------------------------------------------------------- System Integrity: the research-control architecture */
.si .page-head { display: none; }
/* the title, set like the home wordmark; the entrances */
.si-title { position: relative; text-align: center; min-height: 250px; display: grid; place-items: center; padding: 52px 24px 40px; background: var(--bg0); }
.si-title .in { display: grid; justify-items: center; }
.si-title h1 { position: relative; display: inline-block; font-family: var(--mono); font-size: clamp(34px, 4.8vw, 66px); letter-spacing: 0.12em; font-weight: 500; text-transform: uppercase; color: var(--t0); line-height: 1.15; white-space: pre; }
.si-title h1 .sizer { visibility: hidden; }
.si-title h1 .typed { position: absolute; left: 0; top: 0; }
.si-title .cursor { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 0.58em; height: 1.05em; background: var(--t0); }
.si-title .cursor.line { position: absolute; left: 0; top: auto; bottom: 0; transform: none; width: 100%; height: 1px; background: var(--line); margin: 0; opacity: 1; }
.si-title .hint { margin: 24px 0 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--t2); opacity: 0; transition: opacity 520ms ease-out; }
.si-title .hint.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .page-main.anim .si-sec:not(.in) { opacity: 0; }
  .page-main.anim .si-sec.in { animation: si-rise 520ms cubic-bezier(.2,.8,.2,1) backwards; }
  @keyframes si-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .page-main.anim .si-sec:not(.in) .si-d :is(.si-n, .si-e, .si-g, .si-x) { opacity: 0; }
  .page-main.anim .si-sec.in .si-d :is(.si-n, .si-e, .si-g, .si-x) { animation: si-in 420ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay: min(calc(var(--i, 0) * 35ms + 140ms), 1100ms); }
  @keyframes si-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
  .page-main.anim .si-sec.in .si-fail { animation: si-in 380ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 30ms + 80ms); }
  .page-main.anim .si-sec.in .si-chip { animation: si-in 320ms cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--i, 0) * 40ms + 220ms); }
}
.si-sec { padding: 22px 24px 26px; border-bottom: 1px solid var(--line); }
.si-sec > h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t0); font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 14px; }
.si-sec > h3 .q { display: none; }
.si-open { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--acc); text-transform: uppercase; border: 1px solid var(--acc2); padding: 3px 8px; }
.si-two { display: grid; grid-template-columns: fit-content(62%) minmax(300px, 1fr); gap: 26px; align-items: start; }
.si-dia { display: grid; gap: 12px; width: fit-content; max-width: 100%; justify-items: start; }
.si-d.fit { max-width: 100%; height: auto; }
.si-two.wide { grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr); }
.si-txt p { margin: 0 0 12px; color: var(--t1); font-size: 13.5px; line-height: 1.5; max-width: 60ch; }
.si-tree { margin: 0 0 12px; font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--t1); white-space: pre; background: var(--bg1); border: 1px solid var(--line2); padding: 10px 14px; overflow-x: auto; }
.si-tree.flow { color: var(--t0); }
.st { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; }
.st.enforced { color: var(--ok); } .st.measured { color: var(--acc); } .st.partial { color: var(--watch); }
.si-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.si-chip { position: relative; font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg2); padding: 3px 16px 3px 8px; color: var(--t1); box-shadow: inset 0 1px 0 var(--hi); transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms, background 170ms, color 170ms; }
.si-chip:hover { color: var(--t0); border-color: var(--t1); background: var(--bg3); transform: scale(1.03); }
.si-chip .si-go { top: 2px; right: 4px; }
.si-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 10px; }
.si-btn { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); background: var(--bg2); padding: 6px 12px; color: var(--t1); box-shadow: inset 0 1px 0 var(--hi); }
.si-btn:hover { color: var(--acc); border-color: var(--acc2); }
.si-log { margin: 0 0 12px; font-family: var(--mono); font-size: 11px; line-height: 1.6; color: var(--t1); white-space: pre-wrap; background: var(--bg0); border: 1px solid var(--line2); padding: 10px 12px; min-height: 120px; }
/* diagrams: one grammar */
.si-d { width: 100%; height: auto; display: block; max-width: 1100px; }
.si-d text { font-family: var(--mono); fill: var(--t1); }
.si-d .nl { font-size: 11px; letter-spacing: 0.08em; fill: var(--t0); }
.si-d .ns { font-size: 9px; letter-spacing: 0.04em; fill: var(--t2); }
.si-d .ph { font-size: 9.5px; letter-spacing: 0.1em; fill: var(--t2); }
.si-d .xs { font-size: 9px; fill: var(--t2); }
.si-d .ok-l { font-size: 9.5px; letter-spacing: 0.06em; fill: var(--ok); }
.si-d .gl { font-size: 8.5px; letter-spacing: 0.08em; fill: var(--t2); }
.si-n rect { fill: var(--bg1); stroke: var(--line); stroke-width: 1; transition: stroke 200ms, fill 200ms; }
.si-n[data-id] { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 170ms cubic-bezier(.2,.8,.2,1); }
.si-n[data-id]:hover { transform: scale(1.03); }
.si-n[data-id]:hover rect { stroke: var(--t0); fill: var(--bg3); }
.si-n .si-go { font-size: 9px; fill: var(--acc); opacity: 0.2; transition: opacity 170ms, transform 170ms; }
.si-n[data-id]:hover .si-go { opacity: 1; transform: translate(2px, -2px); }
.si-n.hub rect { fill: var(--bg2); stroke: var(--t1); }
.si-n.phase rect { stroke: var(--acc2); }
.si-n.out rect { fill: var(--bg2); stroke: var(--acc); }
.si-n.det rect { stroke: var(--t1); }
.si-n.ok rect { stroke: rgba(111,174,134,0.6); } .si-n.ok .nl { fill: var(--ok); }
.si-n.bad rect { stroke: rgba(212,107,95,0.6); } .si-n.bad .nl { fill: var(--bad); }
.si-n.on rect, .si-n.sel rect { stroke: var(--acc); fill: var(--bg3); }
.si-n.on.bad rect { stroke: var(--bad); }
.si-n.on.soft rect { stroke: rgba(111,174,134,0.6); fill: var(--bg1); }
.si-e { fill: none; stroke: var(--t3); stroke-width: 1.1; transition: stroke 200ms; }
.si-e.on { stroke: var(--acc); marker-end: url(#si-ara); }
.si-e.bad { stroke-dasharray: 3 3; } .si-e.bad.on { stroke: var(--bad); marker-end: url(#si-arr); }
.si-e.ok.on { stroke: var(--ok); }
.si-g { cursor: pointer; transform-box: fill-box; transform-origin: center; transition: transform 170ms cubic-bezier(.2,.8,.2,1); }
.si-g:hover { transform: scale(1.1); }
.si-g rect { fill: var(--bg0); stroke: var(--t2); }
.si-g rect.in { fill: var(--t2); stroke: none; }
.si-g:hover rect, .si-g.sel rect { stroke: var(--acc); } .si-g:hover rect.in, .si-g.sel rect.in { fill: var(--acc); }
.si-x path { stroke: var(--bad); stroke-width: 1.5; fill: none; opacity: 0.55; transition: opacity 200ms; }
.si-x .xl { font-size: 9.5px; letter-spacing: 0.06em; fill: var(--bad); opacity: 0.7; }
.si-x.on path, .si-x.on .xl { opacity: 1; }
.si-bnd { stroke: var(--acc2); stroke-width: 1; stroke-dasharray: 4 4; }
.si-bnd.strong { stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: none; }
.si-tl { stroke: var(--t2); stroke-width: 1; }
.si-tick { stroke: var(--line); }
.si-pk rect { fill: var(--bg2); stroke: var(--t1); }
.si-pk.future rect { stroke: var(--bad); }
.si-pk { transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
.si-pk.stopped rect { stroke: var(--bad); stroke-dasharray: 2 2; }
@media (prefers-reduced-motion: reduce) { .si-pk { transition: none; } }
/* the fortress */
.si-fortress { display: grid; gap: 0; }
.si-stage { position: relative; border: 1px solid var(--line); background: var(--bg1); padding: 10px 24px 10px 18px; box-shadow: inset 0 1px 0 var(--hi); cursor: pointer; transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms, background 170ms; }
.si-stage:hover { transform: scale(1.025); z-index: 2; border-color: var(--t1); background: var(--bg2); }
.si-stage .nm { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; color: var(--t0); }
.si-stage .ks { font-size: 11.5px; color: var(--t1); margin-top: 3px; }
.si-stage .dot { position: absolute; left: 6px; top: 14px; width: 6px; height: 6px; background: var(--t3); transition: background 200ms; }
.si-stage.sel { border-color: var(--acc2); }
.si-stage.lit { border-color: var(--acc); background: var(--bg2); } .si-stage.lit .dot { background: var(--acc); }
.si-layer { position: relative; margin: 0 0 0 28px; padding: 8px 24px 8px 22px; border-left: 1px solid var(--line); cursor: pointer; transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms, background 170ms; transform-origin: left center; }
.si-layer:hover { transform: scale(1.02); background: var(--bg1); z-index: 2; }
.si-layer::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 1px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform 300ms; }
.si-layer .ln { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--t2); text-transform: uppercase; }
.si-layer .si-tree { margin: 4px 0 0; padding: 6px 10px; font-size: 11px; background: transparent; border: 0; color: var(--t1); }
.si-layer:hover .ln, .si-layer.sel .ln { color: var(--acc); }
.si-layer.lit::before { transform: scaleY(1); } .si-layer.lit .ln { color: var(--acc); } .si-layer.lit .si-tree { color: var(--t0); }
/* the failure surface */
.si-fails { border-top: 1px solid var(--line); }
.si-fail .row { display: grid; grid-template-columns: 36px 1fr 100px 20px; gap: 12px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--line2); cursor: pointer; }
.si-fail .row:hover { background: var(--bg1); }
.si-fail .row .n { font-family: var(--mono); font-size: 11px; color: var(--t2); }
.si-fail .row .nm { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.1em; color: var(--t0); }
.si-fail .row .pm { font-family: var(--mono); color: var(--t2); text-align: right; }
.si-fail .body { display: none; padding: 14px 6px 18px 48px; border-bottom: 1px solid var(--line2); }
.si-fail.on .body { display: block; }
.si-fail.on .row { background: var(--bg2); }
.si-fail .body .si-tree { font-size: 11px; }
/* lineage and the final model */
.si-lin { display: grid; gap: 0; }
.si-link { position: relative; border: 1px solid var(--line); background: var(--bg1); padding: 8px 24px 8px 14px; cursor: pointer; transition: transform 170ms cubic-bezier(.2,.8,.2,1), border-color 170ms, background 170ms; }
.si-link:hover { transform: scale(1.025); z-index: 2; border-color: var(--t1); background: var(--bg2); }
.si-link .nm { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--t0); }
.si-link .car { font-family: var(--mono); font-size: 10.5px; color: var(--t2); margin-top: 3px; }
.si-link.sel { border-color: var(--acc2); }
.si-link.lit { border-color: var(--acc); background: var(--bg2); } .si-link.lit .car { color: var(--t1); }
.si-goow { font-family: var(--mono); color: var(--t3); padding: 2px 14px; }
.si-final { display: grid; grid-template-columns: 1fr auto 1fr; gap: 32px; align-items: center; }
.si-model { display: grid; justify-items: center; gap: 2px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; }
.si-model span { border: 1px solid var(--line); padding: 6px 18px; color: var(--t2); background: var(--bg1); transition: color 200ms, border-color 200ms; min-width: 150px; text-align: center; }
.si-model span.lit { color: var(--t0); border-color: var(--acc); }
.si-model i { font-style: normal; color: var(--t3); }
.si-go { position: absolute; top: 5px; right: 7px; font-family: var(--mono); font-style: normal; font-size: 10px; line-height: 1; color: var(--acc); opacity: 0.2; transition: opacity 170ms, transform 170ms; pointer-events: none; }
.si-stage:hover .si-go, .si-layer:hover .si-go, .si-link:hover .si-go, .si-chip:hover .si-go { opacity: 1; transform: translate(2px, -2px); }
.si-open { transition: color 170ms, border-color 170ms; }
@media (prefers-reduced-motion: reduce) { .si-title .hint { transition: none; } .si-stage, .si-layer, .si-link, .si-chip, .si-n[data-id], .si-g, .si-go { transition: none; } .si-stage:hover, .si-layer:hover, .si-link:hover, .si-chip:hover, .si-n[data-id]:hover, .si-g:hover { transform: none; } }
/* the specification panel */
.si-spec .kk { padding-top: 6px; }
.si-eq { font-family: var(--mono); font-size: 12.5px; color: var(--t0); background: var(--bg0); border: 1px solid var(--line2); padding: 10px 12px; white-space: pre-wrap; line-height: 1.6; }
.si-mini { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--t1); display: grid; justify-items: start; gap: 2px; }
.si-mini .s { border: 1px solid var(--line); background: var(--bg2); padding: 5px 10px; color: var(--t0); }
.si-mini i { font-style: normal; color: var(--t3); padding-left: 12px; }
.si-mini .fork { display: flex; gap: 8px; margin-top: 4px; }
.si-mini .fork span { border: 1px solid var(--line2); padding: 4px 10px; }
.si-mini .fork .ok { color: var(--ok); border-color: rgba(111,174,134,0.4); } .si-mini .fork .bad { color: var(--bad); border-color: rgba(212,107,95,0.4); }
.si .page-insp .where { font-family: var(--mono); font-size: 10.5px; color: var(--t2); line-height: 1.6; }
@media (prefers-reduced-motion: no-preference) { .si-mini .s { opacity: 0; animation: rise 300ms cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 70ms); } }
@media (max-width: 1180px) { .si-two, .si-two.wide { grid-template-columns: 1fr; } .si-final { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the stock view: two interlocking planes */
.stk-top { display: grid; grid-template-columns: minmax(340px, 42fr) minmax(0, 58fr); min-height: min(calc(100dvh - var(--top)), 940px); border-bottom: 1px solid var(--line); }
/* an open record narrows the main column: the planes stack so the chart keeps its width */
.stk.open .stk-top { grid-template-columns: 1fr; min-height: 0; }
.stk.open .stk-left { border-right: 0; border-bottom: 1px solid var(--line); }
.stk.open .stk-arch .node .hov { display: none; }
.stk-left { padding: 26px 26px 30px 24px; border-right: 1px solid var(--line); display: grid; align-content: start; gap: 22px; min-width: 0; }
.stk-right { position: relative; min-width: 0; display: grid; grid-template-rows: auto auto; align-content: start; }
.stk-id .tk { font-size: 40px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.stk-id .nm { font-size: 14px; color: var(--t1); margin-top: 7px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.stk-sig .big { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 10px; flex-wrap: wrap; }
.stk-sig .big .n { font-family: var(--mono); font-size: 44px; color: var(--t0); line-height: 1; font-variant-numeric: tabular-nums; }
.stk-sig .big .st { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t1); }
.stk-sig .tree, .stk-tree { font-family: var(--mono); font-size: 12px; color: var(--t1); }
.stk-sig .tr, .stk-tree .tr { display: grid; grid-template-columns: 28px 150px minmax(0, 1fr); gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line2); align-items: baseline; }
.stk-sig .tr .b, .stk-tree .tr .b { color: var(--t3); }
.stk-sig .tr .l, .stk-tree .tr .l { text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; color: var(--t2); }
.stk-sig .tr .v, .stk-tree .tr .v { color: var(--t0); font-variant-numeric: tabular-nums; min-width: 0; }
.stk-sig .tr .v small { color: var(--t2); margin-left: 8px; font-size: 10.5px; }
.stk-sig .up, .stk-tree .up { color: var(--ok); }
.stk-assess p, .stk-hyp p { margin: 6px 0 0; font-size: 13.5px; color: var(--t1); max-width: 56ch; line-height: 1.5; }
.stk-hyp .t { color: var(--t0); } .stk-hyp .m { font-size: 13px; }
.stk-hyp .row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin-top: 8px; }
.stk-link { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--acc); border-bottom: 1px dotted var(--acc2); overflow-wrap: anywhere; }
.stk-link i { font-style: normal; margin-left: 4px; opacity: 0.55; }
.stk-link:hover { color: var(--t0); border-bottom-color: var(--t1); }
/* the market plane */
.stk-chart { position: relative; }
.stk-chart .bar, .stk-arch .bar { display: flex; align-items: center; gap: 16px; padding: 12px 24px 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); min-width: 0; flex-wrap: wrap; }
.stk-chart .bar .ttl, .stk-arch .bar .ttl { color: var(--t0); letter-spacing: 0.14em; }
.stk-chart .bar .rng { margin-left: auto; letter-spacing: 0.04em; text-transform: none; }
.stk-chart .win { display: inline-flex; border: 1px solid var(--line); }
.stk-chart .win button { padding: 3px 8px; font-family: var(--mono); font-size: 10px; color: var(--t2); border-right: 1px solid var(--line2); }
.stk-chart .win button:last-child { border-right: 0; } .stk-chart .win button.on { color: var(--t0); background: var(--bg2); } .stk-chart .win button:hover { color: var(--t0); }
.stk-chart .wrap { position: relative; height: clamp(300px, 44vh, 420px); border-bottom: 1px solid var(--line); }
.stk-chart .wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.stk-chart .note { position: absolute; z-index: 3; pointer-events: none; background: var(--bg1); border: 1px solid var(--line2); padding: 6px 9px; font-family: var(--mono); font-size: 10.5px; color: var(--t1); max-width: 300px; box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
.stk-chart .note .l1 { color: var(--t0); letter-spacing: 0.05em; } .stk-chart .note .l2 { color: var(--t2); margin-top: 2px; } .stk-chart .note .l3 { color: var(--t1); font-family: var(--sans); font-size: 12px; margin-top: 3px; white-space: normal; }
.stk-chart .note b { color: var(--acc); font-weight: 500; }
/* the intelligence plane */
.stk-arch { position: relative; padding-bottom: 22px; }
.stk-arch .bar .hint { text-transform: none; letter-spacing: 0.02em; color: var(--t3); }
.stk-arch .bar .btns, .stk-sec .btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.stk-btn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--line); padding: 4px 9px; color: var(--t1); background: var(--bg1); transition: color 170ms, border-color 170ms; }
.stk-btn:hover { color: var(--acc); border-color: var(--acc2); }
.stk-arch .nodes { position: relative; display: grid; gap: 22px; padding: 10px 24px 6px; width: min(100%, 720px); margin: 0 auto; }
.stk-arch .lvl { display: grid; grid-template-columns: 1fr; justify-items: center; }
.stk-arch .lvl.three { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.stk-arch .node { position: relative; z-index: 1; width: 100%; max-width: 300px; border: 1px solid var(--line); background: var(--bg1); padding: 8px 26px 8px 12px; cursor: pointer; outline: none; box-shadow: inset 0 1px 0 var(--hi); transition: border-color 170ms, background 170ms, transform 170ms cubic-bezier(.2,.8,.2,1); }
.stk-arch .lvl.three .node { max-width: none; }
.stk-arch .node .hd { display: grid; gap: 2px; min-width: 0; }
.stk-arch .node .nm { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--t0); }
.stk-arch .node .sub { font-family: var(--mono); font-size: 10px; color: var(--t2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stk-arch .node .go { position: absolute; top: 5px; right: 7px; font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--acc); opacity: 0.22; transition: opacity 170ms, transform 170ms; }
.stk-arch .node:hover, .stk-arch .node:focus-visible, .stk-arch .node.hover { border-color: var(--t1); background: var(--bg2); transform: scale(1.015); z-index: 3; }
.stk-arch .node:hover .go, .stk-arch .node.hover .go, .stk-arch .node:focus-visible .go { opacity: 1; transform: translate(2px, -2px); }
.stk-arch .node[aria-expanded="true"] { border-color: var(--acc2); background: var(--bg2); }
.stk-arch .node[aria-expanded="true"] .go { opacity: 0.9; transform: rotate(180deg); }
.stk-arch .node.lit { border-color: var(--acc); background: var(--bg3); }
.stk-arch .node .hov { position: absolute; left: calc(100% + 12px); top: 0; z-index: 4; width: max-content; max-width: 300px; background: var(--bg1); border: 1px solid var(--line2); padding: 7px 10px; font-family: var(--mono); font-size: 10.5px; color: var(--t1); display: grid; gap: 3px; opacity: 0; transform: translateX(-4px); pointer-events: none; transition: opacity 180ms, transform 180ms; box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
.stk-arch .node .hov span { display: flex; gap: 10px; white-space: normal; }
.stk-arch .node .hov b { color: var(--t2); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; font-size: 9.5px; min-width: 72px; flex: none; padding-top: 1px; }
.stk-arch .node:hover .hov, .stk-arch .node:focus-visible .hov { opacity: 1; transform: none; }
.stk-arch .node[aria-expanded="true"] .hov { display: none; }
.stk-arch .lvl.three .node:nth-child(3) .hov { left: auto; right: calc(100% + 12px); transform: translateX(4px); }
.stk-arch .lvl.three .node:nth-child(3):hover .hov { transform: none; }
.stk-arch .xp { overflow: hidden; margin-top: -12px; transition: max-height 340ms cubic-bezier(.2,.8,.2,1), opacity 260ms; }
.stk-arch .xp .in { border: 1px solid var(--line2); background: var(--bg1); padding: 12px 14px 14px; font-size: 13px; }
.stk-arch .xp .k { display: block; margin: 12px 0 4px; }
.stk-arch .wires { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.stk-arch .wire { fill: none; stroke: var(--t3); stroke-width: 1; transition: stroke 200ms; }
.stk-arch .wire.lit { stroke: var(--acc); stroke-width: 1.6; }
.stk-conn { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: visible; }
.stk-conn .conn { fill: none; stroke: var(--acc2); stroke-width: 1; opacity: 0; transition: stroke-dashoffset 460ms cubic-bezier(.2,.8,.2,1), opacity 160ms; }
.stk-conn .conn.on { opacity: 0.9; }
.stk-conn .conn-end { fill: var(--acc); opacity: 0; transition: opacity 200ms 260ms; }
.stk-conn .conn-end.on { opacity: 1; }
/* the dossier */
.stk-sec { padding: 22px 24px 26px; border-bottom: 1px solid var(--line); }
.stk-sec > h3 { display: flex; gap: 14px; align-items: baseline; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--t0); margin-bottom: 14px; }
.stk-sec > h3 .num { color: var(--acc); }
.stk-sec .body { max-width: 1180px; font-size: 13px; }
.stk-sec .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 1fr); gap: 28px; align-items: start; }
.stk-tree .hd { padding: 4px 0 6px; } .stk-tree .hd .n { font-family: var(--mono); font-size: 28px; color: var(--t0); }
.stk-list { list-style: none; margin: 0; padding: 0; }
.stk-list li { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 13px; align-items: baseline; }
.stk-list li:has(> a) { display: block; padding: 0; border: 0; }
.stk-list li > a { display: grid; grid-template-columns: minmax(0, 1fr) fit-content(45%); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line2); font-size: 13px; align-items: baseline; }
.stk-list li > a:hover > span:first-child { color: var(--acc); }
.stk-list .mono { font-family: var(--mono); font-size: 12px; color: var(--t1); overflow-wrap: anywhere; }
.stk-sec .parts > div, .stk-arch .parts > div { display: grid; grid-template-columns: 150px 1fr 44px; gap: 10px; align-items: center; padding: 4px 0; font-family: var(--mono); font-size: 11px; color: var(--t1); }
.parts .bx { height: 3px; background: var(--bg3); } .parts .bx i { display: block; height: 100%; background: var(--acc2); } .parts .n { text-align: right; color: var(--t0); }
.stk .kv .kk { padding-top: 7px; }
.stk .note { margin-top: 10px; }
.stk-sec .segs { max-width: 440px; height: 32px; }
.stk-sec .judg { max-width: 72ch; }
/* entrances: identity, then the decision, the chart, the reasoning */
@media (prefers-reduced-motion: no-preference) {
  .stk.intro .stk-id, .stk.intro .stk-sig, .stk.intro .stk-assess, .stk.intro .stk-hyp, .stk.intro .stk-chart, .stk.intro .stk-arch { animation: stk-in 520ms cubic-bezier(.2,.8,.2,1) backwards; }
  .stk.intro .stk-sig { animation-delay: 140ms; } .stk.intro .stk-assess { animation-delay: 260ms; } .stk.intro .stk-hyp { animation-delay: 340ms; } .stk.intro .stk-chart { animation-delay: 200ms; } .stk.intro .stk-arch { animation-delay: 460ms; }
  @keyframes stk-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) { .stk-arch .node, .stk-arch .node .go, .stk-arch .node .hov, .stk-arch .xp, .stk-conn .conn, .stk-conn .conn-end, .stk-arch .wire { transition: none; } }
/* smaller screens: the intelligence above the market, the chart keeps its height, the notes give way to the expansions */
@media (max-width: 1180px) { .stk-top { grid-template-columns: 1fr; min-height: 0; } .stk-left { border-right: 0; border-bottom: 1px solid var(--line); } .stk-chart .wrap { height: 340px; } .stk-sec .two { grid-template-columns: minmax(0, 1fr); } .stk-sec .two > * { min-width: 0; overflow-wrap: anywhere; } .stk-arch .node .hov { display: none; } }
@media (max-width: 760px) { .stk-arch .lvl.three { grid-template-columns: 1fr; } .stk-arch .nodes { padding: 10px 16px; } .stk-chart .wrap { height: 280px; } .stk-sig .tr, .stk-tree .tr { grid-template-columns: 24px 118px minmax(0, 1fr); } .stk-id .tk { font-size: 32px; } }


/* ---------------------------------------------------------------- Strategy Lab
   A strategy in words, the machine's reading of it, the run, the dossier. The
   same fine rules and mono labels as the rest; the only colour is the verdict. */
.lab .lab-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 28px 24px 18px; border-bottom: 1px solid var(--line); }
.lab .lab-term { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--t2); line-height: 1.7; text-transform: uppercase; overflow-wrap: anywhere; }
.lab .lab-term div:first-child { color: var(--t0); font-size: 13px; letter-spacing: 0.14em; }
.lab .lab-nav { display: flex; gap: 18px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; }
.lab .lab-nav a { color: var(--t2); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color 160ms, border-color 160ms; }
.lab .lab-nav a:hover { color: var(--t0); }
.lab .lab-nav a.on { color: var(--acc); border-bottom-color: var(--acc); }
.lab .lab-sec { padding: 26px 24px 30px; border-bottom: 1px solid var(--line2); }
.lab .lab-sec > h3 { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t0); }
.lab .lab-sec > h3 .num { color: var(--t3); }
.lab .lab-sec > h3 .st { margin-left: auto; font-size: 10.5px; letter-spacing: 0.08em; color: var(--t2); }
.lab .lab-sec > h3 .st.ready, .lab .lab-sec > h3 .st.strong { color: var(--ok); }
.lab .lab-sec > h3 .st.needs.choices, .lab .lab-sec > h3 .st.weak, .lab .lab-sec > h3 .st.needs_choices { color: var(--watch); }
.lab .lab-sec > h3 .st.untestable, .lab .lab-sec > h3 .st.rejected { color: var(--bad); }
.lab .lab-sec > h3 .st.running { color: var(--acc); }
.lab .lead { max-width: 72ch; margin: 0 0 16px; color: var(--t1); }
.lab .note { max-width: 78ch; margin: 12px 0 0; color: var(--t2); font-size: 12.5px; }
.lab .empty { font-family: var(--mono); font-size: 11px; color: var(--t3); letter-spacing: 0.04em; padding: 8px 0; }
.lab .dim { color: var(--t2); }
.lab .two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.lab .two.wide { grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); }
@media (max-width: 900px) { .lab .two, .lab .two.wide { grid-template-columns: 1fr; } }

/* input */
.lab textarea { display: block; width: 100%; box-sizing: border-box; min-height: 120px; resize: vertical; background: rgba(15,18,22,0.9); border: 1px solid var(--line); color: var(--t0); font-family: var(--mono); font-size: 14px; line-height: 1.6; padding: 14px 16px; box-shadow: inset 0 1px 0 var(--hi); transition: border-color 180ms; }
.lab textarea:focus { border-color: var(--acc); outline: none; }
.lab textarea::placeholder { color: var(--t3); }
.lab .lab-row { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.lab .lab-row .mt { white-space: normal; max-width: 60ch; }
.lab .lab-btn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 10px 18px; background: transparent; border: 1px solid var(--line); color: var(--t1); cursor: pointer; transition: border-color 160ms, color 160ms, background 160ms, transform 120ms; }
.lab .lab-btn:hover { color: var(--t0); border-color: var(--t2); }
.lab .lab-btn:active { transform: translateY(1px); }
.lab .lab-btn.pri { border-color: var(--acc2); color: var(--acc); }
.lab .lab-btn.pri:hover { background: var(--accw); }
.lab .lab-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.lab .lab-opt { display: inline-flex; align-items: center; gap: 8px; }
.lab .lab-opt select { background: var(--bg1); border: 1px solid var(--line); color: var(--t1); font-family: var(--mono); font-size: 11px; padding: 7px 8px; }
.lab .lab-caps { margin-top: 18px; font-size: 12.5px; color: var(--t1); }
.lab .lab-caps summary { cursor: pointer; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); }
.lab .lab-caps summary:hover { color: var(--t0); }
.lab .lab-caps .two { margin-top: 12px; }
.lab .lab-caps ul { margin: 6px 0 14px; padding-left: 16px; }
.lab .lab-caps li { margin: 3px 0; }
.lab .lab-caps .ex { list-style: none; padding: 0; }
.lab .lab-ex { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-left: 1px solid var(--line); color: var(--t1); font: inherit; padding: 4px 10px; cursor: pointer; transition: color 140ms, border-color 140ms; }
.lab .lab-ex:hover { color: var(--t0); border-left-color: var(--acc); }

/* ambiguities */
.lab .lab-amb { border-left: 1px solid var(--line); padding: 10px 14px; margin: 0 0 10px; transition: border-color 200ms; }
.lab .lab-amb.open { border-left-color: var(--watch); }
.lab .lab-amb.done { border-left-color: var(--ok); }
.lab .lab-amb .q { color: var(--t1); max-width: 90ch; }
.lab .lab-amb .tag { display: inline-block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t2); margin-right: 10px; }
.lab .lab-amb.open .tag { color: var(--watch); }
.lab .lab-amb .opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lab .lab-choice { display: inline-flex; align-items: center; gap: 10px; background: transparent; border: 1px solid var(--line); color: var(--t1); font: inherit; font-size: 12.5px; padding: 7px 12px; cursor: pointer; transition: border-color 140ms, color 140ms, background 140ms; }
.lab .lab-choice b { font-family: var(--mono); font-weight: 500; color: var(--t2); }
.lab .lab-choice:hover { border-color: var(--t2); color: var(--t0); }
.lab .lab-choice.on { border-color: var(--acc2); color: var(--t0); background: var(--accw); }
.lab .lab-choice.on b { color: var(--acc); }
.lab .lab-unsup, .lab .lab-notes { margin-top: 14px; }
.lab .lab-unsup ul, .lab .lab-notes ul { margin: 6px 0 0; padding-left: 16px; color: var(--t1); max-width: 90ch; }
.lab .lab-unsup li, .lab .lab-notes li { margin: 4px 0; }
.lab .lab-unsup pre { white-space: pre-wrap; font-size: 11px; color: var(--bad); }

/* the tree of key/values */
.lab .lab-tree { font-size: 12.5px; }
.lab .lab-tree .tr { display: grid; grid-template-columns: 26px 150px minmax(0, 1fr); gap: 10px; padding: 5px 0; align-items: baseline; border-bottom: 1px solid var(--line2); }
.lab .lab-tree .tr:last-child { border-bottom: 0; }
.lab .lab-tree .b { font-family: var(--mono); color: var(--t3); font-size: 11px; }
.lab .lab-tree .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--t2); }
.lab .lab-tree .v { color: var(--t0); overflow-wrap: anywhere; }
.lab .lab-tree .v.available { color: var(--ok); } .lab .lab-tree .v.partial { color: var(--watch); } .lab .lab-tree .v.unchecked { color: var(--t3); }
.lab .lab-tree ul { margin: 0; padding-left: 14px; }
.lab .lab-actions { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.lab .lab-actions .mt { white-space: normal; max-width: 70ch; }

/* the run */
.lab .lab-pipeline { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; }
.lab .lab-stage { display: grid; grid-template-columns: 150px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line2); color: var(--t2); transition: color 200ms; }
.lab .lab-stage .dots { border-bottom: 1px dotted var(--line); transform: translateY(-3px); }
.lab .lab-stage .stt { color: var(--t3); }
.lab .lab-stage .sm { grid-column: 1 / -1; font-family: var(--sans); font-size: 12px; letter-spacing: 0; color: var(--t2); padding-left: 0; }
.lab .lab-stage.running { color: var(--t0); }
.lab .lab-stage.running .stt { color: var(--acc); }
.lab .lab-stage.running .stt::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; background: var(--acc); vertical-align: middle; animation: lab-pulse 1.1s ease-in-out infinite; }
.lab .lab-stage.complete { color: var(--t1); }
.lab .lab-stage.complete .stt { color: var(--ok); }
.lab .lab-stage.failed .stt { color: var(--bad); }
.lab .lab-stage.skipped .stt { color: var(--t3); }
.lab .lab-stage.just { animation: lab-settle 900ms cubic-bezier(.2,.8,.2,1); }
@keyframes lab-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
@keyframes lab-settle { from { background: var(--accw); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .lab .lab-stage.running .stt::after { animation: none; } .lab .lab-stage.just { animation: none; } }

.lab .lab-map { display: block; width: 100%; max-width: 900px; height: auto; margin: 22px auto 0; font-family: var(--mono); }
.lab .lab-map rect { fill: var(--bg1); stroke: var(--line); }
.lab .lab-map text { fill: var(--t2); font-size: 11px; letter-spacing: 0.08em; }
.lab .lab-map .n.running rect { stroke: var(--acc); } .lab .lab-map .n.running text { fill: var(--t0); }
.lab .lab-map .n.complete rect { stroke: var(--t2); } .lab .lab-map .n.complete text { fill: var(--t0); }
.lab .lab-map .n.failed rect { stroke: var(--bad); } .lab .lab-map .n.failed text { fill: var(--bad); }
.lab .lab-map .n.skipped rect, .lab .lab-map .n.queued rect { stroke-dasharray: 2 3; }
.lab .lab-map .w { fill: none; stroke: var(--line); stroke-width: 1; }
.lab .lab-map .w.on { stroke: var(--t2); }
.lab .lab-map .verdict-on rect { stroke: var(--acc); fill: var(--accw); } .lab .lab-map .verdict-on text { fill: var(--t0); }
.lab .lab-map .verdict-off rect { stroke: var(--line2); } .lab .lab-map .verdict-off text { fill: var(--t3); }
.lab .lab-map .side { font-size: 10px; fill: var(--t3); letter-spacing: 0.04em; }

/* the dossier */
.lab .lab-dossier .body { color: var(--t1); }
.lab .lab-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0; border-top: 1px solid var(--line2); border-left: 1px solid var(--line2); }
.lab .lab-metrics > div { padding: 10px 12px; border-right: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.lab .lab-metrics .n { font-family: var(--mono); font-size: 16px; color: var(--t0); font-variant-numeric: tabular-nums; }
.lab .lab-metrics .kk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); margin-top: 2px; }
.lab .lab-chart { position: relative; height: 260px; border: 1px solid var(--line2); background: rgba(15,18,22,0.7); }
.lab .lab-chart.small { height: 120px; margin: 8px 0 16px; max-width: 520px; }
.lab .lab-chart canvas { display: block; width: 100%; height: 100%; }
.lab .lab-mod { border-top: 1px solid var(--line2); margin-top: 16px; padding-top: 12px; cursor: pointer; outline: none; }
.lab .lab-mod .hd { display: flex; align-items: baseline; gap: 14px; }
.lab .lab-mod .nm { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t0); }
.lab .lab-mod .vd { font-family: var(--mono); font-size: 10.5px; color: var(--t2); display: inline-flex; gap: 10px; }
.lab .lab-mod .go { margin-left: auto; font-style: normal; color: var(--t3); transition: color 160ms, transform 200ms; }
.lab .lab-mod:hover .go, .lab .lab-mod:focus-visible .go { color: var(--acc); }
.lab .lab-mod[aria-expanded="true"] .go { transform: rotate(45deg); }
.lab .lab-mod .hov { font-size: 12px; color: var(--t2); margin-top: 4px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 200ms, opacity 200ms; }
.lab .lab-mod:hover .hov, .lab .lab-mod:focus-visible .hov { max-height: 40px; opacity: 1; }
.lab .lab-mod[aria-expanded="true"] .hov { max-height: 0; opacity: 0; }
.lab .lab-mod .xp { max-height: 0; overflow: hidden; transition: max-height 360ms cubic-bezier(.2,.8,.2,1); cursor: default; }
.lab .lab-mod .xp .in { padding: 12px 0 6px; }
.lab .lab-mod .xp .k { display: block; margin: 12px 0 4px; }
.lab .lab-table { font-family: var(--mono); font-size: 11px; max-height: 420px; overflow: auto; border: 1px solid var(--line2); }
.lab .lab-table .th, .lab .lab-table .td { display: grid; grid-template-columns: 96px 96px 50px 60px 80px 70px 80px minmax(60px, 1fr); gap: 10px; padding: 5px 10px; border-bottom: 1px solid var(--line2); color: var(--t1); text-decoration: none; }
.lab .lab-table.runs .th, .lab .lab-table.runs .td { grid-template-columns: 100px 130px 80px 110px minmax(200px, 1fr); }
.lab .lab-table .th { position: sticky; top: 0; background: var(--bg1); color: var(--t2); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.lab .lab-table a.td:hover { color: var(--t0); background: var(--hi); }
.lab .lab-table .up { color: var(--ok); } .lab .lab-table .dn { color: var(--bad); }
.lab .lab-layers { border-top: 1px solid var(--line2); }
.lab .lab-layer { display: grid; grid-template-columns: 150px minmax(0, 1fr) 80px minmax(0, 1fr); gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line2); align-items: baseline; font-size: 12.5px; }
.lab .lab-layer .nm { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--t0); }
.lab .lab-layer .rule { color: var(--t2); }
.lab .lab-layer .rs { color: var(--t1); }
.lab .lab-verdict { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; padding: 10px 0 0; }
.lab .lab-verdict .big { font-family: var(--mono); font-size: clamp(38px, 5vw, 64px); letter-spacing: 0.14em; font-weight: 500; line-height: 1; color: var(--t0); }
.lab .lab-verdict.strong .big { color: var(--ok); } .lab .lab-verdict.weak .big { color: var(--watch); } .lab .lab-verdict.rejected .big { color: var(--bad); } .lab .lab-verdict.inconclusive .big { color: var(--t2); }
.lab .lab-verdict .line { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 5px 0; border-bottom: 1px solid var(--line2); font-size: 12.5px; }
.lab .lab-verdict .line .k { align-self: baseline; }
.lab .lab-verdict ul { margin: 12px 0 0; padding-left: 16px; color: var(--t1); }
.lab .lab-verdict li { margin: 4px 0; }
.lab .lab-verdict .w { font-size: 10.5px; }
@media (max-width: 900px) { .lab .lab-verdict { grid-template-columns: 1fr; } .lab .lab-layer { grid-template-columns: 1fr; gap: 4px; } .lab .lab-head { flex-direction: column; align-items: flex-start; } }
.lab .page-main.anim .lab-sec { animation: lab-rise 420ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes lab-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lab .page-main.anim .lab-sec { animation: none; } .lab .lab-mod .xp { transition: none; } }

/* the current step in an inspector process chain */
.si-mini .s.cur { border-color: rgba(126,200,185,0.55); color: var(--t0); background: var(--bg1); }

/* motion: the page arrives when it changes (never on a refresh of the same page), a set arrives as a set with a capped
   stagger, the signal word is read off the record left to right, and a pressed control answers. Reduced motion keeps a
   short fade and nothing that moves. */
@media (prefers-reduced-motion: no-preference) {
  #app.arrive > :not(.top) { animation: arrive 280ms cubic-bezier(.16,1,.3,1) both; }
  #app.arrive :is(.cc .card, .lst .cards > div, .acct .card, .pricing .plan, .cc .ready > div) { animation: arrive 340ms cubic-bezier(.16,1,.3,1) both; }
  #app.arrive :is(.cc .card, .lst .cards > div, .acct .card, .pricing .plan, .cc .ready > div):nth-child(2) { animation-delay: 40ms; }
  #app.arrive :is(.cc .card, .lst .cards > div, .acct .card, .pricing .plan, .cc .ready > div):nth-child(3) { animation-delay: 80ms; }
  #app.arrive :is(.cc .card, .lst .cards > div, .acct .card, .pricing .plan, .cc .ready > div):nth-child(4) { animation-delay: 120ms; }
  #app.arrive :is(.cc .card, .lst .cards > div, .acct .card, .pricing .plan, .cc .ready > div):nth-child(n+5) { animation-delay: 160ms; }
  #app.arrive :is(.sigbig .sigword, #stk-sigstate .sigword) { display: inline-block; animation: readoff 640ms cubic-bezier(.16,1,.3,1) 140ms both; }
  @keyframes arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  @keyframes readoff { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .btn, .plan-chip, .rail-item, .crumbs a, .lst a { transition: background-color 140ms ease-out, border-color 140ms ease-out, color 140ms ease-out, transform 100ms ease-out; }
  .btn:active:not(:disabled) { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  #app.arrive > :not(.top) { animation: arrive-fade 160ms ease-out both; }
  @keyframes arrive-fade { from { opacity: 0; } to { opacity: 1; } }
}

/* the Signals page's score signals: the simple score's placeholders, ranked, beneath the champion's */
.sig-scores { padding: 22px 24px 10px; border-top: 1px solid var(--line2); }
.sig-scores h2 { font-size: 14px; font-weight: 500; }
.sig-scores > p { color: var(--t1); font-size: 13px; margin: 4px 0 12px; max-width: 72ch; }
.sig-scores table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sig-scores th { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); text-align: left; font-weight: 400; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.sig-scores td { padding: 8px 10px; border-bottom: 1px solid var(--line2); vertical-align: middle; transition: background-color 120ms ease-out; }
.sig-scores tr[data-t] { cursor: pointer; } .sig-scores tr[data-t]:hover td { background: var(--hi); }
.sig-scores .tk { font-family: var(--mono); color: var(--t0); } .sig-scores .nm { color: var(--t2); font-size: 12px; }
.sig-scores .th { margin-top: 8px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--t3); }
@media (max-width: 760px) { .sig-scores { padding: 18px 16px 8px; } .sig-scores .tbl { overflow-x: auto; } .sig-scores table { min-width: 520px; } }

/* Help: example screens with numbered labels, their plain explanations, and a glossary */
.help { padding: var(--top) 24px 64px; max-width: 1180px; margin: 0 auto; }
.help .head { padding: 32px 0 18px; border-bottom: 1px solid var(--line); }
.help h1 { font-size: 21px; }
.help .head .sub { color: var(--t1); font-size: 13.5px; max-width: 72ch; margin-top: 6px; }
.help .htoc { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 6px; }
.help .htoc button { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t1); border: 1px solid var(--line); background: var(--bg1); padding: 6px 10px; transition: color 140ms ease-out, border-color 140ms ease-out; }
.help .htoc button:hover { color: var(--t0); border-color: var(--accl); }
.help .hsec { margin-top: 40px; scroll-margin-top: calc(var(--top) + 16px); }
.help .hsec h2 { font-size: 17px; font-weight: 500; }
.help .hlede { color: var(--t1); font-size: 13.5px; margin: 6px 0 14px; max-width: 72ch; }
.help .hshot { margin: 0; }
.help .hshot-img { position: relative; border: 1px solid var(--line); background: var(--bg1); overflow: hidden; }
.help .hshot-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.help .hm { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--acc); color: #071311; font-family: var(--mono); font-size: 11.5px; font-weight: 500; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,0.55), 0 0 0 2px var(--bg0); cursor: pointer; transition: transform 140ms ease-out, background-color 140ms ease-out; }
.help .hm.on, .help .hm:hover, .help .hm:focus-visible { transform: scale(1.18); background: #a6e0d3; }
.help .hleg { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.help .hleg li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 10px 10px; border-left: 1px solid transparent; transition: background-color 140ms ease-out, border-color 140ms ease-out; }
.help .hleg li.on { background: var(--hi); border-left-color: var(--acc); }
.help .hn { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--accl); color: var(--acc); font-family: var(--mono); font-size: 11.5px; display: grid; place-items: center; }
.help .hleg h3 { font-size: 13.5px; font-weight: 500; color: var(--t0); }
.help .hleg p { margin: 3px 0 0; color: var(--t1); font-size: 13px; line-height: 1.5; }
.help .hmore { margin-top: 14px; border-top: 1px solid var(--line2); padding-top: 12px; }
.help .hmore h3 { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t2); font-weight: 400; }
.help dl { margin: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
.help dt { font-size: 13.5px; font-weight: 500; color: var(--t0); }
.help dd { margin: 2px 0 0; color: var(--t1); font-size: 13px; line-height: 1.5; }
.help .hgloss { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.help .hfoot { margin-top: 40px; padding-top: 14px; border-top: 1px solid var(--line2); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t3); }
@media (prefers-reduced-motion: no-preference) {
  .help .hshot-img.pending .hm { opacity: 0; }
  .help .hshot-img.in .hm { animation: hm-in 320ms cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i) * 45ms); }
  .help .hshot-img.in .hm.on, .help .hshot-img.in .hm:hover { animation: none; opacity: 1; transform: scale(1.18); }
  @keyframes hm-in { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
}
@media (max-width: 900px) { .help .hleg, .help dl { grid-template-columns: minmax(0, 1fr); } .help .hgloss { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .help { padding-left: 16px; padding-right: 16px; } .help .hgloss { grid-template-columns: minmax(0, 1fr); } .help .hm { width: 20px; height: 20px; margin: -10px 0 0 -10px; font-size: 10px; } }