@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────
   safari-extension component sheet — widgets layered over the shared Tufte
   core (../assets/wax-tufte.css). Tokens and the mobile/a11y base come from
   the core. Holds only the idioms this exploration actually uses (tables,
   callouts, cards, badges, verdict, legend, nextlink, toc, panel, kvs, the
   source-tinted file cite) plus its domain widgets (.parts/.part/.modebar/
   .flow/.stage/.collide/.survive). The dead wax-explorer CSS that this sheet
   inherited from the wax page (file-format diagram, EAV explorer, pipeline,
   chunk→fact bridge, hero pills, syntax tokens) has been dropped — no safari
   page references it. 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); }
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; }

/* 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); }

/* 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 widget JS + prose */
.muted{ color:var(--muted); }
.sub{ color:var(--faint); font-style:italic; margin:0 0 1rem; }

/* 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; } }
/* kept: feeds flex-direction:column into the domain .flow below via the
   cascade — the domain rule omits it, so dropping this changes the layout */
.flow{ display:flex; flex-direction:column; gap:3px; }

/* source-tinted file cite (bridge/green) — used in the footer legend */
.cite.f b{ color:var(--green); }

/* key/value grid */
.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; }

/* verdict variants */
.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); }

/* ============================================================
   safari-extension — domain widgets.
   Obey the house idioms: clickable items are borderless mono chips
   (rest = no fill; hover #f3f3f1; selected #eaf0f6 + --accent text,
   never bold); the detail they drive lives in a left-bar .card; the
   stepping tools are .panel boxes. Colour is functional only:
   --green proven · --red broken/blocked · --amber partial/deferred.
   ============================================================ */

/* "parts of an extension" — a clickable chip set → detail in a sibling .card */
.parts{ display:flex; flex-wrap:wrap; gap:6px 8px; width:55%; box-sizing:border-box; margin:.7rem 0 .4rem; }
/* chips render as <button> for keyboard+role; neutralise UA button chrome only */
.part{ font:inherit; color:inherit; text-align:left; appearance:none; background:none; border:0; }
.part{ font-family:var(--mono); font-size:13px; color:var(--ink); padding:3px 8px; border-radius:5px; cursor:pointer; user-select:none; white-space:nowrap; transition:background .12s, color .12s; }
.part:hover{ background:#f3f3f1; }
.part.sel{ background:#eaf0f6; color:var(--accent); }
@media(max-width:760px){ .parts{ width:auto; } }

/* "click → saved fact" flow inside a .panel: stages light up in sequence */
.modebar{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 .7rem; }
.flow{ display:flex; flex-wrap:wrap; align-items:stretch; gap:5px; margin:.3rem 0 .6rem; }
.stage{ font-family:var(--mono); font-size:13px; color:var(--faint); border-left:3px solid var(--rule); padding:1px 9px; transition:color .15s, border-color .15s; }
.stage .s{ display:block; color:var(--faint); font-size:13px; }
.stage.lit{ border-left-color:var(--accent); color:var(--muted); }
.stage.lit .s{ color:var(--ink); }
.flow .ar{ align-self:center; color:var(--rule-strong); }

/* clj->js boundary demo: a colliding key is flagged red, a surviving one green */
.collide{ color:var(--red); font-weight:600; }
.survive{ color:var(--green); font-weight:600; }