/* iWhisk Guide, as The Field Manual
   ==========================================================================
   Personality through precision rather than ornament. Every article has an
   address, every clause inside it has an address, and structure is carried by
   hairlines and hard alignment. Support can say "see 4.01.3" in an email and a
   reader finds it in seconds.

   ONE DISPLAY FAMILY. Literata over Inter. There is deliberately no monospace
   tier: a third family would be a second departure from the single-family rule
   in design-system/readme.md. The technical register comes from tabular
   numerals, letterspaced small caps and hard alignment instead, which costs
   nothing and stays inside the rule.

   TWO RULE WEIGHTS, AND THE DIFFERENCE IS THE DISCIPLINE.
     --line  #DED5C9  1.30:1 on canvas. Decorative only, and exempt as such.
     --rule  #8F877C  3.18:1 on canvas. Anything that carries meaning: the
                      boundary of a section, the top of a table, a divider a
                      reader would miss if it vanished.

   COLOUR CORRECTIONS carried in from a measured audit of the previous file.
   Every one of these was a live WCAG AA failure:
     .art-kicker  clay on canvas          3.83  ->  5.18  (--clay is darker now)
     .dept-lede   text-soft on canvas     4.48  ->  5.19  (--text-soft darker)
     .card p      text-soft on canvas     4.48  ->  5.19
     .secnav-l    moss on well            4.36  ->  7.45  (moved to --ink-soft)
     .check-e     moss on well            4.36  ->  7.45
     .dia.bad     white on clay           4.27  ->  5.50  (--clay-deep ground)
     .dia-p       text-soft on tints      3.92  ->  6.0+  (moved to --ink-soft)
   Clay is a mid-tone: it fails against white (4.27) AND against ink (3.11), so
   the "not this" pill could not be fixed by recolouring its text. The ground
   had to darken. --clay-bright survives for marks and borders, which are not
   text and are not held to 4.5.
   ========================================================================== */

:root{
  /* The shipping app's token set, weighted toward the warm accents. Kept whole
     even where a token is momentarily unused, because this is a record of the
     app's palette rather than a list of what this file happens to need. */
  --canvas:#F7F2E9; --paper:#FFFDF8; --well:#F1EADF; --well-deep:#E9E0D4;
  --ink:#18352A; --ink-soft:#315043; --moss:#58735E; --moss-soft:#DDE7D9;
  --commit:#3D654C; --leaf:#DCEA94; --leaf-ink:#26311C;
  --kitchen:#78C7B5; --kitchen-soft:#CFEDE6; --kitchen-ink:#123E35;
  --oat:#E8D5BA; --oat-soft:#F1E6D6;
  /* Text-safe clay, 5.18:1 on canvas. The brighter original is decoration. */
  --clay:#A04E33; --clay-bright:#BD6041; --clay-deep:#A94E31; --clay-soft:#F8E7DE;
  --plum:#6C4859; --plum-soft:#EADDE3; --gold:#B08A3E;
  --line:#DED5C9; --rule:#8F877C;
  --text:#252A27; --text-soft:#616763; --white:#fff;

  /* Aliases kept so component rules read naturally. */
  --sage:var(--moss); --sage-dark:var(--ink); --sage-light:var(--moss-soft);
  --charcoal:var(--text); --gray:var(--text-soft);
  --border:var(--line); --terra:var(--clay); --terra-light:var(--clay-soft);
  --ok-bg:var(--moss-soft); --ok-fg:var(--commit);
  --warn-bg:var(--oat-soft); --warn-fg:#6B4A12;

  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,system-ui,sans-serif;
  --font-display:'Literata','Iowan Old Style','Palatino Linotype',Georgia,'Times New Roman',serif;
  --measure:66ch;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Smooth scrolling was unconditional, and the skip link on all 33 pages
   triggers it, which is a live reduced-motion violation. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--font-body);background:var(--canvas);color:var(--text);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);
  color:var(--white);padding:14px 20px;font-weight:800;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,30px)}
/* Every number in this manual aligns in a column, as it would in print. */
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ---- Document strip ---------------------------------------------------- */
/* A manual states which document you are holding before it says anything. */
.doc-strip{border-bottom:1px solid var(--rule);padding:16px 0 12px}
.doc-strip .wrap{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
.ds-item{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-soft)}
.ds-item b{color:var(--clay);font-weight:800}
.ds-crumbs{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ds-crumbs a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;
  min-height:32px;display:inline-flex;align-items:center}
