/* MWKH Staff Onboarding
   One reading face (Source Serif 4) for headings and text, one interface face (Source Sans 3) for controls, labels and tables.
   Type sizes are in rem through --rem, so the browser's and the phone's text-size settings apply.
   Colour: warm paper, one ink in three strengths, forest as the brand colour. Amber marks "in progress" and the arcs, never text.
   Shape: three corner sizes, 1px rules, shadows only on things that float. */
/* Each face comes in two files: everyday Latin, and accented and extended Latin (loaded only when a page uses it).
   Text is cut at optical size 18, headings at 48 (Source Serif 4 Display). */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif-4.woff2?v=ca1bdd6c5c) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif-4-ext.woff2?v=934ac9f2bf) format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0180-024F, U+0259, U+0268, U+02B9-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD, U+0300-036F, U+1E00-1EFF, U+2116; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif-4-italic.woff2?v=4db2c4f549) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/source-serif-4-italic-ext.woff2?v=cc273bd240) format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0180-024F, U+0259, U+0268, U+02B9-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD, U+0300-036F, U+1E00-1EFF, U+2116; }
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4-display.woff2?v=6e7a2f7d72) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4 Display"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/source-serif-4-display-ext.woff2?v=4470ee2749) format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0180-024F, U+0259, U+0268, U+02B9-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD, U+0300-036F, U+1E00-1EFF, U+2116; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-sans-3.woff2?v=1244aa2e9e) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/source-sans-3-ext.woff2?v=9dd0e56248) format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0180-024F, U+0259, U+0268, U+02B9-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD, U+0300-036F, U+1E00-1EFF, U+2116; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/source-sans-3-italic.woff2?v=0a5d0f49a8) format("woff2"); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2197, U+2212, U+2215, U+2713, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-style: italic; font-weight: 400 700; font-display: swap; src: url(/fonts/source-sans-3-italic-ext.woff2?v=a3d2172d95) format("woff2"); unicode-range: U+0100-0130, U+0132-0151, U+0154-017F, U+0180-024F, U+0259, U+0268, U+02B9-02BB, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD, U+0300-036F, U+1E00-1EFF, U+2116; }
/* stand-ins while the fonts load: system faces scaled to the same width and line metrics, so text doesn't jump when the real face arrives (figures from Capsize) */
@font-face { font-family: "Source Serif 4 fb Georgia"; src: local("Georgia"); size-adjust: 102.9608%; ascent-override: 100.6208%; descent-override: 32.5367%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif 4 fb Noto"; src: local("Noto Serif"), local("Noto Serif Regular"), local("NotoSerif-Regular"); size-adjust: 95.4262%; ascent-override: 108.5656%; descent-override: 35.1057%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif 4 Display fb Georgia"; src: local("Georgia"); size-adjust: 96.2313%; ascent-override: 107.6573%; descent-override: 34.8119%; line-gap-override: 0%; }
@font-face { font-family: "Source Serif 4 Display fb Noto"; src: local("Noto Serif"), local("Noto Serif Regular"), local("NotoSerif-Regular"); size-adjust: 89.1892%; ascent-override: 116.1576%; descent-override: 37.5606%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 fb Arial"; src: local("Arial"), local("ArialMT"); size-adjust: 93.7639%; ascent-override: 109.2105%; descent-override: 42.6604%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 fb Roboto"; src: local("Roboto"), local("Roboto Regular"), local("Roboto-Regular"); size-adjust: 93.9697%; ascent-override: 108.9713%; descent-override: 42.5669%; line-gap-override: 0%; }

:root {
  /* 1px of text at the reader's own text size */
  --rem: .0625rem;
  --paper: #f7f5f0;
  --paper-2: #eeebe4;
  --surface: #fffefb;
  --ink: #17211b;
  --ink-2: #465149;
  --ink-3: #636d66;
  --rule: #dcd8ce;
  --rule-2: #e7e4dc;
  --edge: #858d86;
  --forest: #123f2b;
  --forest-2: #1b4d37;
  --title: #123f2b;
  --link: #1d6942;
  --ok: #276f45;
  --ok-fill: #2f7d4f;
  --ok-tint: #e3eee6;
  --sun: #ffb727;
  --sun-tint: #fbefd2;
  --sky: #b8d3d9;
  --sky-ink: #33626d;
  --sky-tint: #e3edef;
  --brick: #a23e29;
  --brick-tint: #f6e6e0;
  --leaf: #338f56;
  --btn: #123f2b;
  --btn-hover: #1b4d37;
  --btn-ink: #ffffff;
  --on-forest: #f4f1ea;
  --on-forest-2: #b9cbbf;
  --on-forest-line: rgba(244, 241, 234, .22);
  --scrim: rgba(16, 26, 20, .42);
  --float: 0 1px 2px rgba(16, 26, 20, .06), 0 10px 30px rgba(16, 26, 20, .12);
  --hl: #fbe7b3;
  --f-text: "Source Serif 4", "Source Serif 4 fb Georgia", "Source Serif 4 fb Noto", Georgia, serif;
  --f-display: "Source Serif 4 Display", "Source Serif 4 Display fb Georgia", "Source Serif 4 Display fb Noto", "Source Serif 4", Georgia, serif;
  --f-ui: "Source Sans 3", "Source Sans 3 fb Arial", "Source Sans 3 fb Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --t-xs: calc(13 * var(--rem));
  --t-sm: calc(15 * var(--rem));
  --t-ui: calc(16 * var(--rem));
  --t-md: calc(18 * var(--rem));
  --t-h3: calc(21 * var(--rem));
  --t-h2: calc(27 * var(--rem));
  --t-h1: calc(44 * var(--rem));
  --t-d: calc(56 * var(--rem));
  --read: calc(18 * var(--rem));
  --r1: 4px;
  --r2: 8px;
  --r3: 12px;
  --top: 60px;
  --gut: max(24px, env(safe-area-inset-left, 0px));
  --gut-r: max(24px, env(safe-area-inset-right, 0px));
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  color-scheme: only light;
}
/* iPhone and iPad: follow the phone's text-size setting (Dynamic Type). Its default body size is 17px, so --rem stays 1px at the default. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: default) {
  :root { font: -apple-system-body; --rem: calc(1rem / 17); }
}
:root[data-text="s"] { --read: calc(16 * var(--rem)); } :root[data-text="l"] { --read: calc(20 * var(--rem)); } :root[data-text="xl"] { --read: calc(22 * var(--rem)); }
@media (max-width: 600px) {
  :root { --read: calc(17 * var(--rem)); --t-h1: calc(34 * var(--rem)); --t-h2: calc(24 * var(--rem)); --t-d: calc(40 * var(--rem)); --gut: max(20px, env(safe-area-inset-left, 0px)); --gut-r: max(20px, env(safe-area-inset-right, 0px)); --top: 56px; }
  :root[data-text="s"] { --read: calc(15.5 * var(--rem)); } :root[data-text="l"] { --read: calc(19 * var(--rem)); } :root[data-text="xl"] { --read: calc(21 * var(--rem)); }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + var(--sat) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-ui); font-size: var(--t-ui); line-height: 1.5;
  font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto;
  min-height: 100vh; min-height: 100dvh; overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
.on-forest, .si-brand, .hb :is(.callout, .card)[data-tone="dark"], .btn-primary, .toast, .resume, .offbar, .next:not(.complete) { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body.locked { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .18em; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--r1); }
/* browsers without :focus-visible (iOS before 15.4) show the ring on every focus */
@supports not selector(:focus-visible) { :focus { outline: 2px solid var(--link); outline-offset: 2px; } }
/* on forest, the focus ring is amber */
.q-top :focus-visible, .quiz[data-phase="done"] :focus-visible, .si-brand :focus-visible, .signin-band :focus-visible, .next:not(.complete) :focus-visible, .hb :is(.callout, .card)[data-tone="dark"] :focus-visible, .resume :focus-visible, .lightbox :focus-visible, .offbar :focus-visible { outline-color: var(--sun); }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
.tnum { font-variant-numeric: tabular-nums; }
.nobr { white-space: nowrap; }
::selection { background: var(--hl); color: inherit; }

/* ---------- Type ---------- */
h1, h2, h3, h4, .si-h, .q-prompt, .bt-body b, .toc-row .t, .rec-row .t, .si-books b { overflow-wrap: break-word; }
.d1, .d2, .d3 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; color: var(--title); }
.d1 { font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.005em; }
.d2 { font-size: calc(34 * var(--rem)); line-height: 1.12; }
.d3 { font-size: var(--t-h3); line-height: 1.25; font-family: var(--f-text); }
.label { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.eyebrow { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-sm); color: var(--link); margin: 0; }
.muted { color: var(--ink-3); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 18px;
  border-radius: var(--r2); font-family: var(--f-ui); font-weight: 600; font-size: var(--t-ui); line-height: 1.2; text-decoration: none; text-align: center;
  border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; -webkit-user-select: none; user-select: none;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary, .btn-sun { background: var(--btn); color: var(--btn-ink); }
.btn-line { border-color: var(--edge); color: var(--ink); background: transparent; }
.btn-quiet { color: var(--link); padding-inline: 4px; min-height: 40px; text-decoration: underline; text-underline-offset: .18em; }
.btn-sm { min-height: 38px; padding: 6px 14px; font-size: var(--t-sm); }
/* a text button sits on the same edge as the text around it */
.btn-quiet.btn-sm { padding-inline: 4px; }
.adm-foot .btn-quiet { margin-inline-end: -4px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .55; pointer-events: none; }
@media (hover: hover) {
  .btn-primary:hover, .btn-sun:hover { background: var(--btn-hover); }
  .btn-line:hover { background: var(--paper-2); border-color: var(--ink-3); }
}
.on-forest .btn-primary, .on-forest .btn-sun { background: var(--on-forest); color: #123f2b; }
.on-forest .btn-line { color: var(--on-forest); border-color: var(--on-forest-line); }
@media (hover: hover) { .on-forest .btn-primary:hover, .on-forest .btn-sun:hover { background: #ffffff; } .on-forest .btn-line:hover { background: rgba(255, 255, 255, .06); border-color: rgba(244, 241, 234, .5); } }
.linkish { color: var(--link); font-weight: 600; text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; padding: 10px 0; margin: -10px 0; }
.linkish[disabled] { color: var(--ink-3); text-decoration: none; cursor: default; }
.row-split { display: flex; justify-content: space-between; gap: 20px 12px; flex-wrap: wrap; align-items: center; }

/* ---------- Brand mark: the three arcs from the handbook covers ---------- */
.mark { display: inline-block; flex: none; }
.mark svg { display: block; width: 100%; height: 100%; }

/* ---------- Top bar ---------- */
body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--sat); background: var(--paper); z-index: 41; }
.top { position: -webkit-sticky; position: sticky; top: var(--sat); z-index: 40; background: var(--paper); border-bottom: 1px solid var(--rule); }
.top-in { display: flex; align-items: center; gap: 6px; height: var(--top); position: relative; }
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; min-height: 44px; margin-right: auto; border-radius: var(--r1); overflow: hidden; }
.brand > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.brand .mark { width: 26px; height: 26px; }
.brand b { font-family: var(--f-text); font-weight: 600; font-size: calc(18 * var(--rem)); letter-spacing: -.003em; white-space: nowrap; }
.brand > span:not(.mark) { color: var(--ink-3); font-size: var(--t-sm); white-space: nowrap; padding-left: 12px; border-left: 1px solid var(--rule); }
.back { display: none; }
/* shown only when it has the keyboard's focus */
.skip { position: fixed; left: 12px; top: calc(var(--sat) + 8px); z-index: 90; padding: 10px 16px; border-radius: var(--r2); background: var(--forest); color: #fff; font-weight: 600; font-size: var(--t-sm); text-decoration: none; }
.skip:not(:focus) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { outline: 2px solid var(--sun); outline-offset: 2px; }
.navlink { display: inline-flex; align-items: center; height: var(--top); padding: 0 12px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: var(--t-sm); position: relative; }
.navlink[aria-current="page"] { color: var(--ink); }
.navlink[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--forest); }
@media (hover: hover) { .navlink:hover { color: var(--ink); } }
.iconbtn { width: 44px; height: 44px; border-radius: var(--r2); display: grid; place-items: center; color: var(--ink-2); flex: none; }
.iconbtn svg { width: 20px; height: 20px; }
@media (hover: hover) { .iconbtn:hover { background: var(--paper-2); color: var(--ink); } }
.iconbtn .aa { font-family: var(--f-text); font-weight: 600; font-size: calc(18 * var(--rem)); line-height: 1; letter-spacing: -.01em; }
.iconbtn[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
[data-only-narrow] { display: none; }
@media (max-width: 1000px) { [data-only-narrow] { display: grid; } }
.searchbtn { display: inline-flex; align-items: center; gap: 8px; height: 38px; min-width: 220px; padding: 0 6px 0 12px; margin-right: 6px; border-radius: var(--r2); border: 1px solid var(--rule); background: var(--surface); color: var(--ink-3); font-size: var(--t-sm); }
.searchbtn svg { width: 17px; height: 17px; flex: none; }
.searchbtn kbd { margin-left: auto; font-family: var(--f-ui); font-size: var(--t-xs); line-height: 20px; min-width: 22px; text-align: center; border: 1px solid var(--rule); border-radius: var(--r1); color: var(--ink-3); }
@media (hover: hover) { .searchbtn:hover { border-color: var(--edge); color: var(--ink-2); } }
@media (max-width: 1000px) {
  .searchbtn { min-width: 0; width: 44px; height: 44px; padding: 0; margin: 0; justify-content: center; border: 0; background: none; color: var(--ink-2); }
  .searchbtn span, .searchbtn kbd { display: none; }
  .searchbtn svg { width: 20px; height: 20px; }
}
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); color: var(--ink); border: 1px solid var(--rule); display: grid; place-items: center; font-weight: 600; font-size: var(--t-sm); margin-left: 6px; flex: none; }
@media (hover: hover) { .avatar:hover { border-color: var(--edge); } }
.avatar[aria-expanded="true"] { border-color: var(--edge); }
.progress-line { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--p, 0%); background: var(--forest); z-index: 1; transition: width .1s linear; }
.menu { position: absolute; right: 0; top: calc(var(--top) - 4px); width: min(300px, calc(100vw - 32px)); max-height: calc(100vh - var(--top) - var(--sat) - 12px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r3); box-shadow: var(--float); padding: 6px; z-index: 50; animation: pop .14s ease-out; }
.menu .who { padding: 10px 10px 12px; border-bottom: 1px solid var(--rule-2); margin-bottom: 4px; }
.menu .who b { display: block; font-size: var(--t-ui); font-weight: 600; }
.menu .who span { display: block; font-size: var(--t-sm); color: var(--ink-3); overflow-wrap: anywhere; }
.menu button, .menu a { display: flex; width: 100%; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: var(--r1); font-size: var(--t-ui); text-align: left; color: var(--ink); text-decoration: none; }
.menu > a svg, .menu > button svg { width: 18px; height: 18px; flex: none; color: var(--ink-3); }
@media (hover: hover) { .menu button:hover, .menu a:hover { background: var(--paper-2); } }
.menu .m-note { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 0; padding: 10px 10px 6px; border-top: 1px solid var(--rule-2); font-size: var(--t-xs); line-height: 1.4; color: var(--ink-3); }
.menu .m-note:empty { display: none; }
.menu .m-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--ok); }
.spin { width: 14px; height: 14px; border: 2px solid var(--rule); border-top-color: var(--forest); border-radius: 50%; animation: spin 1s linear infinite; flex: none; margin-top: 2px; }
@keyframes spin { to { transform: rotate(360deg); } }
.offbar { display: flex; gap: 10px; align-items: center; justify-content: center; padding: calc(8px + var(--sat)) var(--gut-r) 8px var(--gut); background: #123f2b; color: var(--on-forest); font-size: var(--t-sm); line-height: 1.35; position: relative; z-index: 42; }
.offbar svg { width: 16px; height: 16px; flex: none; color: var(--sun); }
@keyframes pop { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 760px) {
  .brand b { display: none; }
  .brand > span:not(.mark) { border-left: 0; padding-left: 0; font-size: var(--t-ui); font-weight: 600; color: var(--ink); }
  .top.ctx .brand { display: none; }
  .top.ctx .back { display: inline-flex; align-items: center; gap: 2px; margin-right: auto; height: 44px; padding: 0 10px 0 2px; margin-left: -8px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: var(--t-ui); min-width: 0; border-radius: var(--r2); }
  .top.ctx .back svg { width: 20px; height: 20px; flex: none; }
  .top.ctx .back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .top .navlink.hide-sm { display: none; }
  .top .navlink[href="/"] { display: none; }
  .navlink { height: 44px; }
  .navlink[aria-current="page"]::after { display: none; }
}

main { padding-bottom: calc(48px + var(--sab)); }
/* waiting for a section: a thin bar runs along the top */
body.loading::after { content: ""; position: fixed; left: 0; top: var(--sat); height: 2px; width: 40%; background: var(--forest); z-index: 60; animation: loadbar 1s ease-in-out infinite; }
@keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.enter { animation: enter .28s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }

/* ---------- Status primitives ---------- */
.chip { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 1px 8px; border-radius: var(--r1); font-size: var(--t-xs); font-weight: 600; background: var(--paper-2); color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.chip svg { width: 13px; height: 13px; }
.chip.done { background: var(--ok-tint); color: var(--ok); }
.chip.part { background: var(--sun-tint); color: var(--ink); }
.chip.ref { background: var(--sky-tint); color: var(--sky-ink); }
/* a quiz in progress: half a disc in amber, with the words beside it */
.st-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; display: inline-block; border: 1px solid var(--edge); }
.st-dot.done { background: var(--ok-fill); border-color: var(--ok-fill); }
.st-dot.part { border: 2px solid var(--sun); background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); }

