/* tokens: every color, size and font the guide uses. The :root block is copied unchanged from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   Dark only (decision D2): every color lives on bare :root, and no color literal appears outside it. */

/* Geist + Geist Mono, self-hosted: the six .ttf files and OFL-Geist.txt in ../fonts/ are copied unchanged from the
   splash site's src/assets/fonts/ (static-sites/ltr-aws-static-site-sneklog-splash), 2026-10-16. The mockup loaded the
   same faces from Google Fonts. These subsets lack U+2009 and U+202F, the thin spaces round a settings path's ›. */
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/Geist-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/GeistMono-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: dark;
  /* the app's lib/theme.ts, dark palette */
  --bg: #0c100b; --rail: #090c08; --surface: #131812; --surface2: #192017; --surface3: #212a1e; --surface4: #2a3526;
  --field: #0c100b;
  --border: #20281d; --border-raised: #2c3728; --border-strong: #3c4a37; --border-hover: #4b5c45;
  --text: #eef1e8; --body: #c4ccbc; --muted: #93a08b; --faint: #7d8a73;
  --brand: #248549; --brand-hover: #1f7a42; --brand-strong: #55c781; --brand-tint: rgba(85, 199, 129, 0.12);
  --on-brand: #ffffff; --amber: #e7b458; --danger: #ef6a5c;
  /* one hue per care category */
  --feeding: #f08672; --cleaning: #e7b458; --weight: #73b7e8; --shed: #b09df2; --meds: #ec90bf;
  --defecation: #ab9c6d; --handling: #5cc6b2; --notes: #a7b1a0; --breeding: #eea57a; --length: #5cc4d2;
  --scrim: rgba(4, 6, 4, 0.66); --bar-glass: rgba(12, 16, 11, 0.9);
  --logo-ink: #ffffff; --logo-lizard: #228e44;
  --pop: 0 18px 44px -14px rgba(0, 0, 0, 0.78), 0 2px 8px rgba(0, 0, 0, 0.35);
  --tank-edge: #2c3728; --tank-light: rgba(238, 241, 232, 0.5); --tank-cone: rgba(214, 240, 200, 0.06);
  --tank-glow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 34px 80px -40px rgba(85, 199, 129, 0.26), 0 20px 40px -24px rgba(0, 0, 0, 0.85);
  --device: #050705; --bezel: #000000; --lb-bg: rgba(7, 9, 6, 0.97);
  /* named one-offs, so no color lives outside :root */
  --on-accent: #0c100b;
  --selection: rgba(85, 199, 129, 0.28);
  --link-underline: rgba(85, 199, 129, 0.45);
  --mark-bg: rgba(85, 199, 129, 0.2);
  --scale-ink: rgba(85, 199, 129, 0.07);
  --clip-shadow: 0 30px 70px -36px rgba(85, 199, 129, 0.28), 0 18px 40px -22px rgba(0, 0, 0, 0.9);
  --marker-shadow: 0 0 0 3px rgba(12, 16, 11, 0.85), 0 4px 10px rgba(0, 0, 0, 0.5);
  --zoom-chip: rgba(9, 12, 8, 0.72); --zoom-edge: rgba(238, 241, 232, 0.2);
  --cue-bg: rgba(9, 12, 8, 0.86);
  --marker-bg: rgba(9, 12, 8, 0.82); --spot-dim: rgba(4, 6, 4, 0.64); --key-tint: rgba(85, 199, 129, 0.08);
  --mask-show: #ffffff; --mask-hide: #000000;
  /* printed paper is always white, even in the dark guide (paper) */
  --paper: #ffffff; --ink: #1d211c; --paper-label: #f3f5f0; --paper-label-edge: #c3c9bd; --paper-used: #dde2d8; --paper-ink-faint: #7c8577;
  --paper-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), 0 16px 34px -16px rgba(0, 0, 0, 0.9);
  --haze: rgba(85, 199, 129, 0.22);
  --frame-shadow: 0 0 0 1px #2c3728, 0 0 0 5px #0d110c, 0 0 0 6px #232c20, 0 50px 100px -40px rgba(85, 199, 129, 0.22), 0 40px 80px -30px rgba(0, 0, 0, 0.95);
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* type: Geist for reading and headings, Geist Mono for record IDs, numbers and keys */
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 17px; --fs-lede: 19.5px; --fs-h1: 42px; --fs-h2: 26px; --fs-h3: 18px; --fs-small: 14px;

  --bar-h: 60px; --side: 288px; --toc: 216px; --measure: 680px;
  --r-s: 8px; --r-m: 12px; --r-l: 18px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* base: the reset, type defaults, buttons, the one disclosure grammar and reduced motion, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   Every layout rule in the guide is a container query on .guide (the guide's own width), as in the mockup. */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: var(--fs-body); line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; color: var(--text); text-wrap: balance; }
:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; border-radius: 6px; }
main:focus { outline: none; }
.ic { width: 18px; height: 18px; flex: none; display: inline-block; }
kbd {
  font-family: var(--mono); font-size: 12px; line-height: 1; padding: 3px 6px 4px; border-radius: 6px;
  background: var(--surface3); color: var(--body); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--border-raised), inset 0 -1px 0 var(--border-strong);
}
code, .mono { font-family: var(--mono); font-size: 0.86em; letter-spacing: -0.01em; }
.skip {
  position: absolute; z-index: 90; left: 12px; top: -60px; padding: 10px 16px; border-radius: 10px;
  background: var(--brand); color: var(--on-brand); font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.guide { container: guide / inline-size; min-height: 100vh; min-height: calc(100dvh - var(--safe-top) - var(--safe-bottom)); background: var(--bg); position: relative; }
h1[tabindex="-1"]:focus { outline: none; }

/* buttons (the mockup's top bar section): icon buttons, the brand button and the quiet one */
.icon-btn {
  width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; color: var(--body);
  display: grid; place-items: center; cursor: pointer; flex: none; transition: background-color .15s, color .15s;
}
.icon-btn:hover { background: var(--surface2); color: var(--text); }
.icon-btn .ic { width: 22px; height: 22px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  border-radius: 11px; border: 0; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s;
}
.btn .ic { width: 17px; height: 17px; }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-quiet { background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.btn-quiet:hover { background: var(--surface4); }
/* buttons that are links keep their own colors inside prose */
.prose a.btn { text-decoration: none; }
.prose a.btn-primary { color: var(--on-brand); }
.prose a.btn-quiet { color: var(--text); }

/* one disclosure grammar (2026-10-16): the caret on the left, turning a quarter when open; no box */
details.transcript summary, details.toc-inline summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--text); border-radius: 8px;
}
details summary::-webkit-details-marker { display: none; }
details summary .ic { width: 14px; height: 14px; color: var(--muted); transition: transform .2s var(--ease); }
details[open] > summary .ic { transform: rotate(90deg); }
.js .js-hide { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }

/* family A, the page frame: top bar, columns, sidebar rows, breadcrumbs, article type, Where to find it,
   On this page, related pages, previous / next, section lists, the checked lines and the footer, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   The phone drawer and search panel are in overlays.css; the guide's home is home.css. */

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40;
  height: var(--bar-h); display: flex; align-items: center; gap: 8px;
  padding-right: 12px; background: var(--bar-glass); border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.tb-brand { display: flex; align-items: center; gap: 10px; height: 100%; padding-left: 8px; min-width: 0; flex: none; }
.brand-link { display: flex; align-items: center; gap: 12px; text-decoration: none; min-width: 0; border-radius: 8px; }
.logo { width: 104px; height: auto; display: block; flex: none; }
.logo .lz, svg .lz { fill: var(--logo-lizard); fill-rule: evenodd; }
.logo .tx, svg .tx { fill: var(--logo-ink); fill-rule: evenodd; }
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.02em; white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--border-strong); line-height: 22px; }
.brand-name .full { display: none; }
.tb-search { display: none; }
.tb-spacer { flex: 1; }
.tb-open { display: none; }

/* the search field (a button that opens the search panel) */
.searchfield {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 10px 0 12px;
  border: 0; border-radius: 11px; background: var(--field); color: var(--faint); cursor: text; text-align: left;
  box-shadow: inset 0 0 0 1px var(--border-raised); transition: box-shadow .15s, background-color .15s;
}
.searchfield:hover { box-shadow: inset 0 0 0 1px var(--border-hover); }
.searchfield .ic { width: 17px; height: 17px; color: var(--muted); }
.searchfield span { flex: 1; font-size: 15px; }

/* ---------- the three columns ---------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr); }
.sidebar { display: none; }
.toc-col { display: none; }
.main { min-width: 0; padding: 22px 16px 56px; }
.article, .crumbs, .pager, .checked { max-width: var(--measure); margin-inline: auto; }

/* ---------- navigation: the app's rail, its rows and its open-into sub-items ---------- */
.nav { display: flex; flex-direction: column; gap: 2px; padding: 16px 12px 28px; }
.nav-row {
  display: flex; align-items: center; gap: 11px; min-height: 38px; padding: 8px 12px; border-radius: 10px;
  color: var(--body); text-decoration: none; font-size: 15px; line-height: 21px;
  transition: background-color .15s, color .15s;
}
.nav-row:hover { background: var(--surface2); color: var(--text); }
.nav-row .ic { width: 18px; height: 18px; color: var(--muted); }
.nav-row[aria-current="page"] { background: var(--brand-tint); color: var(--text); font-weight: 600; }
.nav-row[aria-current="page"] .ic { color: var(--brand-strong); }
.nav-row .label { flex: 1; min-width: 0; }
.nav-sec { position: relative; }
.nav-sec > .nav-row { padding-right: 40px; }
.nav-sec.on > .nav-row { color: var(--text); }
.caret {
  position: absolute; right: 8px; top: 7px; width: 26px; height: 26px; border: 0; border-radius: 7px;
  background: transparent; color: var(--faint); display: grid; place-items: center; cursor: pointer;
}
.caret:hover { background: var(--surface3); color: var(--body); }
.caret .ic { width: 12px; height: 12px; transition: transform .2s var(--ease); }
.nav-sec.open .caret .ic { transform: rotate(90deg); }
.subs { display: none; flex-direction: column; gap: 1px; margin: 1px 0 6px; }
.nav-sec.open .subs { display: flex; }
.sub {
  display: block; padding: 6px 12px 6px 41px; border-radius: 10px; font-size: 14px; line-height: 20px;
  color: var(--muted); text-decoration: none; transition: background-color .15s, color .15s;
}
.sub:hover { background: var(--surface2); color: var(--text); }
.sub[aria-current="page"] { background: var(--brand-tint); color: var(--text); font-weight: 600; }
/* the part of a one-page section being read (nav.js), as On this page marks its own */
.sub[aria-current="location"] { color: var(--brand-strong); font-weight: 500; }
.nav-gap { height: 10px; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; font-size: 14px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); text-decoration: none; border-radius: 4px; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs .sep { color: var(--border-hover); }
/* each separator travels with the item after it, so a wrap never leaves a "/" dangling at a line's end */
.crumbs .crumb { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
/* on a phone the current page leaves the trail (the title is right below it); a screen reader still hears it */
@container guide (max-width: 639px) { .crumbs .crumb:has(> [aria-current]) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.crumbs [aria-current] { color: var(--body); font-weight: 500; }

/* ---------- article type ---------- */
.article h1 { font-size: 32px; line-height: 1.1; letter-spacing: -0.035em; }
.lede { font-size: 18px; line-height: 1.55; color: var(--body); margin-top: 12px; max-width: 58ch; }
.prose > * + * { margin-top: 18px; }
.prose .callout.old, .prose .vh + .callout { scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top)); }
.prose h2 {
  font-size: 23px; line-height: 1.2; letter-spacing: -0.03em; margin-top: 52px;
  scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top));
}
.prose h3 { font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; margin-top: 30px; scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top)); }
/* a subsection reads as one (the proofread's third round, 2026-10-20: "should maybe have a different font
   and/or be offset, since it is a sub category"): an article's own h3 is smaller than its h2 and set in from
   a quiet rule at its left. Only the article's own: a setting's, a trouble row's, a glossary entry's and an
   accordion's summary keep their looks, and the stepped diagram's titles sit inside it */