.ds-crumbs span{color:var(--gray)}

/* ---- Shell: contents left, body right --------------------------------- */
/* The rail follows the article in the DOM on narrow screens and is promoted to
   a left column by CSS alone above 1080px. Reading order and tab order stay
   identical at every width because the order never changes; only `order` on a
   grid item moves it visually, and a contents list is the one case where that
   is correct, since a manual's reader looks up before reading down. */
.shell{display:grid;gap:36px;padding:0 0 24px}
@media (min-width:1080px){
  .shell{grid-template-columns:238px minmax(0,1fr);gap:52px;align-items:start}
  /* 76px is the shared header height from assets/header.css. Duplicated on
     purpose: header.css declares its tokens under .hd, not :root, so this file
     cannot read them. If the header height changes this number is stale, and
     the symptom is cosmetic rather than content sliding under a fixed bar. */
  .rail{position:sticky;top:92px;order:-1}
}

/* ---- Contents rail ---------------------------------------------------- */
.rail-l{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);padding-bottom:9px;border-bottom:1px solid var(--rule)}
.toc{list-style:none;margin-top:4px}
.toc li{border-bottom:1px solid var(--line)}
.toc a,.toc span.here{display:grid;grid-template-columns:40px minmax(0,1fr);gap:10px;
  padding:10px 0;font-size:13.5px;line-height:1.4;min-height:40px;align-items:baseline;
  text-decoration:none}
.toc a{color:var(--ink-soft)}
.toc a:hover,.toc a:focus-visible{color:var(--clay);text-decoration:underline}
.toc span.here{color:var(--ink);font-weight:800}
.toc b{font-size:11.5px;font-weight:800;color:var(--clay);letter-spacing:.03em}
/* 22px separates this list from the in-part list above it on article pages.
   On part index pages there is no list above, so it becomes the rail first
   element and that margin pushed the whole rail 22px down: the sidebar visibly
   moved when you clicked between a part index and an article. */
.toc-parts{margin-top:22px}
.rail>*:first-child{margin-top:0}

/* The rail and the main column start level. Both page types now open at the
   same offset, so nothing shifts vertically when you move between them. */
.rail{padding-top:30px}
.part-body{padding-top:30px}
.part-body>.dept{margin-top:0}
.toc-parts ol{list-style:none}
.toc-parts li{border-bottom:1px solid var(--line)}
/* The current part is a span, not a link, so it has to be named here too. It
   was not, so on the six part index pages that one row lost the grid, the gap
   and the padding, and its number sat jammed against its label while every
   other row lined up. The .toc list above got this right; this one did not. */
.toc-parts a,.toc-parts span.here{display:grid;grid-template-columns:30px minmax(0,1fr);
  gap:10px;padding:9px 0;font-size:13px;color:var(--ink-soft);text-decoration:none;
  min-height:38px;align-items:baseline}
.toc-parts a:hover,.toc-parts a:focus-visible{color:var(--clay);text-decoration:underline}
.toc-parts span.here{color:var(--ink);font-weight:800}
.toc-parts b{font-size:11px;font-weight:800;color:var(--clay)}
.rail-all{display:inline-flex;align-items:center;min-height:38px;margin-top:12px;
  font-size:12.5px;font-weight:800;color:var(--clay);text-decoration:underline;
  text-underline-offset:3px}

/* ---- Cover, the hub ---------------------------------------------------- */
.cover{background:var(--ink);color:var(--white);padding:clamp(38px,6vh,60px) 0 clamp(40px,6vh,62px)}
.cover-in{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,30px)}
.cover-kicker{font-size:10.5px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--leaf)}
.cover h1{font-family:var(--font-display);font-size:clamp(32px,6vw,58px);line-height:1.03;
  font-weight:700;letter-spacing:-.025em;margin-top:14px;max-width:18ch}
.cover-lede{font-size:clamp(15px,2.2vw,19px);line-height:1.62;color:rgba(255,255,255,.82);
  margin-top:16px;max-width:56ch}
