/* Section 18 — two companions to the prose (classes added by s18.js).
   Scoped to .s18-*, so other pages and the no-JavaScript page are unaffected.
   Kit tokens only; dense/baseline is the kit's grey dashed (#77828a), sparse
   (MoE) training is teal, pink marks only the horizon scrub point, the
   reported crossover annotation and focus. The four shard hues are local to
   the conceptual toy. Evidence badges use the kit's .figure-frame-badge. */

/* ---------- Shared companion chrome (matches the Section 3 companion) ---------- */
.s18-x{--h0:#2d5a5e;--h1:#79a8a2;--h2:#c4913f;--h3:#7b6b9c;--n0:#e2d9cc;--n1:#d2c8ba;--n2:#c1b7a9;--n3:#d9d0c3;
  --dense:#77828a;--dense-wash:rgba(119,130,138,.13);
  container-type:inline-size;margin:.6em 0 3em;padding:16px 0 0;border-top:1px solid var(--ink);min-width:0;position:relative}
.s18-x .s18-head{margin:0 0 14px}
.s18-x .s18-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px;font-size:12px;line-height:1.4}
.s18-kicker-label{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.s18-x .s18-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}
.s18-x .s18-sub{margin:6px 0 0;max-width:820px;font-size:13.5px;line-height:1.55;color:var(--muted)}
.s18-chip{display:inline-flex;align-items:baseline;gap:6px;min-height:34px;margin:0;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}
.s18-chip:hover{border-color:var(--teal);background:#fff}
.s18-chip[aria-pressed="true"]{background:var(--ink-deep);border-color:var(--ink-deep);color:var(--cream)}
.s18-chip-sub{font-size:11.5px;font-weight:400;opacity:.78}
.s18-x .s18-quotes{margin:14px 0 0;padding:14px 18px 12px;border:1px solid var(--line);border-radius:12px;background:var(--cream-hi)}
.s18-x .s18-quotes-label{margin:0;font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s18-x .s18-quotes-body{display:grid;gap:12px;margin:8px 0 0}
/* The phase quotes are stacked in one cell; the tallest sets the height. */
.s18-x .s18-quotes-body.is-stacked>*{grid-area:1/1}
.s18-x .s18-quotes-body.is-stacked>.is-off{visibility:hidden}
.s18-x .s18-quote{margin:0}
.s18-x .s18-q{margin:0;padding:1px 0 1px 14px;border-left:2px solid var(--pink);font-size:15px;line-height:1.6;color:var(--ink)}
.s18-x .s18-q-src{margin:5px 0 0 16px;font-size:12px;line-height:1.4;color:var(--muted)}
.s18-x .s18-source{margin:12px 0 0;max-width:860px;font-size:12.5px;line-height:1.55;color:var(--muted)}
.s18-x .s18-fields{display:grid;gap:10px;margin:0}
.s18-x .s18-fields dt{font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s18-x .s18-fields dd{margin:2px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink)}

/* =================== 1. How long the upcycled head start lasted =================== */
.s18-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin:0}
.s18-seg,.s18-presets{display:flex;flex-wrap:wrap;gap:6px}
.s18-presets{margin-left:auto}
/* The autoplay pill (autoplay.css) sits right-aligned between the controls and the plot. */
.s18-horizon .ap-slot{margin:10px 0 0}
.s18-slider{display:flex;align-items:center;gap:10px;margin:0;font-size:10.5px;line-height:1;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* The Section 1 range control: thin teal-to-sand track, teal thumb. */
.s18-slider input[type=range]{-webkit-appearance:none;appearance:none;width:min(190px,38vw);height:28px;margin:0;background:transparent;cursor:pointer}
.s18-slider input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s18-slider input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--teal-line),var(--sand))}
.s18-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-8px;border-radius:50%;background:var(--teal);border:3px solid var(--cream-hi);box-shadow:0 1px 4px rgba(10,43,53,.3)}
.s18-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--teal);border:3px solid var(--cream-hi);box-shadow:0 1px 4px rgba(10,43,53,.3)}
.s18-slider input[type=range]:focus-visible{outline:2.5px solid var(--pink);outline-offset:2px;border-radius:6px}
.s18-slider-value{min-width:3.4em;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}