.prose > h3, .prose .acc-body > h3, .prose .steps-block > h3 { padding-left: 12px; border-left: 2px solid var(--border-strong); }
.prose h2 + *, .prose h3 + * { margin-top: 12px; }
.prose p, .prose li { color: var(--body); }
.prose strong { color: var(--text); font-weight: 600; }
.prose b, .callout b, .pc b { color: var(--text); font-weight: 500; }
.prose a, .link { color: var(--brand-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--link-underline); }
.prose a:hover, .link:hover { text-decoration-color: var(--brand-strong); }
.prose ul { padding-left: 1.2em; margin-bottom: 0; }
.prose ul li { padding-left: 0.2em; }
.prose ul li + li { margin-top: 10px; }
.prose ul li::marker { color: var(--faint); }
.small, .prose p.small { font-size: var(--fs-small); color: var(--muted); }
.checked, .prose p.checked { margin-top: 44px; font-size: 13.5px; color: var(--faint); }
.checked time { font-variant-numeric: tabular-nums; color: var(--muted); }

/* "Where to find it" */
.where {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 22px; padding: 12px 14px;
  border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border);
}
.where-label { font-size: 14px; color: var(--muted); }
.path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; font-weight: 500; color: var(--text); }
.path .step { display: inline-flex; align-items: center; gap: 7px; }
.path .step > .ic { width: 18px; height: 18px; color: var(--brand-strong); }
.path .chev { width: 12px; height: 12px; color: var(--faint); }
.where-note { flex-basis: 100%; font-size: 14px; color: var(--muted); }
.where-sees { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 15px; color: var(--text); font-weight: 500; }
.where-sees span { display: inline-flex; align-items: center; gap: 7px; }

/* ---------- "On this page" ---------- */
.toc-col .toc-wrap { position: sticky; top: calc(var(--bar-h) + 30px + var(--safe-top)); padding: 40px 20px 0 8px; }
.toc-title { font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; border-left: 1px solid var(--border-raised); }
/* the mockup's buttons are links here: each entry is a #fragment */
.toc-list a {
  display: block; width: 100%; text-align: left; padding: 5px 10px 5px 14px; margin-left: -1px; border: 0; border-left: 2px solid transparent;
  background: transparent; color: var(--muted); font-size: 14px; line-height: 1.4; cursor: pointer; border-radius: 0 6px 6px 0;
  text-decoration: none; transition: color .15s, border-color .15s;
}
.toc-list a:hover { color: var(--text); }
.toc-list a[aria-current="true"] { color: var(--brand-strong); border-left-color: var(--brand-strong); font-weight: 500; }
/* one disclosure grammar (2026-10-16): the caret on the left, turning a quarter when open, the words in the text color;
   a row with hairlines only where the disclosure holds a list (On this page, the transcript, the accordion). No box. */
details.toc-inline { margin-top: 20px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
details.toc-inline[open] { padding-bottom: 12px; }
details.toc-inline summary { min-height: 44px; }
details.toc-inline .toc-list { margin-top: 2px; }
details.toc-inline .toc-list a { padding: 11px 14px; }

/* ---------- related pages, previous / next ---------- */
.prose .related { list-style: none; padding: 0; margin: 12px -12px 0; display: grid; gap: 2px; }
.prose .related li { padding: 0; }
.prose .related li + li { margin-top: 0; }
.related a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; transition: background-color .15s; }
.related a:hover { background: var(--surface); }
.related .t { color: var(--brand-strong); font-weight: 500; }
.related .s { color: var(--muted); font-size: 15px; line-height: 1.5; }
.pager { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); }
.pager a {
  display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 12px 16px; border-radius: var(--r-m); text-decoration: none;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); transition: box-shadow .15s, background-color .15s;
}
.pager a:hover { box-shadow: inset 0 0 0 1px var(--border-hover); background: var(--surface2); }
.pager .ic { width: 18px; height: 18px; color: var(--muted); }
.pager .pt { display: flex; flex-direction: column; min-width: 0; }
.pager .pk { font-size: 13px; color: var(--muted); }
.pager .pn { font-weight: 600; color: var(--text); line-height: 1.35; }
.pager .next { justify-content: flex-end; text-align: right; }

/* ---------- unwritten pages ---------- */
.stub-note { margin-top: 30px; display: grid; gap: 10px; }
.stub-note > * { margin: 0; }
.prose .stub-note .head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; margin: 0; }
.stub-note .head .ic { width: 22px; height: 22px; color: var(--muted); }
.stub-note p { color: var(--body); font-size: 16px; }
.stub-links { display: grid; margin-top: 6px; border-top: 1px solid var(--border); }
.stub-links a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 4px; border-bottom: 1px solid var(--border); text-decoration: none; }
.stub-links a > .ic { width: 19px; height: 19px; color: var(--brand-strong); }
.stub-links a > .chev { width: 14px; height: 14px; color: var(--faint); margin-left: auto; }
.stub-links a:hover .t { color: var(--brand-strong); }
.stub-links .t { font-weight: 600; color: var(--text); transition: color .15s; }
.stub-links .s { font-size: 14px; color: var(--muted); }
.sec-list { list-style: none; padding: 0; margin: 26px 0 0; border-top: 1px solid var(--border); }
.sec-list li { border-bottom: 1px solid var(--border); }
.sec-list a { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 14px 4px; text-decoration: none; }
.sec-list a:hover .t { color: var(--brand-strong); }
.sec-list .t { font-weight: 600; color: var(--text); transition: color .15s; }
.sec-list .s { display: block; color: var(--muted); font-size: 15px; line-height: 1.5; margin-top: 2px; }
.prose .sec-list { padding-left: 0; }
.prose .sec-list li { padding-left: 0; margin-top: 0; }
/* a redirect stub's one line, seen only where the browser doesn't follow it (src/_generated/redirect.njk) */
.moved { max-width: var(--measure); margin: 0 auto; padding: 48px 16px; color: var(--body); }
.moved a { color: var(--brand-strong); text-underline-offset: 3px; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--border); background: var(--rail); padding: 32px 16px 36px; }
.foot-in { max-width: 1040px; margin-inline: auto; display: flex; flex-wrap: wrap; gap: 22px 40px; justify-content: space-between; align-items: flex-start; }
.foot-ltr { display: flex; flex-direction: column; gap: 12px; max-width: 40ch; }
.foot-ltr .logo { width: 132px; }
.foot-ltr p { color: var(--muted); font-size: 14.5px; line-height: 1.55; }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 32px; font-size: 15px; }
.foot-links a { display: inline-block; padding-block: 10px; color: var(--body); text-decoration: none; }
.foot-links a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- the rail's foot: the app's scale rings, fading out upward (Sidebar.tsx RailScales) ---------- */
.rail-scales {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 44%; opacity: 0.5; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, var(--bezel), transparent); mask-image: linear-gradient(to top, var(--bezel), transparent);
}
.scale-path { stroke: var(--scale-ink); stroke-width: 1; fill: none; }

/* checked: the date a page was checked against the app, and the feedback line under it */
.checked-top, .prose p.checked-top { margin-top: 12px; font-size: 13.5px; color: var(--faint); }
.checked-top time { color: var(--muted); font-variant-numeric: tabular-nums; }
.checked-ask, .prose p.checked-ask { margin-top: 6px; font-size: 13.5px; color: var(--faint); }
.checked-ask b { color: var(--muted); font-weight: 500; }

/* ---------- the frame's container queries ---------- */
@container guide (max-width: 379px) {
  .logo { width: 88px; }
  .brand-link { gap: 10px; }
  .brand-name { padding-left: 10px; }
}
@container guide (max-width: 329px) {
  .brand-name { display: none; }
}
@container guide (min-width: 560px) {
  .main { padding: 30px 28px 64px; }
  .pager { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pager .next { grid-column: 2; }
}
@container guide (min-width: 640px) {
  .tb-search { display: block; flex: 1; max-width: 420px; margin-left: 12px; }
  .tb-search-icon { display: none; }
  .tb-open { display: inline-flex; }
  .brand-name .full { display: inline; }
}
@container guide (max-width: 639px) {
  .tb-open { display: none; }
  .crumbs { margin-bottom: 8px; margin-top: -8px; }
  .crumbs a, .crumbs [aria-current] { padding-block: 11px; }
}
@container guide (min-width: 992px) {
  .layout { grid-template-columns: var(--side) minmax(0, 1fr); }
  .sidebar {
    display: block; align-self: start; position: sticky; top: calc(var(--safe-top) + var(--bar-h));
    height: calc(100vh - var(--bar-h) - var(--safe-top)); overflow: hidden; background: var(--rail); border-right: 1px solid var(--border);
  }
  .side-scroll {
    position: relative; z-index: 1; height: 100%; overflow-y: auto; padding-bottom: 64px;
    scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
  }
  .topbar { padding-right: 22px; }
  .tb-brand { width: var(--side); padding-left: 22px; background: var(--rail); border-right: 1px solid var(--border); }
  /* the search field lines up with the article's left edge */
  .tb-search { margin-left: calc(36px + max(0px, (100cqw - var(--side) - 88px - var(--measure)) / 2)); }
  .menu-btn { display: none; }
  .logo { width: 96px; }
  .layout { background: linear-gradient(to right, var(--rail) calc(var(--side) - 1px), var(--border) calc(var(--side) - 1px), var(--border) var(--side), transparent var(--side)); }
  .main { padding: 38px 44px 72px; }
  .foot { padding-left: calc(var(--side) + 44px); padding-right: 44px; }
  .foot-in { margin-inline: 0; }
}
@container guide (min-width: 1200px) {
  .layout { grid-template-columns: var(--side) minmax(0, 1fr) var(--toc); }
  .toc-col { display: block; align-self: stretch; }
  details.toc-inline { display: none; }
  .guide[data-route="home"] .toc-col, .layout.wide .toc-col { display: none; }
  .layout.wide .main { grid-column: 2 / -1; }
  .tb-search { margin-left: calc(36px + max(0px, (100cqw - var(--side) - var(--toc) - 88px - var(--measure)) / 2)); }
}
/* the big search is already on the guide's home, and on the 404 */
.guide[data-route="home"] .tb-search, .guide[data-route="not-found"] .tb-search { display: none; }
.layout.wide .article { max-width: 980px; }
.layout.wide .crumbs { max-width: 980px; }

/* family B, inside a sentence: the UI-label capsule, settings paths, keys, term links, badges and tags,
   app icons, the app's need chips and the Calendar's pills, and text to copy, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   One change from the mockup: the kind classes (.k-*) come after .cal-pill, so a pill's kind sets its hue
   (in the mockup .cal-pill came later and every pill but a clutch fell back to the feeding hue). */

/* ---------- ui-label: a control or a place, as the app shows it, in a faint capsule (decided 2026-10-16) ----------
   A settings path is ONE capsule round all its parts. A long label (ui-cap wrap) may wrap: the capsule runs on to the
   next line, square where it breaks (box-decoration-break stays "slice": "clone" pads each piece, and Chromium lets
   that padding poke 2-6 px past the line's end) */
.ui-cap, .spath {
  padding: 1px 6px 2px; border-radius: 5px; background: var(--surface3); box-shadow: inset 0 0 0 1px var(--border-raised);
}
.ui-cap { white-space: nowrap; }
.ui-cap.wrap { white-space: normal; }

/* ---------- setting-path: Settings › Food › Uses stock from, inside a sentence ---------- */
.spath { display: inline; }
.spath b { white-space: nowrap; }
.spath .sep { color: var(--faint); font-weight: 400; }
/* the space around › is text, not padding, so a linked path's one underline runs unbroken under it; it may wrap after a › */
.spath .sep::before { content: "\202F"; }
.spath .sep::after { content: "\2009"; }
/* a linked path is ONE link: one underline runs under every part and the › between them */
.prose a.spath, a.spath { color: var(--brand-strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--link-underline); }
.prose a.spath b, a.spath b { color: inherit; }
.prose a.spath:hover, .prose a.spath:focus-visible, a.spath:hover { text-decoration-color: var(--brand-strong); }
a.spath .sep { color: var(--muted); }

/* ---------- kbd: keys in a sentence; a combination is an outer kbd holding its keys ---------- */
.prose kbd, .callout kbd { font-size: 0.78em; }
kbd.combo { background: none; box-shadow: none; padding: 0; font-family: inherit; font-size: inherit; color: inherit; }
kbd.combo kbd + kbd { margin-left: 3px; }

/* ---------- term: a SnekLog word, linked to its entry on Words SnekLog uses ---------- */
.prose a.term, a.term {
  color: var(--text); text-decoration: underline dotted; text-decoration-thickness: 1.5px; text-underline-offset: 3.5px;
  text-decoration-color: var(--brand-strong);
}
.prose a.term:hover, a.term:hover { color: var(--brand-strong); }

/* ---------- badge: This device only, Computer only, Phone only (Sample is .tag, Soon is .soon-pill) ---------- */
.badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; flex: none;
  font-size: 12.5px; font-weight: 500; line-height: 1; letter-spacing: 0; color: var(--muted); white-space: nowrap;
  box-shadow: inset 0 0 0 1px var(--border-strong); vertical-align: 0.18em;
}
h2 .badge, h3 .badge, h4 .badge { margin-left: 10px; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber); }
.soon-pill { display: inline-flex; align-items: center; height: 19px; padding: 0 7px; border-radius: 999px; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-strong); flex: none; }

