@charset "UTF-8";

/* ─────────────────────────────────────────────────────────────────────────
   closure ("Reach for what you already ship") component sheet — layered over
   the shared Tufte core (../assets/wax-tufte.css). Carries closure's own token
   vocabulary (--ink-soft/--ink-faint/--chip-bg + the verdict colours
   --cl/--core/--native/--gap), its masthead furniture (kicker/backlink/crumbs/
   series), and its domain widgets (verdict chips, the "under the hood" aside,
   the before/after toggle, the field-guide table, the toc). Loaded AFTER the
   core. The article right-gutter is re-stated here at closure's value (matches
   the core) so the field-guide table fills the gutter-padded measure.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#ffffff; --ink:#111111; --ink-soft:#333333; --ink-faint:#565656;
  --rule:#e3e3e3; --accent:#3a5e8c;
  --cl:#2f7d4f;        /* verdict: use Closure   */
  --core:#7a4fb0;      /* verdict: cljs.core     */
  --native:#b45309;    /* verdict: native-first — a11y: darkened from #b06a1f (4.26:1) to #b45309 (5.02:1) on #fff */
  --gap:#9a3b3b;       /* verdict: gap           */
  --chip-bg:#f4f4f2;
  --serif:Charter,"Bitstream Charter","Sitka Text",Cambria,Georgia,serif;
}

/* whiter paper, near-black ink, system serif everywhere Tufte used et-book */
html{ background:var(--paper); }
body{ background:var(--paper); color:var(--ink); font-family:var(--serif); }
/* a right gutter so the full-width field-guide table never hugs the window edge
   — Tufte's body has a 12.5% LEFT indent but no right gutter */
article{ box-sizing:border-box; padding-right:10%; }
@media(max-width:760px){ article{ padding-right:0; } }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); }
p,li,table,figcaption{ color:var(--ink); }
.numeral{ font-family:var(--serif); }
.sidenote-number:after,.sidenote:before{ font-family:var(--serif); }
p.subtitle{ color:var(--ink-soft); font-style:italic; }
a:link,a:visited{ color:var(--accent); }
hr{ border-color:var(--rule); }

/* code: calm, light */
code,pre code{ font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace; font-size:max(13px,.86em); }
code{ background:var(--chip-bg); padding:.05rem .3rem; border-radius:3px; }
/* closure's inline code wraps as a single unit (its baseline). Opt out of the
   shared core's mobile `p code,li code{overflow-wrap:anywhere}` — closure's code
   never overflows the measure, and leaving it on re-breaks spans like
   `(goog.math.ExponentialBackoff)`, shifting the surrounding prose. */
@media(max-width:760px){ p code, li code{ overflow-wrap:normal; } }

/* page header furniture */
.kicker{ font-variant:small-caps; letter-spacing:.08em; color:var(--ink-faint);
         font-style:normal; margin-bottom:.2rem; }
