/* ───────────────────────────────────────────────────────────────────────
   language-models — widget idioms, layered over wax-tufte.css core.
   Widget *children* inside a .panel need no width:55%; the .panel itself is
   still measure-constrained. Colour: --accent structural only; amber/
   violet = small/large pole; green/red/amber = likely/overflow/tradeoff;
   --qmd is reserved for Exploration B (throughput) and unused here.
   ─────────────────────────────────────────────────────────────────────── */

/* ── measure wrappers ── */
.fw{ width:55%; box-sizing:border-box; }
@media(max-width:760px){ .fw{ width:auto; } }

/* masthead (crumbs/series/kicker/h1/subtitle), section headings, and footer text
   lines are direct article/section children that Tufte's `section > p{width:55%}`
   measure never reaches, so they bled full-width into the margin-note gutter. Pin
   them to the 55% measure; the mobile block resets to full width (DESIGN-SYSTEM.org,
   "Layout & the measure"). Mirrors the closure/wax measure-conformance fix. */
.crumbs, .series, .kicker, h1, p.subtitle,
section > h2, section > h3, .foot > p{ width:55%; box-sizing:border-box; }
@media(max-width:760px){ .crumbs, .series, .kicker, h1, p.subtitle,
  section > h2, section > h3, .foot > p{ width:auto; } }

/* ── on-page navbar ── */
nav.toc{ width:55%; box-sizing:border-box; margin:1.8rem 0 .5rem; padding:.7rem 1.1rem;
         border:1px solid var(--rule); border-radius:6px; background:#fafafa; }
nav.toc .toc__label{ display:block; font-size:13px; font-weight:600; letter-spacing:.06em;
                     text-transform:uppercase; color:var(--faint); margin-bottom:.4rem; }
nav.toc ol{ width:auto; margin:0; padding-left:1.4rem; font-size:1.05rem; line-height:1.55; }
nav.toc li{ margin:.12rem 0; }
@media(max-width:760px){ nav.toc{ width:auto; } }

/* ── callouts — coloured left bar, no box ── */
.callout{ border-left:3px solid var(--accent); background:none; border-radius:0;
          padding:4px 0 4px 16px; margin:16px 0; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .callout{ width:auto; } }
.callout.warn{ border-left-color:var(--red); }
.callout.good{ border-left-color:var(--green); }
.callout .tag{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; color:var(--accent); }
.callout.warn .tag{ color:var(--red); } .callout.good .tag{ color:var(--green); }
.callout p{ margin:.4rem 0 0; }
.callout ul,.callout ol{ margin:.4rem 0 0; padding-left:1.2em; }
.callout>*:last-child{ margin-bottom:0; }

/* ── interactive tool container ── */
.panel{ border:1px solid var(--rule); border-radius:6px; background:#fafafa;
        padding:14px 16px; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .panel{ width:auto; } }

/* ── detail/verdict left-bar cards ── */
.card{ border-left:3px solid var(--accent); background:none; padding:2px 0 2px 16px; }

/* ── accordion disclosures ── */
details.q{ border-left:3px solid var(--rule); padding:1px 0 1px 14px; margin:7px 0;
           width:55%; box-sizing:border-box; }
details.q>summary{ cursor:pointer; font-weight:600; }
details.q>summary::-webkit-details-marker{ color:var(--faint); }
details.q[open]{ border-left-color:var(--accent); }
details.q .body{ margin-top:.4rem; color:var(--muted); font-size:14px; }
@media(max-width:760px){ details.q{ width:auto; } }

/* ── buttons ── */
button{ font-family:var(--serif); cursor:pointer; border-radius:7px; border:1px solid var(--rule-strong);
        background:#fff; color:var(--ink); padding:7px 13px; font-size:.92rem; transition:.12s; }
button:hover{ border-color:var(--accent); color:var(--accent); }
button.active{ background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700; }

/* ── form controls ── */
input[type=range]{ accent-color:var(--accent); }
.lbl{ font-size:13px; color:var(--muted); }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }

/* ── helpers ── */
.muted{ color:var(--muted); }
.sub{ color:var(--faint); font-style:italic; margin:0 0 1rem; }
.legend{ font-family:var(--mono); font-size:13px; color:var(--muted); }
/* slider-value badge — amber, bold */
.sc{ color:var(--wax); font-weight:700; }

/* ── next-page links ── */
.nextlink{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
           margin:1.5rem 0 0; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .nextlink{ width:auto; } }
.nextlink a{ flex:1 1 240px; border:1px solid var(--rule); border-radius:8px; padding:12px 16px; }
.nextlink a:hover{ border-color:var(--accent); text-decoration:none; }
.nextlink .dir{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); }
.nextlink .ttl{ color:var(--accent); font-weight:700; margin-top:3px; }

