@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────
   Wax component library — the widgets layered over the shared Tufte core
   (../assets/wax-tufte.css): tables, callouts/cards/badges, the file-format
   diagram, EAV explorer, chunk→fact bridge, glossary/FAQ accordions, hero
   pills. Tokens (var(--…)) come from the core. Loaded AFTER the core.
   ───────────────────────────────────────────────────────────────────────── */

/* table + interactive widgets: constrained to the text measure, NOT full-width,
   so they don't bleed into the right-hand margin-note column */
.fw{ width:55%; box-sizing:border-box; }
@media(max-width:760px){ .fw{ width:auto; } }

/* masthead, headings, page lede, and footer text lines are not section>p
   children, so Tufte's automatic measure does not reach them — pin them to the
   55% text column so they never bleed into the margin-note gutter. Only genuine
   .fullwidth constructs may enter that gutter (DESIGN-SYSTEM.org, "Layout & the
   measure"; the .foot > p selector spares the .cites.fw block its own width). */
.crumbs, .series, .kicker, h1, p.subtitle,
section > h2, section > h3, .lede, .foot > p{ width:55%; box-sizing:border-box; }
@media(max-width:760px){ .crumbs, .series, .kicker, h1, p.subtitle,
  section > h2, section > h3, .lede, .foot > p{ width:auto; } }

/* the side-by-side table */
table{ width:100%; border-collapse:collapse; font-size:1rem; }
table th,table td{ text-align:left; vertical-align:top; padding:.5rem .65rem; border-bottom:1px solid var(--rule); }
.fullwidth{ width:100%; max-width:100%; }   /* wide data tables fill the gutter-padded article (overrides Tufte's 90%) */
@media(max-width:760px){ div.fullwidth, pre.fullwidth{ overflow-x:auto; } }
table th{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--faint); font-weight:600; }
th.b-q{ color:var(--qmd); } th.b-w{ color:var(--wax); }
td code{ color:var(--wax); font-size:13px; }
.yes{ color:var(--green); font-weight:700; } .no{ color:var(--red); font-weight:700; }
.partial{ color:var(--amber); font-weight:700; } .qc{ color:var(--qmd); font-weight:700; }

/* cards / two-up groups → calm bordered panels */
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media(max-width:760px){ .grid2{ grid-template-columns:1fr; } }
/* selected-item detail panels (pipeline / build) share the left-bar idiom with
   the feature verdict + the prose callouts — one "set-off content" treatment */
.card{ border-left:3px solid var(--accent); background:none; padding:2px 0 2px 16px; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .card{ width:auto; } }
.card h4{ margin-top:0; }

/* callouts → Tufte-style asides with a coloured rule */
.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; }   /* stop the coloured bar descending past the last line */

/* badges */
.badge{ font-family:var(--mono); font-size:13px; padding:.12rem .5rem; border:1px solid var(--rule); border-radius:6px; }
.b-w{ color:var(--wax); } .b-q{ color:var(--qmd); }
.row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; }

/* chips render as <button> for keyboard+role; neutralise UA button chrome only */
.seg, .qcard, .pstep, .fstep{ font:inherit; color:inherit; text-align:left; appearance:none; }