/* app-icon: the exact icon the reader taps, beside its word; a care-kind heading */
/* inline icons and the app's buttons named in the copy */
.ii { width: 1.05em; height: 1.05em; vertical-align: -0.17em; color: var(--muted); }
/* [[icon feeding: hamburger]]: an icon in its kind's own color (the care icons table, the spouse's sixth proofread) */
.ii.hue-feeding { color: var(--feeding); } .ii.hue-meds { color: var(--meds); } .ii.hue-cleaning { color: var(--cleaning); }
.ii.hue-weight { color: var(--weight); } .ii.hue-shed { color: var(--shed); } .ii.hue-length { color: var(--length); }
.ii.hue-handling { color: var(--handling); } .ii.hue-breeding { color: var(--breeding); }
.ii.hue-defecation { color: var(--defecation); } .ii.hue-notes { color: var(--notes); }
.plus-dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand); color: var(--on-brand); vertical-align: -5px; }
.plus-dot .ic { width: 13px; height: 13px; }
.prose h3.kind-h { display: flex; align-items: center; gap: 10px; }
.kind-h .ic { width: 20px; height: 20px; color: var(--c); }

/* ---------- the app's need chips (components/ui/NeedChips.tsx) ---------- */
.chip {
  --c: var(--feeding);
  display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px 0 7px; border-radius: 8px;
  font-size: 12.5px; font-weight: 600; line-height: 1; color: var(--c); white-space: nowrap; vertical-align: middle;
}
.chip .ic { width: 15px; height: 15px; }
.chip.soon { background: color-mix(in srgb, var(--c) 13%, transparent); }
.chip.over { background: color-mix(in srgb, var(--c) 13%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); font-weight: 700; }
.chip.fact { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent); font-weight: 500; }
.prose p .chip, .prose li .chip { height: 22px; padding: 0 7px 0 5px; border-radius: 7px; font-size: 12px; vertical-align: 1px; }
.prose p .chip .ic, .prose li .chip .ic { width: 13px; height: 13px; }
/* the Calendar's pills (CalendarMonth.tsx SamplePill): logged, overdue, due, likely, birthday */
.cal-pill { --c: var(--feeding); display: inline-flex; align-items: center; gap: 4px; height: 21px; padding: 0 6px 0 4px; border-radius: 6px; font-size: 12.5px; font-weight: 500; line-height: 1; color: var(--c); white-space: nowrap; }
.cal-pill .ic { width: 12.5px; height: 12.5px; }
.cal-pill.logged { background: color-mix(in srgb, var(--c) 14%, transparent); }
.cal-pill.over { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1.5px var(--c); font-weight: 700; }
.cal-pill.due { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 42%, transparent); }
.cal-pill.likely { border: 1px dashed color-mix(in srgb, var(--c) 62%, transparent); color: var(--body); height: 21px; }
.cal-pill.likely .ic { color: var(--c); }
.cal-pill.bday { color: var(--muted); }
.cal-pill.bday .ic { color: var(--notes); }
.k-feeding { --c: var(--feeding); } .k-cleaning { --c: var(--cleaning); } .k-weight { --c: var(--weight); }
.k-shed { --c: var(--shed); } .k-meds { --c: var(--meds); }
.k-breeding { --c: var(--breeding); } .k-notes { --c: var(--notes); }

/* ---------- copy: text to copy, such as the contact address (never mailto:, which opens nothing where no mail app is set up) ---------- */
.copy-line, .prose p.copy-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.copy-text { padding: 6px 11px; border-radius: 8px; background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border-raised); color: var(--text); font-weight: 500; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 13px 0 11px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--surface3); color: var(--text); font: inherit; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color .15s;
}
.copy-btn:hover { background: var(--surface4); }
.copy-btn .ic { width: 15px; height: 15px; }
.copy-done, .prose .copy-done { font-size: 14px; color: var(--muted); }
@container guide (max-width: 639px) { .copy-btn { min-height: 44px; padding: 0 16px 0 14px; } }

/* family C, instruction blocks: callouts, steps, Phone / Computer, Why it works this way and the app's own words, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16. */

/* ---------- callouts: Tip, Careful, Note (the one thing not to miss), Coming from the old SnekLog ---------- */
.callout {
  --c: var(--notes);
  padding: 14px 16px 15px; border-radius: var(--r-m);
  background: color-mix(in srgb, var(--c) 8%, var(--bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
.callout-title { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 6px; }
.callout-title .ic { width: 19px; height: 19px; color: var(--c); }
.callout p, .callout li { font-size: 16px; line-height: 1.6; color: var(--body); }
.callout p + p { margin-top: 8px; }
.callout.note { --c: var(--notes); }
.callout.tip { --c: var(--brand-strong); }
.callout.careful { --c: var(--amber); }
.callout.old { --c: var(--weight); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-raised); }
.callout.old .callout-title { font-size: 16px; }

/* ---------- numbered steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; counter-reset: s; display: flex; flex-direction: column; gap: 16px; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; }
/* quiet on purpose: an outlined number in the muted ink, so the words lead */
.steps > li::before {
  content: counter(s); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted);
  box-shadow: inset 0 0 0 1.5px var(--border-strong); margin-top: 2px;
}
.steps > li > span { color: var(--body); }

/* ---------- Phone / Computer: a plain two-column comparison ---------- */
.prose .pc { display: grid; gap: 0; margin-top: 20px; border-top: 1px solid var(--border); }
.pc-col { padding: 18px 0 4px; min-width: 0; }
.pc-col + .pc-col { border-top: 1px solid var(--border); }
.pc-heading { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 16px; color: var(--text); }
.pc-heading .ic { width: 19px; height: 19px; color: var(--muted); }
.prose .pc ul { margin-top: 10px; }
.prose .pc li { font-size: 16px; }

/* ---------- why: "Why it works this way", a closed native disclosure ---------- */
details.why { margin-top: 18px; }
details.why summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-weight: 600; font-size: 15.5px; color: var(--text); border-radius: 8px;
}
details.why summary:hover { color: var(--brand-strong); }
details.why .why-body { padding: 0 0 4px 22px; }
details.why .why-body p + p { margin-top: 10px; }

/* ---------- accordion: a heading-led section, closed until opened (2026-10-20, Your reptiles) ----------
   The disclosure grammar (base.css) at the heading's own size: a row with hairlines, the caret on the left;
   a run of them shares its lines, as the trouble rows do. The body keeps the page's own spacing. */
.prose details.acc { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.prose details.acc-2 { margin-top: 44px; }
.prose details.acc-3 { margin-top: 26px; }
.prose details.acc + details.acc { margin-top: 0; border-top: 0; }
details.acc > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 12px 2px;
  border-radius: 6px;
}
details.acc > summary .ic { flex: none; width: 16px; height: 16px; }
.prose details.acc > summary > :is(h2, h3) { margin: 0; }
details.acc > summary:hover > :is(h2, h3) { color: var(--brand-strong); }
details.acc > .acc-body { padding: 4px 0 28px; }
.prose .acc-body > * + * { margin-top: 18px; }
.prose .acc-body > * + .clip-pair { margin-top: 22px; }
.prose .acc-body > h3 { margin-top: 30px; }
.prose .acc-body > h4 { margin-top: 26px; font-size: 17px; letter-spacing: -0.015em; }
.prose .acc-body > :is(h3, h4) + * { margin-top: 12px; }
.prose .acc-body > :first-child { margin-top: 0; }
/* On this page: an h3 accordion sits under its h2 */
.toc-list li.toc-sub a { padding-left: 26px; font-size: 13.5px; }
details.toc-inline .toc-list li.toc-sub a { padding-left: 28px; }

/* ---------- app-words: the app's own words, quoted exactly ---------- */
.appwords { margin: 18px 0 0; }
.appwords figcaption { font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.appwords figcaption b { color: var(--body); font-weight: 500; }
.appwords blockquote { margin: 0; }
.aw-dialog { padding: 16px 18px 18px; border-radius: var(--r-l); background: var(--surface2); box-shadow: inset 0 0 0 1px var(--border-raised); }
.aw-head { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; color: var(--text); margin-bottom: 10px; }
.aw-head .ic { width: 20px; height: 20px; color: var(--c, var(--weight)); }
.aw-dialog p:not(.aw-head) { font-size: 15.5px; line-height: 1.55; color: var(--body); }
.aw-dialog p:not(.aw-head) + p { margin-top: 10px; }
.aw-dialog p strong { color: var(--text); font-weight: 600; }
.aw-notice {
  --c: var(--notes);
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 26%, transparent);
}
.aw-notice .ic { width: 18px; height: 18px; color: var(--c); margin-top: 1px; }
.aw-notice p, .prose .aw-notice p { font-size: 14px; line-height: 20px; color: var(--body); }
.aw-notice p strong { display: block; color: var(--text); font-weight: 600; font-size: 15px; margin-bottom: 2px; }

/* ---------- the blocks' container queries ---------- */
@container guide (min-width: 560px) {
  .prose .pc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .pc-col + .pc-col { border-top: 0; border-left: 1px solid var(--border); padding-left: 32px; margin-left: -16px; }
}

/* family E, pictures and motion: the loop (and its wide variant), stills, the annotated still with its
   spotlight, the captioned tour, the filmstrip, paper and pictures to come, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   The picture viewer's overlay is in overlays.css. */

/* ---------- the silent loop with its Pause button ---------- */
.with-clip { display: grid; gap: 28px; margin-top: 30px; }
.with-clip .steps-block { min-width: 0; }
.with-clip .steps-block h2 { margin-top: 0; }
.clip { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.clip-frame { position: relative; width: min(100%, 380px); }
/* the ratio is a phone take's, a fallback only: components.js writes each clip's own on its video */
.clip-frame video, .tour-player video {
  width: 100%; height: auto; aspect-ratio: 804 / 1748; object-fit: cover;
  border-radius: 9.6% / 4.6%; background: var(--bezel);
  box-shadow: var(--clip-shadow);
}
.clip-cap { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 34ch; }
.clip-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px 0 13px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--surface3); color: var(--text); font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: background-color .15s;
}
.clip-btn:hover { background: var(--surface4); }
.clip-btn .ic { width: 16px; height: 16px; }
.clip figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); text-align: center; max-width: 34ch; }

/* the wide loop: a computer clip, cropped tight to the part that moves, the full column on the rail mat
   (no phone bezel); Pause and the caption stay outside the frame, under it */