/* ── footer ── */
.foot{ color:var(--faint); font-size:13px; }
.foot .cites{ columns:2; column-gap:26px; }
@media(max-width:760px){ .foot .cites{ columns:1; } }

/* 13px floor: <sub>/<sup> inherit the surrounding font-size and the browser
   then applies ~75%, which can cascade to below 13px in normal body text.
   Pin them to 13px so they never fall below the house minimum. */
/* 13px-floor guard for <sub>/<sup> in the softmax formula (details.q); not in the core sheet */
sub, sup{ font-size:max(13px,.75em); }

/* ── sampling visualizer — horizontal probability bars over candidate tokens ── */
.svz .row{ display:grid; grid-template-columns:6em 1fr 3.4em; align-items:center;
           gap:.5em; margin:.25rem 0; }
.svz .tok{ font-family:var(--mono); font-size:13px; color:var(--ink); text-align:right; }
.svz .track{ background:#f3f3f1; border-radius:3px; height:1.25em; }
/* display:block is load-bearing — .fill is a <span> inside the (block) .track,
   and inline elements ignore width/height, so the bar would never paint. */
.svz .fill{ display:block; background:var(--rule-strong); height:100%; border-radius:3px;
            transition:width .18s ease; }
.svz .row.lead .fill{ background:var(--green); }     /* greedy / argmax pick (most-likely token) */
.svz .row.picked .fill{ background:var(--amber); }   /* token this sample drew                   */
.svz .pct{ font-family:var(--mono); font-size:13px; color:var(--faint); text-align:right; }
.svz-gen{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:.7rem; }
.svz .row.lead .tok{ font-weight:600; }
@media(prefers-reduced-motion: reduce){ .svz .fill{ transition:none; } }

/* tokenizer preset buttons — chip idiom: borderless mono; selected = tint + accent text, never bold */
.tkz .presets button{ border:none; background:transparent; color:var(--ink);
                       font-family:var(--mono); font-size:13px; padding:.2em .55em; border-radius:4px; cursor:pointer; }
.tkz .presets button:hover{ background:#f3f3f1; }
.tkz .presets button.active{ background:#eaf0f6; color:var(--accent); font-weight:400; }

/* tokenizer — live token chips coloured by kind (illustrative, not real BPE) */
.tkz textarea{ width:100%; min-height:5.5rem; box-sizing:border-box;
               font-family:var(--mono); font-size:13px; line-height:1.5;
               border:1px solid var(--rule-strong); border-radius:6px; padding:.6em; }
.tkz .presets{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
/* flex-wrap, not inline flow — chips are emitted as adjacent <span>s with no
   whitespace between them, so an inline row has no break opportunity and would
   overrun the panel. Flex items wrap at each chip regardless of whitespace. */
.tkz .out{ margin-top:.7rem; display:flex; flex-wrap:wrap; align-items:baseline; gap:.35rem .12rem; }
.tkz .t{ font-family:var(--mono); font-size:13px; padding:.05em .32em; border-radius:3px; }
.tkz .t.word{ background:#eaf0f6; color:var(--accent); }
.tkz .t.subword{ background:#f4f4f2; color:var(--ink); }
.tkz .t.number{ background:#f4f4f2; color:var(--muted); }
.tkz .t.punct{ color:var(--faint); }
.tkz .t.space{ color:var(--rule-strong); }            /* render the gap as a faint · */
.tkz .count{ font-family:var(--mono); font-size:13px; color:var(--faint); margin-top:.6rem; }

/* context window-size buttons — chip idiom: borderless mono; selected = tint + accent text, never bold */
.ctxm .wins button{ border:none; background:transparent; color:var(--ink);
                    font-family:var(--mono); font-size:13px; padding:.2em .55em; border-radius:4px; cursor:pointer; }
.ctxm .wins button:hover{ background:#f3f3f1; }
.ctxm .wins button.active{ background:#eaf0f6; color:var(--accent); font-weight:400; }

/* context-window meter — a stacked token-budget bar; neutral greys per segment
   (colour reserved for the red overflow cap), labelled so it is not colour-only */
.ctxm .wins{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.4rem 0; }
.ctxm .ctrls{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0; }
.ctxm .bar{ display:flex; height:1.7em; border-radius:4px; overflow:hidden;
            border:1px solid var(--rule); background:#f3f3f1; }
.ctxm .seg{ height:100%; }
.ctxm .seg.system{ background:#565656; }
.ctxm .seg.tools{  background:#8a8a8a; }
.ctxm .seg.files{  background:#b0b0b0; }
.ctxm .seg.history{ background:#cfcfcf; }
.ctxm .seg.over{ background:var(--red); }
.ctxm .legend{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.5rem;
               font-family:var(--mono); font-size:13px; color:var(--faint); }
.ctxm .legend i{ display:inline-block; width:.8em; height:.8em; border-radius:2px;
                 margin-right:.35em; vertical-align:baseline; }
.ctxm .read{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:.5rem; }
.ctxm .read.over{ color:var(--red); }

/* capability explorer — the borderless-mono chip idiom + a left-bar .card.
   selected = accent text + tint fill, never bold (a weight change reflows). */
.capx .chips{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.3rem 0 .8rem; }
.capx .cap{ font-family:var(--mono); font-size:13px; padding:.2em .55em; border-radius:4px;
            background:transparent; border:none; color:var(--ink); cursor:pointer; }
.capx .cap:hover{ background:#f3f3f1; }
.capx .cap.sel{ background:#eaf0f6; color:var(--accent); }

/* attention visualizer — a causal heatmap over a fixed sentence. Click a token;
   the earlier tokens it attends to light up (accent tint ∝ weight) and a text
   readout carries the weights so state is not colour-only. Wrapping chip row. */
.attn .sent{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
.attn .tk{ font-family:var(--mono); font-size:13px; padding:.15em .5em; border-radius:4px;
           background:transparent; border:1px solid transparent; color:var(--ink); cursor:pointer; }
.attn .tk:hover{ border-color:var(--rule-strong); }
.attn .tk.sel{ border-color:var(--accent); color:var(--accent); }   /* the querying token */
.attn .tk.inert{ color:var(--rule-strong); }                         /* sits after the query (greyed), still clickable to re-select */
.attn .read{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:.6rem; }

/* query·key explorer (#qkv) — the interactive Steps 1–4. A chip row (the sentence) plus
   a per-token computation grid: key vector · dot product spelled out · weight bar · weight.
   Colour discipline: --accent only (weight bars + selection), backed by the % text so state
   is not colour-only. .qk-fill MUST be display:block — it is a <span> fill in a block track,
   and inline elements ignore width/height (would paint 0×0). Rows wrap/stack so they never
   overflow the panel. */
.qkv .sent{ display:flex; flex-wrap:wrap; gap:.3rem; margin:.5rem 0; }
.qkv .tk{ font-family:var(--mono); font-size:13px; padding:.15em .5em; border-radius:4px;
          background:transparent; border:1px solid transparent; color:var(--ink); cursor:pointer; }
.qkv .tk:hover{ border-color:var(--rule-strong); }
.qkv .tk.sel{ border-color:var(--accent); color:var(--accent); }   /* the querying token */
.qkv .tk.inert{ color:var(--rule-strong); }                         /* sits after the querier */
.qkv .qline{ font-size:14px; margin:.2rem 0 .6rem; }
.qkv .vec{ font-family:var(--mono); font-size:13px; color:var(--accent); }
.qkv .qk-row{ display:grid; grid-template-columns:3em 6.2em minmax(8em,1fr) 1fr 2.4em;
              align-items:center; gap:.5em; margin:.22rem 0; }
.qkv .qk-tok{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.qkv .qk-key{ font-family:var(--mono); font-size:13px; color:var(--faint); }
.qkv .qk-dot{ font-family:var(--mono); font-size:13px; color:var(--ink); }
.qkv .qk-track{ background:#f3f3f1; border-radius:3px; height:1.1em; }
.qkv .qk-fill{ display:block; height:100%; border-radius:3px; transition:width .18s ease; }
.qkv .qk-w{ font-family:var(--mono); font-size:13px; color:var(--faint); text-align:right; }
.qkv .qk-row.self .qk-tok{ color:var(--accent); }                   /* the querier scoring itself */
.qkv .read{ font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:.7rem; }
@media(prefers-reduced-motion: reduce){ .qkv .qk-fill{ transition:none; } }
@media(max-width:760px){ .qkv .qk-row{ grid-template-columns:1fr; gap:.1em; } }