/* pipeline + feature widgets — light, calm, full-width */
.pipe{ display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.pstep{ border:0; border-radius:6px; background:none; padding:6px 10px; cursor:pointer;
        font-size:13px; font-family:var(--mono); transition:.12s; }
.pstep:hover{ background:#f3f3f1; } .pstep.sel{ background:#eaf0f6; color:var(--accent); }
.pstep .ar{ color:var(--faint); }
/* The "qmd features port onto Wax?" list reuses the glossary disclosure idiom
   (details.q) — one expand-in-place row per feature. The only addition is a
   colour-tinted tier glyph in the summary, so the four-way ✓/⚒/△/✗ verdict
   reads at a glance without opening the row. */
.tier{ font-size:1rem; }
.tier.v-clean{ color:var(--green); }
.tier.v-work{ color:var(--amber); }
.tier.v-fight{ color:var(--red); }
/* verdict detail (the sync-strategy + query-pattern widgets): a calm coloured
   left bar, no boxy background */
.verdict{ display:flex; gap:11px; align-items:flex-start; padding:2px 0 2px 14px; margin:10px 0; border-left:3px solid var(--rule); width:55%; box-sizing:border-box; }
@media(max-width:760px){ .verdict{ width:auto; } }
.verdict .ic{ font-size:1.1rem; line-height:1.3; }
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; }

/* legend, next-page links, footer */
.legend{ font-family:var(--mono); font-size:13px; color:var(--muted); }   /* same text style as the pipeline stages */
.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; }
.foot{ color:var(--faint); font-size:13px; }
.foot .cites{ columns:2; column-gap:26px; } @media(max-width:760px){ .foot .cites{ columns:1; } }

/* on-page navbar — a Tufte table of contents, mirroring the closure page */
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; } }

/* helpers used by the reused page-2 widget JS + prose */
.muted{ color:var(--muted); }
.sub{ color:var(--faint); font-style:italic; margin:0 0 1rem; }
.lede{ font-size:1.15rem; color:var(--muted); }

/* ─────────────────────────────────────────────────────────────────────────
   Part 3 (chunk→fact bridge) widgets — same light/Tufte idioms as Part 2:
   borderless chips for clickable steps, neutral boxes for tool containers,
   the colour code amber=Wax / blue=qmd / green=bridge held throughout.
   ───────────────────────────────────────────────────────────────────────── */

/* a neutral boxed container for interactive tools (chunker, facts reveal) */
.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; } }

/* data-flow steps — borderless clickable rows (the chip idiom, row-shaped) */
.flow{ display:flex; flex-direction:column; gap:3px; }
.fstep{ border:0; border-radius:6px; background:none; padding:7px 10px; cursor:pointer; transition:.12s;
        display:flex; gap:12px; align-items:center; font-size:13px; }