.clip.wide { align-items: stretch; gap: 10px; }
.clip.wide .clip-frame { width: 100%; padding: 8px; border-radius: var(--r-m); background: var(--rail); box-shadow: inset 0 0 0 1px var(--border-raised); }
.clip.wide .clip-frame video { display: block; border-radius: 6px; box-shadow: none; background: var(--rail); }
.clip.wide .clip-cap { flex-direction: row; align-items: center; gap: 10px 14px; max-width: none; }
.clip.wide figcaption { text-align: left; max-width: 62ch; }
.clip figcaption .tag { margin-right: 6px; vertical-align: 1px; }
/* ---------- the loop pair (4.45): one task filmed on a computer and on a phone ---------- */
/* stacked on a phone (the phone take first), side by side from 640 px; each labeled, each with its own Pause
   under it, one caption under both. loop.js plays one of the two at a time */
.clip-pair { margin: 0; }
.prose > * + .clip-pair { margin-top: 22px; }
.pair-row { display: flex; flex-direction: column; gap: 26px; }
.clip-pair .pair-phone { order: -1; }
.pair-label, .prose p.pair-label { display: flex; align-items: center; gap: 7px; margin: 0; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--text); }
.pair-label .ic { width: 18px; height: 18px; color: var(--muted); }
.pair-len { margin-left: 3px; font-weight: 400; color: var(--muted); }
.clip-pair > figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--muted); max-width: 62ch; }
.clip-pair > figcaption .tag { margin-right: 6px; vertical-align: 1px; }
.clip-pair .ph { margin: 0; }
.clip-pair .ph.phone { width: min(100%, 230px); }
.prose .clip-pair .ph-box p { font-size: 14px; }

/* a callout under the steps beside a loop (the mockup set this margin inline) */
.steps-block > .steps + .callout { margin-top: 22px; }

/* ---------- stills: lit glass, tap to zoom, numbered markers ---------- */
.shot { margin: 0; }
.prose > * + .shot { margin-top: 18px; }   /* a still straight after words or a block keeps the page's gap */
.prose h2 + .shot, .prose h3 + .shot { margin-top: 12px; }
.shot-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--r-l); }
.shot-inner {
  position: relative; display: block; border-radius: var(--r-l); overflow: hidden;
  background: var(--rail); box-shadow: var(--tank-glow); outline: 1px solid var(--tank-edge); outline-offset: -1px;
}
.shot-inner::before {
  content: ""; position: absolute; z-index: 3; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--tank-light), transparent);
}
.shot-inner img { width: 100%; height: auto; }
/* a phone still is a picture of a phone, so it gets the clip's bezel (on the button, so the
   markers' percentages stay those of the picture itself) */
.phone-still .shot-btn { border-radius: 30px; padding: 8px; background: var(--bezel); box-shadow: var(--clip-shadow); }
.phone-still .shot-inner { border-radius: 22px; outline: 0; box-shadow: none; }
.phone-still .shot-inner::before { display: none; }
/* a wide still sits on a rail-colored mat, so its edge never reads as the page's own */
.mat .shot-inner { padding: 8px; background: var(--rail); border-radius: var(--r-m); box-shadow: inset 0 0 0 1px var(--border-raised); outline: 0; }
.mat .shot-inner::before { display: none; }
.mat .shot-inner img { border-radius: 6px; }
.marker {
  position: absolute; z-index: 2; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  display: grid; place-items: center; background: var(--marker-bg); color: var(--brand-strong);
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;
  box-shadow: inset 0 0 0 1.5px var(--brand-strong);
  transition: opacity .2s, background-color .2s, color .2s, transform .2s var(--ease);
}
/* the spotlight: an item in the list dims the picture except the part it describes */
.spot { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .2s; }
.spot-dim { fill: var(--spot-dim); }
.spot-ring rect { fill: none; stroke: var(--brand-strong); stroke-width: 1.5; }
.annotated.has-spot .spot { opacity: 1; }
.annotated.has-spot .marker { opacity: .25; }
.annotated.has-spot .marker.on { opacity: 1; background: var(--brand-strong); color: var(--on-accent); transform: scale(1.1); }
.shot-zoom {
  position: absolute; z-index: 2; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; background: var(--zoom-chip); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--zoom-edge); opacity: 0; transition: opacity .15s;
}
.shot-btn:hover .shot-zoom, .shot-btn:focus-visible .shot-zoom { opacity: 1; }
@media (hover: none) { .shot-zoom { opacity: 1; } }
.shot-zoom .ic { width: 15px; height: 15px; }
/* a whole phone screen: its top-left corner holds the app's menu button and "SnekLog", so the badge moves
   in, to the empty middle of the app's top bar (between "SnekLog" and the care icons: 33-53% across, the top
   6%). A manifest's badge "corner" keeps it in the corner (components.js): capture picks that where the
   middle isn't clear, such as a sheet pulled over the top bar. capture/lib/still.mjs checks both spots */