.s18-hz-plot{--lab:200px;--flag:30px;--handle:32px;display:grid;grid-template-columns:var(--lab) minmax(0,1fr);grid-template-rows:var(--flag) 60px 60px 22px var(--handle);column-gap:18px;position:relative;margin:18px 0 0;user-select:none;-webkit-user-select:none}
.s18-hz-flags{grid-area:1/2;position:relative}
.s18-hz-name-up{grid-area:2/1}.s18-hz-track-up{grid-area:2/2}
.s18-hz-name-scratch{grid-area:3/1}.s18-hz-track-scratch{grid-area:3/2}
.s18-hz-axisname{grid-area:4/1/6/2;align-self:start;padding-top:6px;font-size:10.5px;line-height:1.3;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:right}
.s18-hz-axis{grid-area:4/2;position:relative;font-size:11.5px;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums}
.s18-hz-over{grid-area:1/2/6/3;position:relative;pointer-events:none}
.s18-hz-name{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;padding-right:44px;text-align:right}
.s18-hz-name b{font-size:14px;line-height:1.25;color:var(--ink)}
.s18-hz-name span{font-size:12px;line-height:1.35;color:var(--muted)}
.s18-hz-name .s18-short{display:none}
.s18-hz-track{position:relative;align-self:center;height:32px}
.s18-hz-future{position:absolute;inset:0;border:1px dashed var(--line-strong);border-radius:7px}
/* Both runs train the sparse model: teal. Upcycled is the lighter teal, with
   its reported lead in teal-deep; from scratch is solid teal. */