.backlink{ display:inline-block; margin:0 0 1rem; font-size:.95rem; }
/* home + interpage breadcrumb, atop every page */
.crumbs{ font-size:13px; color:var(--ink-faint); margin:0 0 .5rem; }
.crumbs a{ color:var(--accent); } .crumbs .sep{ color:#cfcfcf; margin:0 .45em; }
/* series nav — jump straight to any page in this exploration; current is marked */
.series{ font-size:13px; margin:0 0 1.6rem; line-height:1.7; }
.series a{ color:var(--accent); } .series .here{ color:var(--ink); font-weight:700; }
.series>*+*::before{ content:"·"; color:#cfcfcf; margin:0 .55em; }

/* ── verdict chips ───────────────────────────────────────────────────────── */
.chip{ display:inline-block; font-size:13px; font-weight:600; letter-spacing:.04em;
       text-transform:uppercase; padding:.12rem .5rem; border-radius:999px;
       border:1px solid currentColor; white-space:nowrap; line-height:1.5; }
.chip--cl{ color:var(--cl); } .chip--core{ color:var(--core); }
.chip--native{ color:var(--native); } .chip--gap{ color:var(--gap); }

/* ── "under the hood" collapsible aside ──────────────────────────────────── */
details.uth{ border:1px solid var(--rule); border-radius:6px; padding:.5rem .9rem;
             margin:1.4rem 0; background:#fafafa; width:55%; box-sizing:border-box; }
details.uth>summary{ cursor:pointer; font-style:italic; color:var(--ink-soft); }
details.uth[open]{ padding-bottom:.9rem; }
details.uth>summary::-webkit-details-marker{ color:var(--ink-faint); }

/* ── before/after toggle (beat 4) ────────────────────────────────────────── */
.ba{ border:1px solid var(--rule); border-radius:6px; margin:1.5rem 0; overflow:hidden;
     width:55%; box-sizing:border-box; }
.ba__tabs{ display:flex; border-bottom:1px solid var(--rule); }
.ba__tab{ flex:1; padding:.5rem .8rem; background:#f7f7f5; border:0; cursor:pointer;
          font-family:var(--serif); font-size:.9rem; color:var(--ink-soft); }
.ba__tab[aria-selected="true"]{ background:#fff; color:var(--ink); font-weight:600; }
.ba__panel{ padding:1rem 1.1rem; margin:0; }
.ba__panel[hidden]{ display:none; }
.ba__panel p:last-child{ margin-bottom:0; }
.ba pre{ white-space:pre-wrap; overflow-wrap:anywhere; background:var(--chip-bg);
         padding:.5rem .7rem; border-radius:4px; margin:.5rem 0; }
.ba pre code{ background:none; padding:0; }

/* ── field-guide table ───────────────────────────────────────────────────── */
.fg-controls{ display:flex; flex-wrap:wrap; gap:.6rem .9rem; align-items:center;
              margin:1.2rem 0 .4rem; width:100%; }
.fg-search{ flex:1; min-width:14rem; padding:.4rem .6rem; border:1px solid var(--rule);
            border-radius:5px; font-family:var(--serif); font-size:.95rem; }
.fg-verds{ display:flex; gap:.4rem; flex-wrap:wrap; }
.fg-verd{ cursor:pointer; background:#fff; font-family:var(--serif); }
.fg-verd[aria-pressed="false"]{ opacity:.32; }
.fg-table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.fg-table th,.fg-table td{ text-align:left; vertical-align:top; padding:.5rem .6rem;
                           border-bottom:1px solid var(--rule); }
.fg-table th{ font-size:13px; text-transform:uppercase; letter-spacing:.05em;
              color:var(--ink-faint); font-weight:600; }
.fg-table code{ font-size:13px; }
.fg-need{ font-weight:600; }
.fg-empty{ color:var(--ink-faint); font-style:italic; padding:1rem .6rem; }
.fg-count{ color:var(--ink-faint); font-size:13px; }
.fg-uses{ color:var(--ink-faint); font-size:13px; }

/* the field guide + before/after want full width, not Tufte's narrow measure */
.fullwidth-block{ width:100%; }

@media (max-width:760px){
  .ba{ width:100%; }
  .fg-table thead{ display:none; }
  .fg-table,.fg-table tbody,.fg-table tr,.fg-table td{ display:block; width:auto; }
  .fg-table tr{ border-bottom:2px solid var(--rule); padding:.45rem 0; }
  .fg-table td{ border:0; padding:.18rem .2rem; }
  .fg-table td::before{ content:attr(data-th)": "; color:var(--ink-faint);
                        font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; }
}

/* ── keep the masthead, headings, subtitle + page footer within the measure ────
   The masthead (crumbs/series/kicker/h1), the section headings, p.subtitle and
   the closing .fg-count are not section>p children, so Tufte's
   `section > p { width:55% }` never reaches them — on desktop they bled full
   width into the right-hand margin-note gutter (margin notes occupy 55%→100%).
   Constrain to the body measure; the mobile block below resets to full width,
   where Tufte already drops the margin column. The field guide opts out on
   purpose via .fg-table / .fullwidth-block. */
.crumbs, .series, h1, section > h2, section > h3,
article > p, .fg-count{ width:55%; box-sizing:border-box; }

/* ── table of contents, atop the long narrative ──────────────────────────── */
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(--ink-faint); margin-bottom:.4rem; }
nav.toc ol{ width:auto; margin:0; padding-left:1.3rem; font-size:1.15rem; line-height:1.55; }
nav.toc li{ margin:.12rem 0; }

@media (max-width:760px){
  .crumbs, .series, h1, section > h2, section > h3,
  article > p, .fg-count{ width:100%; }
  nav.toc{ width:100%; }
  details.uth{ width:100%; }
}