.cover-byline{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-top:24px;padding-top:16px;
  border-top:1px solid rgba(220,234,148,.45)}
.cover-grid{display:grid;gap:28px;align-items:center}
@media (min-width:900px){.cover-grid{grid-template-columns:1.05fr .95fr;gap:44px}}
/* Was a flat vector of a counter under window light. Now a photograph of a
   table full of people, which is the one place in the guide that argues for
   why any of this is worth doing. overflow:hidden so the photograph takes the
   corner radius rather than squaring off the panel it sits in. */
.cover-art{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  border-radius:var(--r-md);overflow:hidden}
.cover-art svg,.cover-art img{width:100%;height:auto;display:block}

/* ---- Part heading, the section index ---------------------------------- */
.rule{height:1px;background:var(--rule);margin-top:44px}
.dept{margin-top:22px}
.dept-meta{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.dept-no{font-family:var(--font-display);font-size:clamp(30px,5vw,46px);font-weight:400;
  color:var(--clay);line-height:.95;letter-spacing:-.02em}
.dept-name{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft)}
.dept h1,.dept h2{font-family:var(--font-display);font-size:clamp(26px,4vw,40px);line-height:1.08;
  font-weight:700;letter-spacing:-.02em;color:var(--charcoal);margin-top:10px}
.dept-lede{font-size:16.5px;line-height:1.66;color:var(--gray);margin-top:12px;max-width:58ch;
  padding-top:14px;border-top:1px solid var(--rule)}

/* ---- Card grid, the hub's six parts ----------------------------------- */
.cards{display:grid;gap:0;margin-top:26px;border-top:1px solid var(--rule)}
.card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 16px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none}
.card:hover,.card:focus-visible{background:var(--well)}
.card-eye{grid-row:1/3;font-family:var(--font-display);font-size:22px;font-weight:400;
  color:var(--clay);line-height:1;font-variant-numeric:tabular-nums}
.card h3{font-family:var(--font-display);font-size:20px;line-height:1.2;font-weight:700;
  letter-spacing:-.015em;color:var(--charcoal)}
.card p{font-size:15px;line-height:1.6;color:var(--gray);max-width:60ch}
.card-meta{grid-column:2;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:4px}
.card-art{display:none}

/* ---- Article list, a section index ------------------------------------ */
.list{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--rule)}
.list a{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:4px 16px;
  align-items:baseline;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none}
.list a:hover,.list a:focus-visible{background:var(--well)}
.list-n{grid-row:1/3;font-size:12.5px;font-weight:800;color:var(--clay);letter-spacing:.03em;
  font-variant-numeric:tabular-nums}
.list-t{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;
  color:var(--charcoal);line-height:1.3}
.list-s{display:block;font-size:14.5px;color:var(--gray);line-height:1.55;margin-top:3px;
  max-width:62ch}
.list-arrow{grid-row:1/3;grid-column:3;color:var(--ink-soft);font-size:16px}

/* ---- Article ---------------------------------------------------------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-top:18px;
  font-size:12.5px;font-weight:700;color:var(--gray)}
.crumbs a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px;
  min-height:44px;display:inline-flex;align-items:center}

.art{padding-top:30px;container-type:inline-size}
/* Anchor target for every pager Previous/Next link (see guide/*.html, id="art"
   on both .art and .part-body): jumping straight to the article or part index
   on load, rather than to the top of the page above the contents rail.
   scroll-margin-top clears the fixed 76px header, matching --hd height in
   assets/header.css plus a small margin. */
#art{scroll-margin-top:92px}
/* The address is the largest thing on the page after the title. */
.art-no{font-family:var(--font-display);font-size:clamp(38px,6.4vw,64px);line-height:.9;
  font-weight:400;color:var(--clay);letter-spacing:-.02em}
.art-label{font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase;
  color:var(--ink-soft);margin-top:10px}
.art h1{font-family:var(--font-display);font-size:clamp(28px,4.6vw,44px);line-height:1.07;
  font-weight:700;letter-spacing:-.02em;color:var(--charcoal);margin-top:14px;max-width:24ch}