.s18-hz-fill{position:absolute;left:0;top:0;bottom:0;border-radius:7px 0 0 7px;background:var(--teal)}
.s18-hz-track-up .s18-hz-fill{background:rgba(64,117,121,.3);box-shadow:inset 0 0 0 1px var(--teal-line)}
.s18-hz-lead{font-style:normal;position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;padding:0;border-radius:7px 0 0 7px;background:var(--teal-deep);overflow:hidden}
.s18-hz-lead[hidden]{display:none}
.s18-hz-lead-text{padding-left:10px;font-size:11.5px;line-height:1;font-weight:700;color:var(--cream);white-space:nowrap}
.s18-hz-lead.is-narrow .s18-hz-lead-text{visibility:hidden}
/* The dense prefix: a grey dashed stub before token 0, off the axis and not to scale. */
.s18-hz-stub{position:absolute;right:calc(100% + 6px);top:0;bottom:0;width:30px;box-sizing:border-box;display:grid;place-items:center;border:1.5px dashed var(--dense);border-radius:6px;background:var(--dense-wash);font-size:10.5px;line-height:1;font-weight:700;color:var(--ink-soft)}
.s18-hz-stub::after{content:'';position:absolute;right:-6px;top:7px;bottom:7px;border-left:1.5px solid var(--dense);transform:skewX(-14deg)}
.s18-hz-band{position:absolute;top:var(--flag);bottom:calc(var(--handle) + 22px);background:linear-gradient(90deg,transparent,rgba(240,82,156,.2) 35%,rgba(240,82,156,.2) 65%,transparent);min-width:6px}
.s18-horizon[data-axis="whole"] .s18-hz-band{margin-left:-6px;padding-right:12px;box-sizing:content-box}
.s18-hz-mark{position:absolute;top:calc(var(--flag) - 6px);bottom:calc(var(--handle) + 18px);width:0;border-left:1.5px dashed var(--pink-deep);opacity:.75}
.s18-hz-mark-recipe{border-left:1.5px solid var(--ink);opacity:1;transform:translateX(-1.5px)}
.s18-hz-mark[hidden]{display:none}
.s18-horizon[data-axis="whole"] .s18-hz-mark-op{display:none}
.s18-flag{position:absolute;bottom:6px;white-space:nowrap;font-size:12px;line-height:1.3;color:var(--muted);font-variant-numeric:tabular-nums;transform:translateX(-8px)}
.s18-flag b{font-weight:700;color:var(--pink-deep)}
.s18-flag[data-align="end"]{transform:translateX(-100%)}
.s18-flag-recipe b{color:var(--ink)}
.s18-flag .s18-short{display:none}
.s18-flag-cu{transform:translateX(calc(-100% - 8px))!important}
.s18-flag-op{transform:translateX(8px)}
.s18-tick{position:absolute;top:0;padding-top:7px;transform:translateX(-50%);white-space:nowrap}
.s18-tick::before{content:'';position:absolute;left:50%;top:0;height:4px;border-left:1px solid var(--line-strong)}
.s18-tick.is-end{transform:translateX(-100%)}.s18-tick.is-end::before{left:100%}
.s18-tick.is-start{transform:none}.s18-tick.is-start::before{left:0}
.s18-tick.is-near{visibility:hidden}
.s18-hz-hit{position:absolute;left:-10px;right:-10px;top:var(--flag);bottom:0;pointer-events:auto;cursor:ew-resize;touch-action:pan-y}
.s18-hz-cursor{position:absolute;top:calc(var(--flag) - 4px);bottom:0;width:0;transition:left .18s var(--ease)}
.s18-hz-cursor-line{position:absolute;left:-1px;top:0;bottom:calc(var(--handle) - 6px);border-left:2px solid var(--pink-deep)}
.s18-hz-cursor-knob{position:absolute;left:-8px;bottom:5px;width:16px;height:16px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px var(--cream),0 1px 4px rgba(10,43,53,.3)}
.s18-hz-cursor-label{position:absolute;left:14px;bottom:4px;padding:2px 8px;border-radius:999px;background:var(--ink-deep);color:var(--cream);font-size:12px;line-height:1.4;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.s18-hz-cursor.is-right .s18-hz-cursor-label{left:auto;right:14px}
.s18-hz-cursor.is-off .s18-hz-cursor-line{border-left-style:dashed}
.s18-hz-fill,.s18-hz-lead{transition:width .18s var(--ease)}
/* The autoplay sweep (and the wait before it) and a drag move the marks directly. */
.s18-horizon.is-intro .s18-hz-cursor,.s18-horizon.is-dragging .s18-hz-cursor,
.s18-horizon.is-intro .s18-hz-fill,.s18-horizon.is-intro .s18-hz-lead,
.s18-horizon.is-dragging .s18-hz-fill,.s18-horizon.is-dragging .s18-hz-lead{transition:none}

.s18-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--line);font-size:12px;line-height:1.4;color:var(--muted)}
.s18-key{display:inline-flex;align-items:center;gap:7px}
.s18-key i{flex:none;width:18px;height:10px;border-radius:3px;box-sizing:border-box}
.s18-key-lead{background:var(--teal-deep)}
.s18-key-band{background:linear-gradient(90deg,rgba(240,82,156,.08),rgba(240,82,156,.3),rgba(240,82,156,.08));box-shadow:inset 1.5px 0 0 var(--pink-deep)}
.s18-key-fill{background:linear-gradient(90deg,rgba(64,117,121,.3) 50%,var(--teal) 50%)}
.s18-key-stub{border:1.5px dashed var(--dense);background:var(--dense-wash)}