.phone-still .shot-zoom:not(.at-corner) { left: calc(43% - 16px); top: 4px; }
.film-frame .phone-still .shot-zoom:not(.at-corner) { left: calc(43% - 13px); top: 3px; }
.shot figcaption { margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.annotated { display: grid; gap: 22px; margin-top: 18px; }
.annotated .shot { position: relative; width: min(100%, 300px); justify-self: center; }
/* an annotated crop (wider than tall): above its key at every width, at the crop's planned size
   (up to 520 px, as `ph crop`); these outrank the container queries' columns and sticky picture */
.annotated.crop { grid-template-columns: minmax(0, 1fr); }
.annotated.crop .shot { width: min(100%, 520px); justify-self: start; position: relative; }
/* a computer screen's annotated still (more than 800 px across): the column's whole width, as `ph wide` */
.annotated.crop.wide .shot { width: 100%; }
/* an annotated printed page (frame "paper": the Sales Certificate, 2026-10-17): the paper look at a paper
   still's 380 px, beside its key from 640 px and above it, not sticky, on a phone. On the mat as a 'wide'
   still it had shrunk to 264 px beside the key (139 on a phone), its words unreadable in place */
.annotated.on-paper .shot { width: min(100%, 380px); margin: 0; justify-self: start; position: relative; }
.annotated.on-paper .shot-btn { width: 100%; }
.keys-col { min-width: 0; }
.keys-hint { margin: 0 0 10px; font-size: var(--fs-small); color: var(--faint); }
.keys-hint .touch { display: none; }
@media (hover: none) { .keys-hint .point { display: none; } .keys-hint .touch { display: inline; } }
.keys { list-style: none; padding: 0; margin: 0 -10px; display: flex; flex-direction: column; gap: 2px; counter-reset: k; }
.keys li {
  counter-increment: k; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; color: var(--body);
  padding: 9px 10px; border-radius: var(--r-m); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color .2s, opacity .2s, color .2s;
}
.keys li::before {
  content: counter(k); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: var(--muted); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1.5px var(--border-strong); margin-top: 3px; transition: background-color .2s, color .2s, box-shadow .2s;
}
.keys li:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
/* the item's words are its button (annotated.js); the ring still goes round the whole row */
.keys li:has(> [role="button"]:focus-visible) { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.keys li > [role="button"]:focus-visible { outline: none; }
@media (hover: hover) { .keys li:hover { background: var(--key-tint); } }
.annotated.has-spot .keys li { opacity: .5; }
.annotated.has-spot .keys li.on { opacity: 1; background: var(--key-tint); color: var(--text); }
.annotated .keys li.on::before { background: var(--brand-strong); color: var(--on-accent); box-shadow: none; }
/* the numbers on the picture, the other way round (annotated.js; the proofread's fourth round, 2026-10-22):
   a layer over the picture itself holds a transparent button over each drawn marker, a little larger than it,
   and the tip that shows the item's words beside the number. The drawn markers stay in the zoom button */
.mk-layer { position: absolute; z-index: 4; pointer-events: none; }
.mk-hit {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; cursor: help; pointer-events: auto; -webkit-tap-highlight-color: transparent;
}
.mk-hit:focus { outline: none; }
.mk-hit:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
/* a picture beside its key: the parts of the picture each item names are pointing areas (annotated.js), only
   where something can point; on a touch screen the thumbnail opens the viewer as before */
.mk-area { position: absolute; display: none; }
@media (hover: hover) { .mk-area { display: block; pointer-events: auto; cursor: zoom-in; } }
/* keys="tips": a full-width picture whose numbers' tips carry the words; the list is for screen readers */
.annotated.tips-only .keys { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* a list under a key item (the sidebar's sections): after the item's words, smaller and set in */
.keys li > ul { grid-column: 2; margin: 4px 0 0; padding-left: 16px; font-size: var(--fs-small); color: var(--muted); }
.keys li > ul li { display: list-item; counter-increment: none; padding: 1px 0; cursor: auto; border-radius: 0; background: none; }
.keys li > ul li::before { content: none; }
.mk-tip {
  position: absolute; z-index: 1; width: max-content; max-width: min(260px, 72vw); padding: 8px 11px;
  border-radius: var(--r-s); background: var(--surface3); color: var(--text); font-size: 14px; line-height: 1.45;
  text-align: left; box-shadow: var(--pop), inset 0 0 0 1px var(--border-strong); pointer-events: auto;
}
.panel-shot { width: min(100%, 420px); margin-left: auto; }
/* a whole phone screen on its own (a plain {% still %}, taller than wide, no size=; components.js adds
   whole-screen): the standalone phone loop's 380 px, centred like the loops. On a phone the column is
   narrower than that, so it keeps the column's width. At the column's 664 px a phone screen was 1,443 px
   tall on a computer, more than a screen and a half (the final review, 2026-10-17) */
.shot.whole-screen { width: min(100%, 380px); margin-inline: auto; }
.prose ul + .shot, .prose ol + .shot { margin-top: 28px; }
.dials-shot { width: min(100%, 520px); }

/* ---------- the captioned tour (a sample) ---------- */
.tour { margin-top: 18px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 18px 16px; }
.tour-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tour-top .meta { font-size: 14px; color: var(--muted); }
.tour-body { display: grid; gap: 20px; margin-top: 16px; }
.tour-player { width: min(100%, 300px); justify-self: center; position: relative; }
.tour-player video { box-shadow: none; }
.tour-player video::cue { font-family: var(--sans); font-size: 15px; line-height: 1.35; background: var(--cue-bg); color: var(--text); }
.chapters { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.chapters button, .transcript button {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 9px;
  background: transparent; text-align: left; cursor: pointer; color: var(--body); font-size: 15px; line-height: 1.45; transition: background-color .15s, color .15s;
}
.chapters button:hover, .transcript button:hover { background: var(--surface2); color: var(--text); }
.chapters time, .transcript time { font-family: var(--mono); font-size: 12.5px; color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.chapters .now, .transcript .now { background: var(--brand-tint); color: var(--text); }
.chapters .now time, .transcript .now time { color: var(--brand-strong); }
.side-title { font-weight: 600; font-size: 15px; margin-bottom: 6px; color: var(--text); }
details.transcript { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
details.transcript > ol { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 1px; }
/* a transcript written as its own Markdown file (the manifest's transcript), instead of the captions' cues */
details.transcript .transcript-text { margin: 8px 0 0; }
details.transcript .transcript-text > :first-child { margin-top: 0; }
/* the line under the chapters (the mockup set this margin inline) */
.tour .chapters + .small { margin-top: 12px; }

/* ---------- filmstrip: 2-4 stills of one task, in order ---------- */
.film { margin-top: 20px; }
.film-scroll { position: relative; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 4px 16px 6px; scroll-padding-inline: 16px; border-radius: 4px; }
.film-scroll::-webkit-scrollbar { display: none; }
.film-scroll:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.prose .film-row { list-style: none; padding: 0; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 62%; gap: 14px; counter-reset: f; }
.prose .film-row > li { margin: 0; padding: 0; scroll-snap-align: start; counter-increment: f; min-width: 0; }
.film.wide .film-row { grid-auto-columns: 86%; }
.film-frame .shot { margin: 0; }
.film-frame .phone-still .shot-btn { padding: 6px; border-radius: 24px; }
.film-frame .phone-still .shot-inner { border-radius: 18px; }
.film-frame .shot-zoom { left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 7px; }
.film-frame figcaption { position: relative; min-height: 22px; margin-top: 12px; padding: 1px 0 0 32px; font-size: 14.5px; line-height: 1.45; color: var(--body); }
/* the frame's number: quiet, an outlined circle with a muted digit (absolute, so the caption's words flow as one line of text) */
.film-frame figcaption::before {
  content: counter(f); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.film-frame figcaption b { color: var(--text); font-weight: 500; }

/* ---------- linked steps: a step lights its pictures ({% linkedSteps %}, steplinks.js, 2026-10-19) ---------- */
.linked-steps > .film { margin-top: 24px; }
.linked-steps .steps > li.lights { margin: -6px -8px; padding: 6px 8px; border-radius: var(--r-s); transition: background .15s var(--ease); }
.linked-steps .steps > li.lights > span { cursor: default; }
@media (hover: hover) { .linked-steps .steps > li.lights:hover { background: var(--key-tint); } }
.linked-steps .steps > li.on { background: var(--key-tint); }
.linked-steps .steps > li.on > span { color: var(--text); }
.linked-steps .steps > li.on::before { background: var(--brand-strong); color: var(--on-accent); box-shadow: none; }
.linked-steps .steps > li:has(> [role="button"]:focus-visible) { outline: 2px solid var(--brand-strong); outline-offset: 0; }
.linked-steps .steps > li > [role="button"]:focus-visible { outline: none; }
.film-frame[data-step] .shot { transition: opacity .2s var(--ease); }
.linked-steps.has-lit .film-frame:not(.lit) .shot { opacity: .35; }
.linked-steps .film-frame.lit .shot-btn { outline: 2px solid var(--brand-strong); outline-offset: 3px; }
.film-step { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--muted); }
.film-frame.lit .film-step { color: var(--brand-strong); }

/* ---------- paper: a printed document on white paper, and the label layouts ---------- */
.paper { margin: 20px 0 0; }
.paper .shot-btn { width: min(100%, 380px); border-radius: 4px; }
.paper .shot-inner { border-radius: 3px; background: var(--paper); outline: 0; box-shadow: var(--paper-shadow); }
.paper .shot-inner::before { display: none; }
.paper figcaption { margin-top: 12px; font-size: 14px; color: var(--muted); }
.prose .sheets { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 18px; align-items: end; }
.prose .sheets li { margin: 0; padding: 0; min-width: 0; }
.sheet { --sw: 8.5; --sh: 11; position: relative; display: block; width: 100%; aspect-ratio: var(--sw) / var(--sh); background: var(--paper); border-radius: 2px; box-shadow: var(--paper-shadow); }
.sheet i { position: absolute; border-radius: 1.5px; background: var(--paper-label); box-shadow: inset 0 0 0 0.75px var(--paper-label-edge); }
/* a used label keeps its edge and is hatched; the first free one carries its number */
.sheet i.used { background: repeating-linear-gradient(135deg, var(--paper-used) 0 2px, var(--paper-label) 2px 5px); box-shadow: inset 0 0 0 0.75px var(--paper-label-edge); }
.sheet i.next { display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; line-height: 1; color: var(--paper-ink-faint); }
.sheet i.cut { background: transparent; box-shadow: none; outline: 1px dashed var(--paper-label-edge); outline-offset: -1px; }
/* one card a page, for a label printer: a strip cut from the roll, labels running off both ends, each label its own page */
.sheet.roll { border-radius: 0; overflow: hidden; }
.sheet-name { display: block; margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.sheet-name b { display: block; color: var(--text); font-weight: 500; font-size: 14.5px; }

/* ---------- placeholder: a picture still to be shot, at its final size ---------- */
.ph { margin: 20px 0 0; }
.ph-box {
  display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; aspect-ratio: var(--ar, 16 / 10);
  padding: 22px; border-radius: var(--r-l); background: var(--surface); border: 1.5px dashed var(--border-strong); color: var(--body);
}
.ph-box .ic { width: 26px; height: 26px; color: var(--muted); }
.ph-box p, .prose .ph-box p { font-size: 15px; line-height: 1.5; color: var(--body); }
.ph-box strong { color: var(--text); }
.ph.phone { width: min(100%, 300px); }
.ph.phone .ph-box { border-radius: 30px; }
.ph figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }
/* a crop to come: when the words name one part of a screen, plan the crop at its final size, never a whole phone screen */
.ph.crop { width: min(100%, 520px); }
.ph.crop .ph-box { border-radius: var(--r-m); padding: 18px 20px; }

/* a still with a phone source: the computer picture from 640 px, its phone crop below that (both zoom) */
.shot > .shot-btn.for-phone { display: none; }

/* ---------- the media's container queries ---------- */
@container guide (min-width: 560px) {
  .tour { padding: 20px 22px; }
}
@container guide (min-width: 640px) {
  .with-clip { grid-template-columns: minmax(0, 1fr) 220px; align-items: start; gap: 36px; }
  .with-clip .clip { grid-column: 2; grid-row: 1; position: sticky; top: calc(var(--bar-h) + 24px + var(--safe-top)); }
  .with-clip .steps-block { grid-column: 1; grid-row: 1; }
  .pair-row { display: grid; grid-template-columns: minmax(0, 1fr) 200px; align-items: start; gap: 28px; }
  .clip-pair .pair-phone { order: 0; }
  .clip-pair .pair-phone .clip-frame, .clip-pair .ph.phone { width: 100%; }
  .annotated { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 32px; }
  /* beside its key, the picture stays in view while the key scrolls (the proofread's fourth round,
     2026-10-22: "I cannot view the picture while also viewing the bulleted list"), and is never taller than
     the screen under the top bar: its width is cut to fit, from its shape (the figure's --ar) and its frame's
     padding (the phone's bezel, the mat) */
  .annotated:not(.crop) .shot {
    --fit-h: calc(100svh - var(--bar-h) - var(--safe-top) - 48px);
    position: sticky; top: calc(var(--bar-h) + 24px + var(--safe-top)); justify-self: center;
    width: min(100%, calc((var(--fit-h) - var(--frame-pad, 0px)) * var(--ar) + var(--frame-pad, 0px)));
  }
  .annotated .phone-still, .annotated .mat { --frame-pad: 16px; }
  .annotated.on-paper { grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; }
  .annotated.on-paper .shot { width: min(100%, 380px, calc(var(--fit-h) * var(--ar))); justify-self: start; }
  .tour-body { grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 28px; }
  .tour-player { width: 100%; }
  /* the filmstrip: every frame in one row, no buttons */
  .film-scroll { overflow: visible; margin: 0; padding: 0; }
  .prose .film-row { grid-auto-flow: row; grid-template-columns: repeat(var(--frames, 3), minmax(0, 1fr)); grid-auto-columns: auto; gap: 20px; }
  .film .fig-nav { display: none; }
}
@container guide (max-width: 639px) {
  /* the picture sits beside the list and stays in view, so a tapped item's spotlight is on screen */
  .annotated { grid-template-columns: 42% minmax(0, 1fr); gap: 14px; align-items: start; }
  .annotated.on-paper { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .annotated .shot { width: 100%; justify-self: stretch; position: sticky; top: calc(var(--bar-h) + 12px + var(--safe-top)); }
  .annotated .phone-still .shot-btn { padding: 5px; border-radius: 20px; }
  .annotated .phone-still .shot-inner { border-radius: 15px; }
  .annotated .marker { width: 18px; height: 18px; margin: -9px 0 0 -9px; font-size: 10.5px; }
  .mk-hit { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
  .annotated .shot-zoom { left: 8px; top: 8px; width: 26px; height: 26px; border-radius: 7px; }
  .annotated .phone-still .shot-zoom:not(.at-corner) { left: calc(43% - 13px); top: 3px; }
  .keys li { font-size: 15px; line-height: 1.55; gap: 10px; padding: 8px 8px; }
  .keys { margin: 0 -8px; }
  /* phone: media stays a figure, not a screenful */
  .clip-frame { width: min(100%, 230px); }
  .tour-player { width: min(100%, 260px); }
  .shot:has(> .for-phone) > .shot-btn:not(.for-phone) { display: none; }
  .shot > .shot-btn.for-phone { display: block; }
  .prose .sheets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* family F, part 1: the stepped diagram and the chip ladder, with the Back / Next row a filmstrip shares, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   Chunk 6 builds the diagram itself. */

/* ---------- the stepped diagram ---------- */
.dg { margin: 20px 0 0; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); padding: 18px 16px 16px; }
.dg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dg-name { font-weight: 600; font-size: 15px; color: var(--text); }
.dg-count { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dg-scroll { overflow-x: auto; margin: 14px -4px 0; padding: 0 4px; }
.dg-plot { position: relative; height: 200px; min-width: 300px; }
.dg-track { position: absolute; left: 0; right: 0; top: 104px; height: 1px; background: var(--border-strong); }
.dg-tick { position: absolute; top: 104px; width: 1px; height: 5px; background: var(--border-raised); }
.dg-axis { position: absolute; z-index: 2; top: 146px; transform: translateX(-50%); padding: 0 4px; font-size: 12.5px; color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; background: var(--surface); }
.dg-gap { position: absolute; top: 30px; height: 10px; border: 2px solid var(--feeding); border-bottom: 0; border-radius: 4px 4px 0 0; transition: left .35s var(--ease), width .35s var(--ease), opacity .25s; }
.dg-gaplabel { position: absolute; z-index: 2; background: var(--surface); padding: 0 4px; top: 4px; transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--feeding); white-space: nowrap; transition: left .35s var(--ease), opacity .25s; }
.dg-early { position: absolute; top: 44px; height: 68px; background: color-mix(in srgb, var(--feeding) 16%, transparent); border-radius: 3px; transition: left .35s var(--ease), width .35s var(--ease), opacity .25s; }
.dg-earlylabel { position: absolute; top: 56px; width: 96px; transform: translateX(-100%); padding-right: 8px; font-size: 12.5px; line-height: 1.3; text-align: right; color: var(--body); transition: left .35s var(--ease), opacity .25s; }
.dg-due { position: absolute; top: 40px; width: 0; height: 72px; border-left: 2px solid var(--feeding); transition: left .35s var(--ease), opacity .25s; }
.dg-duelabel { position: absolute; z-index: 2; background: var(--surface); top: 40px; padding: 0 4px 0 8px; font-size: 13px; font-weight: 600; color: var(--feeding); white-space: nowrap; transition: left .35s var(--ease), opacity .25s; }
.dg-duelabel.flip { transform: translateX(-100%); padding: 0 8px 0 4px; }
/* Today has its own row under the dates, and its line runs behind the labels it crosses */
.dg-today { position: absolute; z-index: 0; top: 44px; height: 132px; width: 0; border-left: 1.5px dashed var(--brand-strong); transition: left .35s var(--ease), opacity .25s; }
.dg-todaylabel {
  position: absolute; top: 174px; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--on-accent);
  background: var(--brand-strong); border-radius: 999px; padding: 2px 8px; white-space: nowrap; z-index: 2; font-variant-numeric: tabular-nums;
  transition: left .35s var(--ease), opacity .25s;
}
.dg-mark { position: absolute; top: 104px; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; transition: left .35s var(--ease), opacity .25s; z-index: 1; }
.dg-mark.ate { background: var(--feeding); }
.dg-mark.ref { background: var(--surface); box-shadow: inset 0 0 0 2px var(--feeding); }
.dg-marklabel { position: absolute; z-index: 2; top: 116px; padding: 0 4px; background: var(--surface); font-size: 12.5px; color: var(--body); white-space: nowrap; transform: translateX(-50%); transition: left .35s var(--ease), opacity .25s; }
.dg-marklabel.end { transform: translateX(-100%); }
.dg-marklabel.start { transform: none; }
.dg-stem { position: absolute; top: 103px; height: 2px; background: var(--feeding); transition: left .35s var(--ease), width .35s var(--ease), opacity .25s; }
.dg-arrow { position: absolute; top: 74px; width: 14px; height: 32px; margin-left: -7px; color: var(--feeding); transition: left .35s var(--ease), opacity .25s; }
.dg-off { opacity: 0; pointer-events: none; }
.dg-axis.first { transform: none; }
.dg-home {
  display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 10px 12px; border-radius: var(--r-m);
  background: var(--bg); box-shadow: inset 0 0 0 1px var(--border);
}
.dg-home .av {
  width: 40px; height: 40px; border-radius: 11px; flex: none; display: grid; place-items: center;
  background: color-mix(in srgb, var(--handling) 22%, var(--surface2)); color: var(--text); font-weight: 600;
}
.dg-home .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dg-home .nm { font-weight: 600; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; }
.dg-home .rid { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.dg-home .chips { display: flex; gap: 6px; flex-wrap: wrap; min-height: 22px; align-items: center; }
.dg-home .chips .chip { height: 22px; padding: 0 7px 0 5px; border-radius: 7px; font-size: 12px; }
.dg-home .chips .chip .ic { width: 13px; height: 13px; }
.dg-home .times { text-align: right; font-size: 13.5px; color: var(--muted); line-height: 1.45; white-space: nowrap; }
.dg-home .times b { color: var(--body); font-weight: 500; }
.dg-homecap { font-size: 13px; color: var(--muted); margin-top: 14px; }
/* every step's words sit stacked in one cell, so the box is as tall as the longest and Back / Next never move */
.dg-text { margin-top: 16px; display: grid; }
.dg-say { grid-area: 1 / 1; visibility: hidden; }
.dg-say.on { visibility: visible; }
.dg-text h3 { font-size: 17px; margin: 0 0 4px; letter-spacing: -0.015em; }
.dg-text p { font-size: 16px; color: var(--body); }
/* Back / dots / Next sit UNDER the card, on the page itself, so they read as controls (the owner's spouse: inside the card they blended in) */
.dg-nav, .fig-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 12px; }
.dg-dots, .fig-count { order: -1; flex-basis: 100%; display: flex; justify-content: center; gap: 4px; }
.dg-nav .btn, .fig-nav .btn { flex: 1; }
.dg-dots button { width: 28px; height: 28px; padding: 0; border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.dg-dots button::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); transition: background-color .2s, transform .2s; }
.dg-dots button[aria-current="step"]::before { background: var(--brand-strong); transform: scale(1.25); }
/* on a phone each dot's hit area is 40 x 44 (eight dots fit 328 px with no gap); the drawn dot stays 7 px */
@container guide (max-width: 559px) { .dg-dots { gap: 0; } .dg-dots button { width: 40px; height: 44px; border-radius: 10px; } }
.dg-nav .btn, .fig-nav .btn { height: 44px; min-width: 0; }
.dg-nav .btn[aria-disabled="true"], .fig-nav .btn[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.dg-nav .btn-primary[aria-disabled="true"]:hover, .fig-nav .btn-primary[aria-disabled="true"]:hover { background: var(--brand); }
.dg-nav .btn-quiet[aria-disabled="true"]:hover, .fig-nav .btn-quiet[aria-disabled="true"]:hover { background: var(--surface3); }

/* ---------- the chip ladder ---------- */
.ladder { margin-top: 18px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); overflow: hidden; }
.ladder-head, .ladder-row { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
.ladder-head { display: none; }
.ladder-kind { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 15.5px; color: var(--text); }
.ladder-kind .ic { width: 19px; height: 19px; color: var(--c); }
.ladder-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ladder-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.ladder-cell .cap { font-size: 12px; color: var(--faint); }
.ladder-cell .dash { color: var(--faint); font-size: 14px; height: 26px; display: flex; align-items: center; }
.ladder-row + .ladder-row { border-top: 1px solid var(--border); }
.ladder-foot { padding: 12px 16px 14px; border-top: 1px solid var(--border); font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fig-count { font-size: 13.5px; color: var(--muted); font-variant-numeric: tabular-nums; align-items: center; }

/* ---------- the diagram's container queries ---------- */
@container guide (min-width: 560px) {
  .ladder-head { display: grid; grid-template-columns: 150px repeat(3, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--muted); }
  .ladder-row { grid-template-columns: 150px minmax(0, 1fr); align-items: center; }
  .ladder-cell .cap { display: none; }
  .dg { padding: 20px 22px 18px; }
  .dg-dots, .fig-count { order: 0; flex: 1 1 auto; flex-basis: auto; }
  .dg-nav, .fig-nav { flex-wrap: nowrap; }
  .dg-nav .btn, .fig-nav .btn { flex: none; min-width: 96px; }
}

/* the reading sizes at each width: the title, the lede, the section headings and, on a phone, the body text, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   Its place in the order is deliberate, and is where the approved mockup had it: after the blocks, media and
   diagram files, whose own sizes (callout text, an annotated list, a diagram's step title) it overrides at the
   same specificity, and before the reference and figure files, whose sizes (What happens if's counts, Try it's
   sizes) override it. Moving it changes those sizes on a phone. */

@container guide (min-width: 560px) {
  .article h1 { font-size: 38px; }
}
@container guide (max-width: 639px) {
  .main { font-size: 16.5px; }
  .prose p, .prose li { font-size: 16.5px; }
}
@container guide (min-width: 992px) {
  .article h1 { font-size: 42px; }
  .lede { font-size: 19.5px; }
  .prose h2 { font-size: 26px; }
  .prose h3 { font-size: 18px; }
}

/* the guide's home: the intro and big search, the two "Start here" doors, Browse the guide, Most read and
   Can't find it?, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16.
   It comes after reading.css on purpose: .home-top h1 and .article h1 weigh the same, and the home's sizes
   win at each width, as they did in the mockup, where its rules came after the article's. */

.home-top { display: grid; gap: 24px; align-items: center; }
.home-top h1 { font-size: 34px; line-height: 1.08; letter-spacing: -0.038em; }
.home-intro { min-width: 0; }
.home-intro .lede { margin-top: 12px; }
.bigsearch {
  display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; margin-top: 24px; padding: 0 12px 0 16px; border: 0; border-radius: 14px;
  background: var(--field); color: var(--faint); font-size: 17px; text-align: left; cursor: text;
  box-shadow: inset 0 0 0 1px var(--border-strong); transition: box-shadow .15s;
}
.bigsearch:hover, .bigsearch:focus-visible { box-shadow: inset 0 0 0 1px var(--border-hover); }
.bigsearch .ic { width: 21px; height: 21px; color: var(--muted); }
.bigsearch span { flex: 1; }
.try { margin-top: 12px; font-size: 14.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.try button { border: 0; background: var(--surface2); color: var(--body); font-size: 14px; min-height: 34px; padding: 4px 12px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-raised); }
.try button:hover { background: var(--surface3); color: var(--text); }
.home-shot { display: none; }
.doors { display: grid; gap: 14px; margin-top: 36px; }
.door {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 16px; border-radius: var(--r-l);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-raised);
}
.door .door-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-strong); }
.door .door-ic .ic { width: 22px; height: 22px; }
.door h2 { font-size: 21px; letter-spacing: -0.03em; line-height: 1.2; }
.door p { color: var(--body); font-size: 16px; line-height: 1.55; }
.door ol { margin: 2px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; counter-reset: d; }
.door ol li { counter-increment: d; display: flex; align-items: baseline; gap: 10px; font-size: 15px; }
.door ol li::before { content: counter(d); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--faint); width: 12px; flex: none; }
.door ol a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; text-underline-offset: 3px; }
.door ol a:hover, .door ol a:focus-visible { color: var(--text); text-decoration: underline; }
.door .go { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; color: var(--brand-strong); font-weight: 600; font-size: 15px; text-decoration: none; border-radius: 8px; }
.door .go .ic { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.door .go:hover { text-decoration: underline; text-underline-offset: 3px; }
.door .go:hover .ic { transform: translateX(3px); }
.home-h2 { font-size: 22px; letter-spacing: -0.03em; margin: 52px 0 6px; }
.home-sub { color: var(--muted); font-size: 15.5px; }
.sections { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; border-top: 1px solid var(--border); }
.sec-card { display: grid; align-content: start; grid-template-columns: 22px minmax(0, 1fr); gap: 4px 14px; padding: 18px 2px; border-bottom: 1px solid var(--border); }
.sec-card > .ic { width: 22px; height: 22px; color: var(--brand-strong); margin-top: 1px; }
.sec-card h3 { font-size: 17px; letter-spacing: -0.02em; }
.sec-card h3 a { text-decoration: none; }
.sec-card h3 a:hover { color: var(--brand-strong); }
/* on a phone each section is a row that opens into its pages, like the drawer */
.sec-open { display: none; }
.sec-open .chev { width: 13px; height: 13px; color: var(--faint); transition: transform .2s var(--ease); }
.sec-card.open .sec-open .chev { transform: rotate(90deg); }
.sec-card ul { grid-column: 2; list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.sec-card ul a { color: var(--body); text-decoration: none; font-size: 15px; line-height: 1.45; }
.sec-card ul a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.sec-card .more { color: var(--muted); font: inherit; font-size: 14px; line-height: 1.45; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.sec-card .more:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.home-lower { display: grid; gap: 32px; margin-top: 8px; }
.most { list-style: none; padding: 0; margin: 14px 0 0; counter-reset: m; }
.most li { counter-increment: m; border-bottom: 1px solid var(--border); }
.most a { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 2px 10px; padding: 12px 2px; text-decoration: none; }
.most a::before { content: counter(m); grid-row: span 2; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--faint); padding-top: 2px; }
.most .t { color: var(--text); font-weight: 500; }
.most a:hover .t { color: var(--brand-strong); }
.most .s { font-size: 14px; color: var(--muted); }
.ask { margin-top: 8px; }
.ask h3 { font-size: 17px; display: flex; align-items: center; gap: 9px; }
.ask h3 .ic { color: var(--brand-strong); width: 20px; height: 20px; }
.ask p { color: var(--body); font-size: 15.5px; margin-top: 8px; }

/* ---------- the home's container queries ---------- */
@container guide (min-width: 560px) {
  .home-top h1 { font-size: 40px; }
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-lower { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 40px; align-items: start; }
  .ask { margin-top: 52px; }
}
@container guide (min-width: 640px) {
  .sections { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .home-top { grid-template-columns: minmax(0, 1fr) 236px; gap: 44px; }
  .home-shot { display: block; margin: 0; }
  /* the crop ends on a row (after Dotti) and fades into the page */
  .home-shot .shot-btn { -webkit-mask-image: linear-gradient(to bottom, var(--bezel) 80%, transparent); mask-image: linear-gradient(to bottom, var(--bezel) 80%, transparent); }
  .home-shot .shot-btn { border-radius: 30px 30px 8px 8px; }
  .home-shot .shot-inner { aspect-ratio: 800 / 940; border-radius: 22px 22px 2px 2px; }
  .home-shot .shot-inner img { height: 100%; object-fit: cover; object-position: top; }
}
@container guide (max-width: 639px) {
  .bigsearch kbd { display: none; }
  .door .go { min-height: 44px; }
  .try button { min-height: 44px; padding: 6px 14px; }
  /* Browse the guide: each section a row that opens into its pages */
  .sections { margin-top: 14px; }
  .sec-card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .sec-card > .ic, .sec-card h3 .sec-link { display: none; }
  .sec-open {
    display: flex; align-items: center; gap: 14px; width: 100%; min-height: 56px; padding: 8px 2px; border: 0; background: none; cursor: pointer;
    color: var(--text); font: inherit; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; text-align: left; border-radius: 8px;
  }
  .sec-open > .ic:not(.chev) { width: 22px; height: 22px; color: var(--brand-strong); }
  .sec-open .chev { margin-left: auto; }
  .sec-card ul { grid-column: 1; display: none; margin: 0 0 10px; padding-left: 36px; gap: 0; }
  .sec-card.open ul { display: flex; }
  .sec-card ul a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 15.5px; }
  .sec-card .more { display: flex; align-items: center; width: 100%; min-height: 44px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 15.5px; }
  .door ol a { padding: 10px 0; }
}
@container guide (min-width: 992px) {
  .home-top h1 { font-size: 46px; }
}

/* family D, reference blocks: setting entries, Open in SnekLog, tables, the glossary, Was and now and
   Problem and fix, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16. */

/* ---------- setting: one setting on its Settings page, as a fact list (decided 2026-10-16) ---------- */
.setting { padding-top: 4px; scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top)); }
.setting + .setting { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border); }
.prose .setting :is(h3, h4), .setting :is(h3, h4) { margin-top: 0; font-size: 18.5px; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prose .setting :is(h3, h4) + * { margin-top: 8px; }
.setting :is(h3, h4) .badge { margin-left: 0; }
.setting-does { color: var(--body); }
.setting-facts { margin: 12px 0 0; display: grid; grid-template-columns: 7.2em minmax(0, 1fr); gap: 8px 16px; font-size: 15.5px; }
.setting-facts dt { color: var(--muted); font-size: 14.5px; padding-top: 1px; }
.setting-facts dd { margin: 0; color: var(--body); }
.setting > * + * { margin-top: 10px; }
/* an entry under a subsection (setting level=4): smaller, set in from a rule like an h3 subsection */
.setting.lv4 { padding-left: 14px; border-left: 2px solid var(--border-strong); }
.setting.lv4 + .setting.lv4 { border-top: 0; margin-top: 18px; padding-top: 4px; }
.prose .setting.lv4 h4, .setting.lv4 h4 { font-size: 16.5px; }

/* ---------- open-in-app: "Open Settings › Food in SnekLog" ---------- */
.open-app, .prose a.open-app {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; color: var(--brand-strong); font-weight: 600; font-size: 15px;
  text-decoration: none; border-radius: 8px;
}
.open-app .ic { width: 15px; height: 15px; }
.open-app:hover, .prose a.open-app:hover { text-decoration: underline; text-underline-offset: 3px; }
.open-app b { color: inherit; font-weight: 600; }
.where .open-app { margin-left: auto; }

/* ---------- table: reference tables (A stacked on a phone / B sideways scroll) and grids (always scroll) ---------- */
.tbl-wrap { position: relative; margin-top: 18px; max-width: 100%; overflow-x: auto; border-radius: var(--r-m);
  /* the app's green edge haze while there's more to the right; the "local" cover hides it at the end */
  background:
    linear-gradient(to left, var(--bg) 30%, transparent) right center / 44px 100% no-repeat local,
    linear-gradient(to left, var(--haze), transparent) right center / 18px 100% no-repeat scroll;
}
.tbl-wrap:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.tbl caption { caption-side: top; text-align: left; font-weight: 600; font-size: 15.5px; color: var(--text); padding: 0 0 10px; }
.tbl caption .cap-note, .tbl-cap .cap-note { display: block; font-weight: 400; font-size: 14px; color: var(--muted); margin-top: 2px; }
/* a table that scrolls (every grid) is named ABOVE its scroll box, so the name never scrolls away */
.tbl-cap, .prose p.tbl-cap { margin-top: 18px; font-weight: 600; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.prose .tbl-cap + .tbl-wrap { margin-top: 10px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); }
.tbl thead th { font-size: 13.5px; font-weight: 500; color: var(--muted); padding-top: 0; border-bottom-color: var(--border-strong); white-space: nowrap; }
.tbl tbody th { font-weight: 500; color: var(--text); }
.tbl td { color: var(--body); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl td.num { color: var(--text); font-weight: 500; }
.tbl tr > :last-child { padding-right: 0; }
.tbl .none { color: var(--faint); }
.tbl[data-kind="grid"] { min-width: 560px; }
/* a run of reference tables with the same columns, one under each h2 (Limits at a glance): the columns line up from table to table */
.tbl-run { table-layout: fixed; }
.tbl-run thead th:first-child { width: 40%; }
.tbl-run thead th.num { width: 7.5em; }
.tbl[data-kind="grid"] thead th:not(:first-child), .tbl[data-kind="grid"] td { padding-left: 14px; }
.tbl[data-kind="grid"] tbody th, .tbl[data-kind="grid"] thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); padding-right: 14px; }
.tbl[data-kind="grid"] td + td, .tbl[data-kind="grid"] th + td { border-left: 1px solid var(--border); }
.fig-card .tbl[data-kind="grid"] tbody th, .fig-card .tbl[data-kind="grid"] thead th:first-child { background: var(--surface); }

/* ---------- glossary: one SnekLog word ---------- */
.gloss { padding: 16px 0 18px; border-bottom: 1px solid var(--border); scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top)); }
.gloss:first-of-type { border-top: 1px solid var(--border); }
.prose .gloss h2, .prose .gloss h4 { margin: 0; font-size: 20px; letter-spacing: -0.025em; line-height: 1.25; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.prose .gloss > * + * { margin-top: 8px; }
.gloss-also, .gloss-more, .prose .gloss-also, .prose .gloss-more { font-size: 15px; color: var(--muted); }
.gloss-also > span:first-child, .gloss-more > span:first-child { color: var(--faint); margin-right: 4px; }
.gloss-also b { color: var(--body); }

/* ---------- was-now: the old app's word beside today's, in two columns (decided 2026-10-16) ---------- */
.wn-table { margin-top: 14px; width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.wn-table caption { caption-side: top; text-align: left; font-weight: 600; color: var(--text); padding-bottom: 8px; }
.wn-table thead th { text-align: left; font-size: 13.5px; font-weight: 500; color: var(--muted); padding: 0 14px 8px 0; border-bottom: 1px solid var(--border-strong); }
.wn-table tbody th, .wn-table td { text-align: left; vertical-align: top; padding: 11px 14px 11px 0; border-bottom: 1px solid var(--border); }
.wn-table tbody th { width: 42%; font-weight: 500; color: var(--muted); }
.wn-table tbody th b { color: var(--body); }
.wn-table td { color: var(--body); }
.wn-table .wn-note { display: block; font-size: 14px; color: var(--muted); margin-top: 3px; }
.wn-table tr.wn-group th { padding: 22px 0 8px; font-size: 15px; font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border-strong); width: auto; }
.wn-table tbody:first-of-type tr.wn-group:first-child th { padding-top: 10px; }
.prose h4.wn-group-h, .wn-group-h { margin-top: 22px; font-size: 15.5px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; }

/* ---------- trouble: a problem and its fix, one accordion row each (decided 2026-10-16) ---------- */
.tr, .tr-acc { scroll-margin-top: calc(var(--bar-h) + 20px + var(--safe-top)); }
.prose .tr > * + * { margin-top: 10px; }
.prose .tr + .tr { margin-top: 28px; }
.prose .tr h3, .prose .tr h4 { margin-top: 0; font-size: 18px; }
.tr-why, .prose .tr-why { color: var(--body); }
.tr-why > span:first-child { color: var(--muted); }
.tr-still, .prose p.tr-still { font-size: 14.5px; color: var(--muted); }
.tr-still b { color: var(--body); }
.tr .steps { gap: 10px; }
.prose h4.tr-group-h, .prose .tr-group-h { margin-top: 30px; font-size: 20px; letter-spacing: -0.025em; }
.prose .tr-group-h + .tr, .prose .tr-group-h + ul { margin-top: 12px; }
details.tr-acc { border-bottom: 1px solid var(--border); }
details.tr-acc:first-of-type, .tr-group-h + details.tr-acc { border-top: 1px solid var(--border); }
.prose details.tr-acc + details.tr-acc { margin-top: 0; }
details.tr-acc summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 10px 2px;
  font-weight: 600; font-size: 16.5px; color: var(--text); letter-spacing: -0.015em; border-radius: 6px;
}
details.tr-acc summary .ic { flex: none; }
details.tr-acc summary:hover { color: var(--brand-strong); }
details.tr-acc .tr-body { padding: 0 2px 18px 22px; }
details.tr-acc .tr-body > * + * { margin-top: 10px; }

/* ---------- the reference blocks' container queries ---------- */
@container guide (max-width: 639px) {
  .where .open-app, .prose .where a.open-app { margin-left: 0; min-height: 44px; }
  .setting-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .setting-facts dd + dt { margin-top: 8px; }
  .wn-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .wn-table, .wn-table tbody, .wn-table tr, .wn-table th, .wn-table td { display: block; width: auto; }
  .wn-table tbody tr:not(.wn-group) { padding: 11px 0; border-bottom: 1px solid var(--border); }
  .wn-table tbody tr:not(.wn-group) th, .wn-table tbody tr:not(.wn-group) td { border: 0; padding: 0; width: auto; }
  .wn-table tbody tr:not(.wn-group) th { font-size: 14.5px; }
  .wn-table tbody tr:not(.wn-group) td { margin-top: 3px; }
  /* a reference table's rows become short blocks on a phone (settled 2026-10-16: stacked rows; a grid always scrolls) */
  .tbl[data-kind="ref"] { display: block; }
  .tbl[data-kind="ref"] caption { display: block; }
  .tbl[data-kind="ref"] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl[data-kind="ref"] tbody, .tbl[data-kind="ref"] tr { display: block; }
  .tbl[data-kind="ref"] tbody tr { padding: 12px 0; border-bottom: 1px solid var(--border); }
  .tbl[data-kind="ref"] tbody tr:first-child { border-top: 1px solid var(--border-strong); }
  .tbl[data-kind="ref"] th, .tbl[data-kind="ref"] td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .tbl[data-kind="ref"] tbody th { font-size: 16px; margin-bottom: 4px; }
  .tbl[data-kind="ref"] td { position: relative; font-size: 15px; padding: 2px 0 2px 9.2em; }
  .tbl[data-kind="ref"] td::before { content: attr(data-label); position: absolute; left: 0; top: 3px; width: 9.2em; padding-right: 8px; color: var(--muted); font-size: 14px; font-weight: 400; }
  /* a two-column table stacks as a title and its line: no label to repeat */
  .tbl[data-kind="ref"] td:only-of-type { padding-left: 0; }
  .tbl[data-kind="ref"] td:only-of-type::before { content: none; }
  /* a short number column rides on the title line ("Photos for one animal · 10"), and the last cell follows unlabeled */
  .tbl[data-kind="ref"] tbody tr:has(> td.num) > th { display: inline; margin: 0; }
  .tbl[data-kind="ref"] tbody td.num { display: inline; padding: 0; font-size: 16px; }
  .tbl[data-kind="ref"] tbody td.num::before { content: "·"; position: static; display: inline; width: auto; padding: 0 .4em; color: var(--faint); font-size: 16px; }
  .tbl[data-kind="ref"] tbody tr:has(> td.num) > td:not(.num) { padding: 0; margin-top: 4px; }
  .tbl[data-kind="ref"] tbody tr:has(> td.num) > td:not(.num)::before { content: none; }
  .tbl-wrap:has(> .tbl[data-kind="ref"]) { background: none; overflow: visible; }
}

/* family F, part 2: the interactive figures' shared card and controls, the marks legend, the flow,
   What happens if and Try it, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16. */

/* ---------- shared: stacked states, a figure's card, its controls ---------- */
/* every state of a figure sits in one grid cell, so the card is as tall as its longest state and nothing under it moves */
.stack { display: grid; }
.stack > .state { grid-area: 1 / 1; visibility: hidden; min-width: 0; }
.stack > .state.on { visibility: visible; }
.fig-card { margin: 12px 0 0; padding: 16px; border-radius: var(--r-l); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.fig-card-name { font-weight: 600; font-size: 15px; color: var(--text); margin-bottom: 10px; }
/* controls OUTSIDE the card, on the page (settled rule): radios drawn as segments */
.fig-controls { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 18px; }
.fig-controls fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.fig-controls legend { padding: 0; margin-bottom: 7px; font-size: 14px; color: var(--muted); }
.seg-radio { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-raised); }
.seg-radio label {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 13px; border-radius: 7px;
  color: var(--muted); font-size: 14.5px; font-weight: 500; line-height: 1.2; cursor: pointer; transition: background-color .15s, color .15s;
}
.seg-radio label:hover { color: var(--text); }
.seg-radio input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.seg-radio label:has(input:checked) { background: var(--surface3); color: var(--text); box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg-radio label:has(input:focus-visible) { outline: 2px solid var(--brand-strong); outline-offset: 1px; }
.fig-foot { margin-top: 10px; font-size: 14.5px; color: var(--muted); line-height: 1.55; }

/* ---------- legend: a key to the marks a screen draws ---------- */
.prose .legend { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
.prose .legend li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--border); }
.legend .lg-mark { display: flex; align-items: center; min-height: 24px; }
.legend .lg-text { color: var(--body); }
.legend .lg-text b { color: var(--text); font-weight: 500; }
.lg-dots { display: inline-flex; gap: 5px; }
.lg-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--feeding); }
.lg-dots span.hollow { background: transparent; box-shadow: inset 0 0 0 1.2px var(--feeding); }