/* The standfirst carries BOTH boundary rules: one above it separating it from
   the title, one below it separating the front matter from the body. Anchoring
   the lower rule here rather than on whatever comes next is what makes it
   consistent. It used to live on .cl:first-of-type, so it appeared on articles
   that open with a numbered clause and vanished on articles that open with a
   lead paragraph. The rule moved, or was missing, depending on how the copy
   happened to start. */
.stand{font-size:19px;line-height:1.6;color:var(--ink-soft);margin-top:16px;max-width:52ch;
  padding:16px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-weight:400}

/* ---- Numbered clause -------------------------------------------------- */
/* The core component. Each clause carries its own address in a fixed gutter, so
   the numbers form a straight column and the prose has a hard left edge. */
.cl{display:grid;grid-template-columns:56px minmax(0,1fr);gap:0 16px;
  padding:24px 0;border-top:1px solid var(--line)}
/* No rule here now: the standfirst above already drew the boundary. A second
   one 24px later read as a doubled line. */
.cl:first-of-type{border-top:0}
/* Same reason. A .steps or .list block opening a lead would otherwise stack its
   own rule directly under the standfirst's. */
.lead>:first-child{border-top:0;margin-top:0}
.cl-n{font-size:12.5px;font-weight:800;color:var(--clay);letter-spacing:.04em;padding-top:5px}
.cl-b{min-width:0}
.cl-b>h2{font-family:var(--font-display);font-size:clamp(19px,2.3vw,26px);line-height:1.2;
  font-weight:700;letter-spacing:-.015em;color:var(--charcoal);margin:0}
/* The lead sits before clause one and has no number, which is what a manual
   does with an opening paragraph. */
.lead{padding:22px 0 4px}

/* :where() so the base prose rule carries ZERO specificity and every component
   class below wins against it. As a plain `.art p` at (0,1,1) it beat every
   single-class component at (0,1,0) and silently overrode their size and
   colour. */
:where(.art) :where(p){font-size:17px;line-height:1.74;margin-top:14px;
  max-width:var(--measure);color:var(--text-soft)}
:where(.art) :where(p):first-child{margin-top:0}
:where(.art) :where(p) strong{color:var(--text);font-weight:700}
:where(.art) :where(ul,ol){margin-top:14px;padding-left:22px;max-width:var(--measure)}
:where(.art) :where(li){font-size:17px;line-height:1.7;margin-top:8px;color:var(--text-soft)}
:where(.art) :where(li) strong{color:var(--text);font-weight:700}
.art a{color:var(--clay);text-decoration:underline;text-underline-offset:2px}
.art a:hover,.art a:focus-visible{color:var(--ink)}

/* ---- Where this lives in the app -------------------------------------- */
.where{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  border-left:4px solid var(--ink);background:var(--well);padding:12px 15px;margin-top:20px;
  max-width:var(--measure)}
.where-l{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.where-v{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink)}

/* ---- Steps ------------------------------------------------------------ */
.steps{display:grid;gap:0;margin-top:20px;padding:0;list-style:none;border-top:1px solid var(--rule);
  max-width:var(--measure)}
.steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:0 14px;padding:14px 0;
  border-bottom:1px solid var(--line);margin:0;font-size:inherit}
.step-n{font-size:12.5px;font-weight:800;color:var(--clay);padding-top:3px;
  font-variant-numeric:tabular-nums}
.step-b{min-width:0}
.step-b strong{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:700;
  color:var(--charcoal);margin-bottom:3px}
.step-b span{font-size:15.5px;line-height:1.62;color:var(--gray)}

/* ---- Callouts --------------------------------------------------------- */
/* Deadpan by design. A manual's warning does not have a personality. */
.note{display:grid;gap:2px;border-left:5px solid;padding:13px 16px;margin-top:22px;
  max-width:var(--measure)}
.note-i{display:none}   /* the emoji had no aria-hidden and was read aloud */
/* Direct child only. Unscoped, this also caught <strong> used for emphasis
   inside the body span, turning it into a block and stranding the punctuation
   that followed it on the next line. */
.note-b > strong{display:block;font-family:var(--font-display);font-size:16px;font-weight:700;
  margin-bottom:3px}
