/* Section 12 — table enhancements and two companions.
   Scoped to .s12-* and table.s12-contents (classes added by s12.js), so other
   pages and the no-JavaScript page are unaffected. Kit tokens only; text uses
   --muted or darker (never --faint); pink marks selection, annotations, focus. */

/* ---------- Table (desktop): share bars, row buttons, selection ---------- */
.report-content table.s12-contents .s12-share{display:block;width:100%;max-width:150px;height:4px;margin:8px 0 2px;border-radius:2px;background:rgba(28,43,51,.08);overflow:hidden}
.report-content table.s12-contents .s12-share i{display:block;height:100%;border-radius:2px;background:var(--teal)}
.report-content table.s12-contents .s12-share.is-tiny i{width:2px!important;background:var(--muted)}
.report-content table.s12-contents tr.s12-total-row .s12-share i{background:var(--ink-deep)}
.report-content table.s12-contents td.s12-name-cell{position:relative;cursor:pointer;padding-right:40px}
.report-content table.s12-contents tr.s12-total-row>td{border-top:1px solid var(--line-strong)}
.report-content table.s12-contents tr.is-s12-peek>td{background:var(--teal-wash)}
.s12-row-button{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:26px;height:26px;margin:0;padding:0;border:0;border-radius:6px;background:none;cursor:pointer;transition:background-color .15s}
.s12-row-button:hover,td.s12-name-cell:hover .s12-row-button{background:var(--teal-wash)}
/* Row icon at full opacity (3:1 non-text contrast; integration 2026-10-10); hover thickens the stroke. */
.s12-row-icon{display:block;width:12px;height:12px;fill:none;stroke:var(--teal);stroke-width:1.5;opacity:1;transition:opacity .15s,fill .15s,stroke .15s}
.s12-row-button:hover .s12-row-icon,td.s12-name-cell:hover .s12-row-icon{opacity:1;stroke-width:2.1}
/* A row is marked only after the reader chooses one (table.s12-linked). */
.s12-linked .s12-row-button[aria-pressed="true"] .s12-row-icon{opacity:1;fill:var(--pink);stroke:var(--pink-deep)}
.report-content table.s12-contents.s12-linked tr.is-s12-selected>td{background:rgba(240,82,156,.07)}
.report-content table.s12-contents.s12-linked tr.is-s12-selected>td:first-child{box-shadow:inset 3px 0 0 var(--pink)}