/* ---------- flow: a path with one or two branches, drawn on an ordered list ---------- */
.prose .flow { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 0; }
.prose .flow > li { margin: 0; padding: 0; position: relative; display: grid; gap: 0; }
.prose .flow > li + li { padding-top: 22px; }
/* the spine runs behind the boxes, from each box to the next */
.prose .flow > li:not(:last-child)::before { content: ""; position: absolute; left: 22px; top: 18px; bottom: 0; border-left: 1.5px solid var(--border-strong); }
.prose .flow > li + li::after { content: ""; position: absolute; left: 22px; top: 0; height: 30px; border-left: 1.5px solid var(--border-strong); }
.fl-box { position: relative; z-index: 1; padding: 11px 14px 12px; border-radius: var(--r-m); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-raised); min-width: 0; }
.fl-box.fl-q { background: none; box-shadow: none; padding: 9px 0 9px 44px; }
/* a question isn't boxed: bold words on the spine, marked by a small outlined diamond (a decision); only outcomes are boxed */
.fl-box.fl-q::before { content: ""; position: absolute; left: 17px; top: 14px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
/* an arrowhead where the spine enters a box, and where a branch's line meets its box */
.prose .flow > li + li > .fl-box:not(.fl-q)::before, .fl-side::after { content: ""; position: absolute; width: 0; height: 0; border: solid transparent; }
.prose .flow > li + li > .fl-box:not(.fl-q)::before { left: 17.75px; top: -7px; border-width: 7px 5px 0; border-top-color: var(--border-strong); }
.fl-side::after { left: -7px; top: 5px; border-width: 5px 0 5px 7px; border-left-color: var(--border-strong); }
/* a branch that rejoins says so under its box */
.fl-back, .prose .fl-back { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13.5px; line-height: 20px; color: var(--muted); }
.fl-back .ic { width: 15px; height: 15px; flex: none; color: var(--faint); }
.fl-box.fl-end { box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.fl-t, .prose .fl-t { font-weight: 600; font-size: 15.5px; line-height: 1.35; color: var(--text); }
.fl-s, .prose .fl-s { margin-top: 3px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.fl-side { position: relative; z-index: 1; margin: 12px 0 0 44px; }
/* the branch's stub: off the spine, into the branch's "If not" */
.fl-side::before { content: ""; position: absolute; left: -22px; top: 10px; width: 16px; border-top: 1.5px solid var(--border-strong); }
.fl-when, .prose .fl-when { font-size: 13.5px; line-height: 20px; color: var(--muted); margin-bottom: 6px; }
.fl-side.fl-exit .fl-box { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-raised); }

/* ---------- explorer: "What happens if", the reader picks and the answer shows ---------- */
.ex-answer, .prose .ex-answer { font-size: 16px; color: var(--body); }
.ex-answer b { color: var(--text); font-weight: 600; }
.ex-counts { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; }
.prose .ex-counts li { margin: 0; padding: 8px 12px; }
.ex-counts li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border); font-size: 14.5px; color: var(--muted); }
.ex-counts li .ic { width: 17px; height: 17px; }
.ex-counts li.k-weight .ic { color: var(--weight); }
.ex-counts li.k-handling .ic { color: var(--handling); }
.ex-counts .n { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; color: var(--body); font-weight: 500; }
.ex-counts .n .ic { width: 13px; height: 13px; color: var(--faint); }
.ex-counts li.moved { color: var(--body); box-shadow: inset 0 0 0 1px var(--border-strong); }
.ex-counts li.moved .to { color: var(--text); font-weight: 700; }