.s18-reads{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0}
.s18-read{padding:11px 15px 12px;border:1px solid var(--line);border-radius:10px;background:var(--cream-hi);min-width:0}
.s18-x .s18-read p{margin:0}
.s18-x .s18-read-label{font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s18-x .s18-read-value{margin-top:3px!important;font-size:24px;line-height:1.15;letter-spacing:-.015em;color:var(--ink);font-variant-numeric:tabular-nums}
.s18-x .s18-read-note{margin-top:2px!important;font-size:12.5px;line-height:1.4;color:var(--muted)}

/* =================== 2. Where each expert's starting weights come from =================== */
.s18-modes{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.s18-mode-group{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.s18-mode-label{margin-right:4px;font-size:10.5px;line-height:1.2;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

.s18-cv-stage{display:grid;grid-template-columns:minmax(150px,.72fr) 46px minmax(0,1.55fr) minmax(250px,1.05fr);gap:0;align-items:start;margin:16px 0 0}
.s18-cv-card{position:relative;min-width:0;padding:14px 14px 13px;border:1px solid var(--line);border-radius:12px;background:var(--cream-hi)}
.s18-x .s18-cv-card-title{margin:0;font-size:13.5px;line-height:1.3;font-weight:700;color:var(--ink)}
.s18-x .s18-cv-card-sub{margin:0 0 12px;font-size:12px;line-height:1.35;color:var(--muted)}
.s18-cv-block{position:relative;margin:0 0 8px;padding:8px 10px;border-radius:8px;font-size:12.5px;line-height:1.25;font-weight:700}
.s18-cv-attn{background:var(--ink-soft);color:var(--cream)}
.s18-cv-mlp{background:var(--cream-lo);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.s18-cv-block-name{display:block}
.s18-cv-shards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin:7px 0 5px}
.s18-cv-shard{display:grid;place-items:center;height:38px;border-radius:4px;transition:opacity .2s,box-shadow .2s,transform .2s var(--ease)}
.s18-cv-shard-n{font-size:12px;font-weight:700}
.s18-cv-shard.is-lit{box-shadow:0 0 0 2px var(--cream-hi),0 0 0 4px var(--pink);transform:translateY(-1px)}
.s18-cv-shard.is-dim{opacity:.28}
.s18-cv-mlp-note{display:block;font-size:11px;font-weight:400;color:var(--muted)}
.s18-x .s18-cv-src-empty{margin:4px 0 0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.s18-cv-src-empty[hidden]{display:none}
.s18-convert.is-scratch .s18-cv-src .s18-cv-block{opacity:.25;filter:grayscale(1)}
.s18-convert.is-scratch .s18-cv-arrow{opacity:.25}

/* Shard hues and new-initialization greys (SVG rects and blocks) */
.s18-x .c-h0{fill:var(--h0);background:var(--h0);color:#fff}
.s18-x .c-h1{fill:var(--h1);background:var(--h1);color:var(--ink-deep)}
.s18-x .c-h2{fill:var(--h2);background:var(--h2);color:var(--ink-deep)}
.s18-x .c-h3{fill:var(--h3);background:var(--h3);color:#fff}
.s18-x .c-n0{fill:var(--n0)}.s18-x .c-n1{fill:var(--n1)}.s18-x .c-n2{fill:var(--n2)}.s18-x .c-n3{fill:var(--n3)}

.s18-cv-left{min-width:0}
.s18-x .s18-cv-key{display:grid;gap:7px;margin:14px 0 0;padding:0 2px;list-style:none;font-size:12px;line-height:1.35;color:var(--muted)}
.s18-cv-key li{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:8px;margin:0}
.s18-cv-key .s18-cv-key-sw{display:block;width:34px;height:12px;border-radius:2px}
.s18-cv-key-box{display:block;width:34px;height:14px;border-radius:4px;background:#fff;border:1px solid var(--line)}
.s18-cv-key-box.is-focus{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.s18-cv-key-box.is-sibling{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.s18-cv-arrow{position:relative;display:grid;place-items:center;height:40px;margin-top:132px;transition:opacity .25s}
.s18-cv-arrow i{display:block;width:26px;height:2px;background:var(--ink);position:relative}
.s18-cv-arrow i::after{content:'';position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:7px solid var(--ink);border-right:0}

.s18-cv-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:8px;margin:0 0 4px}
.s18-cv-top .s18-cv-block{margin:0;overflow:hidden}
.s18-cv-state{display:block;margin-top:2px;font-size:11px;font-weight:400;opacity:.8}
.s18-cv-dattn.is-new{background:var(--cream-lo);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.s18-cv-dattn .s18-strip{display:block;width:100%;height:8px;margin-top:6px;border-radius:2px}
.s18-cv-router{background:var(--cream-lo);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.s18-cv-router-rows{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;margin-top:6px}
.s18-cv-rrow{position:relative;display:block;padding-top:4px;border-radius:2px;transition:box-shadow .2s}
.s18-cv-rrow::before{content:'';position:absolute;left:0;right:0;top:0;height:2.5px;border-radius:2px;background:transparent}
.s18-cv-rrow.g-h0::before{background:var(--h0)}.s18-cv-rrow.g-h1::before{background:var(--h1)}.s18-cv-rrow.g-h2::before{background:var(--h2)}.s18-cv-rrow.g-h3::before{background:var(--h3)}
.s18-cv-rrow .s18-strip{display:block;width:100%;height:14px;border-radius:2px}
.s18-cv-rrow.is-lit{box-shadow:0 0 0 2px var(--cream-lo),0 0 0 3.5px var(--pink)}

.s18-x .s18-cv-group-label{margin:12px 0 6px;font-size:10.5px;line-height:1.4;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.s18-cv-experts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.s18-cv-expert{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;min-width:0;margin:0;padding:6px 7px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);text-align:left;transition:opacity .2s,border-color .2s,box-shadow .2s}
.s18-cv-expert:hover{border-color:var(--teal-line)}
.s18-cv-expert-name{display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:11.5px;line-height:1.2;font-weight:700;color:var(--muted)}
.s18-cv-expert-box{position:relative;display:block;height:34px}
.s18-cv-expert .s18-strip{display:block;width:100%;height:100%;border-radius:3px;transform-origin:left center;transition:width .35s var(--ease),opacity .3s var(--ease) var(--d,0ms),transform .5s var(--ease) var(--d,0ms)}
.s18-cv-expert .s18-strip.is-fine{width:var(--fine,25%)}
.s18-cv-flag{display:none;padding:0 5px;border-radius:999px;background:var(--cream-lo);font-size:9.5px;line-height:1.5;font-weight:700;color:var(--ink-soft);white-space:nowrap}
.s18-cv-expert.is-partial .s18-cv-flag{display:inline-block}
.s18-cv-expert.is-focus{border-color:var(--pink);box-shadow:inset 0 0 0 1px var(--pink)}
.s18-cv-expert.is-sibling{border-color:var(--teal);box-shadow:inset 0 0 0 1px var(--teal)}
.s18-cv-expert.is-dim{opacity:.38}
/* Keyboard focus: the kit's pink outline, separate from the trace state. */
.s18-cv-expert:focus-visible{outline:2.5px solid var(--pink);outline-offset:3px}
.s18-cv-shared{display:grid;grid-template-columns:minmax(0,calc((100% - 21px) / 4)) minmax(0,1fr);grid-template-areas:"box name";align-items:center;gap:0 12px;margin:7px 0 0;padding:7px}
.s18-cv-shared .s18-cv-expert-box{grid-area:box}
.s18-cv-shared .s18-cv-expert-name{grid-area:name;font-weight:400;line-height:1.35}
.s18-cv-shared.is-copied .s18-cv-expert-name{font-weight:700;color:var(--ink)}
.s18-x .s18-cv-status{min-height:2.9em;margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--ink-soft)}
.s18-convert:not([data-focus=""]) .s18-cv-status{color:var(--ink)}

.s18-convert.is-prefill .s18-cv-expert .s18-strip{transform:scaleX(0)}
.s18-convert.is-swap .s18-cv-expert .s18-strip{opacity:0;transition:none}

.s18-cv-detail{min-width:0;margin:0 0 0 22px;padding:2px 0 0}
.s18-x .s18-cv-detail-name{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.s18-x .s18-cv-tag{display:inline-block;margin:6px 0 0;padding:3px 9px;border-radius:999px;background:var(--teal-wash);font-size:11.5px;line-height:1.35;font-weight:700;color:var(--teal-deep)}
.s18-cv-tag[data-kind="cited"]{background:var(--cream-lo);color:var(--ink-soft)}
.s18-cv-tag[data-kind="recipe"]{background:var(--ink-deep);color:var(--cream)}
.s18-cv-count{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;margin:14px 0 14px;padding:10px 0 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.s18-cv-count-note{grid-column:1/-1;font-size:13.5px;line-height:1.5;color:var(--ink)}
.s18-cv-count-n{font-size:38px;line-height:1;letter-spacing:-.03em;color:var(--ink);font-variant-numeric:tabular-nums}
.s18-cv-count-l{font-size:12.5px;line-height:1.45;color:var(--muted)}
.s18-x .s18-cv-quotes{margin-top:16px}

/* Budget: the dense prefix in the kit's grey dashed, sparse training in teal. */
.s18-budget{margin:18px 0 0;padding:14px 0 0;border-top:1px solid var(--line)}
.s18-x .s18-budget-label{margin:0 0 8px;font-size:13px;line-height:1.4;color:var(--muted)}
.s18-budget-label b{color:var(--ink)}
.s18-budget-bar{display:flex;height:34px;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.s18-budget-bar>span{display:flex;align-items:center;min-width:0;overflow:hidden;box-sizing:border-box;transition:flex-basis .5s var(--ease)}
.s18-budget-dense{flex:0 0 34%;border:1.5px dashed var(--dense);border-radius:8px 0 0 8px;background:var(--dense-wash)}
.s18-budget-sparse{flex:1 1 auto;background:var(--teal)}
.s18-convert[data-budget="scratch"] .s18-budget-dense{flex-basis:0%;border-width:0}
.s18-budget-text{padding:0 12px;font-size:12.5px;line-height:1.2;font-weight:700;white-space:nowrap}
.s18-budget-dense .s18-budget-text{color:var(--ink-soft)}
.s18-budget-sparse .s18-budget-text{color:var(--cream)}
.s18-x .s18-budget-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* =================== Narrower containers =================== */
@container (max-width: 940px){
  .s18-cv-stage{grid-template-columns:minmax(140px,.7fr) 40px minmax(0,1.6fr)}
  .s18-cv-detail{grid-column:1/-1;margin:16px 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0 28px;align-items:start}
  .s18-cv-detail>.s18-cv-detail-name,.s18-cv-detail>.s18-cv-tag,.s18-cv-detail>.s18-cv-count{grid-column:1}
  .s18-cv-detail>.s18-fields{grid-column:2;grid-row:1/span 3}
  .s18-cv-detail>.s18-cv-tag{justify-self:start}
}
@container (max-width: 760px){
  .s18-hz-plot{--lab:150px}
  .s18-hz-name .s18-long{display:none}
  .s18-hz-name .s18-short{display:block}
  .s18-presets{margin-left:0}
}
@container (max-width: 620px){
  .s18-cv-stage{grid-template-columns:minmax(0,1fr)}
  .s18-cv-left{display:contents}
  .s18-cv-arrow{height:36px;margin:0}
  .s18-cv-arrow i{transform:rotate(90deg)}
  .s18-cv-src{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:0 10px;align-items:start}
  .s18-cv-src>.s18-cv-card-title,.s18-cv-src>.s18-cv-card-sub,.s18-cv-src>.s18-cv-src-empty{grid-column:1/-1}
  .s18-cv-src>.s18-cv-attn{align-self:stretch;display:flex;align-items:center}
  .s18-cv-src>.s18-cv-block{margin:0}
  .s18-cv-src{order:0}.s18-cv-arrow{order:1}.s18-cv-dst{order:2}.s18-cv-key{order:3}.s18-cv-detail{order:4}
  .s18-x .s18-cv-key{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px 12px;margin:12px 0 0}
  .s18-cv-detail{display:block}
  .s18-cv-detail>.s18-fields{margin-top:0}
  .s18-reads{grid-template-columns:minmax(0,1fr)}
  .s18-read{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label value" "note value";align-items:center;gap:0 12px;padding:9px 13px}
  .s18-x .s18-read-label{grid-area:label}
  .s18-x .s18-read-value{grid-area:value;margin:0!important;font-size:22px}
  .s18-x .s18-read-note{grid-area:note}
}
@container (max-width: 480px){
  .s18-hz-plot{--lab:76px;column-gap:12px;grid-template-rows:var(--flag) 54px 54px 22px var(--handle)}
  .s18-hz-name{padding-right:0}
  .s18-hz-name b{font-size:12.5px}
  .s18-hz-name span{font-size:11px}
  /* No room for the dense stub on phones: its legend entry goes with it. */
  .s18-hz-stub,.s18-key-dense{display:none}
  .s18-hz-axisname{display:none}
  .s18-flag{font-size:11px}
  .s18-flag .s18-long{display:none}
  .s18-flag .s18-short{display:inline}
  .s18-slider{flex:1 1 100%}
  .s18-slider input[type=range]{flex:1;width:auto}
  .s18-chip{padding:7px 11px;font-size:12.5px}
  .s18-x .s18-q{font-size:14.5px}
  .s18-x .s18-quotes{padding:12px 14px 10px}
  .s18-cv-experts{gap:6px}
  .s18-cv-expert{padding:5px 6px 7px}
  .s18-cv-expert-box{height:30px}
  .s18-cv-shared{grid-template-columns:minmax(0,calc((100% - 18px) / 4)) minmax(0,1fr)}
  .s18-budget-text{font-size:11.5px;padding:0 9px}
}

@media (prefers-reduced-motion: reduce){
  .s18-x *,.s18-x *::before,.s18-x *::after{transition:none!important;animation:none!important}
  .s18-convert.is-prefill .s18-cv-expert .s18-strip{transform:none}
}
/* Print: the companions are web additions; the report's prose stands alone. */
@media print{
  .s18-x{display:none}
}
/* Forced colours: the drawn states move to the system palette (as in Section 3). */
@media (forced-colors: active){
  .s18-hz-track,.s18-hz-over,.s18-legend i,.s18-cv-shards,.s18-cv-expert-box,.s18-cv-router-rows,.s18-cv-dattn,.s18-budget-bar,.s18-cv-key,.s18-cv-arrow{forced-color-adjust:none}
  .s18-chip[aria-pressed="true"]{outline:2px solid Highlight;outline-offset:2px}
  .s18-slider input[type=range]{-webkit-appearance:auto;appearance:auto;accent-color:Highlight}
  .s18-hz-future{border-color:GrayText}
  .s18-hz-fill,.s18-key-fill{background:CanvasText}
  .s18-hz-track-up .s18-hz-fill{background:repeating-linear-gradient(135deg,GrayText 0 2px,transparent 2px 6px);box-shadow:inset 0 0 0 1px GrayText}
  .s18-hz-lead,.s18-key-lead{background:Highlight;box-shadow:none}
  .s18-hz-lead-text{color:HighlightText}
  .s18-hz-stub,.s18-key-stub{background:Canvas;border-color:CanvasText;color:CanvasText}
  .s18-hz-stub::after{border-left-color:CanvasText}
  .s18-hz-band,.s18-key-band{background:transparent;box-shadow:inset 1.5px 0 0 LinkText,inset -1.5px 0 0 LinkText}
  .s18-hz-mark{border-left-color:LinkText;opacity:1}
  .s18-hz-mark-recipe{border-left-color:CanvasText}
  .s18-hz-cursor-line{border-left-color:Highlight}
  .s18-hz-cursor-knob{background:Highlight;box-shadow:none}
  .s18-hz-cursor-label{background:Canvas;color:CanvasText;border:1px solid CanvasText}
  .s18-cv-src .s18-cv-block{outline:1px solid CanvasText;outline-offset:-1px}
  .s18-cv-arrow i{background:CanvasText}.s18-cv-arrow i::after{border-left-color:CanvasText}
  .s18-cv-expert.is-focus{outline:2px solid Highlight;outline-offset:1px}
  .s18-cv-expert.is-sibling{outline:2px dashed Highlight;outline-offset:1px}
  .s18-cv-expert:focus-visible{outline:2.5px solid Highlight}
  .s18-cv-shard.is-lit,.s18-cv-rrow.is-lit{box-shadow:0 0 0 2px Canvas,0 0 0 4px Highlight}
  .s18-budget-dense{background:Canvas;border-color:CanvasText}
  .s18-budget-dense .s18-budget-text{color:CanvasText}
}