/* ---------- Shared companion chrome ---------- */
.s12-x{margin:.4em 0 3em;padding:16px 0 0;border-top:1px solid var(--ink);min-width:0;position:relative}
.s12-x .s12-head{margin:0 0 16px}
.s12-x .s12-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;font-size:12px;line-height:1.4}
.s12-kicker-label{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.s12-badge{display:inline-flex;align-items:center;gap:7px;padding:4px 10px 4px 8px;border-radius:999px;background:var(--teal-wash);color:var(--teal-deep);font-weight:700}
.s12-badge::before{content:'';width:8px;height:8px;border-radius:50%;border:1.5px dashed var(--teal);box-sizing:border-box}
.s12-badge[data-kind="measured"]{background:var(--pink-wash);color:var(--pink-deep)}
.s12-badge[data-kind="measured"]::before{border:0;background:var(--pink)}
.s12-x .s12-title{margin:0;font-size:clamp(21px,1.9vw,26px);font-weight:400;line-height:1.2;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.s12-x .s12-sub{margin:5px 0 0;max-width:820px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.s12-x .s12-sub sup{font-size:.72em;line-height:0}
.s12-x .s12-pick-label{margin:0 0 6px;font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s12-chip{display:inline-flex;align-items:baseline;gap:6px;min-height:34px;padding:8px 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--cream-hi);color:var(--ink);font-size:13px;font-weight:700;line-height:1.15;white-space:nowrap;transition:background-color .15s,color .15s,border-color .15s}
.s12-chip:hover{border-color:var(--teal);background:#fff}
.s12-chip[aria-pressed="true"]{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--cream)}
.s12-chip-sub{font-size:11.5px;font-weight:400;opacity:.85}
.s12-x .s12-q{margin:6px 0 0;padding:1px 0 1px 14px;border-left:2px solid var(--pink);font-size:15px;line-height:1.58;color:var(--ink)}
.s12-x .s12-q-src{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}
.s12-x .s12-fields{display:flex;flex-wrap:wrap;gap:8px 30px;margin:0 0 12px}
.s12-x .s12-fields>div{min-width:0}
/* Field labels carry the table's own header text ("166.7B example (GiB)"),
   so they keep its spelling: no uppercase transform. */
.s12-x .s12-fields dt{font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.s12-x .s12-fields dd{margin:2px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums}

/* ---------- Ledger: "Where the 1,863.33 GiB goes" ---------- */
.s12-zoom{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0 0 6px}
.s12-seg{display:flex;flex-wrap:wrap;gap:6px}
.s12-slider{display:flex;align-items:center;gap:10px;font-size:10.5px;line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s12-slider input{width:min(240px,40vw);margin:0;accent-color:var(--teal);cursor:pointer}
.s12-slider input:focus-visible{outline:2.5px solid var(--pink);outline-offset:4px;border-radius:4px}
.s12-x .s12-window{margin:0 0 0 auto;font-size:13px;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums}

.s12-plot{position:relative;margin:4px 0 0}
.s12-flags{position:relative;height:28px}
.s12-flag{position:absolute;bottom:5px;transform:translateX(-100%);padding-right:8px;white-space:nowrap;font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;transition:left 0s}
.s12-flag b{font-weight:700;color:var(--ink)}
.s12-flag-file b{color:var(--pink-deep)}
.s12-ledger[data-split="no"] .s12-flag-pred,.s12-ledger[data-split="no"] .s12-mark-pred{display:none}
.s12-track{position:relative;height:64px;border-radius:10px;overflow:hidden;background:var(--cream-lo);box-shadow:inset 0 0 0 1px var(--line)}
.s12-bar{--bar:var(--ink-deep);position:absolute;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;margin:0;padding:0 14px;border:0;border-radius:0;background:var(--bar);color:var(--cream);text-align:left;overflow:hidden;box-shadow:inset -2px 0 0 var(--cream-lo);transition:background-color .2s var(--ease),color .2s var(--ease)}
.s12-bar[hidden]{display:none}
.s12-bar.is-cut{-webkit-mask-image:linear-gradient(90deg,transparent,#000 22px);mask-image:linear-gradient(90deg,transparent,#000 22px);padding-left:26px}
.s12-bar-m1{--bar:var(--teal-deep)}
.s12-bar-m2{--bar:var(--teal)}
/* The remainder is data, not a selection: a neutral hatch. */
.s12-bar-rest{background:repeating-linear-gradient(135deg,var(--muted) 0 3px,color-mix(in srgb,var(--muted) 55%,var(--cream-lo)) 3px 6px);box-shadow:none}
.s12-bar-label{font-size:13px;line-height:1.2;font-weight:700;white-space:nowrap}
.s12-bar-value{font-size:12.5px;line-height:1.2;white-space:nowrap;font-variant-numeric:tabular-nums}
.s12-bar-rest .s12-bar-label,.s12-bar-rest .s12-bar-value{padding:2px 8px;border-radius:999px;background:var(--cream-hi);color:var(--ink)}
.s12-bar[data-fit="long"] .s12-short,.s12-bar[data-fit="short"] .s12-long{display:none}
.s12-bar[data-fit="none"]>*,.s12-bar[data-fit="hair"]>*{visibility:hidden}
.s12-bar[data-fit="hair"]{min-width:2px;padding:0}
.s12-bar:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--pink),inset 0 0 0 5px var(--cream-hi)}
/* Unselected segments recede by colour, not opacity, so their labels stay
   legible (ink-soft on a pale tint of the segment's colour). */
.s12-ledger:not([data-sel="total"]):not([data-peek]) .s12-bar[aria-pressed="false"],
.s12-ledger[data-peek="main"] .s12-bar:not(.s12-bar-main),.s12-ledger[data-peek="m1"] .s12-bar:not(.s12-bar-m1),
.s12-ledger[data-peek="m2"] .s12-bar:not(.s12-bar-m2),.s12-ledger[data-peek="rest"] .s12-bar:not(.s12-bar-rest){background:color-mix(in srgb,var(--bar) 22%,var(--cream-lo));color:var(--ink-soft)}
.s12-ledger:not([data-sel="total"]):not([data-peek]) .s12-bar-rest[aria-pressed="false"],
.s12-ledger[data-peek]:not([data-peek="rest"]):not([data-peek="total"]) .s12-bar-rest{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 34%,var(--cream-lo)) 0 3px,color-mix(in srgb,var(--muted) 16%,var(--cream-lo)) 3px 6px)}
.s12-mark{position:absolute;top:22px;height:76px;width:0;border-left:1.5px solid var(--pink-deep);pointer-events:none;z-index:2}
.s12-mark-pred{border-left:1.5px dashed var(--ink)}
.s12-boundrow{position:relative;height:26px}
.s12-bound{position:absolute;top:6px;height:8px;border:1.5px solid var(--ink-soft);border-top:0;border-radius:0 0 3px 3px}
.s12-bound[hidden]{display:none}
.s12-bound-label{position:absolute;top:7px;left:50%;transform:translateX(-50%);padding:0 6px;background:var(--cream);font-size:11.5px;line-height:1.2;font-weight:700;white-space:nowrap;color:var(--ink-soft)}
.s12-axis{position:relative;height:20px;font-size:11.5px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.s12-tick{position:absolute;top:0;padding-top:7px;transform:translateX(-50%);white-space:nowrap}
.s12-tick::before{content:'';position:absolute;left:50%;top:0;height:4px;border-left:1px solid var(--line-strong)}
.s12-tick.is-end{transform:translateX(-100%)}.s12-tick.is-end::before{left:100%}
.s12-tick.is-start{transform:none}.s12-tick.is-start::before{left:0}
.s12-x .s12-axis-note{margin:3px 0 0;font-size:11.5px;line-height:1.3;text-align:right;color:var(--muted)}
.s12-ledger[data-axis="relative"] .s12-axis-note{color:var(--ink-soft);font-weight:700}
.s12-hint{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:0;border:0;background:none;font-size:13px;line-height:1.4;font-weight:700;color:var(--teal-deep);text-align:left}
/* Hidden when zoomed, but its line stays reserved so zooming never shifts the cards below. */
.s12-hint[hidden]{display:inline-flex;visibility:hidden}
.s12-hint:hover{color:var(--ink)}
.s12-hint-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 4px var(--pink-wash)}

/* The audit as one line of arithmetic */
.s12-sum{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:20px 0 0}
.s12-op{align-self:center;min-width:12px;font-size:20px;line-height:1;text-align:center;color:var(--muted)}
.s12-card{--sw:var(--ink-deep);display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:3px;min-width:0;margin:0;padding:10px 14px 11px;border:1px solid var(--line);border-radius:10px;background:var(--cream-hi);color:inherit;text-align:left;transition:border-color .15s,box-shadow .15s,background-color .15s}
.s12-card::before{content:'';width:20px;height:4px;margin:0 0 4px;border-radius:2px;background:var(--sw)}
.s12-card[data-sel="m1"]{--sw:var(--teal-deep)}.s12-card[data-sel="m2"]{--sw:var(--teal)}
.s12-card[data-sel="pred"]{--sw:linear-gradient(90deg,var(--ink-deep) 0 33%,var(--teal-deep) 33% 66%,var(--teal) 66%)}
.s12-card[data-sel="total"]{--sw:var(--ink)}
.s12-card[data-sel="rest"]{--sw:repeating-linear-gradient(135deg,var(--muted) 0 3px,color-mix(in srgb,var(--muted) 55%,var(--cream-lo)) 3px 6px)}
.s12-card:hover{border-color:var(--teal-line);background:#fff}
/* Selected = Section 1's pressed style (ink), distinct from the pink focus ring. */
.s12-card[aria-pressed="true"]{border-color:var(--ink-deep);box-shadow:inset 0 0 0 1.5px var(--ink-deep);background:#fff}
.s12-card-value{font-size:21px;line-height:1.1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.s12-card-label{font-size:12px;line-height:1.3;color:var(--muted)}
.s12-card-file{margin-left:18px;position:relative}
.s12-card-file::after{content:'';position:absolute;left:-14px;top:8px;bottom:8px;border-left:1px solid var(--line-strong)}
.s12-card-rest .s12-card-value{font-size:17px;padding-top:2px}
.s12-card-rest{max-width:220px}

.s12-detail{margin:14px 0 0;padding:16px 20px 14px;border:1px solid var(--line);border-radius:12px;background:var(--cream-hi);min-height:148px}
.s12-x .s12-detail-name{margin:0 0 12px;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.s12-x .s12-detail-name strong{font-weight:700}
.s12-x .s12-what{margin:0 0 10px;font-size:15.5px;line-height:1.55;color:var(--ink)}
.s12-what-label{display:block;margin:0 0 2px;font-size:12px;line-height:1.4;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.s12-x .s12-exact{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0;padding:10px 0 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.s12-exact-label{padding:2px 8px;border-radius:999px;background:var(--pink-wash);font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep)}
.s12-x .s12-rest{display:grid;gap:10px;margin:0 0 12px;padding:0;list-style:none}
.s12-x .s12-rest li{display:grid;grid-template-columns:minmax(150px,.9fr) 90px minmax(0,2.2fr);gap:2px 16px;margin:0;padding:0;font-size:14.5px;line-height:1.5}
.s12-rest-name{font-weight:700;color:var(--ink)}
.s12-rest-gib{color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.s12-rest-what{color:var(--ink-soft)}
.s12-rest li:last-child .s12-rest-what{grid-column:3}
.s12-x .s12-source{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* ---------- Reshard: "Same global tensors, different slices" ---------- */
.s12-pick{display:grid;gap:10px;margin:0 0 18px}
.s12-pick-group{display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;gap:6px 14px}
.s12-pick-group .s12-pick-label{margin:0}
.s12-chips{display:flex;flex-wrap:wrap;gap:6px}
/* Autoplay pill (autoplay.js): right-aligned just above the stage row. */
.s12-reshard>.ap-slot{margin:-8px 0 8px}
.s12-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 18px;border:1px solid var(--line-strong);border-radius:12px;background:var(--cream-hi);overflow:hidden}
.s12-phase{position:relative;display:flex;align-items:center;gap:10px;min-width:0;margin:0;padding:11px 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:none;color:var(--ink-soft);font-size:13.5px;line-height:1.25;font-weight:700;text-align:left;transition:background-color .2s,color .2s}
.s12-phase:first-child{border-left:0}
.s12-phase:hover{background:#fff}
.s12-phase:focus-visible{outline:none;box-shadow:inset 0 0 0 2.5px var(--pink)}
.s12-phase-n{display:grid;place-items:center;flex:none;width:23px;height:23px;border-radius:50%;border:1.5px solid var(--line-strong);font-size:12px;line-height:1;font-variant-numeric:tabular-nums}
.s12-phase.is-done{color:var(--teal-deep)}
.s12-phase.is-done .s12-phase-n{border-color:var(--teal);background:var(--teal-wash)}
.s12-phase[aria-pressed="true"]{background:var(--ink-deep);color:var(--cream)}
.s12-phase[aria-pressed="true"] .s12-phase-n{border-color:var(--pink);background:var(--pink-deep);color:#fff}

.s12-stage{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(250px,.9fr);gap:24px 34px;align-items:start}
.s12-grid{min-width:0}
.s12-grow{display:grid;grid-template-columns:78px minmax(0,1fr) minmax(0,1fr);gap:0 16px;align-items:start}
.s12-ghead{padding-bottom:4px}
.s12-gcol{min-width:0}
.s12-gcol-name{display:block;font-size:12.5px;line-height:1.3;font-weight:700;color:var(--ink)}
.s12-gcol-note{display:block;font-size:11.5px;line-height:1.35;color:var(--muted)}
.s12-ruler{position:relative;height:18px;margin-top:6px;border-bottom:1px solid var(--line-strong)}
.s12-ruler span{position:absolute;bottom:3px;font-size:10px;line-height:1;text-align:center;color:var(--muted);font-variant-numeric:tabular-nums}
.s12-ruler .s12-ruler-extra{color:var(--pink-deep);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s12-layer{padding:9px 0;border-top:1px solid rgba(28,43,51,.07)}
.s12-ghead+.s12-layer{border-top:0}
.s12-glabel{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:2px}
.s12-lname{font-size:12.5px;line-height:1.25;font-weight:700;color:var(--ink);white-space:nowrap}
.s12-lstage{font-size:10.5px;line-height:1.3;color:var(--muted)}
.s12-tensor{display:grid;grid-template-rows:22px 10px auto;row-gap:3px;min-width:0}
.s12-trk{position:relative;min-width:0}
.s12-trk-load{height:22px;transition:height .25s var(--ease)}
.s12-trk-load.is-taller{height:33px}
.s12-chunk,.s12-shard{position:absolute;top:0;bottom:0;display:grid;place-items:center;border-radius:4px;font-style:normal;font-size:10.5px;line-height:1;font-weight:700;color:var(--cream);font-variant-numeric:tabular-nums;transition:opacity .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease),color .25s var(--ease)}
.s12-chunk{background:var(--teal);cursor:default}
.s12-chunk[data-parity="1"]{background:var(--teal-deep)}
.s12-shard{background:var(--ink-deep);cursor:pointer}
.s12-shard[data-parity="1"]{background:var(--ink-soft)}
.s12-piece{position:absolute;top:1px;bottom:1px;border-radius:2px;background:var(--teal);transform-origin:50% 0;transition:transform .35s var(--ease) var(--d,0s),opacity .35s var(--ease) var(--d,0s),background-color .2s}
.s12-piece.is-follow{background:var(--pink)}
.s12-slice{position:absolute;top:0;bottom:0;border-radius:4px;background:rgba(240,82,156,.62);pointer-events:none}
.s12-chunk.is-hover{outline:2px solid var(--ink);outline-offset:1px;z-index:1}
.s12-missing,.s12-nocopy{position:absolute;inset:0;display:grid;place-items:center;font-size:10.5px;line-height:1;font-weight:700;white-space:nowrap;color:var(--pink-deep)}
.s12-nocopy.is-same{font-weight:400;color:var(--muted)}
.s12-trk-saved .s12-missing,.s12-trk-load .s12-missing{border:1.5px dashed rgba(185,44,108,.45);border-radius:4px}

/* Stages */
.s12-reshard[data-phase="save"] .s12-trk-load>*,.s12-reshard[data-phase="save"] .s12-piece,.s12-reshard[data-phase="targets"] .s12-piece{opacity:0;transform:scaleY(0)}
.s12-reshard[data-phase="save"] .s12-trk-load{box-shadow:inset 0 0 0 1px rgba(28,43,51,.08);border-radius:4px}
.s12-reshard[data-phase="targets"] .s12-shard{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.s12-reshard[data-phase="targets"] .s12-shard.is-follow{color:var(--pink-deep);box-shadow:inset 0 0 0 2px var(--pink)}
.s12-reshard:is([data-phase="copy"],[data-phase="rebuild"]) .s12-shard.is-follow{background:var(--pink-deep);color:#fff}
/* Chunks that do not feed the followed rank recede by colour (numbers stay
   legible); a model conversion draws no copy, so nothing recedes there. */
.s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk:not(.is-fed){background:color-mix(in srgb,var(--teal) 30%,var(--cream));color:var(--ink-soft)}
.s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk[data-parity="1"]:not(.is-fed){background:color-mix(in srgb,var(--teal-deep) 38%,var(--cream))}
.s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk.is-fed{box-shadow:inset 0 0 0 2px var(--pink)}
.s12-reshard[data-phase="save"] .s12-slice,.s12-reshard[data-phase="targets"] .s12-slice{display:none}
/* Model conversion: the toy draws no topology-change copy */
.s12-reshard[data-state="conversion"] .s12-shard{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.s12-reshard[data-state="conversion"] .s12-tensor.is-mismatch .s12-shard{background:repeating-linear-gradient(135deg,rgba(240,82,156,.16) 0 3px,transparent 3px 6px);color:var(--pink-deep);box-shadow:inset 0 0 0 1.5px var(--pink)}
.s12-reshard[data-state="conversion"][data-phase] .s12-shard.is-follow{background:transparent;color:var(--pink-deep);box-shadow:inset 0 0 0 2px var(--pink)}
.s12-reshard[data-state="conversion"][data-phase] .s12-tensor.is-mismatch .s12-shard.is-follow{background:repeating-linear-gradient(135deg,rgba(240,82,156,.3) 0 3px,transparent 3px 6px)}

.s12-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.s12-x .s12-quote-step{margin:0;font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pink-deep)}
.s12-follow{padding-top:14px;border-top:1px solid var(--line)}
.s12-ranks{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 10px}
.s12-rank{display:grid;place-items:center;width:32px;height:32px;margin:0;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--cream-hi);color:var(--ink);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;transition:background-color .15s,color .15s,border-color .15s}
.s12-rank:hover{border-color:var(--pink)}
.s12-rank[aria-pressed="true"]{background:var(--pink-deep);border-color:var(--pink-deep);color:#fff}
.s12-x .s12-reads-list{margin:0;padding:0;list-style:none}
.s12-x .s12-reads-list li{margin:0 0 7px;padding:0;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.s12-reads-where{display:block;font-weight:700;color:var(--ink)}
.s12-reads-from{display:block}
.s12-x .s12-reads-none{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.s12-main{min-width:0}
.s12-descr{padding:14px 16px 12px;border:1px solid var(--line);border-radius:12px;background:var(--cream-hi)}
.s12-x .s12-fields-descr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 18px;margin:0}
.s12-x .s12-fields-descr dd{font-size:13.5px;line-height:1.4}
.s12-x .s12-fields-descr>div:last-child{grid-column:span 2}
.s12-side .s12-fields-descr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.s12-x .s12-descr-note{margin:8px 0 0;font-size:12px;line-height:1.45;color:var(--muted)}

.s12-x .s12-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--line);list-style:none;font-size:12px;line-height:1.4;color:var(--muted)}
.s12-x .s12-legend li{display:inline-flex;align-items:center;gap:7px;margin:0;padding:0}
.s12-key{display:inline-block;flex:none;width:16px;height:11px;border-radius:3px}
.s12-key-saved{background:var(--teal)}
.s12-key-piece{height:6px;background:var(--teal)}
.s12-key-load{background:var(--ink-deep)}
.s12-key-follow{background:var(--pink-deep)}

.s12-status{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.7fr);gap:4px 30px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.s12-x .s12-status-title{display:flex;align-items:center;gap:10px;margin:0;font-size:21px;line-height:1.2;letter-spacing:-.015em;color:var(--ink)}
.s12-status-dot{flex:none;width:11px;height:11px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px var(--teal-wash)}
.s12-reshard[data-state="conversion"] .s12-status-dot{background:var(--pink);box-shadow:0 0 0 4px var(--pink-wash)}
.s12-x .s12-status-stats{grid-column:1;margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted)}
.s12-status .s12-q,.s12-status .s12-q-src{grid-column:2}
.s12-status .s12-q:first-of-type{grid-row:1/span 2;margin-top:0}
.s12-status .s12-q+.s12-q{grid-row:auto}
.s12-x .s12-q .s12-q-on{background:linear-gradient(transparent 58%,rgba(240,82,156,.2) 58%);color:var(--ink-deep)}
.s12-x .s12-q.has-on span:not(.s12-q-on){color:var(--muted)}

.s12-derived{margin:16px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.s12-derived-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px 30px}
.s12-x .s12-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.s12-x .s12-pill{margin:0;padding:5px 11px;border-radius:999px;font-size:13px;line-height:1.3;font-weight:700;transition:background-color .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.s12-derived-col[data-kind="saved"] .s12-pill{background:var(--teal);color:var(--cream)}
.s12-derived-col[data-kind="derived"] .s12-pill{border:1.5px dashed var(--line-strong);color:var(--muted)}
.s12-reshard[data-phase="rebuild"][data-state="topology"] .s12-derived-col[data-kind="derived"] .s12-pill{border:1.5px solid var(--ink-deep);background:var(--ink-deep);color:var(--cream)}
.s12-derived .s12-q{max-width:760px;margin-top:12px}

/* ---------- Narrow desktop and tablet ---------- */
@media(max-width:1279px){
 /* One column: the stage quote directly under the stage buttons, then the
    rank picker, the grid with its key and the stored/derived strip, the
    rank's reads and the chunk descriptor. */
 .s12-stage{display:flex;flex-direction:column;align-items:stretch;gap:0}
 .s12-main,.s12-side,.s12-follow{display:contents}
 .s12-quote{order:0;margin:0 0 16px}
 .s12-follow>.s12-pick-label{order:1;margin-bottom:6px}
 .s12-ranks{order:2;margin-bottom:14px}
 .s12-grid{order:3}
 .s12-legend{order:4}
 .s12-derived{order:4}
 .s12-reads{order:5;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
 .s12-descr{order:7;margin-top:16px}
 .s12-x .s12-fields-descr{grid-template-columns:repeat(3,minmax(0,1fr))}
 .s12-card-rest{max-width:none}
}

@media(max-width:1023px){
 .s12-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .s12-op{display:none}
 .s12-card-file{margin-left:0}
 .s12-card-file::after{display:none}
 .s12-card-rest{max-width:none}
}

/* ---------- Phone: the table as labelled cards; companions stack ---------- */
@media(max-width:700px){
 .report-content .table-scroll table.s12-contents{min-width:0}
 .report-content table.s12-contents,.report-content table.s12-contents tbody,.report-content table.s12-contents tr,.report-content table.s12-contents td{display:block;width:auto}
 .report-content table.s12-contents colgroup{display:none}
 .report-content table.s12-contents thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .report-content table.s12-contents tbody tr{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) minmax(0,1.2fr);gap:0 12px;padding:14px 16px 15px;border-bottom:1px solid var(--line)}
 .report-content table.s12-contents tbody tr:last-child{border-bottom:0}
 .report-content table.s12-contents tbody td{padding:0;border:0;font-size:15px;line-height:1.5}
 .report-content table.s12-contents tbody td:first-child{grid-column:1/-1;grid-row:1;margin:0 0 2px;padding-right:36px;font-size:17px;font-weight:700}
 /* Fixed columns, so a hidden empty cell never shifts the values left. */
 .report-content table.s12-contents tbody td:nth-child(2){grid-column:1}
 .report-content table.s12-contents tbody td:nth-child(3){grid-column:2}
 .report-content table.s12-contents tbody td:nth-child(4){grid-column:3}
 .report-content table.s12-contents tbody td:nth-child(n+2):nth-child(-n+4){grid-row:2}
 .report-content table.s12-contents tbody td:nth-child(5){grid-column:1/-1;grid-row:3}
 .report-content table.s12-contents td[data-label]:empty{display:none}
 .report-content table.s12-contents td[data-label]:not(:first-child)::before{content:attr(data-label);content:attr(data-label) / "";display:flex;align-items:flex-end;min-height:2.8em;margin:8px 0 3px;font-size:11.5px;line-height:1.4;font-weight:700;letter-spacing:.02em;color:var(--teal-deep)}
 .report-content table.s12-contents td[data-label]:nth-child(5)::before{min-height:0;margin-top:10px}
 .s12-row-button{top:-3px;right:-6px}
 .report-content table.s12-contents tr.s12-total-row{background:var(--cream-lo)}
 .report-content table.s12-contents tr.s12-total-row>td{border-top:0}
 .report-content table.s12-contents tbody tr:hover>*{background:transparent}
 .report-content table.s12-contents.s12-linked tr.is-s12-selected{background:rgba(240,82,156,.07);box-shadow:inset 3px 0 0 var(--pink)}
 .report-content table.s12-contents.s12-linked tr.is-s12-selected>td,.report-content table.s12-contents.s12-linked tr.is-s12-selected>td:first-child{background:transparent;box-shadow:none}
 .table-sticky:has(table.s12-contents){display:none!important}
 .table-frame:has(table.s12-contents) .table-tools .table-hint{display:none}

 .s12-x{margin-bottom:2.4em}
 .s12-zoom{gap:10px 12px}
 .s12-slider{flex:1 1 100%}
 .s12-slider input{width:auto;flex:1}
 .s12-x .s12-window{margin:0;flex:1 1 100%}
 .s12-track{height:56px}
 .s12-mark{height:68px}
 .s12-bar{padding:0 9px}
 .s12-bar-label{font-size:12px}
 .s12-bar-value{font-size:11.5px}
 .s12-flag{font-size:11.5px}
 .s12-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .s12-op{display:none}
 .s12-card{padding:9px 10px 10px}
 .s12-card-value{font-size:17px}
 .s12-card-label{font-size:11.5px}
 .s12-card-file{margin-left:0}
 .s12-card-file::after{display:none}
 .s12-card-rest .s12-card-value{font-size:14.5px}
 .s12-detail{padding:14px 14px 12px}
 .s12-x .s12-detail-name{font-size:18px}
 .s12-x .s12-rest li{grid-template-columns:minmax(0,1fr) auto;gap:0 10px}
 .s12-rest-what,.s12-rest li:last-child .s12-rest-what{grid-column:1/-1}

 .s12-pick-group{grid-template-columns:minmax(0,1fr);gap:6px}
 .s12-chip{min-height:32px;padding:7px 11px;font-size:12.5px}
 .s12-phases{grid-template-columns:repeat(2,minmax(0,1fr))}
 .s12-phase{padding:10px 11px;font-size:12.5px;gap:8px}
 .s12-phase:nth-child(3){border-left:0}
 .s12-phase:nth-child(n+3){border-top:1px solid var(--line)}
 .s12-grow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 10px}
 .s12-ghead>.s12-glabel{display:none}
 .s12-layer>.s12-glabel{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0 0 5px;padding:0}
 .s12-lname{font-size:12px}
 .s12-lstage{font-size:11px}
 .s12-gcol-name{font-size:11.5px}
 .s12-gcol-note{font-size:10.5px}
 /* Labels stay at 10px or more; chunks too thin for a number drop it (the
    ruler names the experts). */
 .s12-ruler span,.s12-ruler .s12-ruler-extra{font-size:10px}
 .s12-chunk,.s12-shard{font-size:10px;border-radius:3px}
 .s12-chunk[data-narrow],.s12-shard[data-narrow]{font-size:0}
 .s12-missing,.s12-nocopy{font-size:10px;white-space:normal;text-align:center;line-height:1.1}
 .s12-status{grid-template-columns:minmax(0,1fr)}
 .s12-status .s12-q,.s12-status .s12-q-src,.s12-x .s12-status-stats{grid-column:1}
 .s12-status .s12-q:first-of-type{grid-row:auto;margin-top:10px}
 .s12-derived-cols{grid-template-columns:minmax(0,1fr)}
 .s12-x .s12-fields-descr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .s12-x .s12-fields-descr>div:last-child{grid-column:1/-1}
 .s12-descr{padding:12px 12px 10px}
}

@media(prefers-reduced-motion:reduce){
 .s12-bar,.s12-chip,.s12-card,.s12-phase,.s12-chunk,.s12-shard,.s12-piece,.s12-trk-load,.s12-pill,.s12-rank,.s12-row-button,.s12-row-icon{transition:none}
}
@media print{
 .s12-x{display:none}
 .report-content table.s12-contents .s12-share,.s12-row-button{display:none}
}

/* ---------- Forced colours: drawn marks keep their meaning in system colours ---------- */
@media(forced-colors:active){
 .s12-track,.s12-bar,.s12-chunk,.s12-shard,.s12-piece,.s12-slice,.s12-key,.s12-card::before,.s12-share,.s12-share i,.s12-status-dot,.s12-hint-dot,.s12-row-icon{forced-color-adjust:none}
 /* Size audit bar */
 .s12-track{background:Canvas;box-shadow:inset 0 0 0 1px CanvasText}
 .s12-bar,.s12-bar-m1,.s12-bar-m2{background:CanvasText;color:Canvas;box-shadow:inset -2px 0 0 Canvas}
 .s12-bar-rest{background:repeating-linear-gradient(135deg,CanvasText 0 2px,Canvas 2px 6px);box-shadow:none}
 .s12-bar-rest .s12-bar-label,.s12-bar-rest .s12-bar-value{background:Canvas;color:CanvasText;border:1px solid CanvasText}
 .s12-ledger:not([data-sel="total"]):not([data-peek]) .s12-bar[aria-pressed="false"],
 .s12-ledger[data-peek="main"] .s12-bar:not(.s12-bar-main),.s12-ledger[data-peek="m1"] .s12-bar:not(.s12-bar-m1),
 .s12-ledger[data-peek="m2"] .s12-bar:not(.s12-bar-m2),.s12-ledger[data-peek="rest"] .s12-bar:not(.s12-bar-rest){background:GrayText;color:Canvas}
 .s12-ledger:not([data-sel="total"]):not([data-peek]) .s12-bar-rest[aria-pressed="false"]{background:repeating-linear-gradient(135deg,GrayText 0 2px,Canvas 2px 6px)}
 .s12-bar:focus-visible{box-shadow:inset 0 0 0 3px Highlight,inset 0 0 0 5px Canvas}
 .s12-hint-dot{background:Highlight;box-shadow:none}
 /* Cards and table */
 .s12-card::before{background:CanvasText}
 .s12-card[data-sel="rest"]::before{background:repeating-linear-gradient(135deg,CanvasText 0 2px,Canvas 2px 4px)}
 .report-content table.s12-contents .s12-share{background:Canvas;box-shadow:inset 0 0 0 1px GrayText}
 .report-content table.s12-contents .s12-share i,.report-content table.s12-contents .s12-share.is-tiny i,.report-content table.s12-contents tr.s12-total-row .s12-share i{background:CanvasText}
 .s12-row-icon{stroke:ButtonText;opacity:1}
 .s12-linked .s12-row-button[aria-pressed="true"] .s12-row-icon{fill:Highlight;stroke:Highlight}
 .report-content table.s12-contents.s12-linked tr.is-s12-selected>td:first-child{outline:2px solid Highlight;outline-offset:-2px}
 /* Toy grid */
 .s12-chunk,.s12-chunk[data-parity="1"]{background:CanvasText;color:Canvas}
 .s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk:not(.is-fed),
 .s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk[data-parity="1"]:not(.is-fed){background:GrayText;color:Canvas}
 .s12-reshard[data-state="topology"]:is([data-phase="copy"],[data-phase="rebuild"]) .s12-chunk.is-fed{background:CanvasText;box-shadow:inset 0 0 0 2px Highlight}
 .s12-shard,.s12-shard[data-parity="1"],.s12-reshard[data-phase="targets"] .s12-shard,.s12-reshard[data-state="conversion"] .s12-shard{background:Canvas;color:CanvasText;box-shadow:inset 0 0 0 1.5px CanvasText}
 .s12-reshard[data-state="conversion"] .s12-tensor.is-mismatch .s12-shard{background:repeating-linear-gradient(135deg,GrayText 0 1.5px,Canvas 1.5px 5px);color:CanvasText;box-shadow:inset 0 0 0 1.5px CanvasText}
 .s12-reshard[data-state="conversion"][data-phase] .s12-tensor.is-mismatch .s12-shard.is-follow{background:repeating-linear-gradient(135deg,GrayText 0 1.5px,Canvas 1.5px 5px);color:CanvasText;box-shadow:inset 0 0 0 3px Highlight}
 .s12-piece{background:GrayText}
 .s12-piece.is-follow,.s12-slice,.s12-reshard:is([data-phase="copy"],[data-phase="rebuild"]) .s12-shard.is-follow{background:Highlight;color:HighlightText;box-shadow:none}
 .s12-reshard[data-phase="targets"] .s12-shard.is-follow,.s12-reshard[data-state="conversion"][data-phase] .s12-shard.is-follow{background:Canvas;color:CanvasText;box-shadow:inset 0 0 0 3px Highlight}
 .s12-key-saved{background:CanvasText}
 .s12-key-piece{background:GrayText}
 .s12-key-load{background:Canvas;box-shadow:inset 0 0 0 1.5px CanvasText}
 .s12-key-follow{background:Highlight}
 .s12-status-dot{background:CanvasText;box-shadow:none}
 .s12-reshard[data-state="conversion"] .s12-status-dot{background:Highlight}
 .s12-x .s12-q .s12-q-on{background:none;text-decoration:underline 2px;text-underline-offset:3px}
 .s12-reshard[data-phase="rebuild"][data-state="topology"] .s12-derived-col[data-kind="derived"] .s12-pill{border-style:solid;border-width:2.5px}
 .s12-derived-col[data-kind="saved"] .s12-pill{border:1.5px solid CanvasText}
 /* Pressed controls */
 :is(.s12-chip,.s12-card,.s12-phase,.s12-rank)[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:2px}
 .s12-phase[aria-pressed="true"]{outline-offset:-4px}
}