/* ---------- try-it: type a food type's name, see the sizes it offers ---------- */
.ti-field { display: grid; gap: 7px; margin-top: 18px; }
.ti-field label { font-size: 14px; color: var(--muted); }
.ti-field input {
  width: 100%; max-width: 360px; height: 44px; padding: 0 12px; border: 0; border-radius: 11px; background: var(--field); color: var(--text);
  font: inherit; font-size: 16px; box-shadow: inset 0 0 0 1px var(--border-strong);
}
.ti-field input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--brand-strong); }
.ti-try { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 14.5px; color: var(--muted); }
.ti-try button { border: 0; background: var(--surface2); color: var(--body); font-size: 14px; min-height: 34px; padding: 4px 12px; border-radius: 999px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--border-raised); }
.ti-try button:hover { background: var(--surface3); color: var(--text); }
.ti-sum, .prose .ti-sum { min-height: 4.7em; font-size: 15.5px; color: var(--body); }
.ti-sum .aw-notice { margin: 0; }
.ti-note, .prose .ti-note { margin-top: 8px; font-size: 14px; color: var(--muted); }
.prose .ti-sizes { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.prose .ti-sizes li { margin: 0; padding: 0 10px; }
.ti-sizes li { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border-radius: 8px; font-size: 14px; color: var(--muted); box-shadow: inset 0 0 0 1px var(--border-raised); }
.ti-sizes li .ic { width: 13px; height: 13px; display: none; }
.ti-sizes li.lit { color: var(--text); font-weight: 600; background: var(--brand-tint); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-strong) 45%, transparent); }
.ti-sizes li.lit .ic { display: inline-block; color: var(--brand-strong); }