.fstep:hover{ background:#f3f3f1; } .fstep.sel{ background:#eaf0f6; }
.fstep .num{ font-family:var(--mono); color:var(--accent); font-size:13px; min-width:18px; }
.fstep .t{ font-weight:600; } .fstep.sel .t{ color:var(--accent); }
.fstep .x{ color:var(--faint); font-size:13px; font-family:var(--mono); margin-left:auto; }
#flowDetail{ min-height:48px; }

/* org chunk viz */
.chunk{ border:1px solid var(--rule); border-radius:6px; padding:8px 12px; margin:7px 0; background:#fff; }
.chunk .h{ font-family:var(--mono); font-size:13px; color:var(--faint); display:flex;
           justify-content:space-between; gap:8px; margin-bottom:5px; flex-wrap:wrap; }
.chunk .body{ font-size:13px; white-space:pre-wrap; font-family:var(--mono); color:var(--ink); max-height:170px; overflow:auto; }
.pill{ font-size:13px; font-family:var(--mono); padding:1px 6px; border-radius:5px; border:1px solid var(--rule); }
.p-keep{ color:var(--green); border-color:rgba(21,128,61,.4); } .p-skip{ color:var(--faint); }
.p-block{ color:var(--qmd); } .p-big{ color:var(--red); }
.sc{ color:var(--wax); font-weight:700; }

/* EAV triples */
.triple{ display:grid; grid-template-columns:auto auto 1fr; gap:8px; align-items:center; font-family:var(--mono);
         font-size:13px; padding:6px 10px; border:1px solid var(--rule); border-radius:6px; margin:5px 0; background:#fff; }
.triple .s{ color:var(--violet); } .triple .pr{ color:var(--wax); } .triple .o{ color:var(--green); } .triple .ar{ color:var(--faint); }

/* controlled-vocabulary pills */
.vocab{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .vocab{ width:auto; } }
.vp{ font-family:var(--mono); font-size:13px; background:var(--chip); border:1px solid var(--rule);
     border-radius:6px; padding:3px 9px; color:var(--wax); }

/* form controls used by the chunker */
textarea{ width:100%; background:#fff; border:1px solid var(--rule); border-radius:6px; color:var(--ink);
          font-family:var(--mono); font-size:13px; padding:12px; resize:vertical; }
input[type=range]{ accent-color:var(--accent); }
.lbl{ font-size:13px; color:var(--muted); }

/* extra token + citation colours used on Part 3 */
.tok-e{ color:var(--qmd); }
.cite.f b{ color:var(--green); }

/* syntax tokens (Part 1 schema block, Part 3 facts block) */
.tok-kw{ color:var(--violet); } .tok-str{ color:var(--green); }
.tok-com{ color:var(--faint); font-style:italic; } .tok-num{ color:var(--qmd); }

/* ─────────────────────────────────────────────────────────────────────────
   Part 1 (Wax explained) widgets — file-format diagram, EAV query explorer,
   key/value grids, glossary/FAQ accordions, hero pills. Same light idioms.
   ───────────────────────────────────────────────────────────────────────── */

/* hero feature pills + badge variants. Constrained to the measure (a chip row,
   like .qpat/.vocab) so it never bleeds into — and collides with — a margin note. */
.pills{ display:flex; flex-wrap:wrap; gap:6px; margin:1rem 0; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .pills{ width:auto; } }
.pill b{ color:var(--ink); }
.b-swift{ color:var(--wax); } .b-cli{ color:var(--accent); } .b-mcp{ color:var(--violet); }

/* key/value grid (ingest pipeline, file-format detail) */
.kvs{ display:grid; grid-template-columns:auto 1fr; gap:6px 14px; font-size:14px; margin:.5rem 0 0; }
.kvs .k{ font-family:var(--mono); color:var(--accent); font-size:13px; }

/* file-format diagram — clickable vertical segments, colour-coded by role */
.ff{ display:flex; flex-direction:column; gap:3px; }
.seg{ border:1px solid var(--rule); border-left:3px solid var(--rule-strong); border-radius:6px;
      padding:8px 11px; cursor:pointer; transition:.12s; background:#fafafa;
      display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.seg:hover{ border-left-color:var(--accent); } .seg.sel{ background:#fff; border-left-color:var(--accent); }
.seg.h{ border-left-color:var(--wax); }    /* crash-safety metadata = amber */
.seg.idx{ border-left-color:var(--qmd); }  /* search indexes = blue */
.seg .nm{ font-weight:600; font-size:14px; } .seg .off{ font-family:var(--mono); font-size:13px; color:var(--faint); }

/* chunk-overlap highlight (chunk simulator) */
.ov{ background:rgba(180,83,9,.16); border-radius:3px; }

/* EAV query-pattern explorer — the chip idiom again */
.qpat{ display:flex; flex-wrap:wrap; gap:4px 6px; margin:12px 0; width:55%; box-sizing:border-box; }
@media(max-width:760px){ .qpat{ width:auto; } }
.qcard{ border:0; border-radius:6px; background:none; padding:6px 10px; cursor:pointer; transition:.12s; }
.qcard:hover{ background:#f3f3f1; } .qcard.sel{ background:#eaf0f6; }
.qcard .p{ display:block; font-family:var(--mono); font-size:13px; color:var(--ink); } .qcard.sel .p{ color:var(--accent); }
.qcard .muted{ display:block; }

/* verdict variants used on Part 1 (sync helper, EAV result) */
.verdict.ok{ border-left-color:var(--green); } .verdict.ok .ic{ color:var(--green); }
.verdict.scan{ border-left-color:var(--amber); } .verdict.scan .ic{ color:var(--amber); }

/* glossary + FAQ accordions */
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; } }