.note-b span{font-size:15.5px;line-height:1.62}
.note-b span strong{font-weight:700;color:inherit}   /* match the body, not the heading */
.note.tip{background:var(--moss-soft);border-color:var(--commit)}
.note.tip .note-b > strong{color:#1F4430} .note.tip span{color:#22402F}
.note.warn{background:var(--warn-bg);border-color:#C08A2E}
.note.warn .note-b > strong{color:var(--warn-fg)} .note.warn span{color:#5A3E0F}
/* Third variant, for a feature that is real but still being trialled. Plum,
   because tip green reads as reassurance and warn gold reads as danger, and
   this is neither. */
.note.trial{background:var(--plum-soft);border-color:var(--plum)}
.note.trial .note-b > strong{color:#4E3342} .note.trial span{color:#4A3140}
/* The label a screen reader hears instead of "light bulb". */
.note::before{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  font-family:var(--font-body)}
.note.tip::before{content:'Tip';color:var(--commit)}
.note.warn::before{content:'Warning';color:var(--warn-fg)}
.note.trial::before{content:'In testing';color:var(--plum)}

/* A personal note from the founder.
 *
 * Still not a .note variant, for the same reason: tip is reassurance, warn is
 * danger, trial is unfinished, and this is a person speaking. But the first
 * version was a hairline rule over ordinary body copy, which read as more
 * article and got scrolled straight past. Being different from the system
 * notes is not the same as being invisible.
 *
 * So it inverts instead. Every note variant is a light tint with a coloured
 * left border; this is a solid ink block with a lime label. On a page of
 * light body copy it is the only dark thing, which makes it impossible to
 * miss and still unmistakably not a system message.
 *
 * Contrast on ink #18352A: canvas 11.90:1, lime 10.28:1. Both well clear.
 */
.pnote{
  background:var(--ink); color:var(--canvas);
  border-radius:var(--r-md);
  padding:clamp(24px,3.4vw,38px) clamp(22px,3.2vw,40px);
  margin:40px 0 12px; max-width:var(--measure);
}
.pnote-eye{
  display:block; font-family:var(--font-body); font-size:11px; font-weight:800;
  letter-spacing:.18em; text-transform:uppercase; color:var(--leaf);
  margin-bottom:16px;
}
.pnote p{font-size:16.5px;line-height:1.7;color:var(--canvas);margin:0 0 1.05em}
.pnote p:first-of-type{font-family:var(--font-display);font-size:20px;
  font-weight:700;line-height:1.4;margin-bottom:.7em}
.pnote p:last-of-type{margin-bottom:0}
.pnote-sig{
  display:block; margin-top:26px; padding-top:20px;
  border-top:1px solid rgba(220,234,148,.32);
  font-family:var(--font-display); font-size:17px; font-weight:700;
  font-style:italic; color:var(--leaf);
}
.pnote-sig span{
  display:block; margin-top:6px; font-family:var(--font-body); font-size:11.5px;
  font-weight:600; font-style:normal; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(247,242,233,.72);
}

/* ---- Pull quote ------------------------------------------------------- */
.pull{font-family:var(--font-display);font-size:clamp(20px,3vw,27px);line-height:1.3;
  font-weight:700;letter-spacing:-.015em;color:var(--ink);border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);padding:20px 0;margin-top:30px;max-width:var(--measure)}

/* ---- Try this in iWhisk ----------------------------------------------- */
.try{background:var(--ink);color:var(--white);padding:20px 22px;margin-top:28px;
  display:grid;gap:4px;max-width:var(--measure)}
.try-ic{display:none}
.try-e{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leaf)}
.try-t{font-family:var(--font-display);font-size:20px;line-height:1.24;font-weight:700;
  margin-top:5px}
.try-p{font-size:15.5px;line-height:1.62;color:rgba(255,255,255,.82);margin-top:6px}
.try-a{justify-self:start;min-height:44px;display:inline-flex;align-items:center;gap:9px;
  padding:0 18px;margin-top:12px;background:var(--leaf);color:var(--leaf-ink);font-size:14px;
  font-weight:800;text-decoration:none}
.try-a:hover,.try-a:focus-visible{background:#E6F0AB}
.try--warm{background:#2C2119}
.try--warm .try-e{color:var(--oat)}
.try--warm .try-a{background:var(--oat);color:#2C2119}

/* ---- Checklist -------------------------------------------------------- */
.check{border:1px solid var(--rule);background:var(--well);padding:18px 20px;margin-top:24px;
  max-width:var(--measure)}
.check-e{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft)}
.check h2{font-family:var(--font-display);font-size:20px;font-weight:700;margin-top:5px;
  color:var(--ink)}
.check ul{list-style:none;padding:0;margin-top:12px}
.check li{display:flex;gap:12px;align-items:flex-start;padding:11px 0;
  border-top:1px solid var(--line);font-size:15.5px;line-height:1.55;color:var(--text)}
/* A square outline, not a checkbox: nothing here is interactive, and a control
   the reader cannot operate is an affordance that lies. */
.check li::before{content:'';width:14px;height:14px;flex-shrink:0;margin-top:4px;
  border:1.5px solid var(--ink-soft)}

/* ---- Diagrams --------------------------------------------------------- */
/* Colours are tokens on .dia rather than the thirty inline hex values the two
   drawings used to carry, so a future re-skin cannot orphan the artwork. */
.diagrams{display:grid;gap:16px;margin-top:24px}
@container (min-width:600px){.diagrams{grid-template-columns:1fr 1fr}}
.dia{--d-stroke:var(--ink); --d-fill:var(--paper); --d-accent:var(--clay);
  border:1px solid var(--rule);background:var(--paper);padding:14px}
.dia.good{--d-accent:var(--commit)}
.dia.bad{--d-accent:var(--clay-deep)}
.dia-v{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 10px;color:var(--white)}
.dia.good .dia-v{background:var(--ink)}
/* White on the original clay measured 4.27. This ground is 5.50. */
.dia.bad .dia-v{background:var(--clay-deep)}
.dia-t{font-family:var(--font-display);font-size:16px;font-weight:700;margin-top:11px;
  color:var(--charcoal)}
/* Was --text-soft on a tint at 3.92 and 4.15. Ink-soft clears 6 on both. */
.dia-p{font-size:14px;line-height:1.58;color:var(--ink-soft);margin-top:5px}
.dia svg{margin-top:12px;width:100%;height:auto;min-width:288px}
/* SVG text scales with the drawing and ignores the user's font size, so the
   drawing scrolls rather than shrinking its labels past legibility. */
.dia{overflow:auto}

/* ---- Numbered tips ---------------------------------------------------- */
.tips{display:grid;gap:0;margin-top:22px;border-top:1px solid var(--rule);max-width:var(--measure)}
/* SCOPED TO .tips ON PURPOSE. The callout markup is <div class="note tip">, so
   a bare .tip also matched every tip callout. Both selectors are one class, so
   specificity tied and source order decided it: .tip won, and callouts silently
   inherited this component's two-column grid and its zero horizontal padding.
   That is why the "TIP" label sat jammed against the left border. Scoping means
   these rules only reach the six real tip cards, which all live in a .tips
   container. */
.tips .tip{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 14px;padding:14px 0;
  border-bottom:1px solid var(--line)}
.tips .tip--cool,.tips .tip--warm{background:none}
.tips .tip-n{font-family:var(--font-display);font-size:20px;font-weight:400;color:var(--clay);
  line-height:1.1;font-variant-numeric:tabular-nums}
.tips .tip-t{font-family:var(--font-display);font-size:16.5px;font-weight:700;color:var(--charcoal);
  line-height:1.3}
.tips .tip-b{font-size:15px;line-height:1.6;color:var(--gray);margin-top:3px}

/* ---- Section nav on the hub ------------------------------------------- */
.secnav{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin-top:22px;
  padding:14px 16px;background:var(--well);border:1px solid var(--rule)}
/* Was --moss on --well at 4.36. Ink-soft is 7.45. */
.secnav-l{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);margin-right:4px}
.secnav a{font-size:14px;font-weight:700;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.secnav a:hover,.secnav a:focus-visible{color:var(--clay)}

/* ---- Pager ------------------------------------------------------------ */
.pager{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--rule)}
@media (min-width:700px){.pager{grid-template-columns:1fr 1fr}}
.pager a{display:block;padding:17px 0;text-decoration:none;border-bottom:1px solid var(--line)}
@media (min-width:700px){.pager a+a{padding-left:22px;border-left:1px solid var(--line)}}
.pager a:hover,.pager a:focus-visible{background:var(--well)}
.pager-e{display:block;font-size:10px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-soft)}
.pager-t{display:block;font-family:var(--font-display);font-size:16.5px;font-weight:700;
  color:var(--charcoal);margin-top:5px;line-height:1.3}

main{padding-bottom:64px}

/* ---- Hub contents ------------------------------------------------------ */
/* The manual's front matter. This replaced a grid of six illustrated feature
   cards: a manual opens with contents, and the illustrated cards were the one
   place ornament survived. It also gives the rail's "Full contents" link a real
   destination without adding a page. */
.contents-h{margin-top:44px;padding-bottom:10px;border-bottom:1px solid var(--rule)}
.contents-note{font-size:13px;font-weight:600;color:var(--gray);margin-top:6px}
.part{margin-top:34px}
.part-h{display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:baseline}
.part-no{font-family:var(--font-display);font-size:clamp(26px,4vw,38px);font-weight:400;
  color:var(--clay);line-height:.95}
.part-h h2{font-family:var(--font-display);font-size:clamp(21px,3vw,30px);line-height:1.12;
  font-weight:700;letter-spacing:-.02em;color:var(--charcoal)}
.part-lede{font-size:15.5px;line-height:1.6;color:var(--gray);margin-top:6px;max-width:60ch}
.part .list{margin-top:14px}
.part-body{min-width:0}

/* The support address is the action a stuck reader needs. As a bare inline link
   it measures 20px tall. That is technically exempt under WCAG 2.5.8's inline
   exception, since it sits inside a sentence, but leaning on an exception for
   the one thing someone reaches for when confused is the wrong call. */
.art a[href^="mailto:"]{display:inline-block;padding:4px 0;font-weight:700}

/* ---- FAQ verdicts ------------------------------------------------------ */
/* Six of the nine answers in 6.04 are a hard yes or no, so the verdict becomes
   a typographic element in the number gutter and a scanning reader gets the
   answer before reading a word. The three that are not binary get no chip:
   inventing a verdict for a qualified answer would be the dishonest version of
   this idea. Measured: leaf on ink 10.27, white on clay-deep 5.50. */
.verdict{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:5px 11px;margin-bottom:9px;font-family:var(--font-body)}
.v-yes{background:var(--ink);color:var(--leaf)}
.v-no{background:var(--clay-deep);color:var(--white)}
.v-part{background:var(--oat-soft);color:var(--warn-fg);box-shadow:inset 0 0 0 1px #C08A2E}
/* A safety answer gets the manual's warning block, not a chip and a shrug. */
.safety{margin-top:12px;border-left:5px solid #C08A2E;background:var(--warn-bg);
  padding:12px 15px;max-width:var(--measure)}
.safety-l{font-size:10.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--warn-fg)}
.safety p{font-size:15px;line-height:1.62;color:#5A3E0F;margin-top:4px;max-width:none}

/* ---- App screen figure ------------------------------------------------- */
/* A real screenshot beside its explanation. The screen runs tall, roughly 1:2.2,
   so at full column width it would be a 675px block dominating the article. Side
   by side with the caption uses the space and keeps the reading rhythm.
   Stacks below 620px of container, where there is no room for two columns. */
/* Cropped to the part of the screen the article is about, not the whole
   handset. A phone frame is mostly chrome the reader does not need, and the
   crop is also what removes the account name the app injects into headers and
   empty-state headlines. Narrowing to the feature makes a better teaching image
   and a smaller file: 92KB against 175KB for the full screen. */
.screen{margin-top:24px;padding-top:22px;border-top:1px solid var(--rule);
  max-width:var(--measure)}
.screen img{display:block;width:100%;max-width:620px;height:auto;
  border:1px solid var(--rule);border-radius:12px;background:var(--paper)}
.screen figcaption{margin-top:12px;max-width:56ch}
.screen-n{display:block;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--clay)}
.screen-t{display:block;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--charcoal);
  margin-top:6px}
.screen-c{display:block;font-size:15px;line-height:1.62;color:var(--text-soft);margin-top:7px;max-width:46ch}
.screen-c b{color:var(--text);font-weight:700}