/* ---------- the figures' container queries ---------- */
@container guide (min-width: 560px) {
  .fig-card { padding: 18px 20px; }
}
@container guide (min-width: 640px) {
  /* the flow: a branch sits beside its question, its "If not" over the line that joins them */
  .prose .flow > li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: start; }
  .prose .flow > li > .fl-box { grid-column: 1; }
  .fl-side { grid-column: 2; grid-row: 1; margin: 0; }
  .fl-side::before { left: -64px; top: 21px; width: 64px; }
  .fl-side::after { top: 16px; }
  .fl-when, .prose .fl-when { position: absolute; left: -58px; top: -1px; margin: 0; font-size: 12.5px; white-space: nowrap; }
}
@container guide (max-width: 639px) {
  .seg-radio { display: flex; width: 100%; }
  .seg-radio label { flex: 1 1 auto; min-height: 44px; padding: 0 10px; }
  .fig-controls fieldset { width: 100%; }
  .ti-try button { min-height: 44px; padding: 6px 14px; }
  .ex-counts li { padding: 8px 10px; }
  .prose .legend li { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}

/* overlays: the phone drawer, the search panel and the picture viewer, from the mockup v6 (reference_material/help-docs/mockup/sneklog-guide.html), 2026-10-16. */

/* ---------- overlays: drawer, search, picture viewer ---------- */
.overlay { position: fixed; inset: 0; z-index: 70; }
/* while a layer is open the page behind stops scrolling (assets/js/layers.js); the kept gutter stops the
   page shifting sideways where a scrollbar takes room */
html.layer-open { overflow: hidden; scrollbar-gutter: stable; }
.overlay .scrim { position: absolute; inset: 0; background: var(--scrim); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.drawer-panel {
  position: absolute; top: 0; bottom: 0; left: 0; width: min(330px, 88%); background: var(--rail); border-right: 1px solid var(--border-raised);
  display: flex; flex-direction: column; box-shadow: var(--pop); transform: translateX(0); transition: transform .24s var(--ease);
  padding-top: var(--safe-top); padding-bottom: var(--safe-bottom);
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: var(--bar-h); padding: 0 6px 0 16px; border-bottom: 1px solid var(--border); flex: none; position: relative; z-index: 1; }
.drawer-head .logo { width: 116px; }
.drawer-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; position: relative; z-index: 1; }
.drawer-find { padding: 14px 12px 2px; }
.drawer-find .searchfield { height: 44px; }
.drawer-panel .nav-row { min-height: 44px; }
.drawer-panel .sub { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
.drawer-panel .caret { width: 38px; height: 38px; top: 3px; right: 3px; }
.drawer-foot { flex: none; padding: 12px 16px 14px; border-top: 1px solid var(--border); position: relative; z-index: 1; }
.drawer-foot .btn { width: 100%; height: 44px; }
.search-panel {
  position: absolute; left: 50%; top: calc(8vh + var(--safe-top)); transform: translateX(-50%); width: min(620px, calc(100% - 32px));
  max-height: 76vh; max-height: 76dvh;
  display: flex; flex-direction: column; background: var(--surface2); border-radius: 16px; box-shadow: inset 0 0 0 1px var(--border-raised), var(--pop); overflow: hidden;
}
.search-row { display: flex; align-items: center; gap: 10px; padding: 0 8px 0 16px; height: 58px; border-bottom: 1px solid var(--border-raised); flex: none; transition: box-shadow .15s; }
.search-row:focus-within { box-shadow: inset 0 -2px 0 var(--brand-strong); }
.search-row > .ic { width: 20px; height: 20px; color: var(--muted); }
.search-row input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px;
}
.search-row input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.search-row input::placeholder { color: var(--faint); }
.search-cancel { display: none; height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--brand-strong); font-size: 16px; font-weight: 500; cursor: pointer; border-radius: 8px; }
.search-count { font-size: 13px; color: var(--muted); padding: 12px 18px 0; flex: none; }
.search-results { overflow-y: auto; padding: 6px 8px 8px; overscroll-behavior: contain; }
.search-results a { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; text-decoration: none; }
.search-results a:hover, .search-results a[aria-selected="true"] { background: var(--surface3); }
.search-results .t { color: var(--text); font-weight: 500; }
.search-results .s { font-size: 14px; color: var(--muted); line-height: 1.45; }
.search-results mark { background: var(--mark-bg); color: var(--text); border-radius: 3px; padding: 0 1px; }
/* a result that lands on a section of its page names the section after the page's title (assets/js/search.js),
   and a page still being written wears the section list's Soon */
.search-results .t .h { color: var(--body); font-weight: 400; }
.search-results .t .soon-pill { display: inline-flex; vertical-align: 2px; margin-left: 8px; }
.search-foot { padding: 10px 16px 12px; border-top: 1px solid var(--border-raised); font-size: 13.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; flex: none; }
.lb { display: flex; flex-direction: column; background: var(--lb-bg); padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
.lb-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; flex: none; }
.lb-bar .btn { height: 44px; }
.lb-cap { flex: 1; font-size: 14px; color: var(--muted); min-width: 0; }
/* The picture fits the stage both ways and keeps its own shape, so the markers (percentages of the
   box) stay on their parts: the stage is a size container, and the box is as wide as the stage, or
   as the stage's height times the picture's ratio, whichever is less. (A box held at full height
   and capped in width letterboxed a wide crop inside it, and its markers landed off the picture.) */
.lb-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px 24px; container-type: size; }
.lb-stage .shot-inner { width: min(100cqw, 100cqh * var(--ar)); height: auto; aspect-ratio: var(--ar); box-shadow: none; padding: 0; background: var(--rail); border-radius: var(--r-l); }
.lb-stage .shot-inner img { width: 100%; height: 100%; object-fit: contain; }
@container guide (max-width: 639px) {
  .search-panel { left: 0; top: 0; transform: none; width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; padding-top: var(--safe-top); padding-bottom: var(--safe-bottom); }
  .search-results { flex: 1; }
  .search-row { padding: 0 4px 0 16px; }
  .search-row .search-x { display: none; }
  .search-cancel { display: inline-flex; align-items: center; }
}