/* ---------- Progress ---------- */
.prog { border-top: 1px solid var(--rule); padding: 18px 0 0; }
.prog-n { margin: 6px 0 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.prog-n b { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1); line-height: 1; font-variant-numeric: lining-nums tabular-nums; color: var(--title); }
.prog-n span { font-size: var(--t-ui); color: var(--ink-2); }
.prog-rows { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--rule-2); display: grid; gap: 12px; }
.prog-rows li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px 10px; align-items: center; font-size: var(--t-sm); }
.prog-rows .st { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center; }
.prog-rows .st.done { background: var(--ok-fill); border-color: var(--ok-fill); }
.prog-rows .st.done svg { width: 11px; height: 11px; color: #fff; }
.prog-rows .st.part { border: 2px solid var(--sun); background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); }
.prog-rows li b { font-weight: 600; font-size: var(--t-sm); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.prog-rows li b.done { color: var(--ok); }
.prog-rows li b.part { color: var(--ink); }
.cells.all { display: grid; grid-template-columns: 12px minmax(0, 1fr) 12px; gap: 6px; margin-top: 16px; }
.cells.all > span { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.cells.all i { height: 12px; border-radius: 2px; background: var(--rule); }
.cells.all i.done { background: var(--ok-fill); }
.cells.all i.part { background: var(--sun); }

/* ---------- Sign in ---------- */
/* the left half is the handbook cover at the size of the screen: the arcs come in from the left edge, the words sit beside them */
.signin { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(500px, 1fr); min-height: 100vh; min-height: 100dvh; }
.si-brand { --tx: calc(82vh * .34 + 36px); position: relative; overflow: hidden; background: #123f2b; color: var(--on-forest); display: grid; grid-template-rows: auto 1fr auto; padding: calc(40px + var(--sat)) clamp(32px, 4vw, 64px) calc(36px + var(--sab)) 0; }
.si-brand > .arcs { position: absolute; left: 0; bottom: 0; height: 82vh; max-height: 100%; width: auto; }
.si-brand > :not(.arcs) { position: relative; margin-left: var(--tx); }
.si-top { display: flex; align-items: center; gap: 14px; }
.si-top img { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.si-top b { display: block; font-family: var(--f-text); font-weight: 600; font-size: calc(19 * var(--rem)); line-height: 1.2; }
.si-top span { display: block; font-size: var(--t-sm); color: var(--on-forest-2); margin-top: 1px; }
.si-mid { align-self: center; max-width: 420px; padding: 40px 0; }
.si-k { margin: 0; font-weight: 600; font-size: var(--t-sm); color: var(--sun); }
.si-h { margin: 10px 0 0; font-family: var(--f-display); font-weight: 600; font-size: min(var(--t-d), 4.6vw); line-height: 1.04; letter-spacing: -.008em; color: #fff; text-wrap: balance; }
.si-books { list-style: none; margin: 32px 0 0; padding: 0; border-top: 1px solid var(--on-forest-line); }
.si-books li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--on-forest-line); }
.si-books b { font-family: var(--f-text); font-weight: 600; font-size: calc(19 * var(--rem)); line-height: 1.3; }
.si-books span { font-size: var(--t-sm); color: var(--on-forest-2); }
.si-land { margin: 0; max-width: 420px; font-family: var(--f-text); font-style: italic; font-size: var(--t-sm); line-height: 1.5; color: var(--on-forest-2); }
.signin-band { display: none; }
.signin-panel .si-land { display: none; }
.signin-panel { display: grid; grid-template-rows: 1fr auto; padding: calc(36px + var(--sat)) var(--gut-r) calc(28px + var(--sab)) clamp(32px, 6vw, 88px); background: var(--paper); }
.signin-form { align-self: center; width: 100%; max-width: 400px; display: grid; gap: 20px; }
.signin-form h1 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: calc(36 * var(--rem)); line-height: 1.1; color: var(--title); }
.signin-form p { margin: 0; color: var(--ink-2); font-size: var(--t-ui); line-height: 1.5; }
.signin-form p b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.si-help { align-self: end; margin: 32px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.si-help a { color: var(--link); font-weight: 600; }
.field { display: grid; gap: 8px; }
.field > label { font-weight: 600; font-size: var(--t-sm); color: var(--ink); }
.input { width: 100%; min-height: 50px; border-radius: var(--r2); border: 1px solid var(--edge); background: var(--surface); padding: 10px 14px; font-size: max(16px, var(--t-ui)); line-height: 1.3; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; }
.input::placeholder { color: var(--ink-3); opacity: 1; }
.input:focus-visible { outline: none; }
.input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(29, 105, 66, .22); }
.input[aria-invalid="true"] { border-color: var(--brick); }
.input.code { font-family: var(--f-ui); font-weight: 600; font-size: calc(26 * var(--rem)); letter-spacing: .32em; font-variant-numeric: tabular-nums; min-height: 60px; padding-inline: 16px 8px; }
.input.code::placeholder { letter-spacing: .32em; color: var(--rule); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); cursor: pointer; line-height: 1.45; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--forest); flex: none; }
.hint { font-size: var(--t-sm); color: var(--ink-3); }
.signin-form .si-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r2); background: var(--sky-tint); color: var(--ink); font-size: var(--t-sm); }
.si-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--sky-ink); }
.err { color: var(--brick); font-size: var(--t-sm); font-weight: 600; margin: 0; }
.signin-form .err { color: var(--brick); margin-top: -8px; }
.preview-code { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: var(--r2); border: 1px dashed var(--edge); font-size: var(--t-sm); color: var(--ink-2); }
.preview-code b { font-weight: 600; font-size: calc(20 * var(--rem)); letter-spacing: .16em; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1023px) {
  .signin { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .si-brand { display: none; }
  .signin-band { display: block; position: relative; overflow: hidden; background: #123f2b; color: var(--on-forest); padding: calc(24px + var(--sat)) var(--gut-r) 26px var(--gut); }
  .signin-band .arcs { position: absolute; right: 0; bottom: 0; height: 104px; width: auto; transform: scaleY(-1); }
  .signin-band .sb-in { position: relative; max-width: 400px; }
  .signin-band .si-top { justify-self: start; text-align: left; }
  .signin-band .si-top img { order: 0; width: 44px; height: 44px; }
  .signin-band .si-k { margin-top: 22px; }
  .signin-band .si-h { font-size: calc(34 * var(--rem)); margin-top: 6px; max-width: 10em; }
  .signin-panel { padding: 28px var(--gut-r) calc(24px + var(--sab)) var(--gut); }
  .signin-form { align-self: start; }
  .signin-panel .si-land { display: block; justify-self: start; color: var(--ink-3); margin-top: 28px; width: auto; max-width: 400px; }
  .si-help { margin-top: 14px; }
}
@media (min-width: 561px) and (max-width: 1023px) {
  .signin-band, .signin-panel { padding-left: max(var(--gut), calc((100% - 400px) / 2)); padding-right: max(var(--gut-r), calc((100% - 400px) / 2)); }
  .signin-panel { padding-top: 40px; }
}

/* ---------- Home ---------- */
/* the top of the page says where you are in words and in a mark for each quiz; the next step comes first below it */
.home-op .arcs { height: min(100%, 340px); }
.home-head { padding: 44px 0 36px; max-width: 760px; position: relative; }
.home-head .kicker { margin: 0 0 10px; font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); }
.home-head h1 { margin: 0; font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.006em; color: var(--title); text-wrap: balance; }
.home-head .lead { margin: 14px 0 0; font-family: var(--f-text); font-size: calc(20 * var(--rem)); line-height: 1.5; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.marks { display: flex; gap: 10px; margin-top: 26px; max-width: 560px; }
.marks > span { display: flex; gap: 4px; }
.marks > span:nth-child(2) { flex: 1; }
.marks i { display: block; height: 14px; border-radius: 2px; background: var(--rule); flex: 1; min-width: 14px; }
.marks > span:not(:nth-child(2)) i { width: 14px; flex: none; }
.marks i.done { background: var(--ok-fill); }
.marks i.part { background: linear-gradient(90deg, var(--sun) 50%, var(--rule) 50%); }
.marks-key { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--t-sm); color: var(--ink-2); }
.marks-key li { display: inline-block; }
.marks-key .st-dot { margin-right: 7px; vertical-align: -1px; }
.marks-key b { font-weight: 600; color: var(--ink); }
.home { padding-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
.home-main { display: grid; gap: 48px; min-width: 0; }
.home-side { position: -webkit-sticky; position: sticky; top: calc(var(--top) + var(--sat) + 28px); }
.home-side > h2, .hq-head h2 { margin: 0; font-family: var(--f-text); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; color: var(--ink); }
.next { background: #123f2b; color: var(--on-forest); border-radius: var(--r2); padding: 28px 30px 30px; display: grid; gap: 20px; }
.next .eyebrow { color: var(--sun); display: flex; align-items: center; gap: 6px; }
.next .eyebrow svg { width: 15px; height: 15px; }
.next h2 { font-family: var(--f-display); font-weight: 600; font-size: calc(30 * var(--rem)); line-height: 1.15; margin: 8px 0 0; text-wrap: balance; color: #fff; max-width: 22em; }
.next p { margin: 10px 0 0; color: var(--on-forest-2); font-size: var(--t-ui); max-width: 52ch; }
.next .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.next .btn-primary, .next .btn-sun { background: var(--on-forest); color: #123f2b; }
.next .btn-line { color: var(--on-forest); border-color: var(--on-forest-line); }
@media (hover: hover) { .next .btn-sun:hover, .next .btn-primary:hover { background: #fff; } .next .btn-line:hover { border-color: rgba(244, 241, 234, .55); background: rgba(255, 255, 255, .05); } }
.next.complete { background: none; color: var(--ink); border-top: 2px solid var(--ok-fill); border-radius: 0; padding: 18px 0 0; }
.next.complete h2 { color: var(--ink); }
.next.complete p { color: var(--ink-2); }
.next.complete .eyebrow { color: var(--ok); }
.next.complete .btn-primary { background: var(--btn); color: var(--btn-ink); }
.next.complete .btn-line { color: var(--ink); border-color: var(--edge); }
@media (hover: hover) { .next.complete .btn-primary:hover { background: var(--btn-hover); } .next.complete .btn-line:hover { background: var(--paper-2); } }
.books { display: grid; margin-top: 12px; border-top: 1px solid var(--rule); }
.book-tile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--rule); }
.bt-cover .cover { width: 52px; }
.bt-body { display: grid; gap: 1px; min-width: 0; }
.bt-k { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.bt-body b { font-family: var(--f-text); font-weight: 600; font-size: calc(19 * var(--rem)); line-height: 1.25; }
.bt-sub { font-size: var(--t-sm); color: var(--ink-3); }
.bt-st { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin-top: 2px; }
.bt-st svg { width: 14px; height: 14px; }
.bt-st.done { color: var(--ok); } .bt-st.ref { color: var(--sky-ink); }
.bt-rd { font-weight: 400; color: var(--ink-3); }
@media (hover: hover) { .book-tile:hover .bt-body b { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } }
.hq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hq-toggle, .hq-done { display: none; }
.hq-done { align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 0 2px; color: var(--ok); font-weight: 600; font-size: var(--t-sm); text-align: left; border-bottom: 1px solid var(--rule-2); }
.hq-done svg { width: 15px; height: 15px; }
.hq-list { display: grid; gap: 32px; }
.rec-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-3); }
.rec-head h3 { margin: 0; font-family: var(--f-ui); font-weight: 600; font-size: var(--t-ui); line-height: 1.3; }
.rec-n { margin-left: auto; font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-practice .rec-list { -webkit-columns: 2; columns: 2; -webkit-column-gap: 40px; column-gap: 40px; }
.rec-item { border-bottom: 1px solid var(--rule); -webkit-column-break-inside: avoid; break-inside: avoid; }
.rec-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 12px 0; color: inherit; text-decoration: none; }
.rec-row .n { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.rec-row .t { display: block; font-family: var(--f-text); font-weight: 600; font-size: calc(17 * var(--rem)); line-height: 1.3; }
.rec-row .m { display: block; font-size: var(--t-xs); color: var(--ink-3); margin-top: 2px; }
.rec-row .s, .rec-row .sm { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-xs); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rec-row .sm { display: none; margin-top: 3px; }
.rec-row .s svg, .rec-row .sm svg { width: 13px; height: 13px; }
.rec-row .done { color: var(--ok); } .rec-row .part { color: var(--ink); }
.rec-row .st-dot { width: 10px; height: 10px; }
@media (hover: hover) { .rec-row:hover .t { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } }
.rec-practice .rec-row .s { display: none; }
.rec-practice .rec-row .sm { display: inline-flex; }
@media (max-width: 1000px) {
  .home { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 28px; }
  .home-main { display: contents; }
  .home-main > .next { order: 1; } .home-side { order: 2; position: static; } .home-quizzes { order: 3; }
}
@media (max-width: 760px) {
  .home-head { padding: 30px 0 28px; }
  .home-op .arcs { height: 52px; }
  .home-head .kicker { padding-right: 64px; }
  .home-head .lead { font-size: calc(17 * var(--rem)); }
  .marks { gap: 6px; } .marks > span { gap: 3px; } .marks i, .marks > span:first-child i, .marks > span:last-child i { min-width: 0; width: auto; flex: 1; height: 12px; } .marks > span:first-child, .marks > span:last-child { width: 12px; } .marks > span:first-child i, .marks > span:last-child i { width: 12px; flex: none; }
  .marks-key { display: grid; gap: 4px; }
  .hq-toggle { display: inline-flex; }
  .home-quizzes:not(.open) .hq-list { display: none; }
  .hq-done { display: flex; }
  .home-quizzes:not(.show-done) .rec-item.done { display: none; }
  .home-quizzes:not(.show-done) .rec.all-done { display: none; }
  .rec-practice .rec-list { -webkit-columns: 1; columns: 1; }
  .rec-row .s { display: none; } .rec-row .sm { display: inline-flex; }
  .next { padding: 22px 20px 24px; }
  .next h2 { font-size: calc(25 * var(--rem)); }
  .next .acts .btn { flex: 1 1 auto; }
}

/* ---------- Cover: the printed cover, drawn in SVG ---------- */
.cover { display: block; aspect-ratio: 8.5 / 11; border-radius: 2px 4px 4px 2px; overflow: hidden; box-shadow: inset 2px 0 0 rgba(18, 63, 43, .08), 0 0 0 1px rgba(18, 63, 43, .1), 0 4px 14px rgba(18, 63, 43, .08); background: #f4efe4; }
.cover svg { display: block; width: 100%; height: 100%; }
.cover.tiny { border-radius: 1px 2px 2px 1px; box-shadow: 0 0 0 1px rgba(18, 63, 43, .12); }

/* a search field on pages where the top bar only has the icon, and on each handbook's contents */
.find-field { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 1px solid var(--edge); border-radius: var(--r2); background: var(--surface); color: var(--ink-3); font-size: max(16px, var(--t-ui)); text-align: left; }
.find-field svg { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
@media (hover: hover) { .find-field:hover { border-color: var(--ink-3); color: var(--ink-2); } }
.home-side .find-field { display: none; margin-bottom: 28px; }
@media (max-width: 1000px) { .home-side .find-field { display: flex; } }
.bk-find { margin-top: 24px; max-width: 460px; }

/* ---------- Book page ---------- */
.book { padding-top: clamp(32px, 4vw, 52px); display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.bk-side { position: -webkit-sticky; position: sticky; top: calc(var(--top) + var(--sat) + 32px); display: grid; gap: 20px; }
.bk-side .cover { width: 100%; }
.bk-meta { display: grid; gap: 8px; }
.bk-meta p { margin: 0; }
.bk-st { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--t-ui); color: var(--ink); }
.bk-st svg { width: 15px; height: 15px; }
.bk-st.done { color: var(--ok); } .bk-st.ref { color: var(--sky-ink); }
.bk-marks { margin: 2px 0 4px; max-width: none; }
.bk-marks > span { flex: 1; gap: 3px; }
.bk-marks i, .bk-marks > span:first-child i { height: 10px; min-width: 0; width: auto; flex: 1; }
.bk-rd, .bk-ed { font-size: var(--t-sm); color: var(--ink-3); }
.bk-pdf { display: grid; gap: 8px; justify-items: start; padding-top: 4px; }
.bk-pdf .btn svg:last-of-type { width: 14px; height: 14px; color: var(--ink-3); }
.bk-pdf p { margin: 0; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); max-width: 24em; }
.bk-main { min-width: 0; }
.bk-main .emp-note { margin-top: 20px; }
.crumb { font-size: var(--t-sm); color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0; }
.crumb a { color: var(--ink-2); text-decoration: none; font-weight: 600; padding: 10px 0; margin: -10px 0; }
@media (hover: hover) { .crumb a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .18em; } }
.bk-title { margin-top: 12px; }
.bk-desc { font-family: var(--f-text); font-size: calc(20 * var(--rem)); line-height: 1.5; color: var(--ink-2); margin: 14px 0 0; max-width: 34em; text-wrap: pretty; }
.toc { margin-top: 40px; display: grid; gap: 36px; max-width: 760px; }
.toc h2 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ink-3); font-family: var(--f-ui); font-weight: 600; font-size: var(--t-ui); color: var(--ink); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-item { border-bottom: 1px solid var(--rule); }
.toc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 14px; align-items: baseline; padding: 14px 0; color: inherit; text-decoration: none; }
.toc-row .n { font-family: var(--f-text); font-weight: 600; font-size: calc(19 * var(--rem)); color: var(--ink-3); font-variant-numeric: lining-nums tabular-nums; text-align: right; }
.toc-row .tt { display: block; min-width: 0; }
.toc-row .t { display: block; font-family: var(--f-text); font-weight: 600; font-size: calc(19 * var(--rem)); line-height: 1.3; }
.toc-row .m { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 3px; }
.toc-row .rd { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 600; }
.toc-row .rd svg { width: 13px; height: 13px; }
.toc-row .r, .toc-row .sm { display: inline-flex; align-items: center; gap: 5px; font-size: var(--t-sm); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.toc-row .r svg, .toc-row .sm svg { width: 14px; height: 14px; }
.toc-row .sm { display: none; margin-top: 4px; }
.toc-row .done { color: var(--ok); } .toc-row .part { color: var(--ink); }
.toc-row .st-dot { width: 10px; height: 10px; }
@media (hover: hover) { .toc-row:hover .t { color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; } }
@media (max-width: 900px) {
  .book { grid-template-columns: 1fr; gap: 0; }
  .bk-main { display: contents; }
  .bk-main .crumb { order: 1; } .bk-main .bk-title { order: 2; } .bk-main .bk-desc { order: 3; } .bk-main .emp-note { order: 4; } .bk-main .bk-find { order: 5; }
  .bk-side { position: static; order: 6; grid-template-columns: 76px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .bk-main .toc { order: 7; margin-top: 32px; }
}
@media (max-width: 560px) {
  .toc-row { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding-block: 12px; }
  .toc-row .t { font-size: calc(18 * var(--rem)); }
  .toc-row .n { font-size: calc(17 * var(--rem)); }
  .toc-row .r { display: none; } .toc-row .sm { display: flex; }
}
.rec-row .tt { display: block; min-width: 0; }

/* ---------- Reader ---------- */
.reader { display: grid; grid-template-columns: 236px minmax(0, 664px) minmax(0, 1fr); gap: 0 52px; padding-top: 36px; align-items: start; }
/* the section opener runs the width of the page, like the printed section openers, with the arcs in its corner */
.opener { position: relative; overflow: hidden; background: var(--paper-2); border-bottom: 1px solid var(--rule); }
.opener .arcs { position: absolute; right: 0; top: 0; height: min(76%, 250px); width: auto; pointer-events: none; }
.opener-in { display: grid; grid-template-columns: 236px minmax(0, 664px) minmax(0, 1fr); gap: 0 52px; }
.art-head { grid-column: 2; position: relative; padding: 44px 0 32px; }
.reader .rail { grid-column: 1; }
.reader .article { grid-column: 2; }
.reader .outline { grid-column: 3; }
.rail { position: -webkit-sticky; position: sticky; top: calc(var(--top) + var(--sat) + 28px); max-height: calc(100vh - var(--top) - var(--sat) - 56px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 0 4px 24px 0; }
.rail a.r-title { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; min-height: 0; text-decoration: none; color: inherit; padding: 2px 8px 12px; background: none; }
.rail .r-title b { font-family: var(--f-text); font-weight: 600; font-size: calc(18 * var(--rem)); line-height: 1.2; }
.rail .r-title span { font-size: var(--t-xs); color: var(--ink-3); }
.rail ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.rail .gl { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); padding: 16px 8px 4px; }
.rail a { display: grid; grid-template-columns: 20px minmax(0, 1fr) 14px; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r1); font-size: var(--t-sm); line-height: 1.3; color: var(--ink-2); text-decoration: none; min-height: 36px; position: relative; }
.rail a .n { font-size: var(--t-xs); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; }
.rail a .n svg { width: 14px; height: 14px; color: var(--ink-3); margin-left: auto; }
.rail a .d { width: 14px; height: 14px; display: grid; place-items: center; }
.rail a .d svg { width: 14px; height: 14px; }
.rail a .d.on { color: var(--ok); }
.rail a .d.pt::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--sun); background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); }
.rail a .d.rd { color: var(--ink-3); }
.rail a[aria-current="page"] { background: var(--paper-2); color: var(--ink); font-weight: 600; }
.rail a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; background: var(--forest); border-radius: 1px; }
@media (hover: hover) { .rail a:hover { color: var(--ink); background: var(--paper-2); } }
.article { min-width: 0; }
.outline { position: -webkit-sticky; position: sticky; top: calc(var(--top) + var(--sat) + 28px); display: grid; gap: 24px; max-width: 220px; }
.outline h2 { margin: 0 0 8px; font-size: var(--t-xs); }
.outline ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.outline ol a { display: block; padding: 5px 0 5px 14px; margin-left: -1px; border-left: 2px solid transparent; font-size: var(--t-sm); line-height: 1.35; color: var(--ink-3); text-decoration: none; }
.outline ol a.on { color: var(--ink); border-left-color: var(--forest); }
@media (hover: hover) { .outline ol a:hover { color: var(--ink); } }
.outline .o-left { display: block; margin-top: 2px; color: var(--ink-3); font-weight: 400; font-size: var(--t-xs); }
.outline .o-no { display: inline-block; min-width: 2.4em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.qbox { border-top: 1px solid var(--rule); padding-top: 14px; display: grid; gap: 2px; }
.qbox .qt { font-size: var(--t-sm); font-weight: 600; }
.qbox .qm { font-size: var(--t-xs); color: var(--ink-3); }
.qbox a { justify-self: start; margin-top: 8px; }
@media (max-width: 1180px) {
  /* the text keeps its measure: the space the outline used stays empty on the right */
  .reader, .opener-in { grid-template-columns: 228px minmax(0, 664px) minmax(0, 1fr); gap: 0 44px; }
  .outline { display: none; }
}
@media (max-width: 1000px) {
  .reader, .opener-in { grid-template-columns: minmax(0, 1fr); }
  .reader { padding-top: 28px; }
  .reader .article, .art-head { grid-column: 1; max-width: 664px; margin-inline: auto; width: 100%; }
  .rail { display: none; }
}
.drawer-rail { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); background: var(--paper); z-index: 70; overflow-y: auto; overscroll-behavior: contain; padding: calc(12px + var(--sat)) 12px calc(24px + var(--sab)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: var(--float); border-right: 1px solid var(--rule); animation: slideL .22s cubic-bezier(.2, .7, .2, 1); }
.drawer-rail .rail { display: block; position: static; max-height: none; overflow: visible; padding: 0; }
.drawer-rail .dr-head { display: flex; justify-content: space-between; align-items: center; margin: 0 0 4px 8px; }
.drawer-rail .dr-here { margin: 4px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.drawer-rail .dr-here .label { margin: 8px 8px 4px; font-size: var(--t-xs); color: var(--ink-3); }
.drawer-rail .dr-here ol { list-style: none; margin: 0; padding: 0; display: grid; }
.drawer-rail .dr-here a { display: block; padding: 9px 8px; border-radius: var(--r1); color: var(--ink); text-decoration: none; font-size: var(--t-ui); line-height: 1.3; }
.drawer-rail .dr-here a .o-no { display: inline-block; min-width: 2.4em; color: var(--ink-3); }
@media (hover: hover) { .drawer-rail .dr-here a:hover { background: var(--paper-2); } }
@keyframes slideL { from { transform: translateX(-100%); } }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 65; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }

/* the opener */
.art-head .kicker { font-family: var(--f-ui); font-weight: 600; font-size: var(--t-sm); color: var(--ink-2); margin: 0 0 10px; }
.art-head .kicker b { color: var(--link); font-weight: 600; }
.art-head h1 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.08; letter-spacing: -.006em; color: var(--title); margin: 0; text-wrap: balance; max-width: 15em; }
.art-head .lead { font-family: var(--f-text); font-size: calc(var(--read) * 1.17); line-height: 1.45; color: var(--ink-2); margin: 16px 0 0; max-width: 32em; text-wrap: pretty; }
.art-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 20px; font-size: var(--t-sm); color: var(--ink-2); position: relative; }
.art-meta a, .art-meta button { color: var(--link); font-weight: 600; text-decoration: none; padding: 4px 0; margin: -4px 0; }
@media (hover: hover) { .art-meta a:hover, .art-meta button:hover { text-decoration: underline; text-underline-offset: .18em; } }
.art-meta .ok { color: var(--ok); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.art-meta .ok svg { width: 14px; height: 14px; }
.art-meta .ref { color: var(--sky-ink); font-weight: 600; }
.art-head .m-pdf { display: inline-flex; justify-self: start; width: auto; max-width: 100%; margin-top: 18px; background: var(--surface); }
.art-head .m-pdf svg:last-of-type { width: 14px; height: 14px; color: var(--ink-3); }
.art-src { margin-top: 14px; display: grid; gap: 3px; font-size: var(--t-xs); line-height: 1.45; color: var(--ink-3); max-width: 40em; }
.art-src b { font-weight: 600; color: var(--ink-2); margin-right: 4px; }
/* the arcs fill the corner beside the opener's text and never run under it: on narrower screens they shrink into the
   corner above the title (width = height × 1.217, from their drawing) */
@media (min-width: 1181px) and (max-width: 1280px) { .opener .arcs { height: clamp(64px, calc((100vw - 1000px) / 1.217), 250px); } }
@media (min-width: 1001px) and (max-width: 1180px) { .opener .arcs { height: clamp(64px, calc((100vw - 984px) / 1.217), 250px); } }
@media (max-width: 1000px) { .opener .arcs { height: clamp(52px, calc(((100vw - 664px) / 2 - 24px) / 1.217), 150px); } .art-head { padding-top: 40px; } }
@media (max-width: 600px) {
  .opener .arcs { height: 52px; }
  .art-head { padding: 30px 0 26px; }
  .art-head .kicker { margin-bottom: 8px; padding-right: 64px; }
  .art-head .lead { font-size: calc(var(--read) * 1.06); margin-top: 12px; }
  .art-meta { margin-top: 16px; }
}

/* end of a section, in reading order: one box to mark it read and take its quiz, then previous and next */
.art-end { margin-top: 56px; display: grid; gap: 16px; }
.end-box { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r3); padding: 0 24px; }
.end-box > * + * { border-top: 1px solid var(--rule); }
.quizcard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 24px; align-items: center; padding: 22px 0 24px; }
.quizcard .eyebrow { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--link); }
.quizcard h3 { font-family: var(--f-display); font-weight: 600; font-size: calc(23 * var(--rem)); line-height: 1.2; margin: 4px 0 0; text-wrap: balance; color: var(--ink); }
.quizcard p { margin: 6px 0 0; color: var(--ink-2); font-size: var(--t-sm); }
.quizcard.done .eyebrow { color: var(--ok); display: flex; align-items: center; gap: 6px; }
.quizcard.done .eyebrow svg { width: 15px; height: 15px; }
.quizcard.done h3 { font-family: var(--f-text); font-size: calc(19 * var(--rem)); }
.pager { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.pager a { display: grid; align-content: start; gap: 6px; min-width: 0; min-height: 88px; padding: 16px 20px 18px; border: 1px solid var(--rule); border-radius: var(--r3); background: var(--paper); color: inherit; text-decoration: none; transition: border-color .15s, background-color .15s; }
.pager a.nx { grid-column: 2; text-align: right; }
.pager .pd { display: flex; align-items: center; gap: 6px; font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; line-height: 1.3; color: var(--link); }
.pager a.nx .pd { justify-content: flex-end; }
.pager .pd svg { width: 16px; height: 16px; flex: none; }
.pager b { font-family: var(--f-text); font-weight: 600; font-size: calc(18 * var(--rem)); line-height: 1.3; color: var(--ink); text-wrap: balance; overflow-wrap: break-word; }
@media (hover: hover) { .pager a:hover { border-color: var(--ink-3); background: var(--surface); } .pager a:hover b { color: var(--link); } }
.pager a:active { background: var(--paper-2); }
@media (max-width: 560px) {
  .art-end { margin-top: 44px; gap: 12px; }
  .end-box { padding: 0 18px; }
  .quizcard { grid-template-columns: minmax(0, 1fr); padding: 20px 0 22px; }
  .quizcard .btn { width: 100%; }
  .pager { gap: 10px; }
  .pager a { min-height: 80px; padding: 14px 14px 16px; }
  .pager .pd { font-size: var(--t-xs); }
  .pager b { font-size: calc(16 * var(--rem)); }
  .pager.no-prev a.nx { grid-column: 1 / -1; }
}
.dockbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 10px var(--gut-r) calc(10px + var(--sab)) var(--gut); background: var(--paper); border-top: 1px solid var(--rule); display: flex; gap: 12px; align-items: center; transform: translateY(110%); transition: transform .26s cubic-bezier(.2, .7, .2, 1); }
.dockbar.show { transform: none; }
.dockbar .tx { min-width: 0; flex: 1; font-size: var(--t-sm); line-height: 1.3; }
.dockbar .tx b { display: block; font-size: var(--t-ui); font-weight: 600; }
.dockbar .tx span { color: var(--ink-3); }
@media (min-width: 1001px) { .dockbar { display: none; } }
.back-to-quiz { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + var(--sab)); z-index: 35; box-shadow: var(--float); }
.fn-pop { position: absolute; z-index: 60; width: min(380px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r2); padding: 12px 14px; font-size: var(--t-sm); line-height: 1.45; color: var(--ink-2); box-shadow: var(--float); animation: pop .12s ease-out; }
.fn-pop b { color: var(--ink); margin-right: 6px; font-weight: 600; }
.skeleton { display: grid; gap: 14px; padding-top: 6px; }
.skeleton i { display: block; height: 14px; border-radius: var(--r1); background: linear-gradient(90deg, var(--paper-2), var(--rule-2), var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* mark as read: the first row of the box at the end of every section */
.rm-btn { width: 100%; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; text-align: left; padding: 18px 0; color: var(--ink); font-family: var(--f-ui); border-radius: var(--r1); }
.rm-box { width: 22px; height: 22px; border-radius: var(--r1); border: 1.5px solid var(--edge); display: grid; place-items: center; color: transparent; margin-top: 1px; transition: background-color .15s, border-color .15s; }
.rm-box svg { width: 14px; height: 14px; }
.rm-t b { display: block; font-size: var(--t-ui); font-weight: 600; line-height: 1.35; }
.rm-t small { display: block; font-size: var(--t-sm); color: var(--ink-3); margin-top: 2px; line-height: 1.4; }
@media (hover: hover) { .rm-btn:hover .rm-box { border-color: var(--forest); } }
.readmark.on .rm-box { background: var(--forest); border-color: var(--forest); color: #fff; }
.readmark.nudge:not(.on) .rm-box { animation: nudge 1.4s ease-out 1; }
@keyframes nudge { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px rgba(29, 105, 66, .18); } }
.toc-row .n .rd { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--ok-fill); color: #fff; }
.toc-row .n .rd svg { width: 12px; height: 12px; color: #fff; }
.bk-rd { margin: 0; font-size: var(--t-sm); color: var(--ink-3); }
.bt-rd { font-size: var(--t-xs); color: var(--ink-3); }

/* ---------- Handbook text ---------- */
.hb { --fs: var(--read); font-family: var(--f-text); font-size: var(--fs); line-height: 1.6; color: var(--ink); font-weight: 400; }
.hb > * { margin: 0; }
.hb > * + * { margin-top: 1em; }
.hb > .pg:first-child + *, .hb > header + .pg + * { margin-top: 0; }
:where(.hb) :where(p, ul, ol, dl, figure, blockquote) { margin: 0; }
.hb :is(p, li, td, dd, dt) { text-wrap: pretty; overflow-wrap: break-word; }
/* a long web address breaks rather than running off a phone's screen */
.hb a { overflow-wrap: anywhere; }
.hb ul, .hb ol { padding-left: 1.25em; }
.hb li + li { margin-top: .4em; }
.hb li::marker { color: var(--ink-3); }
.hb strong, .hb b { font-weight: 600; }
.hb em { font-style: italic; }
.hb .sec-head { display: none; }
.hb h2 { font-family: var(--f-display); font-weight: 600; font-size: calc(var(--fs) * 1.5); line-height: 1.2; letter-spacing: -.004em; color: var(--title); text-wrap: balance; scroll-margin-top: calc(var(--top) + var(--sat) + 24px); }
.hb > h2 { margin-top: calc(var(--fs) * 2.6); }
.hb > h2 + *, .hb > h2 + .pg + * { margin-top: .6em; }
.hb > h2 + dl, .hb > h2 + .table-wrap, .hb > h2 + .pg + .table-wrap { margin-top: 1em; }
.hb h3 { font-family: var(--f-text); font-weight: 600; font-size: calc(var(--fs) * 1.11); line-height: 1.3; margin: 0 0 .3em; text-wrap: balance; color: var(--ink); }
.hb.hb > * + h3 { margin-top: 1.7em; }
.hb > h3 + * { margin-top: .3em; }
.hb h3 em { font-family: var(--f-ui); font-style: normal; font-weight: 400; font-size: calc(var(--fs) * .78); color: var(--ink-3); margin-left: 6px; }
.hb .eyebrow { font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .84); color: var(--ink); }
.hb > .eyebrow { margin-top: 1.8em; }
.hb > .eyebrow + * { margin-top: .5em; }
.hb .small { font-size: calc(var(--fs) * .88); line-height: 1.55; color: var(--ink-2); }
.hb .lead { font-size: calc(var(--fs) * 1.1); color: var(--ink-2); }
.hb a:not([class]) { color: var(--link); text-decoration-color: rgba(29, 105, 66, .45); }
@media (hover: hover) { .hb a:not([class]):hover { text-decoration-color: currentColor; } }
.hb a[target="_blank"]::after { content: "\2197"; display: inline-block; margin-left: 2px; font-size: .78em; text-decoration: none; }
/* footnote markers sit tight to the word; the larger tap area is invisible and changes nothing in the line */
.hb sup.fn { font-family: var(--f-ui); font-size: max(11px, .7em); line-height: 0; font-weight: 600; margin-left: .06em; vertical-align: .55em; }
.hb sup.fn a { position: relative; color: var(--link); text-decoration: none; border-radius: 2px; }
.hb sup.fn a::after { content: ""; position: absolute; left: -7px; right: -7px; top: -12px; bottom: -10px; }
.hb h2 sup.fn, .hb h3 sup.fn { font-size: max(11px, .5em); vertical-align: .9em; }
.hb sup.fn.fn-next::before { content: ","; margin-right: .08em; color: var(--link); }
@media (hover: hover) { .hb sup.fn a:hover { background: var(--hl); } }
.hb .pg { display: block; height: 0; scroll-margin-top: calc(var(--top) + var(--sat) + 40px); }
.hb .pg.flash + * { animation: flash 2.4s ease-out; border-radius: var(--r1); }
@keyframes flash { 0%, 35% { background-color: var(--hl); } }

/* notes: plain, with a rule; key points: the forest panel from print; safety and the law each have their own look */
.hb .callout { padding: 2px 0 2px 20px; border-left: 2px solid var(--rule); }
.hb .callout > * + * { margin-top: .5em; }
.hb .callout > h3 + * { margin-top: .2em; }
.hb .callout p, .hb .callout li, .hb .card p, .hb .card li { font-size: calc(var(--fs) * .95); line-height: 1.58; }
.hb .callout[data-tone="mint"], .hb .callout[data-tone="cream"], .hb .callout[data-tone="yellow"] { border-left-color: var(--edge); }
.hb .callout[data-tone="dark"], .hb .card[data-tone="dark"] { background: #123f2b; color: var(--on-forest); border: 0; border-radius: var(--r2); padding: 22px 24px 24px; }
.hb .callout[data-tone="dark"], .hb .card[data-tone="dark"] { --ink: #ffffff; --ink-2: #c9d8ce; --ink-3: #a9bdb1; --title: #ffffff; --link: #ffffff; --rule: rgba(244, 241, 234, .24); --rule-2: rgba(244, 241, 234, .14); --edge: rgba(244, 241, 234, .55); --hl: rgba(255, 183, 39, .28); }
.hb :is(.callout, .card)[data-tone="dark"] a:not([class]) { text-decoration-color: rgba(255, 255, 255, .5); }
.hb :is(.callout, .card)[data-tone="dark"] sup.fn a, .hb :is(.callout, .card)[data-tone="dark"] sup.fn.fn-next::before, .hb :is(.callout, .card)[data-tone="dark"] .eyebrow { color: var(--sun); }
.hb .callout[data-tone="danger"] { background: var(--brick-tint); border-left: 3px solid var(--brick); border-radius: 0 var(--r1) var(--r1) 0; padding: 16px 20px 18px; }
.hb .callout[data-tone="mist"] { background: var(--sky-tint); border-left: 3px solid var(--sky-ink); border-radius: 0 var(--r1) var(--r1) 0; padding: 16px 20px 18px; }
.hb .tag { display: block; font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .8); line-height: 1.3; color: var(--ink-2); }
.hb .callout > .tag + * { margin-top: .25em; }
.hb :is(.callout, .card)[data-tone="dark"] .tag { color: var(--sun); }
.hb [data-tone="danger"] > .tag { color: var(--brick); }
.hb [data-tone="mist"] > .tag { color: var(--sky-ink); }
/* card grids, laid out by how much the cards say (layoutGrids in app.js): tiles, pairs, or one card per row */
.hb .grid { display: grid; gap: 26px 32px; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); align-items: start; }
.hb .grid[data-fit="tiles"] { --c: 2; gap: 20px 28px; align-items: stretch; }
.hb .grid[data-fit="tiles"][data-n="3"] { --c: 3; }
.hb .grid[data-fit="pair"] { --c: 2; }
.hb .card { min-width: 0; border-top: 1px solid var(--rule); padding-top: 14px; }
.hb .card > * + *, .hb .r-b > * + *, .hb .r-h > * + * { margin-top: .4em; }
.hb .card > h3, .hb .r-b > h3 { margin: 0; }
.hb .grid > .card[data-tone="dark"] { padding: 18px 20px 20px; }
.hb .card.featured { border-top: 2px solid var(--forest); }
.hb .card .mark { display: block; font-family: var(--f-display); font-weight: 600; font-size: calc(var(--fs) * 1.6); line-height: 1; color: var(--link); margin-bottom: 8px; font-variant-numeric: lining-nums; }
.hb .card[data-tone="dark"] .mark { color: var(--sun); }
.hb .grid > .callout { margin: 0; }
.hb .callout .grid, .hb .callout .steps, .hb .callout ul.checks { margin-top: 14px; }
.hb .callout[data-tone="dark"] .card { border-top: 1px solid var(--on-forest-line); padding: 12px 0 0; background: none; border-radius: 0; }
/* one card per row: a ruled list, the heading in the first column */
.hb .grid[data-fit="rows"] { display: block; border-top: 1px solid var(--rule); }
.hb .grid[data-fit="rows"] > :not(.fill) { border-top: 0; padding: 16px 0 18px; border-bottom: 1px solid var(--rule-2); }
.hb .grid[data-fit="rows"] > :not(.fill):last-child { border-bottom-color: var(--rule); }
.hb .grid[data-fit="rows"] > .split { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 6px 28px; align-items: start; }
.hb .split > .r-b { margin-top: 0; }
/* a numbered card: the number sits before its heading, on the same line */
.hb .r-num { display: flex; align-items: baseline; gap: 12px; }
.hb .r-num > * + * { margin-top: 0; }
.hb .r-num .mark { margin: 0; flex: none; min-width: 1.15em; text-align: right; font-size: calc(var(--fs) * 1.45); font-variant-numeric: lining-nums tabular-nums; }
.hb .r-h h3 { margin: 0; }
.hb .r-h figure.shot[data-size="small"] { display: block; justify-self: start; }
/* a box with a rule down its side is a plain row here; two lists in a row are kept apart by space, not a second rule */
.hb .grid[data-fit="rows"] > .callout:not(.fill) { border-left: 0; padding-left: 0; }
.hb .grid[data-fit="rows"] + .grid[data-fit="rows"] { border-top-color: transparent; margin-top: 1.4em; }
/* a filled card stays a coloured panel, as a row of its own */
.hb .grid.fill-first[data-fit="rows"] { border-top: 0; }
.hb .grid.fill-first[data-fit="rows"] > .fill:first-child { margin-top: 0; }
.hb .grid[data-fit="rows"] > .fill { margin: 12px 0; }
.hb .grid[data-fit="rows"] > .card.fill { border: 0; border-radius: var(--r2); padding: 18px 22px 20px; }
.hb .grid[data-fit="rows"] > .fill:last-child { margin-bottom: 0; }
/* every card dark: one forest panel, the cards its rows */
.hb .grid.all-dark[data-fit="rows"] { background: #123f2b; border: 0; border-radius: var(--r2); padding: 2px 24px; }
.hb .grid.all-dark[data-fit="rows"] > .card { background: none; border-radius: 0; padding: 18px 0 20px; }
.hb .grid.all-dark[data-fit="rows"] > .card:last-child { border-bottom: 0; }
@media (max-width: 680px) { .hb .grid[data-fit="tiles"][data-n="3"] { --c: 1; } }
@media (max-width: 640px) {
  .hb .grid[data-fit="pair"] { --c: 1; }
  .hb .grid[data-fit="rows"] > .split { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .hb .grid[data-fit="rows"] > .split:has(> .r-h > figure) { grid-template-columns: 110px minmax(0, 1fr); gap: 16px; }
  .hb .grid[data-fit="rows"] > .split .r-h figure.shot[data-size="small"] img { max-width: 100%; }
  .hb .grid[data-fit="rows"] > :not(.fill) { padding: 14px 0 16px; }
  .hb .grid[data-fit="rows"] > .card.fill { padding: 16px 18px 18px; }
  .hb .grid.all-dark[data-fit="rows"] { padding: 2px 18px; }
}
@media (max-width: 540px) { .hb .grid[data-fit="tiles"] { --c: 1; } .hb .grid { gap: 22px; } .hb .callout[data-tone="dark"], .hb .card[data-tone="dark"] { padding: 18px 18px 20px; } }
/* larger text: two columns of cards would be too narrow to read */
:root:is([data-text="l"], [data-text="xl"]) .hb .grid[data-fit="pair"] { --c: 1; }
:root:is([data-text="l"], [data-text="xl"]) .hb .grid[data-fit="tiles"][data-n="3"] { --c: 2; }
/* line icons by card headings, where print had them */
.hb h3.has-ic { display: flex; gap: 10px; align-items: flex-start; }
.hb .ic { display: inline-grid; place-items: center; flex: none; color: var(--link); height: 1.3em; }
.hb .ic svg { width: 20px; height: 20px; stroke-width: 1.75; }
.hb :is(.callout, .card)[data-tone="dark"] .ic { color: var(--sun); }

/* tables: ruled, no outer box */
.hb .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--ink-3); }
.hb table.t { width: 100%; border-collapse: collapse; font-family: var(--f-ui); font-size: calc(var(--fs) * .9); line-height: 1.45; }
.hb table.t th { text-align: left; font-weight: 600; font-size: calc(var(--fs) * .8); color: var(--ink-2); padding: 10px 16px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; }
.hb table.t thead td { border-bottom: 1px solid var(--rule); }
.hb table.t td { padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.hb table.t th:last-child, .hb table.t td:last-child { padding-right: 0; }
.hb table.t tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.hb table.t:not(.swap) td:first-child { font-weight: 600; color: var(--ink); }
/* "instead of / try": what people say, set in the reading face */
.hb table.swap { font-family: var(--f-text); font-size: calc(var(--fs) * .95); }
.hb table.swap th { font-family: var(--f-ui); }
.hb table.swap td { color: var(--ink-3); width: 50%; }
.hb table.swap td.good { color: var(--ink); }
.hb table.swap td + td { position: relative; padding-left: 30px; }
.hb table.swap td + td::before { content: "\2192"; position: absolute; left: 4px; top: 11px; color: var(--link); font-family: var(--f-ui); }
.hb table.swap.rev td + td::before { content: "\2190"; }
/* the reframe: one question struck through, the other put in its place */
.hb .reframe { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 6px 18px; align-items: baseline; padding: 6px 0; }
.hb .reframe s { font-size: calc(var(--fs) * 1.2); color: var(--ink-3); text-decoration-color: var(--brick); text-decoration-thickness: 1.5px; }
.hb .reframe .arrow { color: var(--ink-3); font-family: var(--f-ui); }
.hb .reframe b { font-family: var(--f-display); font-size: calc(var(--fs) * 1.45); font-weight: 600; line-height: 1.2; color: var(--title); }
@media (max-width: 600px) { .hb .reframe { grid-template-columns: 1fr; gap: 2px; } .hb .reframe .arrow { display: none; } }
/* a table set as a list: each row a short block, its first cell the heading and the others labelled. Three columns of long
   answers are set this way at every width (stack-all); other tables of three columns only on a phone (stack). */
.hb .table-wrap.stack-all { overflow: visible; }
.hb .stack-all table.t, .hb .stack-all table.t tbody, .hb .stack-all table.t tr, .hb .stack-all table.t td { display: block; width: 100%; }
.hb .stack-all table.t thead { display: none; }
.hb .stack-all table.t tr { padding: 12px 0 10px; border-bottom: 1px solid var(--rule); }
.hb .stack-all table.t td { border: 0; padding: 0; }
.hb .stack-all table.t td + td { margin-top: 8px; }
.hb .stack-all table.t td:first-child { font-size: calc(var(--fs) * .95); }
.hb .stack-all table.t td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-weight: 600; font-size: calc(var(--fs) * .78); color: var(--ink-3); margin-bottom: 1px; }
.hb .stack-all table.t-ref tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
.hb .stack-all table.t-ref td { grid-column: 1 / -1; }
.hb .stack-all table.t-ref td + td { margin-top: 0; }
.hb .stack-all table.t-ref td:first-child { grid-column: 1; }
.hb .stack-all table.t-ref td:last-child { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: calc(var(--fs) * .84); }
.hb .stack-all table.t-ref td[data-l]:last-child::before { display: inline; content: attr(data-l) "\00a0"; font-size: inherit; font-weight: 400; color: var(--ink-3); }
/* on a computer each row of such a table reads like a row of cards: the first cell beside the others */
@media (min-width: 641px) {
  .hb .stack-all table.t tr { display: grid; grid-template-columns: minmax(0, 30%) minmax(0, 1fr); gap: 0 28px; padding: 14px 0 15px; }
  .hb .stack-all table.t td:first-child { grid-column: 1; grid-row: 1 / span 9; font-size: calc(var(--fs) * .95); }
  .hb .stack-all table.t td:not(:first-child) { grid-column: 2; }
  .hb .stack-all table.t td + td { margin-top: 0; }
  .hb .stack-all table.t td + td + td { margin-top: 10px; }
}
@media (max-width: 640px) {
  .hb .table-wrap.stack { overflow: visible; }
  .hb .stack table.t, .hb .stack table.t tbody, .hb .stack table.t tr, .hb .stack table.t td { display: block; width: 100%; }
  .hb .stack table.t thead { display: none; }
  .hb .stack table.t tr { padding: 12px 0 10px; border-bottom: 1px solid var(--rule); }
  .hb .stack table.t td { border: 0; padding: 0; }
  .hb .stack table.t td + td { margin-top: 8px; }
  .hb .stack table.t td:first-child { font-size: calc(var(--fs) * .95); }
  .hb .stack table.t td[data-l]:not(:first-child)::before { content: attr(data-l); display: block; font-weight: 600; font-size: calc(var(--fs) * .78); color: var(--ink-3); margin-bottom: 1px; }
  .hb .stack table.t-ref tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .hb .stack table.t-ref td { grid-column: 1 / -1; }
  .hb .stack table.t-ref td + td { margin-top: 0; }
  .hb .stack table.t-ref td:first-child { grid-column: 1; }
  .hb .stack table.t-ref td:last-child { grid-column: 2; grid-row: 1; white-space: nowrap; font-size: calc(var(--fs) * .84); }
  .hb .stack table.t-ref td[data-l]:last-child::before { display: inline; content: attr(data-l) "\00a0"; font-size: inherit; font-weight: 400; color: var(--ink-3); }
  .hb table.swap, .hb table.swap tbody, .hb table.swap tr, .hb table.swap td { display: block; width: 100%; }
  /* the column names stay, as one line over the list: "Instead of → Try" */
  .hb table.swap thead { display: block; }
  .hb table.swap thead tr { display: flex; flex-wrap: wrap; gap: 0 6px; padding: 0 0 6px; border-bottom: 1px solid var(--rule); }
  .hb table.swap thead th { display: block; padding: 0; border: 0; width: auto; }
  .hb table.swap thead th + th::before { content: "\2192\00a0"; color: var(--link); }
  .hb table.swap tr { padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
  .hb table.swap td { border: 0; padding: 0; width: auto; }
  .hb table.swap td + td { margin-top: 3px; padding-left: 24px; }
  .hb table.swap td + td::before { top: 0; left: 2px; }
  .hb table.swap tbody tr:last-child td { border-bottom: 0; }
  .hb table.swap tbody tr:last-child { border-bottom: 1px solid var(--rule); }
}

/* steps: numbers hang in the margin */
.hb ol.steps { list-style: none; padding: 0; counter-reset: s var(--start, 0); display: grid; gap: .8em; }
.hb ol.steps > li { counter-increment: s; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: .6em; margin: 0; }
.hb ol.steps > li::before { content: counter(s); grid-row: 1 / span 4; font-weight: 600; color: var(--link); font-variant-numeric: lining-nums tabular-nums; text-align: left; }
.hb :is(.callout, .card)[data-tone="dark"] ol.steps > li::before { color: var(--sun); }
.hb ol.steps > li > strong { display: block; }
.hb ol.steps > li > span { display: block; color: var(--ink-2); font-size: calc(var(--fs) * .94); line-height: 1.55; }
.hb ol.steps > li > span:first-child { color: var(--ink); font-size: inherit; line-height: inherit; }
.hb ul.checks, .hb ul.avoid, .hb ul.chips { list-style: none; padding: 0; }
.hb ul.checks > li { position: relative; padding-left: 1.4em; }
/* a short rule, not an empty box: on a screen a box looks like something to tick */
.hb ul.checks > li::before { content: ""; position: absolute; left: 0; top: .74em; width: .6em; height: 2px; border-radius: 1px; background: var(--edge); }
.hb :is(.callout, .card)[data-tone="dark"] ul.checks > li::before { background: var(--on-forest-2); }
.hb ul.checks > li > strong { display: block; }
.hb ul.checks > li > span { display: block; color: var(--ink-2); font-size: calc(var(--fs) * .92); }
.hb ul.checks > li > span:first-child { color: var(--ink); font-size: inherit; }
.hb ul.avoid > li { position: relative; padding-left: 1.4em; }
.hb ul.avoid > li::before { content: ""; position: absolute; left: .15em; top: .78em; width: .55em; height: 1.5px; background: var(--brick); }
.hb ul.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.hb ul.chips > li { margin: 0; border: 1px solid var(--rule); border-radius: var(--r1); padding: 3px 10px; font-family: var(--f-ui); font-size: calc(var(--fs) * .84); line-height: 1.35; }

/* the approach, every time: one numbered sequence */
.hb ol.approach { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: a; }
.hb ol.approach > li { counter-increment: a; margin: 0; display: grid; grid-template-columns: 1.5em minmax(0, 1fr); column-gap: .5em; align-content: start; border-left: 3px solid var(--step, #123f2b); padding: 9px 0 11px 14px; }
.hb ol.approach > li::before { content: counter(a); grid-row: 1 / span 2; padding-top: .1em; font-family: var(--f-ui); font-size: calc(var(--fs) * .84); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hb ol.approach > li:nth-child(1) { --step: #123f2b; } .hb ol.approach > li:nth-child(2) { --step: #1d5a3e; } .hb ol.approach > li:nth-child(3) { --step: #2a7550; }
.hb ol.approach > li:nth-child(4) { --step: #3d8c5f; } .hb ol.approach > li:nth-child(5) { --step: #5aa575; }
.hb ol.approach b { font-weight: 600; font-size: calc(var(--fs) * 1.02); line-height: 1.3; color: var(--ink); }
.hb ol.approach span { font-size: calc(var(--fs) * .92); line-height: 1.5; color: var(--ink-2); }
.hb .danger-line { color: var(--brick); font-family: var(--f-ui); font-size: calc(var(--fs) * .9); }
.hb .danger-line b, .hb .danger-line strong { font-weight: 600; }
.hb ol.stairs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; }
.hb ol.stairs > li { margin: 0; padding: 12px 0 0; border-top: 3px solid var(--step, #123f2b); display: grid; gap: 4px; align-content: start; }
.hb ol.stairs > li:nth-child(1) { --step: #5aa575; } .hb ol.stairs > li:nth-child(2) { --step: #2a7550; } .hb ol.stairs > li:nth-child(3) { --step: #123f2b; }
.hb ol.stairs b { font-weight: 600; font-size: calc(var(--fs) * 1.1); line-height: 1.2; }
.hb ol.stairs span { font-size: calc(var(--fs) * .88); line-height: 1.5; color: var(--ink-2); }
@media (max-width: 600px) { .hb ol.stairs { grid-template-columns: 1fr; } }
.hb .bands { display: grid; border-top: 1px solid var(--rule); }
.hb .band { padding: 14px 0 14px 18px; border-bottom: 1px solid var(--rule); border-left: 3px solid var(--band, var(--rule)); }
.hb .band h3 { margin-bottom: 2px; }
.hb .band p { font-size: calc(var(--fs) * .93); }
.hb .band[data-tone="high"] { --band: var(--brick); } .hb .band[data-tone="mid"] { --band: var(--sun); } .hb .band[data-tone="low"] { --band: var(--sky-ink); }

/* a bar chart with its scale and reference line */
.hb .chart { position: relative; margin-inline: 0; font-family: var(--f-ui); padding-top: 30px; }
.hb .bars { display: grid; gap: 10px; }
.hb .bar, .hb .axis, .hb .chart .overlay { display: grid; grid-template-columns: minmax(0, 14em) minmax(0, 1fr); gap: 16px; align-items: center; }
.hb .bar .label { font-size: calc(var(--fs) * .84); color: var(--ink-2); text-align: right; font-weight: 400; line-height: 1.3; }
.hb .bar .track { position: relative; height: 28px; }
.hb .bar .val { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) / var(--max, 20) * 100%); background: #2a6f4b; border-radius: 0 2px 2px 0; }
.hb .bar .num { position: absolute; top: 50%; left: calc(var(--v) / var(--max, 20) * 100% - 8px); transform: translate(-100%, -50%); font-weight: 600; font-size: calc(var(--fs) * .84); color: #fff; font-variant-numeric: tabular-nums; }
.hb .axis { margin-top: 6px; }
.hb .axis .ticks { position: relative; height: 20px; border-top: 1px solid var(--edge); }
.hb .axis .ticks span { position: absolute; top: 4px; transform: translateX(-50%); font-size: calc(var(--fs) * .72); color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* the end labels sit inside the axis, so the last one never runs past the column */
.hb .axis .ticks span:first-child { transform: none; }
.hb .axis .ticks span:last-child { transform: translateX(-100%); }
.hb .chart .overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 26px; pointer-events: none; align-items: stretch; }
.hb .chart .refcol { position: relative; }
.hb .chart .ref { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--brick); font-style: normal; }
.hb .chart .ref b { position: absolute; top: 0; right: 8px; white-space: nowrap; font-weight: 600; font-size: calc(var(--fs) * .8); color: var(--brick); line-height: 1.3; }
@media (max-width: 560px) { .hb .bar { grid-template-columns: minmax(0, 1fr); gap: 4px; } .hb .bar .label { text-align: left; } .hb .axis, .hb .chart .overlay { grid-template-columns: 0 minmax(0, 1fr); gap: 0; } .hb .bars { gap: 12px; } }
.hb .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px 28px; }
.hb .stat { border-top: 1px solid var(--rule); padding-top: 12px; }
.hb .stat strong { display: block; font-family: var(--f-display); font-weight: 600; font-size: calc(var(--fs) * 2); line-height: 1; color: var(--title); margin-bottom: 8px; font-variant-numeric: lining-nums; }
.hb .stat p { font-size: calc(var(--fs) * .9); color: var(--ink-2); }
@media (max-width: 560px) { .hb .stats { grid-template-columns: minmax(0, 1fr); gap: 16px; } .hb .stat { display: grid; grid-template-columns: minmax(0, 7.6em) minmax(0, 1fr); gap: 14px; align-items: baseline; } .hb .stat strong { font-size: calc(var(--fs) * 1.5); margin: 0; } }
.hb blockquote.pull { margin-block: .4em; padding: 0 0 0 22px; border-left: 2px solid var(--forest); }
.hb blockquote.pull p { font-style: italic; font-size: calc(var(--fs) * 1.25); line-height: 1.42; color: var(--ink); }
.hb blockquote.pull cite { display: block; font-style: normal; font-family: var(--f-ui); font-size: calc(var(--fs) * .8); color: var(--ink-3); margin-top: 10px; }
.hb .rows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.hb .row { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.hb .row > div > * + * { margin-top: .35em; }
.hb .row p { font-size: calc(var(--fs) * .93); }
.hb .pill { justify-self: start; display: inline-block; font-family: var(--f-ui); font-size: calc(var(--fs) * .84); font-weight: 600; color: var(--ink); line-height: 1.35; padding-top: .15em; }
.hb .pill::before { content: ""; display: inline-block; width: .55em; height: .55em; border-radius: 50%; margin-right: .45em; background: var(--dot, #123f2b); vertical-align: .05em; }
.hb .pill[data-tone="green"] { --dot: #2a7550; } .hb .pill[data-tone="gold"] { --dot: var(--sun); } .hb .pill[data-tone="olive"] { --dot: #5aa575; } .hb .pill[data-tone="blue"] { --dot: var(--sky-ink); } .hb .pill[data-tone="cream"] { --dot: var(--edge); }
@media (max-width: 560px) { .hb .row { grid-template-columns: 1fr; gap: 4px; } }
.hb .example { border-top: 1px solid var(--rule); padding-top: 16px; display: grid; gap: 12px; }
.hb .situation { font-style: italic; color: var(--ink-2); }
/* dialogue, set as a script */
.hb ol.dialogue { list-style: none; padding: 4px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hb ol.dialogue > li { display: grid; grid-template-columns: 4.2em minmax(0, 1fr); gap: 2px 16px; padding: 7px 0; margin: 0; align-items: baseline; }
.hb ol.dialogue .who { font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .78); letter-spacing: .02em; color: var(--ink-3); grid-row: 1 / span 2; }
.hb ol.dialogue .beat { font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .76); color: var(--ink-3); grid-column: 2; }
.hb ol.dialogue p { grid-column: 2; }
.hb ol.dialogue p em, .hb ol.dialogue em { color: var(--ink-2); }
.hb .compare { display: grid; gap: 14px; }
.hb .compare > div { padding: 2px 0 2px 18px; border-left: 3px solid var(--rule); }
.hb .compare > div > * + * { margin-top: .4em; }
.hb .compare .bad { border-left-color: var(--brick); }
.hb .compare .good { border-left-color: var(--ok-fill); }
.hb .compare .bad .tag { color: var(--brick); }
.hb .compare .good .tag { color: var(--ok); }
.hb .compare .bad .tag::before { content: "\2715\00a0"; font-family: var(--f-ui); }
.hb .compare .good .tag::before { content: "\2713\00a0"; font-family: var(--f-ui); }
.hb .compare p { font-size: calc(var(--fs) * .95); }
.hb .contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px 24px; }
@media (max-width: 560px) { .hb .contacts { grid-template-columns: minmax(0, 1fr); gap: 16px; } }
.hb .contact { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 2px; align-content: start; }
.hb .contact .label { font-family: var(--f-ui); font-size: calc(var(--fs) * .8); color: var(--ink-3); font-weight: 600; }
.hb .contact strong { font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * 1.3); line-height: 1.15; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.hb .contact p { font-size: calc(var(--fs) * .86); color: var(--ink-2); }
.hb .contact strong.long { font-size: calc(var(--fs) * 1.06); line-height: 1.2; }
.hb .contact strong.num { white-space: nowrap; overflow-wrap: normal; }
.hb .contact[data-tone="dark"] { border-top: 2px solid var(--forest); background: none; color: inherit; padding: 12px 0 0; border-radius: 0; }
.hb .contact[data-tone="dark"] strong { color: var(--title); }
.hb .contact[data-tone="dark"] .label, .hb .contact[data-tone="dark"] p { color: var(--ink-2); }
.hb .contact[data-tone="yellow"] { border-top: 2px solid var(--sun); }
/* worked examples */
.hb .scenario { border-top: 2px solid var(--ink); padding-top: 18px; display: grid; gap: 16px; }
.hb .scenario + .scenario { margin-top: 3em; }
.hb .scenario > header { display: flex; justify-content: space-between; gap: 6px 16px; align-items: baseline; flex-wrap: wrap; }
.hb .scenario > header h2 { font-size: calc(var(--fs) * 1.4); margin: 0; }
.hb .scenario .tags { list-style: none; padding: 0; display: flex; gap: 0; flex-wrap: wrap; font-family: var(--f-ui); font-size: calc(var(--fs) * .8); color: var(--ink-3); font-weight: 600; }
.hb .scenario .tags li { margin: 0; }
.hb .scenario .tags li + li::before { content: "\00b7"; margin: 0 7px; }
.hb .scenario .situation { background: var(--paper-2); border-radius: var(--r2); padding: 16px 20px; font-style: normal; color: var(--ink); font-size: calc(var(--fs) * 1.02); }
.hb .scenario-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hb .scenario-body > div > * + * { margin-top: .5em; }
.hb .scenario-body h3 { font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .84); color: var(--ink-2); margin-top: 1.4em; }
.hb .scenario-body h3:first-child { margin-top: 0; }
.hb .scenario-body p, .hb .scenario-body li { font-size: calc(var(--fs) * .94); }
/* on your next shift: a short checklist to take away */
.hb aside.next-shift { margin-top: 3em; border-top: 2px solid var(--forest); padding-top: 16px; }
.hb aside.next-shift h2 { font-family: var(--f-text); font-size: calc(var(--fs) * 1.17); margin: 0 0 .7em; }
.hb aside.next-shift ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.hb aside.next-shift li { margin: 0; font-size: calc(var(--fs) * .94); line-height: 1.5; position: relative; padding-left: 1.1em; }
.hb aside.next-shift li::before { content: ""; position: absolute; left: 0; top: .58em; width: .4em; height: .4em; border-radius: 50%; background: var(--link); }
/* the notes: one line that opens to the list */
.hb details.notes-wrap { margin-top: 2.6em; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.hb details.notes-wrap > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 13px 0 14px; font-family: var(--f-ui); font-size: var(--t-sm); border-radius: var(--r1); }
.hb details.notes-wrap > summary::-webkit-details-marker { display: none; }
.hb details.notes-wrap > summary::before { content: ""; align-self: center; width: 7px; height: 7px; margin: 0 4px 0 3px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(-45deg); transition: transform .15s; }
.hb details.notes-wrap[open] > summary::before { transform: translateY(-2px) rotate(45deg); }
.hb details.notes-wrap .t { font-weight: 600; color: var(--ink); }
.hb details.notes-wrap .m { color: var(--ink-3); }
@media (hover: hover) { .hb details.notes-wrap > summary:hover .t { color: var(--link); } }
.hb details.notes-wrap ol.notes { margin: 0; padding-bottom: 16px; }
.hb ol.notes { font-family: var(--f-ui); font-size: calc(var(--fs) * .8); line-height: 1.5; color: var(--ink-2); padding-left: 1.8em; }
.hb ol.notes li { padding: 2px 6px; margin-inline: -6px; border-radius: var(--r1); scroll-margin-top: calc(var(--top) + var(--sat) + 40px); }
.hb ol.notes li + li { margin-top: 3px; }
.hb ol.notes li::marker { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hb dl.glossary { display: grid; grid-template-columns: minmax(0, 12em) minmax(0, 1fr); border-top: 1px solid var(--rule); margin: 0; }
.hb dl.glossary dt, .hb dl.glossary dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--rule-2); }
.hb dl.glossary dt { font-weight: 600; padding-right: 16px; }
.hb dl.glossary dd { font-size: calc(var(--fs) * .95); color: var(--ink-2); }
.hb a.tel, .hb a.mail { white-space: nowrap; }
/* the big numbers on contact cards keep the ink colour of their neighbours (911); the underline says they can be tapped */
.hb .contact strong :is(a.tel, a.mail) { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1.5px; text-underline-offset: .16em; text-decoration-color: var(--link); }
.hb a.pref { display: inline-block; white-space: nowrap; font-family: var(--f-ui); font-size: calc(var(--fs) * .78); font-weight: 600; text-decoration: none; color: var(--link); margin-left: 6px; padding: 6px 2px; margin-block: -6px; font-variant-numeric: tabular-nums; }
@media (hover: hover) { .hb a.pref:hover { text-decoration: underline; } }
@media (max-width: 600px) { .hb dl.glossary { grid-template-columns: 1fr; } .hb dl.glossary dt { padding-bottom: 0; border-bottom: 0; } .hb dl.glossary dd { padding-top: 2px; } }
.hb ul.sources { list-style: none; padding: 0; font-family: var(--f-ui); font-size: calc(var(--fs) * .86); color: var(--ink-2); line-height: 1.5; }
.hb ul.sources li { padding-left: 1.3em; text-indent: -1.3em; }
.hb ul.sources li + li { margin-top: 8px; }
/* a visual routine (Section 2): picture cards with a box to tick, as on a bedroom door */
.hb figure.routine { margin-inline: 0; border: 1px solid var(--rule); border-radius: var(--r2); padding: 16px; }
.hb figure.routine figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; align-items: baseline; margin-bottom: 12px; font-family: var(--f-ui); font-size: calc(var(--fs) * .8); color: var(--ink-3); }
.hb figure.routine figcaption strong { font-family: var(--f-text); font-size: calc(var(--fs) * 1.05); color: var(--ink); }
.hb figure.routine ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; counter-reset: r; }
.hb figure.routine li { counter-increment: r; margin: 0; position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 26px 6px 12px; border-radius: var(--r1); background: var(--paper-2); font-family: var(--f-ui); font-weight: 600; font-size: calc(var(--fs) * .78); line-height: 1.25; text-align: center; }
.hb figure.routine li::before { content: counter(r); position: absolute; top: 6px; left: 8px; font-family: var(--f-text); font-size: calc(var(--fs) * .8); color: var(--link); }
.hb figure.routine li::after { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--ok-fill); border-radius: 3px; margin-top: 2px; }
.hb figure.routine .ic { height: auto; color: var(--ink); }
.hb figure.routine .ic svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .hb figure.routine ol { grid-template-columns: repeat(3, minmax(0, 1fr)); } .hb figure.routine { padding: 12px; } }

/* screenshots: the frame is the same warm grey as the pictures' own background, so picture and frame read as one */
.hb figure.shot { position: relative; margin-inline: 0; background: #f2ede3; border-radius: var(--r2); padding: 14px; }
/* --fit (set in layoutFigures) is the width at which the picture is 540px tall: a tall one never fills the screen. The
   width comes from the picture's own proportions, so nothing moves when it arrives. */
.hb figure.shot img { margin-inline: auto; border-radius: var(--r1); cursor: zoom-in; max-width: min(100%, var(--fit, 100%)); }
.hb figure.shot[data-size="small"] { display: inline-block; padding: 0; background: none; }
.hb figure.shot[data-size="small"] img { max-width: 160px; }
.hb figure.shot + ol.steps { margin-top: 18px; }
@media (max-width: 640px) {
  .hb figure.shot { padding: 10px; }
  .hb figure.shot img { max-width: 100%; }
}
.hb figure.shot figcaption { font-family: var(--f-ui); font-size: calc(var(--fs) * .8); color: var(--ink-2); margin: 10px 4px 0; text-align: center; }
/* a list in a caption repeats the labels drawn in the picture: kept for screen readers and search, not shown */
.hb figure.shot figcaption ol, .hb figure.shot figcaption ul { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* in the frame's bottom corner, where the pictures have their own margin; the tap area is larger than it looks */
.zoom-btn { position: absolute; bottom: 8px; right: 8px; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; justify-content: center; padding: 0 10px; border-radius: var(--r1); background: rgba(16, 26, 20, .74); color: #fff; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; transition: background-color .15s; -webkit-font-smoothing: antialiased; }
.zoom-btn svg { width: 15px; height: 15px; }
.zoom-btn::after { content: ""; position: absolute; inset: -6px; }
@media (hover: hover) { .hb figure.shot:hover .zoom-btn { background: rgba(16, 26, 20, .9); } }
/* on a phone the picture fills its frame, and on a small picture there is no margin: the button goes under the picture */
.hb figure.shot[data-size="small"] .zoom-btn { position: relative; bottom: auto; right: auto; display: flex; width: max-content; margin: 6px 0 0; background: none; color: var(--link); padding: 0 2px; }
@media (max-width: 640px) {
  .hb figure.shot .zoom-btn { position: relative; bottom: auto; right: auto; display: flex; width: max-content; margin: 8px 0 -2px auto; background: none; color: var(--link); padding: 0 4px; }
}
@media (hover: hover) and (max-width: 640px) { .hb figure.shot:hover .zoom-btn { background: none; text-decoration: underline; } }
@media (hover: hover) { .hb figure.shot[data-size="small"]:hover .zoom-btn { background: none; text-decoration: underline; } }

/* Employee Handbook clauses */
.hb h2.cl { font-size: calc(var(--fs) * 1.33); }
.hb > h2.cl { margin-top: 2.2em; }
.hb h3.cl { font-size: calc(var(--fs) * 1.06); }
.hb .cl .no, .hb p > .no:first-child { font-family: var(--f-ui); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: .5em; }
.hb h2.cl .no { font-size: .72em; vertical-align: .12em; }
.hb h3.cl .no { font-size: .8em; }
.hb a.sref { display: block; width: -webkit-max-content; width: max-content; margin-top: 3px; font-family: var(--f-ui); font-size: calc(var(--fs) * .76); font-weight: 600; color: var(--link); text-decoration: none; }
@media (hover: hover) { .hb a.sref:hover { text-decoration: underline; } }
.hb .signoff { font-size: calc(var(--fs) * 1.05); line-height: 1.45; }
.hb .signoff em { font-style: italic; }
.rd-employee .outline ol a { padding-left: 12px; }

/* passage highlight (search results, quiz answers) */
.hb .hl { background: var(--hl); box-shadow: 0 0 0 6px var(--hl); border-radius: 2px; animation: hlin 1.2s ease-out; }
.hb td.hl, .hb li.hl, .hb dd.hl, .hb dt.hl { box-shadow: none; }
.hb .hl:focus { outline: none; }
@keyframes hlin { 0% { box-shadow: 0 0 0 12px var(--hl); } }
.resume { position: fixed; left: 50%; top: calc(var(--top) + var(--sat) + 12px); transform: translateX(-50%); z-index: 38; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 6px 6px 6px 16px; border-radius: var(--r2); background: #123f2b; color: var(--on-forest); font-size: var(--t-sm); box-shadow: var(--float); animation: pop .2s ease-out; width: max-content; max-width: calc(100vw - 24px); transition: opacity .25s, transform .25s; }
/* on one line when it fits; with large text the button moves under the words instead of off the screen */
.resume > span { flex: 1 1 auto; }
.resume button { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: var(--r1); background: rgba(255, 255, 255, .1); color: var(--on-forest); font-weight: 600; font-size: var(--t-sm); }
.resume button svg { width: 15px; height: 15px; }
.resume.out { opacity: 0; transform: translate(-50%, -6px); }
@media (max-width: 600px) { .hb p, .hb li, .hb dd, .hb td { -webkit-hyphens: auto; hyphens: auto; } }


/* ---------- Employee Handbook note ---------- */
.emp-note { display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-sm); color: var(--ink-2); background: var(--sky-tint); border-radius: var(--r2); padding: 12px 14px; max-width: 640px; }
.emp-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--sky-ink); }
@media (max-width: 900px) { .bk-main .emp-note { order: 3; } }

/* ---------- Quiz: light pages under the site's own light bar, the completion screen included ---------- */
.quiz { position: fixed; inset: 0; z-index: 80; background: var(--paper); color: var(--ink); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; animation: qin .22s cubic-bezier(.2, .7, .2, 1); }
@keyframes qin { from { opacity: 0; transform: translateY(8px); } }
.q-top { position: -webkit-sticky; position: sticky; top: 0; z-index: 3; background: var(--paper); border-bottom: 1px solid var(--rule); padding: var(--sat) var(--gut-r) 0 var(--gut); }
.q-top-in { max-width: 720px; margin-inline: auto; }
.q-head { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; min-height: 60px; }
.q-x { justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 9px; margin-left: -9px; border-radius: var(--r2); font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; color: var(--ink); white-space: nowrap; }
.q-x svg { width: 15px; height: 15px; flex: none; color: var(--ink-2); }
@media (hover: hover) { .q-x:hover { background: var(--paper-2); } }
.q-x:active { background: var(--paper-2); }
.q-title { min-width: 0; max-width: 34em; line-height: 1.25; text-align: center; }
.q-title .k { font-size: var(--t-xs); font-weight: 600; color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-title .n { font-family: var(--f-text); font-size: var(--t-ui); font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-count { justify-self: end; font-size: var(--t-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* progress: one mark per question, filled green when it's answered right */
.segs { display: flex; gap: 3px; padding-bottom: 12px; }
.seg { flex: 1; height: 5px; border-radius: 2px; background: var(--rule); transition: background-color .3s; }
.seg.cur { background: var(--edge); }
.seg.ok, .seg.fixed { background: var(--ok-fill); }
.seg.miss { background: #c9705b; }
.qm-k { display: none; }
@media (max-width: 640px) {
  .q-head { grid-template-columns: minmax(0, 1fr) auto; min-height: 56px; }
  .q-title { display: none; }
  .qm-k { display: inline; color: var(--link); }
  .q-meta { gap: 6px; }
}
.q-main { padding: clamp(28px, 6vh, 64px) var(--gut-r) calc(48px + var(--sab)) var(--gut); }
.q-main.screen { min-height: calc(100vh - 80px - var(--sat)); min-height: calc(100dvh - 80px - var(--sat)); display: flex; align-items: flex-start; padding-top: clamp(40px, 12vh, 120px); }
.q-main.screen > .q-in { width: 100%; }
.q-in { max-width: 720px; margin-inline: auto; }
.q-meta { font-size: var(--t-sm); font-weight: 600; color: var(--ink-3); margin: 0 0 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.q-meta .again { font-size: var(--t-xs); font-weight: 600; color: var(--ink); background: var(--sun-tint); padding: 1px 7px; border-radius: var(--r1); }
.q-prompt { font-family: var(--f-display); font-weight: 600; font-size: calc(30 * var(--rem)); line-height: 1.25; margin: 0 0 28px; text-wrap: pretty; color: var(--ink); max-width: 30em; }
.opts { display: grid; gap: 10px; }
.opt { display: grid; grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 14px; align-items: center; text-align: left; width: 100%; min-height: 58px; padding: 13px 16px; border-radius: var(--r2); border: 1px solid var(--edge); background: var(--surface); color: var(--ink); font-size: calc(17 * var(--rem)); line-height: 1.4; transition: border-color .12s, background-color .15s, opacity .2s, box-shadow .12s; }
.opt .l { width: 26px; height: 26px; border-radius: var(--r1); border: 1px solid var(--rule); display: grid; place-items: center; font-weight: 600; font-size: var(--t-xs); color: var(--ink-2); transition: all .12s; background: var(--paper); }
.opt .ic { width: 20px; height: 20px; opacity: 0; }
.opt .tx { display: block; }
.opt .res { display: block; font-size: var(--t-xs); font-weight: 600; margin-top: 3px; }
@media (hover: hover) { .opt:not([disabled]):hover { border-color: var(--forest); box-shadow: inset 0 0 0 1px var(--forest); } .opt:not([disabled]):hover .l { border-color: var(--forest); color: var(--ink); } }
.opt[disabled] { cursor: default; }
/* the answers not chosen step back, but stay readable (grey text at 5:1, not faded to 3:1) */
.opts.answered .opt:not(.right):not(.wrong) { color: var(--ink-3); border-color: var(--rule-2); background: transparent; }
.opts.answered .opt:not(.right):not(.wrong) .l { color: var(--ink-3); border-color: var(--rule-2); background: transparent; }
.opt.right { background: var(--ok-tint); border-color: var(--ok-fill); box-shadow: inset 0 0 0 1px var(--ok-fill); }
.opt.right .l { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.opt.right .ic, .opt.right .res { opacity: 1; color: var(--ok); }
.opt.right .ic path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: tick .34s .05s ease-out forwards; }
.opt.wrong { background: var(--brick-tint); border-color: var(--brick); box-shadow: inset 0 0 0 1px var(--brick); }
.opt.wrong .l { background: var(--brick); border-color: var(--brick); color: #fff; }
.opt.wrong .ic, .opt.wrong .res { opacity: 1; color: var(--brick); }
.opt.wrong.picked { animation: shake .36s cubic-bezier(.36, .07, .19, .97); }
.opt.wait { border-color: var(--forest); }
@keyframes tick { to { stroke-dashoffset: 0; } }
@keyframes shake { 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
.kbd { font-size: var(--t-xs); color: var(--ink-3); margin-top: 16px; }
.kbd kbd { font-family: var(--f-ui); font-size: var(--t-xs); border: 1px solid var(--rule); border-radius: var(--r1); padding: 0 5px; color: var(--ink-2); background: var(--surface); }
@media (hover: none), (max-width: 700px) { .kbd { display: none; } }
/* the answer explained, directly under the answers */
.q-fb { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rule); display: grid; gap: 10px; animation: fbin .24s ease-out; scroll-margin-bottom: 24px; }
@keyframes fbin { from { opacity: 0; transform: translateY(4px); } }
.q-fb p { margin: 0; }
.q-fb .verdict { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: calc(17 * var(--rem)); }
.q-fb .verdict svg { width: 18px; height: 18px; flex: none; }
.q-fb.ok .verdict { color: var(--ok); }
.q-fb.bad .verdict { color: var(--brick); }
.q-fb .why { margin: 0; font-family: var(--f-text); font-size: calc(18 * var(--rem)); line-height: 1.55; color: var(--ink); max-width: 36em; }
.q-fb .acts { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-top: 8px; }
.q-fb .reread { display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-sm); font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; min-height: 44px; }
.q-fb .reread svg { width: 16px; height: 16px; }
.q-fb .btn-primary { min-width: 170px; }
@media (max-width: 560px) { .q-fb .acts { flex-direction: column-reverse; align-items: stretch; gap: 2px; } .q-fb .btn-primary { width: 100%; } .q-fb .reread { justify-content: center; } }
.q-screen { display: grid; gap: 18px; justify-items: start; }
.q-screen .eyebrow { color: var(--link); }
.q-screen h2 { font-family: var(--f-display); font-weight: 600; font-size: var(--t-h1); line-height: 1.08; margin: 0; text-wrap: balance; color: var(--title); }
.q-screen .lede { font-family: var(--f-text); font-size: calc(20 * var(--rem)); line-height: 1.5; color: var(--ink-2); margin: 0; max-width: 32em; text-wrap: pretty; }
.q-facts { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: var(--t-sm); color: var(--ink-2); }
.q-facts li { display: flex; gap: 10px; align-items: center; margin: 0; }
.q-facts svg { width: 17px; height: 17px; flex: none; color: var(--link); }
.q-acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
@media (max-width: 560px) { .q-acts { flex-direction: column; align-items: stretch; width: 100%; } .q-acts .btn { width: 100%; } .q-prompt { font-size: calc(24 * var(--rem)); margin-bottom: 22px; } .opt { font-size: var(--t-ui); padding: 12px 14px; gap: 12px; } }
/* Shift scenarios: each question is a situation to read, so it's set as text rather than as a headline */
.q-prompt.scene { font-family: var(--f-text); font-weight: 500; font-size: calc(22 * var(--rem)); line-height: 1.5; max-width: 34em; }
@media (max-width: 560px) { .q-prompt.scene { font-size: calc(19 * var(--rem)); } }
.miss-list { margin: 0; font-size: var(--t-ui); font-weight: 600; color: var(--ink); }
/* completion: the arcs drawn whole with a check, the score, what to look at again, and what comes next */
.quiz[data-phase="done"] .q-screen { justify-items: center; text-align: center; }
.quiz[data-phase="done"] .q-main.screen { padding-top: clamp(24px, 6vh, 64px); }
.done-mark { width: min(200px, 48vw); margin-bottom: 4px; }
.done-mark svg { display: block; width: 100%; height: auto; overflow: visible; }
.done-mark .d path { fill: none; stroke-linecap: butt; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: draw 1s cubic-bezier(.6, .05, .2, 1) forwards; }
.done-mark .d path:nth-child(2) { animation-delay: .12s; }
.done-mark .d path:nth-child(3) { animation-delay: .24s; }
.done-mark .seal { opacity: 0; animation: seal .4s .95s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes seal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.done-stats { display: flex; gap: 0; flex-wrap: wrap; justify-content: center; font-size: var(--t-sm); color: var(--ink-2); margin: 6px 0 4px; }
.done-stats > div { padding: 2px 24px; border-left: 1px solid var(--rule); text-wrap: balance; }
.done-stats > div:first-child { border-left: 0; }
.done-stats b { display: block; font-family: var(--f-display); font-weight: 600; font-size: calc(26 * var(--rem)); color: var(--title); font-variant-numeric: lining-nums tabular-nums; line-height: 1.2; }
.ns, .review { width: 100%; text-align: left; display: grid; gap: 10px; margin-top: 16px; }
.ns h3, .review h3 { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.ns ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ns li { padding: 11px 0 11px 20px; border-bottom: 1px solid var(--rule-2); font-family: var(--f-text); font-size: var(--t-ui); line-height: 1.5; position: relative; }
.ns li::before { content: ""; position: absolute; left: 2px; top: calc(11px + .6em); width: 6px; height: 6px; border-radius: 50%; background: var(--link); }
.review ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.review li { padding: 14px 0; border-bottom: 1px solid var(--rule-2); display: grid; gap: 6px; }
.rv-q { margin: 0; font-family: var(--f-text); font-weight: 600; font-size: calc(17 * var(--rem)); line-height: 1.4; color: var(--ink); }
.rv-n { display: inline-block; min-width: 1.8em; font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rv-a { margin: 0; display: flex; gap: 8px; align-items: flex-start; color: var(--ok); font-weight: 600; font-size: var(--t-ui); }
.rv-a svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.rv-w { margin: 0; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.5; }
.rv-read { display: inline; padding: 10px 0; margin: -10px 0; font-size: var(--t-sm); font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; white-space: nowrap; }
.perfect { display: flex; gap: 10px; align-items: center; margin: 0; color: var(--ok); font-weight: 600; }
.perfect svg { width: 18px; height: 18px; flex: none; }
.quiz[data-phase="done"] .q-acts { justify-content: center; margin-top: 18px; }
@media (max-width: 560px) { .done-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; font-size: var(--t-xs); } .done-stats > div { padding: 2px 8px; } .done-stats b { font-size: calc(21 * var(--rem)); } }
.q-loading { color: var(--ink-3); padding-top: 40px; }

/* ---------- Admin ---------- */
.adm { padding-top: clamp(28px, 4vw, 48px); }
.adm-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-end; flex-wrap: wrap; }
.adm-head h1 { margin-top: 6px; }
.adm-head p { margin: 10px 0 0; color: var(--ink-2); font-size: var(--t-ui); }
.adm-head .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.summary { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 18px; display: grid; gap: 14px; }
.sbar { display: flex; height: 8px; border-radius: 2px; overflow: hidden; background: var(--rule); gap: 2px; }
.sbar i { display: block; height: 100%; min-width: 4px; transition: flex-grow .5s; }
.sbar .c1 { background: var(--ok-fill); } .sbar .c2 { background: var(--sun); } .sbar .c3 { background: var(--rule); }
.filters { display: flex; gap: 6px; flex-wrap: wrap; }
.filter { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 12px; border-radius: var(--r2); border: 1px solid var(--rule); background: transparent; font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); }
.filter i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
/* the same marks as the summary bar and the table's key: green finished, half-sun started, an empty ring not started */
.filter i.k-done { background: var(--ok-fill); }
.filter i.k-part { background: var(--sun); }
.filter i.k-none { box-shadow: inset 0 0 0 1.5px var(--edge); }
.filter i.k-over { background: var(--brick); }
.filter b { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filter[aria-pressed="true"] b { color: var(--paper); }
@media (hover: hover) { .filter:hover { border-color: var(--edge); } }
.toolbar { display: flex; gap: 10px; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.search { position: relative; flex: 1 1 260px; max-width: 380px; }
.search input { width: 100%; height: 42px; border-radius: var(--r2); border: 1px solid var(--edge); background: var(--surface); padding: 0 14px 0 40px; font-size: max(16px, var(--t-ui)); -webkit-appearance: none; appearance: none; }
.search input:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(29, 105, 66, .2); }
.search svg { position: absolute; left: 13px; top: 12px; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.sort { position: relative; margin-left: auto; }
.sort select { height: 42px; border-radius: var(--r2); border: 1px solid var(--edge); background: var(--surface); padding: 0 36px 0 14px; font-size: max(16px, var(--t-ui)); font-weight: 600; -webkit-appearance: none; appearance: none; color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23636d66' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.sort select:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(29, 105, 66, .2); }
.people { margin-top: 14px; border-top: 1px solid var(--ink-3); }
.p-head, .p-row { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(330px, 2fr) 92px 92px 96px; gap: 14px; align-items: center; padding: 0 4px; }
.p-head { min-height: 44px; border-bottom: 1px solid var(--rule); font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.p-head .dots { gap: 0; }
.p-row { min-height: 62px; border-bottom: 1px solid var(--rule-2); width: 100%; text-align: left; color: inherit; cursor: pointer; }
@media (hover: hover) { .p-row:hover { background: var(--paper-2); } }
.p-row .nm { min-width: 0; }
.p-row .nm b { display: block; font-weight: 600; font-size: var(--t-ui); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-row .nm > span { display: block; font-size: var(--t-xs); color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagx { display: inline-block; font-size: var(--t-xs); font-weight: 600; padding: 0 6px; border-radius: var(--r1); margin-left: 6px; vertical-align: 1px; background: var(--paper-2); color: var(--ink-2); line-height: 1.6; }
.tagx.you { background: var(--sun-tint); color: var(--ink); }
.tagx.adm { background: var(--ok-tint); color: var(--ok); }
.tagx.off { background: var(--brick-tint); color: var(--brick); }
.tagx.late { background: var(--brick-tint); color: var(--brick); }
.dots { display: flex; align-items: center; gap: 3px; }
.dots .g { display: flex; gap: 3px; }
.dots .g + .g { margin-left: 7px; padding-left: 8px; border-left: 1px solid var(--rule); }
.dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--edge); flex: none; display: grid; place-items: center; }
.dot.on { background: var(--ok-fill); border-color: var(--ok-fill); }
.dot.on svg { width: 10px; height: 10px; color: #fff; }
.dot.pt { border: 2px solid var(--sun); background: linear-gradient(90deg, var(--sun) 50%, transparent 50%); }
.p-head .dot { border: 0; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-row .n { font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.p-row .n.done { color: var(--ok); }
.p-row .dt { font-size: var(--t-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.p-row .dt.late { color: var(--brick); font-weight: 600; }
.p-empty { padding: 40px 20px; text-align: center; color: var(--ink-3); }
.adm-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 14px; font-size: var(--t-sm); color: var(--ink-3); }
.adm-foot .legend-x { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.adm-foot .legend-x span { display: inline-flex; gap: 6px; align-items: center; }
/* a narrow computer screen: slightly smaller marks, so the names keep their room */
@media (min-width: 961px) and (max-width: 1100px) { .dot { width: 15px; height: 15px; } .dots .g + .g { margin-left: 5px; padding-left: 6px; } }
@media (max-width: 960px) {
  .p-head { display: none; }
  .p-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm n" "dots dots"; gap: 10px 12px; padding: 14px 2px; }
  .p-row .nm { grid-area: nm; } .p-row .n { grid-area: n; align-self: start; }
  .p-row .dots { grid-area: dots; }
  .p-row .dt { display: none; }
  .p-row .nm b { white-space: normal; }
  .dot { width: 15px; height: 15px; }
  .dots .g + .g { margin-left: 4px; padding-left: 5px; }
}
@media (max-width: 380px) { .dot { width: 13px; height: 13px; } .dots, .dots .g { gap: 2px; } }
@media (max-width: 560px) {
  .adm-head .acts { width: 100%; } .adm-head .acts .btn { flex: 1; }
  .search { flex: 1 1 100%; max-width: none; }
  .sort { margin-left: 0; flex: 1 1 100%; } .sort select { width: 100%; }
}
.overdue { margin-top: 28px; border-top: 2px solid var(--brick); padding-top: 16px; display: grid; gap: 12px; }
.od-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.od-ic { display: none; }
.od-head h2 { margin: 0; font-family: var(--f-text); font-weight: 600; font-size: var(--t-h3); line-height: 1.25; }
.od-head p { margin: 3px 0 0; font-size: var(--t-sm); color: var(--ink-2); max-width: 64ch; }
.od-done { font-size: var(--t-sm); color: var(--ink-3); }
.od-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.od-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 14px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.od-name { text-align: left; min-width: 0; padding: 6px 0; border-radius: var(--r1); }
.od-name b { display: block; font-size: var(--t-ui); font-weight: 600; }
.od-name span { display: block; font-size: var(--t-xs); color: var(--ink-3); }
@media (hover: hover) { .od-name:hover b { text-decoration: underline; text-underline-offset: .18em; } }
.od-r { font-size: var(--t-xs); color: var(--ink-3); white-space: nowrap; }
.pn-flag { display: flex; gap: 10px; align-items: flex-start; margin: 18px 0 0; padding: 12px 14px; border-radius: var(--r2); background: var(--brick-tint); font-size: var(--t-sm); }
.pn-flag svg { width: 17px; height: 17px; flex: none; margin-top: 2px; color: var(--brick); }
@media (max-width: 640px) {
  .od-head { grid-template-columns: 1fr; align-items: start; }
  .od-head > .btn { width: 100%; }
  .od-list li { grid-template-columns: minmax(0, 1fr) auto; }
  .od-r { grid-column: 1; grid-row: 2; margin-top: -6px; padding-bottom: 6px; }
  .od-r:empty { display: none; }
  .od-one { grid-column: 2; grid-row: 1 / span 2; }
}
.panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 100vw); background: var(--paper); z-index: 70; overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--float); border-left: 1px solid var(--rule); animation: slideR .22s cubic-bezier(.2, .7, .2, 1); padding: calc(16px + var(--sat)) var(--gut-r) calc(28px + var(--sab)) 24px; }
@keyframes slideR { from { transform: translateX(100%); } }
.panel-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.panel-head h2 { margin: 6px 0 4px; overflow-wrap: anywhere; }
.edit-person { display: grid; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule); }
.edit-person .acts { display: flex; gap: 8px; }
.panel-head p { margin: 0; color: var(--ink-3); font-size: var(--t-sm); overflow-wrap: anywhere; }
.panel h3 { font-size: var(--t-sm); font-weight: 600; color: var(--ink-2); margin: 24px 0 8px; }
.qlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.qlist li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font-size: var(--t-sm); }
.qlist .k { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: center; }
.qlist .v { font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.qlist .v.done { color: var(--ok); font-weight: 600; }
.qlist .v.part { color: var(--ink); font-weight: 600; }
.panel .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.panel textarea { width: 100%; min-height: 180px; border-radius: var(--r2); border: 1px solid var(--edge); background: var(--surface); padding: 12px 14px; font-size: max(16px, var(--t-ui)); line-height: 1.5; resize: vertical; }
.panel textarea:focus { border-color: var(--forest); box-shadow: 0 0 0 3px rgba(29, 105, 66, .2); }
.confirm { margin-top: 12px; padding: 14px; border-radius: var(--r2); background: var(--brick-tint); display: grid; gap: 10px; font-size: var(--t-sm); }
.confirm .acts { margin-top: 0; }
.panel .hint { margin: 14px 0 0; }

.toast { position: fixed; left: 50%; bottom: calc(22px + var(--sab)); transform: translate(-50%, 12px); background: #123f2b; color: var(--on-forest); padding: 11px 16px; border-radius: var(--r2); font-size: var(--t-sm); box-shadow: var(--float); opacity: 0; transition: opacity .2s, transform .2s; z-index: 95; max-width: calc(100vw - 32px); pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.boot { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; }
.boot .mark { width: 40px; height: 40px; animation: breathe 1.6s ease-in-out infinite; }
.boot img { width: 48px; height: 48px; border-radius: 50%; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .4; } }
.errbox { padding: 64px 0; display: grid; gap: 14px; max-width: 560px; }
.errbox p { margin: 0; }
.errbox .acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }

/* ---------- Search ---------- */
.srch { position: fixed; inset: 0; z-index: 75; }
.srch-scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .15s; }
.srch-panel { position: relative; margin: calc(var(--sat) + 7vh) auto 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - var(--sat) - 14vh); max-height: calc(100dvh - var(--sat) - 14vh); display: flex; flex-direction: column; background: var(--paper); border-radius: var(--r3); box-shadow: var(--float); overflow: hidden; animation: pop .14s ease-out; }
.srch-bar { display: flex; align-items: center; gap: 12px; padding: 0 10px 0 18px; min-height: 60px; border-bottom: 1px solid var(--rule); flex: none; }
.srch-bar > svg { width: 19px; height: 19px; color: var(--ink-3); flex: none; }
.srch-bar input { flex: 1; min-width: 0; height: 58px; border: 0; background: none; font-size: max(16px, var(--t-md)); color: var(--ink); -webkit-appearance: none; appearance: none; }
.srch-bar input:focus, .srch-bar input:focus-visible { outline: none; }
.srch-bar input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.srch-clear { flex: none; width: 36px; height: 36px; border-radius: var(--r2); display: grid; place-items: center; color: var(--ink-3); }
.srch-clear svg { width: 16px; height: 16px; }
@media (hover: hover) { .srch-clear:hover { background: var(--paper-2); color: var(--ink); } }
.srch-bar input::placeholder { color: var(--ink-3); }
.srch-x { flex: none; min-height: 36px; padding: 0 8px; border-radius: var(--r1); border: 1px solid var(--rule); font-size: var(--t-xs); color: var(--ink-3); }
.srch-x .sm { display: none; }
.srch-scope { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--rule); overflow-x: auto; flex: none; scrollbar-width: none; }
.srch-scope::-webkit-scrollbar { display: none; }
.srch-scope .filter { min-height: 34px; font-size: var(--t-sm); padding: 0 10px 0 12px; white-space: nowrap; flex: none; gap: 7px; }
.srch-scope .filter b { font-weight: 600; font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.srch-scope .filter[aria-pressed="true"] b { color: var(--paper); opacity: .8; }
.srch-out { overflow-y: auto; overscroll-behavior: contain; padding: 4px 8px calc(16px + var(--sab)); flex: 1; -webkit-overflow-scrolling: touch; }
.srch-out a:focus-visible, .srch-out button:focus-visible { outline-offset: -2px; }
.sr-note { margin: 10px 12px 4px; font-size: var(--t-sm); color: var(--ink-2); }
.sr-note b { color: var(--ink); font-weight: 600; }
.sr-scope { margin: 0 0 14px; }
.sr-quick { display: grid; gap: 2px; padding: 6px 0 8px; border-bottom: 1px solid var(--rule); }
.sr-go, .sr-def { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: 10px; padding: 10px 12px; border-radius: var(--r2); text-decoration: none; color: inherit; }
.sr-go .chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--ink-3); }
.sr-def { grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--rule); margin: 4px 0; }
.sr-def .sr-x { display: block; margin-top: 3px; font-family: var(--f-text); font-size: var(--t-ui); line-height: 1.45; color: var(--ink-2); }
.sr-go b, .sr-def b, .sr-sec b { font-family: var(--f-text); font-weight: 600; font-size: calc(18 * var(--rem)); line-height: 1.25; color: var(--ink); }
.sr-k { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.sr-def .sr-k { color: var(--link); }
.sr-g { padding: 6px 0 8px; }
.sr-g + .sr-g { border-top: 1px solid var(--rule-2); }
.sr-quick + .sr-g { border-top: 0; }
.sr-sec { display: grid; grid-template-columns: minmax(0, 1fr) 16px; column-gap: 10px; padding: 10px 12px 4px; text-decoration: none; color: inherit; border-radius: var(--r2); }
.sr-sec .chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; color: var(--ink-3); }
.sr-hit { display: block; padding: 7px 12px 8px; border-radius: var(--r2); text-decoration: none; color: var(--ink-2); font-size: var(--t-sm); line-height: 1.45; }
.sr-hit .sr-h { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); margin-bottom: 1px; }
.sr-hit .is-h { font-weight: 600; color: var(--ink); }
.srch mark { background: var(--hl); color: var(--ink); border-radius: 2px; padding: 0 1px; }
@media (hover: hover) { .sr-hit:hover, .sr-sec:hover, .sr-go:hover, .sr-def:hover { background: var(--paper-2); } .sr-def:hover { background: var(--surface); border-color: var(--edge); } }
.sr-hit:focus-visible, .sr-sec:focus-visible, .sr-go:focus-visible { background: var(--paper-2); }
.sr-more { display: block; margin: 0 12px; padding: 8px 0; font-size: var(--t-sm); font-weight: 600; color: var(--link); }
.srch-empty { padding: 28px 20px; color: var(--ink-2); text-align: center; text-wrap: balance; display: grid; gap: 8px; justify-items: center; }
.srch-empty p { margin: 0; }
.srch-tips { padding: 14px 12px 8px; }
.srch-tips > .label { font-size: var(--t-xs); color: var(--ink-3); margin: 6px 0 0; }
.tips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tips .chip { min-height: 36px; padding: 0 12px; font-size: var(--t-sm); font-weight: 400; border: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; border-radius: var(--r2); }
@media (hover: hover) { .tips .chip:hover { border-color: var(--edge); background: var(--paper-2); } }
.sr-help { margin: 18px 0 2px; font-size: var(--t-sm); color: var(--ink-3); line-height: 1.5; }
.sr-help b { color: var(--ink-2); font-weight: 600; }
.sr-recent { margin-bottom: 18px; }
.sr-rh { display: flex; justify-content: space-between; align-items: baseline; }
.sr-rh .label { font-size: var(--t-xs); color: var(--ink-3); margin: 0; }
.sr-rh .linkish { font-size: var(--t-xs); }
.sr-recent ul { list-style: none; margin: 6px 0 0; padding: 0; }
.sr-recent li { display: flex; align-items: center; border-bottom: 1px solid var(--rule-2); }
.sr-r { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; text-align: left; font-size: var(--t-ui); color: var(--ink); }
.sr-r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-r .r-ic { width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.sr-rx { width: 40px; height: 40px; display: grid; place-items: center; color: var(--ink-3); border-radius: var(--r2); flex: none; }
.sr-rx svg { width: 14px; height: 14px; }
@media (hover: hover) { .sr-r:hover span { text-decoration: underline; text-underline-offset: .18em; } .sr-rx:hover { background: var(--paper-2); color: var(--ink); } }
@media (max-width: 640px) {
  .srch-panel { margin: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; padding-top: var(--sat); animation: fade .15s; }
  .srch-bar { padding-left: var(--gut); padding-right: 6px; }
  .srch-x { border: 0; font-size: var(--t-ui); font-weight: 600; color: var(--link); min-height: 44px; }
  .srch-x .lg { display: none; } .srch-x .sm { display: inline; }
  /* one row that scrolls sideways when it must, rather than two rows above the results */
  .srch-scope { padding-inline: var(--gut); gap: 5px; }
  .srch-scope .filter { padding: 0 8px; gap: 6px; }
  .srch-out { padding-left: max(4px, calc(var(--gut) - 12px)); padding-right: max(4px, calc(var(--gut-r) - 12px)); }
}
/* matches in a section opened from search */
mark.hit { background: var(--hl); color: inherit; border-radius: 2px; padding: 0 1px; }
mark.hit.cur { background: var(--sun); box-shadow: 0 0 0 2px var(--sun); }
.findbar { position: fixed; left: 50%; bottom: calc(16px + var(--sab)); transform: translateX(-50%); z-index: 36; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 14px; border-radius: var(--r2); background: #123f2b; color: var(--on-forest); box-shadow: var(--float); font-size: var(--t-sm); max-width: calc(100vw - 24px); animation: pop .16s ease-out; }
.findbar .fb-t { display: flex; gap: 10px; align-items: baseline; min-width: 0; margin-right: 6px; }
.findbar .fb-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 12em; }
.findbar .fb-t span { color: var(--on-forest-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fb-b { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r1); color: var(--on-forest); }
.fb-b svg { width: 18px; height: 18px; }
@media (hover: hover) { .fb-b:hover { background: rgba(255, 255, 255, .1); } }
.findbar :focus-visible { outline-color: var(--sun); }
body.finding .dockbar { display: none; }
body.finding .back-to-quiz { bottom: calc(72px + var(--sab)); }
@media print { .findbar { display: none !important; } mark.hit { background: none !important; } }

/* ---------- Reading settings ---------- */
.ts { display: inline-flex; padding: 2px; border-radius: var(--r2); border: 1px solid var(--rule); gap: 2px; }
.ts button { min-width: 44px; height: 36px; padding: 0 10px; border-radius: var(--r1); display: grid; place-items: center; color: var(--ink-2); font-weight: 600; font-size: var(--t-sm); }
.ts button span { font-family: var(--f-text); font-weight: 600; line-height: 1; }
.ts button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
@media (hover: hover) { .ts button:not([aria-checked="true"]):hover { background: var(--paper-2); color: var(--ink); } }
.menu .m-prefs { display: grid; gap: 10px; padding: 12px 10px 6px; margin-top: 4px; border-top: 1px solid var(--rule-2); }
.menu .m-prefs > div { display: grid; gap: 6px; }
.menu .m-prefs > div > span { font-size: var(--t-xs); font-weight: 600; color: var(--ink-3); }
.menu .m-prefs .ts { display: flex; } .menu .m-prefs .ts button { flex: 1; min-width: 0; }
.menu .m-prefs .ts button, .menu .m-prefs .ts button:hover { min-height: 0; padding: 0 6px; width: auto; text-align: center; justify-content: center; }
.menu .m-prefs .ts button[aria-checked="true"], .menu .m-prefs .ts button[aria-checked="true"]:hover { background: var(--ink); color: var(--paper); }
.ts-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 45; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r3); padding: 12px; box-shadow: var(--float); display: grid; gap: 8px; animation: pop .12s ease-out; }
.ts-pop .label { margin: 0 2px; font-size: var(--t-xs); color: var(--ink-3); }
.hb > h2 { position: relative; }
.h-link { position: absolute; left: -34px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: var(--r1); display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .15s; }
.h-link svg { width: 15px; height: 15px; }
.hb > h2:hover .h-link { opacity: 1; }
.h-link:focus-visible { opacity: 1; }
@media (hover: hover) { .h-link:hover { color: var(--link); background: var(--paper-2); } }
@media (hover: none), (max-width: 1100px) { .h-link { display: none; } }

/* ---------- Picture viewer ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(10, 16, 13); display: flex; flex-direction: column; animation: fade .16s; -webkit-font-smoothing: antialiased; }
.lb-bar { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--sat)) var(--gut-r) 10px var(--gut); color: #f4f1ea; flex: none; }
.lb-bar .lb-t { flex: 1; min-width: 0; font-size: var(--t-sm); color: #b9c4bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-bar button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border-radius: var(--r2); color: #f4f1ea; border: 1px solid rgba(244, 241, 234, .25); font-size: var(--t-sm); font-weight: 600; }
.lb-bar button svg { width: 17px; height: 17px; }
.lb-bar .lb-x { width: 40px; padding: 0; justify-content: center; }
@media (hover: hover) { .lb-bar button:hover { border-color: rgba(244, 241, 234, .55); } }
.lb-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; padding: 8px var(--gut-r) calc(20px + var(--sab)) var(--gut); -webkit-overflow-scrolling: touch; }
.lb-stage img { max-width: 100%; max-height: calc(100vh - 110px - var(--sat) - var(--sab)); max-height: calc(100dvh - 110px - var(--sat) - var(--sab)); width: auto; height: auto; border-radius: var(--r1); cursor: zoom-in; -webkit-user-select: none; user-select: none; }
.lightbox.zoomed .lb-stage { place-items: start; }
.lightbox.zoomed .lb-stage img { max-width: none; max-height: none; width: var(--zw); cursor: zoom-out; }
.lb-cap { text-align: center; color: #b9c4bd; font-size: var(--t-sm); padding: 0 var(--gut) calc(14px + var(--sab)); margin-top: -8px; }

/* ---------- Windows high contrast ---------- */
@media (forced-colors: active) {
  .btn, .opt, .input, .filter, .chip, .searchbtn, .q-x, .lb-bar button, .rm-box, .ts { border: 1px solid CanvasText; }
  .opt.right, .opt.wrong { border-width: 3px; }
  .cells.all i, .dot, .st-dot, .seg, .ring { forced-color-adjust: none; }
  .hb .callout[data-tone="dark"], .hb .card[data-tone="dark"] { border: 2px solid CanvasText; }
  .progress-line { background: Highlight; }
}

/* ---------- Printing a section ---------- */
@media print {
  @page { margin: 16mm 16mm 18mm; }
  :root { --read: 11pt; }
  body { background: #fff !important; color: #000; }
  .top, .rail, .outline, .art-end, .readmark, .zoom-btn, .dockbar, .toast, .back-to-quiz, .resume, .offbar, .h-link, .art-meta, #qcard, .skeleton, .opener .arcs { display: none !important; }
  .opener { background: none; border: 0; }
  .opener-in, .reader { display: block; padding: 0; max-width: none; }
  .art-head { padding: 0 0 12pt; }
  .wrap { padding: 0; max-width: none; }
  .hb, .hb p, .hb li { color: #000; }
  .art-head h1 { color: #123f2b; font-size: 24pt; }
  .hb .card, .hb .callout, .hb .table-wrap, .hb figure, .hb .example, .hb .scenario, .hb tr, .hb ol.steps > li { break-inside: avoid; }
  .hb h2, .hb h3 { break-after: avoid; }
  .hb a { color: #000 !important; text-decoration: none; }
  .hb figure.shot img { max-height: 120mm; width: auto; filter: none; }
  .hl { background: none !important; box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .done-mark .d path { stroke-dashoffset: 0 !important; }
  .done-mark .seal { opacity: 1 !important; }
}