/* learn-template manual shell, layout A (2026-11-12). The shell tokens are identical in every manual; a manual changes only its
   accent family (accent, accent2, brass, mauve and the three callout tints). See ACCENT SET below. */
:root{
  /* Shared shell. Identical in every manual; never change these per manual. */
  --bg:#f4f5f3; --bg2:#fcfcfb; --ink:#1e2225; --ink2:#3c4347; --muted:#5e666b;
  --line:#dde0dd; --card:#ffffff; --on-accent:#ffffff;
  --shadow:0 1px 2px rgba(30,34,37,.05),0 8px 24px rgba(30,34,37,.06);
  --radius:12px; --max:1180px;
  /* Accent family. The only group a manual changes: copy one block from ACCENT SET below. */
  --accent:#7a2440; --brass:#2f5f66; --mauve:#6b4a8a;
  --warn-bg:#f3eff7; --warn-line:#cdbfdc; --yw-bg:#ebf3f3; --yw-line:#b5d0d2; --tip-bg:#f1eff3;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#171a1b; --bg2:#1f2325; --ink:#e8eceb; --ink2:#c6cdcb; --muted:#8f9896;
  --line:#2f3537; --card:#1f2325; --on-accent:#171a1b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --accent:#e6a3b8; --brass:#8fc4c9; --mauve:#c4abe2;
  --warn-bg:#251f31; --warn-line:#4b3d63; --yw-bg:#192a2c; --yw-line:#2f4c4f; --tip-bg:#221f2a;
}}
:root[data-theme="dark"]{
  --bg:#171a1b; --bg2:#1f2325; --ink:#e8eceb; --ink2:#c6cdcb; --muted:#8f9896;
  --line:#2f3537; --card:#1f2325; --on-accent:#171a1b;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
  --accent:#e6a3b8; --brass:#8fc4c9; --mauve:#c4abe2;
  --warn-bg:#251f31; --warn-line:#4b3d63; --yw-bg:#192a2c; --yw-line:#2f4c4f; --tip-bg:#221f2a;
}

/* A route sent the reader here: a slim bar above the header with the way back. */
.routebar{display:flex;align-items:center;justify-content:center;gap:.4rem 1.1rem;flex-wrap:wrap;
  padding:.5rem 1rem;background:var(--bg2);border-bottom:1px solid var(--line);
  font-size:.82rem;line-height:1.4;color:var(--ink2)}
.routebar .rb-step{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:.72rem;color:var(--muted)}
.routebar .rb-back{display:inline-flex;align-items:center;gap:.35rem;min-height:44px;color:var(--accent);
  text-decoration:underline;text-underline-offset:.18em}
.routebar .rb-back:hover{color:var(--ink)}
.routebar svg{flex:none}
.routebar-end{margin:2.6rem 0 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--card)}
@media print{.routebar{display:none}}

/* ACCENT SET. A manual varies only the accent family; the shell above is identical everywhere.
   Six families, each checked at WCAG 2.1 AA on this shell: accent and brass carry body text on
   --bg and carry --on-accent text when used as a fill; mauve carries text on --warn-bg.
   To use one, paste its light line into :root and its dark line into both dark blocks.

   green   L  --accent:#2f5d50 --brass:#7b3f61 --mauve:#5d6a8a --warn-bg:#f6eef2 --warn-line:#d8b9c9 --yw-bg:#eaf2ed --yw-line:#b6cfc2 --tip-bg:#eef1ee
           D  --accent:#8fc2ae --brass:#d9a7c3 --mauve:#aab4d4 --warn-bg:#2a1f26 --warn-line:#5a3d4d --yw-bg:#1b2a24 --yw-line:#355246 --tip-bg:#1f2825
   blue    L  --accent:#28506f --brass:#7a5c12 --mauve:#8a2f2f --warn-bg:#f4e8e6 --warn-line:#d9b6b1 --yw-bg:#e3ebe5 --yw-line:#b7cbbd --tip-bg:#e4e7e9
           D  --accent:#9cc0dc --brass:#d6b45e --mauve:#e39a92 --warn-bg:#2d2120 --warn-line:#5c3a36 --yw-bg:#1e2a23 --yw-line:#3b5245 --tip-bg:#232a2f
   indigo  L  --accent:#353a72 --brass:#4b5f2f --mauve:#6a4f7d --warn-bg:#eef0f6 --warn-line:#c3c8de --yw-bg:#eef2e8 --yw-line:#c3cfb2 --tip-bg:#ecedea
           D  --accent:#b3b7ec --brass:#adc28a --mauve:#c6aed6 --warn-bg:#22253a --warn-line:#41466b --yw-bg:#22281c --yw-line:#45533a --tip-bg:#242833
   plum    L  --accent:#6a3d68 --brass:#7d5f27 --mauve:#6a5b86 --warn-bg:#f7f0e5 --warn-line:#d6c29b --yw-bg:#eeeaf0 --yw-line:#cfc1d5 --tip-bg:#eceaed
           D  --accent:#d6abd3 --brass:#dcbd80 --mauve:#b3a6d6 --warn-bg:#2b2520 --warn-line:#5c4a2e --yw-bg:#251e28 --yw-line:#46374c --tip-bg:#272128
   claret  L  --accent:#7a2440 --brass:#2f5f66 --mauve:#6b4a8a --warn-bg:#f3eff7 --warn-line:#cdbfdc --yw-bg:#ebf3f3 --yw-line:#b5d0d2 --tip-bg:#f1eff3
           D  --accent:#e6a3b8 --brass:#8fc4c9 --mauve:#c4abe2 --warn-bg:#251f31 --warn-line:#4b3d63 --yw-bg:#192a2c --yw-line:#2f4c4f --tip-bg:#221f2a
   teal    L  --accent:#0b6b73 --brass:#9a3b34 --mauve:#5b5f8a --warn-bg:#f3ecec --warn-line:#d9b9b6 --yw-bg:#e9f3f4 --yw-line:#b5d6d9 --tip-bg:#eef2f3
           D  --accent:#6fc4c9 --brass:#e59a92 --mauve:#a9aedc --warn-bg:#2b2020 --warn-line:#5a3a38 --yw-bg:#18292b --yw-line:#2f5558 --tip-bg:#1f2b2e
*/

/* Components kept from the earlier shell: cards, pills, countdown, filters, record sheets, the plan, forms. */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:1.2rem 0}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin:1.2rem 0}
.cards .card{margin:0}
.card h3{margin-top:.2rem;font-size:1.25rem}
.card .n{font-family:var(--serif);font-size:1.6rem;color:var(--brass);font-weight:700}
.card p{font-size:.95rem;color:var(--ink2);margin-bottom:.6rem}
.pill{display:inline-block;padding:.12em .6em;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;max-width:100%}
p>.pill,li>.pill{white-space:normal}   /* a long label in running text wraps inside its pill; pills in tables stay on one line */
.pill.ahead{background:#dfeae2;color:#2f4a3a}.pill.week{background:#e8e3f3;color:#4c4078}.pill.before{background:#dde8f2;color:#2d4a6b}.pill.dayof{background:#1f2a3c;color:#eef2f6}.pill.never{background:#eee;color:#555}
.pill.ask{background:#f3e3e3;color:#6b2d2d}
/* Claim-type pills (subject-neutral): label a sentence that could be read as a universal rule */
.pill.principle{background:var(--yw-bg);color:var(--accent);border:1px solid var(--yw-line)}
.pill.convention{background:var(--tip-bg);color:var(--ink2);border:1px solid var(--line)}
.pill.product{background:var(--warn-bg);color:var(--mauve);border:1px solid var(--warn-line)}
.pill.preference{background:transparent;color:var(--ink2);border:1px dashed var(--line)}
.pill.test{background:var(--accent);color:var(--on-accent);border:1px solid var(--accent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) nav.side{background:var(--bg2)}:root:not([data-theme="light"]) .pill.ahead{background:#2f4a3a;color:#dfeae2}:root:not([data-theme="light"]) .pill.week{background:#4c4078;color:#e8e3f3}:root:not([data-theme="light"]) .pill.before{background:#2d4a6b;color:#dde8f2}:root:not([data-theme="light"]) .pill.dayof{background:#8fb0d0;color:#161b24}:root:not([data-theme="light"]) .pill.never{background:#444;color:#ddd}:root:not([data-theme="light"]) .pill.ask{background:#4a2a2a;color:#f0d0d0}}
:root[data-theme="dark"] nav.side{background:var(--bg2)}:root[data-theme="dark"] .pill.ahead{background:#2f4a3a;color:#dfeae2}:root[data-theme="dark"] .pill.week{background:#4c4078;color:#e8e3f3}:root[data-theme="dark"] .pill.before{background:#2d4a6b;color:#dde8f2}:root[data-theme="dark"] .pill.dayof{background:#8fb0d0;color:#161b24}:root[data-theme="dark"] .pill.never{background:#444;color:#ddd}:root[data-theme="dark"] .pill.ask{background:#4a2a2a;color:#f0d0d0}
.countdown{display:flex;gap:1rem;flex-wrap:wrap;margin:1rem 0}
.countdown div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.7rem 1rem;min-width:110px;text-align:center}
.countdown b{display:block;font-family:var(--serif);font-size:2rem;color:var(--brass);line-height:1}
.countdown span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.filter{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
.filter input[type=search]{flex:1;min-width:200px;padding:.55rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:.95rem}
.filter button{padding:.45rem .8rem;border:1px solid var(--line);background:var(--card);color:var(--ink2);border-radius:999px;font:inherit;font-size:.82rem;cursor:pointer}
.filter button.on{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
figure.diagram{margin:1.2rem 0;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem}
figure.diagram svg{width:100%;height:auto;display:block}
figure.diagram figcaption{font-size:.85rem;color:var(--muted);margin-top:.5rem}
.print-btn{font:inherit;font-size:.82rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink2);cursor:pointer}
/* Annotated document: <div class="doc">text <mark>highlight</mark><span class="note">why it matters</span></div> */
.doc{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84rem;line-height:1.5;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin:1rem 0;white-space:pre-wrap;overflow-x:auto}
.doc mark{background:#fff1c2;color:inherit;padding:0 .15em;border-radius:3px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .doc mark{background:#5c4a22}}
:root[data-theme="dark"] .doc mark{background:#5c4a22}
.doc .note{display:block;color:var(--brass);font-family:"Inter",sans-serif;font-size:.8rem;margin:.1rem 0 .4rem 1.2rem}
.doc .note::before{content:"↳ "}
/* Record sheets (assets/records.js): editable tables, keyed fields, checklists, binder page */
.btn.small{font-size:.82rem;padding:.4rem .8rem;border-radius:999px}
.tool-bar{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin:1rem 0}
.tool-bar .spacer{flex:1}
.tool table{font-size:.88rem}
.tool th{white-space:nowrap}
.tool td{padding:.3rem .4rem;vertical-align:top}
.tool input[type=text],.tool input[type=number],.tool input[type=date],.tool input[type=time],.tool select,.tool textarea{width:100%;min-width:90px;padding:.35rem .45rem;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--ink);font:inherit;font-size:.88rem}
.tool textarea{min-height:2.6rem;resize:vertical}
.tool input[type=checkbox]{width:1.05rem;height:1.05rem;accent-color:var(--accent)}
.tool td.num input{text-align:right}
.tool .del{font:inherit;font-size:.8rem;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;padding:.2rem .45rem;cursor:pointer}
.tool .del:hover{color:#8c3b3b;border-color:#8c3b3b}
.tool tfoot td{font-weight:600;background:var(--tip-bg)}
.tool .empty{padding:1rem;color:var(--muted);font-size:.9rem;text-align:center}
.tool.fields .field{margin:1rem 0}
.tool.fields label{display:block;font-size:.9rem;margin-bottom:.3rem}
.tool.fields input[type=text],.tool.fields input[type=date],.tool.fields input[type=number],.tool.fields select,.tool.fields textarea{width:100%;max-width:62ch;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink);font:inherit;font-size:1rem}
.storage-note{font-size:.82rem;color:var(--muted);border:1px dashed var(--line);border-radius:8px;padding:.5rem .8rem;margin:.8rem 0}
.status{font-size:.82rem;color:var(--muted);margin-left:.4rem}
.card .count{float:right;font-family:var(--serif);font-size:1.6rem;color:var(--brass);font-weight:700;line-height:1}
.printall section{margin:1.5rem 0}
.printall .kv{grid-template-columns:fit-content(40%) minmax(0,1fr)}   /* long field labels wrap instead of widening a phone screen */
.printall .kv>*{overflow-wrap:anywhere}   /* a long address in a field value wraps too (from Learn IEP Basics, 2026-10-23) */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Plan (assets/plan.js): a scaled, editable plan. Colors come from the palette tokens; dashes, hatching, line weight and
   text carry every distinction, so nothing depends on color alone. Print draws it at scale, black on white. */
.plan-bar{display:flex;flex-wrap:wrap;gap:.6rem;align-items:flex-end;margin:.8rem 0}
.plan-bar label,.plan-settings label{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--ink2)}
.plan-bar label.plan-check{flex-direction:row;align-items:center;min-height:44px;gap:.4rem}
.plan-check input{width:1.3rem;height:1.3rem;accent-color:var(--accent)}
.plan-app input[type=text],.plan-app select{min-height:44px;max-width:100%;padding:.35rem .5rem;border:1px solid var(--line);border-radius:6px;background:var(--bg2);color:var(--ink);font:inherit;font-size:.92rem}
.plan-app td input[type=text]{width:100%;min-width:92px}
.plan-app td select{min-width:110px}
.plan-app td input[data-f=iname]{min-width:150px}
.plan-app td .btn{white-space:nowrap}
.plan-app [aria-invalid="true"]{border-color:var(--ink);border-width:2px;border-style:dashed}
.plan-opts{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.plan-label{font-size:.85rem;color:var(--ink2);margin-right:.2rem}
.plan-opts .btn[aria-pressed="true"]{background:var(--yw-bg);border-color:var(--accent);color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
.plan-settings{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.6rem;margin:.8rem 0}
.plan-stage{border:1px solid var(--line);border-radius:10px;background:var(--bg2);overflow:hidden;margin:.6rem 0}
.plan-svg{display:block;width:100%;height:auto;max-height:78vh;font-family:"Inter",system-ui,sans-serif}
.plan-flag{display:block;color:var(--ink)}
.plan-app h3{font-family:"Inter",system-ui,sans-serif;font-size:1.05rem;font-weight:600;margin-top:1.6rem}
.plan-printonly{display:none}
.plan-sheet{margin:1.4rem 0}
.plan-sheet .plan-svg{border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.plan-sheet .plan-list{font-size:.85rem;margin-top:.6rem}
.plan-measures{font-size:.88rem}
.plan-svg text{fill:var(--ink)}
.pl-floor{fill:var(--card)}
.pl-wall{fill:var(--ink)}
.pl-gap{fill:var(--bg2)}
.pl-gridline{stroke:var(--line);fill:none}
.pl-thin,.pl-leaf,.pl-arc,.pl-dim,.pl-open-outline{fill:none;stroke:var(--ink);vector-effect:non-scaling-stroke}
.pl-thin,.pl-arc,.pl-dim{stroke-width:1}
.pl-leaf{stroke-width:2}
.pl-arc{stroke-dasharray:4 3}
.pl-open-outline{stroke-width:2;stroke-dasharray:8 5}
.pl-hatch{stroke:var(--muted)}
.pl-warnhatch{stroke:var(--ink)}
.pl-item{cursor:grab;touch-action:none}
.pl-item:focus{outline:none}
.pl-item .fp{stroke:var(--ink2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.pl-piece .fp{fill:var(--yw-bg)}
.pl-feature .fp{stroke:var(--muted)}
.pl-feature circle.fp{fill:var(--card)}
.pl-front{stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}
.pl-inuse{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-dasharray:6 4;vector-effect:non-scaling-stroke}
.pl-outline{fill:none;stroke:var(--ink);stroke-width:2;vector-effect:non-scaling-stroke}
.pl-guide{fill:none;stroke:var(--brass);stroke-width:1.5;stroke-dasharray:7 4;vector-effect:non-scaling-stroke}
.pl-item .ring{fill:none;stroke:none}
.pl-item.is-focus .ring,.pl-item:focus-visible .ring{stroke:var(--brass);stroke-width:3;stroke-dasharray:5 3;vector-effect:non-scaling-stroke}
.pl-item.is-focus .fp{stroke-width:3}
.pl-out .fp{stroke-dasharray:3 3}
.plan-svg .pl-size,.plan-svg .pl-note{fill:var(--ink2)}
.plan-svg .pl-name{font-weight:600}
.pl-band{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2;vector-effect:non-scaling-stroke}
.pl-dimtext{paint-order:stroke;stroke:var(--bg2);stroke-linejoin:round}
.plan-svg .pl-short .pl-dimtext{font-weight:700}
.pl-short .pl-dim{stroke-width:2.5}
.pl-bar-b{fill:var(--ink)}
.pl-bar-w{fill:var(--bg2);stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
@page plan-letter-p{size:letter portrait;margin:12mm}
@page plan-letter-l{size:letter landscape;margin:12mm}
@page plan-a4-p{size:A4 portrait;margin:12mm}
@page plan-a4-l{size:A4 landscape;margin:12mm}
@media print{
  html.plan-page main .content > :not([data-plan]){display:none!important}
  .plan-main{display:none!important}
  .plan-printonly{display:block}
  .plan-sheet.letter-p{page:plan-letter-p}.plan-sheet.letter-l{page:plan-letter-l}.plan-sheet.a4-p{page:plan-a4-p}.plan-sheet.a4-l{page:plan-a4-l}
  .plan-sheet{margin:0;break-inside:avoid-page}
  .plan-sheet .plan-svg{width:var(--pw)!important;height:var(--ph)!important;max-width:none!important;max-height:none!important;border:0;background:#fff}
  .plan-sheet .table-wrap{break-inside:auto}
  .plan-svg text,.plan-svg .pl-size,.plan-svg .pl-note{fill:#000}
  .pl-floor,.pl-gap,.pl-piece .fp,.pl-feature circle.fp,.pl-bar-w{fill:#fff}
  .pl-wall,.pl-bar-b{fill:#000}
  .pl-thin,.pl-leaf,.pl-arc,.pl-dim,.pl-open-outline,.pl-item .fp,.pl-front,.pl-inuse,.pl-band,.pl-bar-w,.pl-warnhatch,.pl-outline,.pl-guide{stroke:#000}
  .pl-gridline{stroke:#bbb}.pl-hatch{stroke:#666}
  .pl-dimtext{stroke:none}
  html.plan-page .site-footer{display:none}
  .plan-sheet h2,.plan-sheet h3{font-size:16pt;margin:0 0 2mm;padding:0;border:0}
  .plan-sheet p.small{font-size:8.5pt;margin:0 0 3mm}
  .plan-sheet table{font-size:8.5pt}.plan-sheet th,.plan-sheet td{padding:1mm 2mm}
  .plan-measures{font-size:8.5pt;margin:2mm 0 0}
  .pl-item .ring{stroke:none!important}
}
/* Target size: every control is at least 44px high (and 44px wide where it is a short button). A native checkbox or radio
   is 24px; the label beside or around it fills a 44px row and is part of the target (records.js wraps table checkboxes
   in label.hit). Inline text links are exempt. */
.topbar button,.theme-toggle,.print-btn,.btn,.btn.small,.filter button,.scenario button,.essentials-toggle,.form details.more>summary{min-height:44px}
.theme-toggle,.print-btn,.btn.small,a.btn,.filter button,.essentials-toggle{display:inline-flex;align-items:center;justify-content:center}
.tool .del{min-width:44px;min-height:44px}
.calc input,.calc select,.form input[type=text],.form input[type=date],.form input[type=month],.form input[type=number],.form input[type=time],.form select,
.tool input[type=text],.tool input[type=number],.tool input[type=date],.tool input[type=time],.tool select,.tool textarea,.filter input[type=search],.pieces .pr input[type=number]{min-height:44px}
.check li{padding:0}
.check li label{flex:1;min-height:44px;padding:.55rem 0}
.check li input{margin-top:.65rem;width:1.5rem;height:1.5rem}
.lesson-complete input,.radios input,.tool input[type=checkbox]{width:1.5rem;height:1.5rem;flex:none}
.lesson-complete{flex-wrap:wrap}
.lesson-complete label{min-height:44px;display:flex;align-items:center}
.lesson-complete .small{min-width:0}
.radios label{min-height:44px;align-items:center}
.radios input{margin-top:0}
.chips label,.pieces .pr label{min-height:44px}
.chips input{width:1.2rem;height:1.2rem}
.tool label.hit{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:0;cursor:pointer}
.quiz details{padding:.15rem 0}
.quiz summary{min-height:44px;padding:.5rem 0}
@media print{.tool label.hit{min-height:0;min-width:0}}
.site-footer{margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1.4rem}
.site-footer a{color:var(--ink2)}
.site-footer .more-fa{flex-basis:100%;display:flex;flex-wrap:wrap;gap:.2rem 1.1rem}
.site-footer .more-fa a{font-size:.75rem;text-decoration:none}
.site-footer .more-fa a:hover{color:var(--accent)}
.site-footer .foot-label{margin:0;flex-basis:100%;font-weight:600;color:var(--ink2)}
/* Setup form (built by personalize.js from course.json) */
.form h2{font-size:1.5rem}
.form fieldset{border:1px solid var(--line);border-radius:12px;padding:1rem 1.2rem;margin:1.2rem 0;background:var(--card)}
.form legend{font-family:"Inter",sans-serif;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);font-weight:600;padding:0 .4rem}
.form .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.8rem 1rem;margin:.5rem 0}
.form label{display:flex;flex-direction:column;gap:.25rem;font-size:.88rem;color:var(--ink2)}
.form input[type=text],.form input[type=date],.form input[type=month],.form input[type=number],.form input[type=time],.form select,.form textarea{padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink);font:inherit;font-size:1rem}
.form textarea{min-height:70px}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0}
.radios{display:flex;flex-direction:column;gap:.4rem;margin:.4rem 0}
.radios label{flex-direction:row;align-items:flex-start;gap:.5rem;font-size:.92rem;color:var(--ink);cursor:pointer}
.radios input{margin-top:.3rem;accent-color:var(--accent)}
.setup-note{font-size:.85rem;color:var(--muted);margin:.6rem 0 0}
.form details.more{margin:1.2rem 0}
.form details.more>summary{cursor:pointer;font-weight:600;color:var(--ink2);padding:.6rem .9rem;border:1px dashed var(--line);border-radius:10px;background:var(--card)}
.form details.more[open]>summary{margin-bottom:.4rem}
.chips label{flex-direction:row;align-items:center;gap:.35rem;padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;background:var(--bg2);cursor:pointer;font-size:.86rem;color:var(--ink)}
.chips label:has(input:checked){background:var(--yw-bg);border-color:var(--accent);font-weight:600}
.chips input{accent-color:var(--accent)}
.pieces{display:grid;grid-template-columns:1fr;gap:.4rem}
.pieces .pr{display:grid;grid-template-columns:1.4fr repeat(3,max-content) 90px;gap:.6rem;align-items:center;padding:.45rem .5rem;border-bottom:1px dashed var(--line);font-size:.9rem}
.pieces .pr label{flex-direction:row;align-items:center;gap:.3rem;font-size:.82rem;white-space:nowrap}
.pieces .pr input[type=number]{width:80px;padding:.3rem .4rem}
.pieces .hdr{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line)}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;margin:1.5rem 0}
.btn{font:inherit;font-size:.95rem;padding:.65rem 1.1rem;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;font-weight:600}
.btn.secondary{background:var(--card);color:var(--ink2);border-color:var(--line)}
.sharebox{font-size:.85rem;word-break:break-all;background:var(--tip-bg);padding:.7rem .9rem;border-radius:8px;margin-top:.6rem;display:none}
@media (max-width:700px){.pieces .pr{grid-template-columns:1fr;gap:.3rem}.pieces .hdr{display:none}}
td.vetdate{min-width:7rem;border-bottom:1px solid var(--line)}

/* =====================================================================================================
   Layout A, the reference desk (redesign of 2026-11-12; thesis in learn-things/docs/design-thesis-2026-11-12.md).
   site.js builds the header, the chapters-only menu, the "On this page" list and the Essentials / Full chapter
   switch around the page's own markup, so page files do not change. Sections sit on the page with a rule above;
   boxes are kept for callouts, tools and tables. Shadows only on things that float.
   ===================================================================================================== */
:root{
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --measure:38rem;                                        /* about 68 characters of 17px Inter */
  --edge:color-mix(in srgb,var(--ink) 52%,var(--bg));     /* control outlines: at least 3:1 on the page, cards and the header in both themes (tools/contrast.py) */
  --r:6px; --text-scale:1;
  --side-w:16.5rem; --rail-w:15rem; --head-h:60px; --stick:calc(var(--head-h) + 1rem); --stick-px:76;
}
:root[data-text="1"]{--text-scale:1.15}
:root[data-text="2"]{--text-scale:1.3}
*{box-sizing:border-box}
html{font-size:calc(100% * var(--text-scale));-webkit-text-size-adjust:100%;scroll-padding-top:var(--stick)}   /* keyboard focus and jumps land below the sticky header */
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:calc(17px * var(--text-scale));line-height:1.6}
[hidden]{display:none!important}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:520;font-optical-sizing:auto;color:var(--ink);line-height:1.14;margin:0;overflow-wrap:break-word;text-wrap:balance}
h1{font-size:2.3rem;letter-spacing:-.012em}
h2{font-size:1.65rem;letter-spacing:-.006em;margin:2.6rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--line)}
h3{font-size:1.24rem;line-height:1.25;margin:1.9rem 0 .45rem}
h4{font-family:var(--sans);font-size:.95rem;font-weight:600;margin:1.4rem 0 .3rem;color:var(--ink)}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1rem;padding-left:1.3rem}
li{margin:.3rem 0}
strong,b{font-weight:600}
code{font-family:ui-monospace,Menlo,monospace;font-size:.9em;background:var(--tip-bg);padding:.1em .35em;border-radius:4px}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.eyebrow{display:flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:500;color:var(--accent);margin:0 0 .45rem}
.lede{font-size:1.14rem;line-height:1.5;color:var(--ink2);margin:.7rem 0 0;max-width:var(--measure)}
.small{font-size:.85rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
/* The one uppercase label: it names a group in a navigation list */
.navlabel{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:var(--r);z-index:200;text-decoration:none;font-weight:600}
.skip:focus{left:8px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
main:focus{outline:none}
.ico{width:1.15rem;height:1.15rem;flex:none;fill:currentColor;vertical-align:-.2em}
.ico.lg{width:1.75rem;height:1.75rem}
.ico.sm{width:1rem;height:1rem}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-width:44px;min-height:44px;padding:0 .6rem;border:1px solid transparent;border-radius:var(--r);background:transparent;color:var(--ink2);text-decoration:none;font-size:.9rem;font-weight:500;cursor:pointer}
.iconbtn:hover,.iconbtn[aria-expanded="true"]{background:var(--tip-bg);color:var(--ink)}
.btn{border-radius:var(--r);text-decoration:none;display:inline-flex;align-items:center;gap:.5rem}
.btn.small{color:var(--on-accent)}   /* .small alone is muted text; a small button keeps the button's colour (found by tools/a11y-audit.js) */
.btn.secondary,.btn.secondary.small{border-color:var(--edge);color:var(--ink2)}
.btn.small,.print-btn,.filter button{border-radius:var(--r)}
.print-btn,.filter button{border-color:var(--edge)}

/* Header: wordmark, search, Tools, Your file, display settings */
.topbar{position:sticky;top:0;z-index:100;height:var(--head-h);display:grid;grid-template-columns:var(--side-w) minmax(12rem,26rem) minmax(0,1fr) auto;align-items:center;gap:1rem;padding:0 1rem 0 0;background:var(--bg2);border-bottom:1px solid var(--line)}
.topbar .brand{font-family:var(--serif);font-weight:520;font-size:1.2rem;line-height:1.15;color:var(--ink);text-decoration:none;padding-left:1.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .brand.shelf{display:flex;align-items:center;gap:.5rem;font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink2)}
.topbar .brand.shelf .ico{color:var(--accent)}
.topbar .menu-btn,.topbar .search-btn{display:none}
.top-links{display:flex;gap:.2rem;justify-self:end}
.top-links a .ico{color:var(--accent)}
.top-links a[aria-current]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent);border-radius:0}
.search{position:relative;display:flex;align-items:center;min-width:0}
.search>.ico{position:absolute;left:.75rem;color:var(--muted);pointer-events:none}
.search input{width:100%;min-height:44px;padding:0 2.4rem;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:.95rem}
.search input::placeholder{color:var(--muted);opacity:1}
.search kbd{position:absolute;right:.6rem;font-family:var(--sans);font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:0 .4rem;line-height:1.5;pointer-events:none}
.search-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);min-width:min(24rem,86vw);background:var(--card);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);z-index:90;padding:.3rem;max-height:70vh;overflow:auto}
.search-panel a{display:block;padding:.5rem .65rem;border-radius:4px;text-decoration:none;color:var(--ink);font-size:.92rem;line-height:1.3}
.search-panel a:hover,.search-panel a:focus-visible{background:var(--yw-bg)}
.search-panel a span{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.search-panel p{margin:0;padding:.55rem .65rem;font-size:.85rem;color:var(--muted)}
.settings{position:relative}
.settings-panel{position:absolute;right:0;top:calc(100% + 6px);width:15.5rem;background:var(--card);border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);padding:.9rem;z-index:95}
.settings-panel .set-label{font-size:.82rem;font-weight:600;color:var(--ink2);margin:0 0 .4rem}
.settings-panel .seg{margin-bottom:.9rem}
.settings-panel .seg:last-child{margin-bottom:0}
.seg{display:flex;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.seg button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.35rem;min-height:44px;padding:0 .5rem;border:0;border-left:1px solid var(--edge);background:var(--card);color:var(--ink2);font-size:.88rem;font-weight:500;cursor:pointer}
.seg button:first-child{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);font-weight:600}
.seg button[data-step="1"]{font-size:1rem}.seg button[data-step="2"]{font-size:1.15rem}

/* Frame: chapters on the left, the page, On this page on the right */
.layout{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - var(--head-h))}
.layout.has-rail{grid-template-columns:var(--side-w) minmax(0,1fr) var(--rail-w)}
nav.side{position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h));overflow-y:auto;padding:.9rem .75rem 1.5rem;border-right:1px solid var(--line)}
nav.side ul{list-style:none;margin:0;padding:0}
nav.side li{margin:0}
nav.side .phone-li{display:none}
nav.side a.item{display:flex;align-items:center;gap:.6rem;min-height:34px;padding:.3rem .65rem;border-radius:var(--r);color:var(--ink2);text-decoration:none;font-size:.92rem;line-height:1.3}
nav.side a.item:hover{background:var(--tip-bg);color:var(--ink)}
nav.side a.item[aria-current="page"]{background:var(--yw-bg);color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}
nav.side a.item .ico{color:var(--accent)}
nav.side a.item .done{margin-left:auto;font-size:.7rem;font-weight:500;color:var(--muted)}
nav.side .navlabel{padding:0 .65rem;margin:.95rem 0 .25rem}
nav.side .navlabel + ul a.item{padding-left:1.45rem}   /* chapters sit in from their section label, so the labels read as headings (owner, 2026-11-13) */
nav.side .nav-minor{display:flex;flex-wrap:wrap;gap:0 .2rem;margin-top:.9rem;padding-top:.6rem;border-top:1px solid var(--line)}
nav.side .nav-minor a.item{font-size:.85rem;min-height:34px;padding:.3rem .5rem;color:var(--muted)}
nav.side .nav-minor a.item .ico{color:var(--muted)}
nav.side .progress{margin:.9rem .2rem 0;padding:.7rem .8rem;border:1px solid var(--line);border-radius:var(--r);background:var(--card);font-size:.8rem;line-height:1.45;color:var(--ink2)}   /* the setup panel personalize.js adds to the menu */
main{min-width:0;padding:2.6rem 3.5rem 0;overflow-wrap:break-word}
main > .content{max-width:var(--measure)}
main > .content.wide,main > .content.home,.pg-calculator main > .content{max-width:none}
.scrim{display:none}
.rail{position:sticky;top:var(--head-h);align-self:start;max-height:calc(100vh - var(--head-h));overflow-y:auto;padding:2.9rem 1.25rem 2rem 0}
.rail-title{display:flex;align-items:center;gap:.45rem}
.rail ol,.herebar ol{list-style:none;margin:.5rem 0 0;padding:0}
.rail li{margin:0}
.rail a[data-spy]{display:block;padding:.28rem 0 .28rem .8rem;border-left:2px solid var(--line);color:var(--ink2);text-decoration:none;font-size:.85rem;line-height:1.35}
.rail a[data-spy]:hover{color:var(--ink);border-left-color:var(--muted)}
.rail a[data-spy].off{color:var(--muted)}
.rail a[data-spy].cur{color:var(--ink);font-weight:600;border-left-color:var(--accent)}
.rail .totop{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.82rem;color:var(--muted);text-decoration:none;min-height:32px}
.rail .totop:hover{color:var(--ink)}
.herebar{display:none}
.herebar>button{display:flex;align-items:center;gap:.5rem;width:100%;min-height:46px;padding:0 16px;border:0;border-bottom:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:.88rem;text-align:left;cursor:pointer}
.herebar .here-cur{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.herebar .ico{color:var(--accent)}
.herebar .chev{color:var(--muted);transition:transform .15s}
.herebar>button[aria-expanded="true"] .chev{transform:rotate(180deg)}
.herebar ol{margin:0;padding:.3rem 0;background:var(--bg2);border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:62vh;overflow:auto}
.herebar ol a{display:flex;align-items:center;min-height:44px;padding:.2rem 16px .2rem 2.6rem;color:var(--ink2);text-decoration:none;font-size:.92rem;line-height:1.3}
.herebar ol a.cur{color:var(--ink);font-weight:600;box-shadow:inset 3px 0 0 var(--accent)}

/* Chapter: essentials first, the full chapter one tap away */
.content [id],.content .sec{scroll-margin-top:var(--stick)}
.viewswitch{display:inline-flex;margin:1.5rem 0 0;border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;background:var(--card)}
.viewswitch button{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.1rem;border:0;border-left:1px solid var(--edge);background:transparent;color:var(--ink2);font-size:.95rem;font-weight:600;cursor:pointer;white-space:nowrap}
.viewswitch button:first-child{border-left:0}
.viewswitch button span{font-weight:400;font-size:.82rem;opacity:.85}
.viewswitch button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
html.ess .content .sec:not([data-ess]){display:none}
.ess-more{display:none}
html.ess .ess-more{display:block}
.ess-more .ess-h{font-family:var(--serif);font-weight:520;font-size:1.65rem;line-height:1.14;margin:2.6rem 0 .7rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.morelist{list-style:none;padding:0;margin:0 0 1.4rem}
.morelist li{margin:0;border-top:1px solid var(--line)}
.morelist li:last-child{border-bottom:1px solid var(--line)}
.morelist a{display:block;padding:.65rem 0;text-decoration:none;color:var(--ink)}
.morelist a b{display:block;font-family:var(--serif);font-size:1.15rem;font-weight:520;line-height:1.25}
.morelist a span{display:block;font-size:.88rem;color:var(--ink2);line-height:1.4;margin-top:.1rem}
.morelist a:hover b{color:var(--accent)}
.sec>h2:first-child,.sec>.partmark+h2{margin-top:0;padding-top:0;border-top:0}
.sec{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.1rem}
.viewswitch+.sec,.lede+.sec{margin-top:2rem}
.partmark{display:flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--accent);margin:0 0 .5rem}
.part{display:inline-block;font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--accent);margin-left:.5rem;vertical-align:middle}   /* without JavaScript the part label stays in the heading */
.essentials{border:0;border-radius:0;padding:0;background:transparent}
details.deeper{border-top:1px dashed var(--edge);border-bottom:1px dashed var(--edge);margin:1.3rem 0;padding:0}
details.deeper+details.deeper{border-top:0;margin-top:-1.3rem}
details.deeper>summary{display:flex;align-items:center;gap:.5rem;min-height:44px;cursor:pointer;font-size:.92rem;font-weight:600;color:var(--ink2);list-style:none}
details.deeper>summary::-webkit-details-marker{display:none}
details.deeper>summary .ico{color:var(--muted)}
details.deeper>summary .chev{margin-left:auto;transition:transform .15s}
details.deeper[open]>summary .chev{transform:rotate(180deg)}
details.deeper>summary .lbl{font-weight:400;color:var(--muted)}
details.deeper>:last-child{margin-bottom:1rem}
details.deeper>.tag{display:none}
div.deeper{border-left:3px dashed var(--line);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0}   /* before site.js folds it */
div.deeper>.tag{display:block;font-size:.85rem;font-weight:600;color:var(--muted);margin-bottom:.3rem}
ul.check li.optional label{color:var(--muted)}
.toc{font-size:.92rem;margin:1.2rem 0}   /* shown only without JavaScript; site.js replaces it with On this page */
.toc ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:2rem}

/* Procedure: large figures, no discs */
.steps{list-style:none;counter-reset:step;padding:0;margin:1.1rem 0 1.2rem}
.steps>li{counter-increment:step;position:relative;padding:.8rem 0 .8rem 3.1rem;margin:0;border-top:1px solid var(--line)}
.steps>li:last-child{border-bottom:1px solid var(--line)}
.steps>li::before{content:counter(step);position:absolute;left:.1rem;top:.45rem;font-family:var(--serif);font-size:2rem;font-weight:520;line-height:1.2;color:var(--brass);font-variant-numeric:lining-nums}
.steps>li.optional::before{color:var(--muted)}
.steps>li>strong:first-child{display:block;margin-bottom:.15rem}
/* …unless the sentence carries on through the bold, which would drop the reader onto a line
   opening with a comma. build.py marks those from the text itself. */
.steps>li.run-on>strong:first-child{display:inline;margin-bottom:0}

/* Callouts */
.callout{border:1px solid var(--line);border-radius:var(--r);background:var(--tip-bg);padding:.9rem 1.05rem;margin:1.2rem 0;font-size:.96rem}
.callout>:last-child{margin-bottom:0}
.callout .tag{display:flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.35rem}
.callout.yw{background:var(--yw-bg);border-color:var(--yw-line)}
.callout.yw .tag{color:var(--accent)}
.callout.warn,.callout.boundary{background:var(--warn-bg);border-color:var(--warn-line)}
.callout.warn .tag,.callout.boundary .tag{color:var(--mauve)}
.callout.fiction .tag{color:var(--brass)}
.callout:empty{display:none}

/* Tables: horizontal rules, a heavier rule under the head; wide ones leave the text column; rows stack on a phone */
table{width:100%;border-collapse:collapse;font-size:.9rem;line-height:1.45;margin:1rem 0 1.5rem}
th,td{text-align:left;vertical-align:top;padding:.55rem .9rem .55rem 0;border-bottom:1px solid var(--line)}
th:last-child,td:last-child{padding-right:0}
thead th{font-size:.8rem;font-weight:600;color:var(--ink2);border-bottom:2px solid var(--ink);vertical-align:bottom}
.table-wrap{position:relative;overflow-x:auto;margin:1.1rem 0 1.4rem}
.table-wrap table{margin:0}
table.stack tbody td:first-child{font-weight:500}
@media (min-width:1100px){.table-wrap.wide-table{width:calc(100vw - var(--side-w) - 7rem);max-width:none}.layout.has-rail .table-wrap.wide-table{width:calc(100vw - var(--side-w) - var(--rail-w) - 7rem)}}   /* the page's width, less the right-hand list where there is one */
@media (max-width:640px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{padding:.7rem 0;border-bottom:1px solid var(--line)}
  table.stack tbody tr:first-child{border-top:2px solid var(--ink)}
  table.stack td{border:0;padding:.15rem 0}
  table.stack tbody td:first-child{font-weight:600;font-size:.98rem;padding-bottom:.25rem}
  table.stack td:not(:first-child)::before{content:attr(data-label);display:block;font-size:.76rem;font-weight:600;color:var(--muted);margin-top:.25rem}
  .table-wrap:has(table.stack){overflow-x:visible}
}
tr.now td{background:var(--yw-bg)}

/* Tools: the calculator is on the first screen; inputs beside the result */
.calc{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.8rem .9rem;align-content:start;margin:0}
.calc label{display:flex;flex-direction:column;justify-content:flex-end;gap:.3rem;font-size:.84rem;font-weight:500;color:var(--ink2)}
.calc label:has(textarea){grid-column:1/-1}
.calc input,.calc select,.calc textarea{min-height:44px;width:100%;padding:.4rem .65rem;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:1rem}
.toolbox{border:1px solid var(--edge);border-radius:var(--r);background:var(--bg2);padding:1rem;margin:.9rem 0 1rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;align-items:start;max-width:54rem}
.result{background:var(--yw-bg);border:1px solid var(--yw-line);border-radius:var(--r);padding:.85rem 1rem;font-size:.92rem;min-width:0}
.result dl{margin:0;display:grid;gap:.55rem}
.result dt{font-size:.78rem;font-weight:600;color:var(--ink2)}
.result dd{margin:0;line-height:1.45}
.result dd strong{font-family:var(--serif);font-size:1.5rem;font-weight:520;line-height:1.15;color:var(--ink)}
.result .more{margin-top:.7rem}
.result .more summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--accent);min-height:44px;display:flex;align-items:center}
.result .more dl{margin-top:.2rem}
.result .tool-foot{font-size:.82rem;color:var(--muted);margin:.8rem 0 0}
.kv{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:.3rem 1rem;font-size:.95rem}
.kv b{color:var(--ink2);font-weight:600}
.tool-note{font-size:.84rem;color:var(--muted);margin:0 0 1rem;max-width:var(--measure)}
.pg-calculator h1{font-size:1.65rem;max-width:34rem}
.pg-calculator .sec{margin-top:1.6rem;padding-top:1rem}
.pg-calculator .sec>h2{font-size:1.24rem;margin-bottom:0}
.pg-calculator .content>p,.pg-calculator .content>ul,.pg-calculator .content>.callout,.pg-calculator .sec>p,.pg-calculator .sec>.callout,.pg-calculator details.fold{max-width:var(--measure)}
details.fold{border-top:1px solid var(--line);margin:0}
details.fold+details.fold{margin-top:0}
details.fold:last-of-type{border-bottom:1px solid var(--line)}
details.fold>summary{display:flex;align-items:center;gap:.5rem;min-height:48px;cursor:pointer;font-weight:600;font-size:.98rem;list-style:none}
details.fold>summary::-webkit-details-marker{display:none}
details.fold>summary .chev{margin-left:auto;color:var(--muted);transition:transform .15s}
details.fold[open]>summary .chev{transform:rotate(180deg)}
details.fold>:last-child{margin-bottom:1.1rem}
.fold-gap{margin-top:2.2rem}

/* Knowledge check, scenario, checklist */
.quiz details{border-top:1px solid var(--line)}
.quiz details:last-child{border-bottom:1px solid var(--line)}
.quiz summary{min-height:44px;padding:.6rem 0;cursor:pointer;font-weight:600}
.quiz .a{margin:0 0 .8rem 1rem;color:var(--ink2);font-size:.95rem}
.scenario{margin:1.4rem 0}
.scenario .q{font-weight:600;margin-bottom:.6rem}
.scenario .opts{display:flex;flex-direction:column;gap:.45rem}
.scenario button{text-align:left;min-height:44px;padding:.55rem .8rem;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:.95rem;cursor:pointer}
.scenario button:hover{border-color:var(--accent)}
.scenario button.picked{border-color:var(--accent);background:var(--yw-bg);box-shadow:inset 3px 0 0 var(--accent)}
.scenario .fb{display:none;margin-top:.7rem;padding:.7rem .9rem;border-radius:var(--r);background:var(--tip-bg);font-size:.95rem}
.scenario .fb.on{display:block}
.scenario .fb.good{background:var(--yw-bg)}.scenario .fb.warn{background:var(--warn-bg)}
.check{list-style:none;padding-left:0}
.check li{display:flex;gap:.7rem;align-items:flex-start;margin:0;padding:0;border-top:1px solid var(--line)}
.check li:last-child{border-bottom:1px solid var(--line)}
.check li input{width:1.5rem;height:1.5rem;margin:.65rem 0 0;flex:none;accent-color:var(--accent)}
.check li label{flex:1;min-height:44px;padding:.55rem 0;cursor:pointer}
.check li.done label{color:var(--muted);text-decoration:line-through}
.lesson-complete{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;margin-top:1.8rem;padding:.4rem 0;border-top:1px solid var(--line)}
.lesson-complete input{width:1.5rem;height:1.5rem;flex:none;accent-color:var(--accent)}
.lesson-complete label{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center}

/* Setup form: sections under a rule, legends in sentence case (the uppercase label is for navigation groups only) */
.form fieldset{border:0;border-top:1px solid var(--line);border-radius:0;padding:1rem 0 .4rem;margin:1.4rem 0 0;background:transparent}
.form legend{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);padding:0 .7rem 0 0}
.form input[type=text],.form input[type=date],.form input[type=month],.form input[type=number],.form input[type=time],.form select,.form textarea{border-color:var(--edge);border-radius:var(--r);background:var(--card)}
.chips label{border-color:var(--edge);border-radius:var(--r)}
.form details.more>summary{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;padding:.6rem 0}

/* Related, hubs, footer */
.related{border-top:1px solid var(--line);margin-top:2.6rem;padding-top:1.1rem;max-width:var(--measure);font-size:1rem}
.related[hidden]{display:none}
.related .label{font-family:var(--serif);font-size:1.24rem;font-weight:520;margin:0 0 .5rem;color:var(--ink)}
.related .before{margin:0 0 1rem;color:var(--ink2)}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:0;border-top:1px solid var(--line)}
.related li:first-child{border-top:0}
.related li a{display:flex;align-items:center;gap:.6rem;min-height:44px;text-decoration:none;font-weight:500}
.related li a .ico{color:var(--muted)}
.hub-h{margin:2.2rem 0 0}
.hub>.hub-h:first-child{margin-top:1.6rem}
.hublist{list-style:none;padding:0;margin:.4rem 0 0}
.hublist li{margin:0;border-top:1px solid var(--line)}
.hublist li:last-child{border-bottom:1px solid var(--line)}
.hublist a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:0 .6rem;align-items:start;padding:.85rem 0;text-decoration:none;color:var(--ink)}
.hublist a .ico{grid-row:1/3;color:var(--accent);margin-top:.1rem}
.hublist a b{font-family:var(--serif);font-size:1.24rem;font-weight:520;line-height:1.25}
.hublist a span{font-size:.9rem;color:var(--ink2);line-height:1.45}
.hublist a:hover b{color:var(--accent)}
.site-footer{max-width:56rem;padding-bottom:2.5rem}
.toast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:.6rem 1rem;border-radius:var(--r);font-size:.88rem;z-index:300;max-width:calc(100vw - 32px);box-shadow:var(--shadow)}

/* Home: the title beside the picture; Find what you need; the contents by section. On a phone the picture follows
   Find what you need (owner, 2026-11-12). The picture is placed by grid position, so its place in the page source is the phone's. */
.content.home{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:0 2.5rem;max-width:62rem;align-items:start}
.content.home>*{grid-column:1/-1}
.content.home>.home-head{grid-column:1;grid-row:1}
.content.home>.hero-img{grid-column:2;grid-row:1;margin:0}
.content.home:not(:has(>.hero-img))>.home-head{grid-column:1/-1}
.home-head h1{font-size:2.9rem}
.home-head .callout{margin:1.4rem 0 0;font-size:.92rem}
.hero-img{display:block;margin:1.4rem 0}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r);background:var(--tip-bg)}
.home-sec{margin-top:3rem;padding-top:1.2rem;border-top:2px solid var(--ink)}
.home-sec>h2{margin:0 0 .4rem;padding:0;border:0}
.home-sec.using{border-top:0;padding-top:0;margin-top:1rem;max-width:var(--measure)}
.home-sec.using>h2{margin-top:2.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.entries{margin:.6rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem}
.entries .sit{padding:1rem 0;border-top:1px solid var(--line)}
.entries .sit:nth-child(-n+2){border-top:0}
.entries dt{font-family:var(--serif);font-weight:520;font-size:1.24rem;line-height:1.25;margin:0 0 .35rem}
.entries dd{margin:0;display:flex;flex-wrap:wrap;gap:0 1.2rem;font-size:.95rem}
.entries dd a{display:inline-flex;align-items:center;min-height:32px}
.contents{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:0 1.5rem}
.contents h3{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);margin:0;padding:1.45rem 0 1rem;border-top:1px solid var(--line)}
.contents ul{list-style:none;padding:1rem 0;margin:0;border-top:1px solid var(--line)}
.contents h3:first-child,.contents h3:first-child+ul{border-top:0}
.contents li{margin:0 0 .9rem;max-width:42rem}
.contents li:last-child{margin-bottom:0}
.contents li a{font-family:var(--serif);font-size:1.24rem;font-weight:520;line-height:1.25;color:var(--ink);text-decoration:none}
.contents li a:hover{color:var(--accent);text-decoration:underline}
.contents li span{display:block;font-size:.9rem;color:var(--ink2);line-height:1.45;margin-top:.15rem}
.countdown b{font-family:var(--serif)}

/* =====================================================================================================
   Subject components (2026-11-13). No manual has a stylesheet of its own (owner, 2026-11-13): what six manuals
   kept in an extraStyles file and genuinely need now lives here, on the shared tokens, for any manual to use.
   The rest of those files restyled the shell and is gone. Catalogued in the README under "Subject components".
   ===================================================================================================== */
:root{--studio:#8a8a8a}   /* fixed neutral surround for colour exercises; deliberately the same in both themes */

/* Marked rows and columns in a reference table (from Learn Composting): the reader's own method or material, set by
   course.js from the setup. Colour is never the only signal: the script adds a text flag (.fit-flag) to each marked row. */
tr.fit > td:first-child, tr.mine > td:first-child{box-shadow:inset 4px 0 0 var(--accent)}
tr.fit > td, tr.mine > td{background:var(--yw-bg)}
.fit-flag{display:inline-block;margin-left:.3rem;font-size:.82em;font-weight:600;color:var(--accent)}
td.mine, th.mine{background:var(--yw-bg);box-shadow:inset 0 3px 0 var(--accent)}
table:has(.mine,.fit) tr.now > td, table:has(.mine,.fit) tr.now > th{background:var(--warn-bg)}   /* where a table marks both "yours" and "now", now takes the other tint and says so */
table:has(.mine,.fit) tr.now > td:first-child::after, table:has(.mine,.fit) tr.now > th:first-child::after{content:" (now)";font-weight:600;color:var(--brass)}
.table-wrap td .src{font-size:.82em;color:var(--muted)}

/* A card to print and keep, and ruled lines to write on (from Learn Digital Security's check card) */
.checkcard h2{font-size:1.35rem;margin-top:1.1rem;padding-top:.6rem}
.checkcard h2:first-of-type{margin-top:.2rem;padding-top:0;border-top:0}
.checkcard ol{margin:.2rem 0 .6rem}
table.lines{width:100%;border-collapse:collapse;margin:.4rem 0 .8rem}
table.lines th{text-align:left;font-weight:600;padding:.7rem .6rem .2rem 0;width:12rem;vertical-align:bottom;border-bottom:0}
table.lines td{border-bottom:1px solid var(--ink2);min-width:12rem}
.content code{overflow-wrap:anywhere}
@media (max-width:520px){ table.lines th{width:auto;white-space:normal} table.lines td{min-width:6rem} }
@media print{
  .noprint{display:none!important}
  body:has(.checkcard) .site-footer, body:has(.checkcard) .content > .eyebrow, body:has(.checkcard) .content > .lede, body:has(.checkcard) .content > h1{display:none!important}
  .checkcard{border:1px solid #000;padding:.25in .3in;margin:0;font-size:10.5pt;line-height:1.35}
  .checkcard h2{font-size:13pt;margin:.5rem 0 .15rem;padding:0;border:0}
  .checkcard p,.checkcard li{margin:.12rem 0}
  @page{size:letter;margin:.5in}
}

/* Calculator rows of several fields, and a field that spans the box (from Learn Meal Planning's recipe scaler) */
.calc .ing{display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:var(--ink2)}
.calc .ing .row{display:flex;gap:.35rem}
.calc .ing .row input,.calc .ing .row select{min-width:0;flex:1 1 0}
.calc .ing .row input.name{flex:2 1 0}
.calc .wide{grid-column:1/-1}
/* Two ways in, side by side on the home page (Meal Planning's quick start and full manual). Rules, not cards. */
.entry{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.5rem;margin:1.2rem 0}
.entry-a{display:flex;flex-direction:column;gap:.3rem;padding:.9rem 0;border-top:2px solid var(--ink);color:var(--ink);text-decoration:none}
.entry-a .tag{font-size:.85rem;font-weight:600;color:var(--accent)}
.entry-a strong{font-family:var(--serif);font-size:1.45rem;font-weight:520;line-height:1.15;color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.entry-a:hover strong{color:var(--accent)}
.entry-a span:last-child{font-size:.95rem;color:var(--ink2)}

/* A grid of assumptions (fields that drive a derived table) and a timeline (from Learn General Contracting's schedule) */
.assume{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:1.1rem 1.2rem;margin:1rem 0;align-items:start}
.assume label{display:flex;flex-direction:column;justify-content:flex-start;gap:.3rem;font-size:.84rem;font-weight:500;color:var(--ink2)}
.assume input,.assume select{min-height:44px;width:100%;padding:.4rem .65rem;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--ink);font-size:1rem}
.timeline{list-style:none;padding:0;margin:1rem 0;border-left:3px solid var(--yw-line)}
.timeline li{position:relative;padding:.3rem 0 .6rem 1.2rem;margin:0;font-size:.95rem}
.timeline li::before{content:"";position:absolute;left:-8px;top:.7rem;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--bg)}
.timeline li.hold::before{background:var(--mauve)}
.timeline b{display:block}

/* Colour teaching (from Learn Color Design): a fixed mid-gray surround, so a colour is judged against the same ground in
   both themes; neutral controls; swatches that always carry a text label, so print and grayscale still work. */
.studio{background:var(--studio);color:#111;border-radius:var(--r);padding:1rem;margin:1.4rem 0;border:1px solid #777}
.studio,.studio *{color-scheme:light}
.studio .lbl{display:inline-block;background:#fff;color:#111;font-size:.74rem;padding:.12em .5em;border-radius:2px;font-weight:600;line-height:1.3}
.studio .lbl.dk{background:#111;color:#fff}
.studio-cap{font-size:.8rem;color:var(--muted);margin:.5rem 0 1.4rem;line-height:1.5}
.studio .ctl{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0 .2rem}
.studio .ctl button{font-size:.8rem;min-height:44px;padding:.35rem .75rem;border-radius:2px;border:1px solid #555;background:#f4f4f2;color:#111;cursor:pointer}
.studio .ctl button[aria-pressed="true"]{background:#262626;color:#fff;border-color:#262626}
.studio .ctl button:focus-visible{outline:3px solid #fff;outline-offset:2px}
.demo{margin:1.6rem 0}
.demo h4{margin-top:0}
.demo .ctl{display:flex;gap:.45rem;flex-wrap:wrap;margin:.6rem 0}
.demo .ctl button{font-size:.8rem;min-height:44px;padding:.35rem .75rem;border-radius:var(--r);border:1px solid var(--edge);background:transparent;color:var(--ink);cursor:pointer}
.demo .ctl button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.demo .ctl label{font-size:.85rem;display:flex;align-items:center;gap:.4rem}
.demo .ctl input[type=range],.attr input[type=range]{accent-color:var(--accent);width:140px;min-height:44px}
.demo .readout{font-size:.86rem;color:var(--ink2);margin:.4rem 0}
.demo .note{font-size:.84rem;color:var(--muted);margin:.4rem 0}
.sw{display:inline-flex;flex-direction:column;align-items:stretch;width:112px;margin:.3rem;vertical-align:top}
.sw i{display:block;height:64px;border-radius:2px;border:1px solid rgba(0,0,0,.25);print-color-adjust:exact;-webkit-print-color-adjust:exact}
.sw span{font-size:.72rem;line-height:1.25;margin-top:.3rem;color:inherit}
.sw span b{display:block;font-weight:600}
.sw.lg{width:160px}.sw.lg i{height:96px}
.sw.sm{width:84px}.sw.sm i{height:44px}
.studio .sw span{background:#fff;color:#111;padding:.15em .4em;border-radius:2px}
.swrow{display:flex;flex-wrap:wrap;gap:.2rem;align-items:flex-start}
.surround{display:inline-grid;place-items:center;width:150px;height:150px;border-radius:2px;margin:.3rem;position:relative;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.surround i{display:block;width:54px;height:54px;border-radius:2px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.surround span{position:absolute;left:6px;bottom:6px;font-size:.68rem;background:#fff;color:#111;padding:.1em .4em;border-radius:2px;font-weight:600}
.propbar{display:flex;height:44px;border-radius:2px;overflow:hidden;border:1px solid rgba(0,0,0,.25);margin:.6rem 0;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.propbar i{display:flex;align-items:flex-end;justify-content:center;font-size:.7rem;font-weight:600;padding-bottom:.2rem;min-width:0;overflow:hidden;white-space:nowrap}
.proplegend{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:.82rem;margin:.3rem 0}
.proplegend i{display:inline-block;width:.9em;height:.9em;border-radius:2px;border:1px solid rgba(0,0,0,.3);vertical-align:-.1em;margin-right:.3em;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.rooms{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start}
.room{flex:1 1 260px;max-width:420px}
.room svg{width:100%;height:auto;display:block;border-radius:2px;border:1px solid #666}
.room .cap{font-size:.78rem;margin-top:.3rem}
.studio .room .cap{background:#fff;color:#111;padding:.2em .5em;border-radius:2px;display:inline-block}
.attr{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.8rem;align-items:center}
.attr label{display:flex;flex-direction:column;font-size:.82rem;gap:.2rem}
.attr input[type=color],.tool input[type=color]{min-width:44px;min-height:44px;padding:0;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);cursor:pointer}
.dot{display:inline-block;width:.9em;height:.9em;border-radius:50%;border:1px solid rgba(0,0,0,.3);vertical-align:-.1em;margin-right:.35em;print-color-adjust:exact;-webkit-print-color-adjust:exact}
.sightmap svg{width:100%;height:auto;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
/* Layout helpers and labels those pages use */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.start{display:flex;align-items:center;gap:.6rem 1.3rem;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.start-note{margin:0;font-size:.84rem;line-height:1.5;color:var(--muted);flex:1 1 16rem;max-width:26rem}
.btn.large{font-size:1rem;padding:.75rem 1.3rem}
.hero-image{margin:1.4rem 0}
.hero-image img{display:block;width:100%;height:auto;border-radius:var(--r)}
.hero-image figcaption{font-size:.8rem;color:var(--muted);margin-top:.6rem;line-height:1.5}
.content.home>.hero-image{grid-column:2;grid-row:1;margin:0}
.content.home:has(>.hero-image)>.home-head{grid-column:1}
.pill.status-confirmed{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.pill.status-unresolved{border-style:dashed}
.pill.term,.pill.practitioner{background:transparent;color:var(--ink2);border:1px solid var(--edge)}
@media (max-width:1023px){ .three,.entry{grid-template-columns:minmax(0,1fr)} .sw{width:92px} .sw i{height:52px} .content.home>.hero-image{margin:1.4rem 0} }

/* From page-level style blocks (General Contracting, Color Design). No page carries a <style> block of its own either. */
.la-h,.ob-t,.bk-l{font:600 12px var(--sans);fill:currentColor}   /* labels inside a chapter's drawn diagram */
.la-r{font:12px var(--sans);fill:currentColor}
.la-s,.ob-s,.bk-s{font:11px var(--sans);fill:currentColor;opacity:.78}
tr.grp th{font-size:.85rem;font-weight:600;background:var(--yw-bg);color:var(--ink);padding-left:.6rem}   /* a group heading row inside a table */
.filter .lab{font-size:.85rem;font-weight:600;color:var(--ink2);margin-right:.2rem}
.filter .brk{flex-basis:100%;height:0}
.tree{font-family:ui-monospace,Menlo,monospace;font-size:.85rem;background:var(--tip-bg);border:1px solid var(--line);border-radius:var(--r);padding:.8rem 1rem;white-space:pre;overflow-x:auto;margin:1rem 0}   /* a folder tree */
.sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0 2rem;margin:1rem 0}   /* the binder's list of sheets, each with its row count */
.sections .card{margin:0;padding:.8rem 0;border:0;border-top:1px solid var(--line);border-radius:0;background:transparent}
.sections .card h3{font-size:1.05rem;margin:0 0 .2rem}
.sections .card p{margin:0;font-size:.88rem}
.sections .count{float:right;font-family:var(--serif);font-size:1.5rem;font-weight:520;line-height:1;color:var(--brass)}
.src h3{margin-top:0;font-size:1.2rem}
.src .meta{font-size:.82rem;color:var(--muted);margin:0}
.src p{margin-bottom:.5rem}
.src .kind{margin:.2rem 0 .6rem}
@media print{.printall section{break-before:page;margin-top:2rem}.printall section:first-child{break-before:auto}.printall h2{border-top:0}.printall table{font-size:.8rem}}

/* A table too wide for the text column and the right-hand list together takes the list's place: the list becomes the
   bar under the header, as on a phone (site.js sets html.rail-off when it measures such a table). */
html.rail-off{--stick:calc(var(--head-h) + 46px + .5rem);--stick-px:118}
html.rail-off .layout.has-rail{grid-template-columns:var(--side-w) minmax(0,1fr)}
html.rail-off .rail{display:none}
html.rail-off .herebar{display:block;position:sticky;top:var(--head-h);z-index:60}
html.rail-off .table-wrap.wide-table{width:calc(100vw - var(--side-w) - 7rem);max-width:none}

@media (max-width:1279px){main{padding:2.2rem 2rem 0}:root{--rail-w:13.5rem}}
@media (max-width:1023px){
  :root{--head-h:56px;--stick:calc(56px + 46px + .5rem);--stick-px:110}
  h1{font-size:1.85rem}
  h2,.ess-more .ess-h{font-size:1.45rem}
  .lede{font-size:1.06rem}
  .topbar{grid-template-columns:auto minmax(0,1fr) auto auto;gap:0;padding:0 6px}
  .topbar .brand{padding-left:.3rem;font-size:1.08rem;display:flex;align-items:center;min-height:44px}
  .topbar .menu-btn,.topbar .search-btn{display:inline-flex}
  .topbar .top-links,.topbar .settings-btn span,.search kbd{display:none}
  .topbar .search{display:none;position:absolute;left:0;right:0;top:100%;padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--line);z-index:5}
  body.search-open .topbar .search{display:flex}
  .topbar .search>.ico{left:calc(16px + .75rem)}
  .topbar .search-panel{left:16px;right:16px;top:calc(100% - 2px)}
  .settings-panel{position:fixed;right:8px;top:calc(var(--head-h) + 4px)}
  .herebar{display:block;position:sticky;top:var(--head-h);z-index:60}
  .layout,.layout.has-rail{display:block}
  .rail{display:none}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:110}
  body.menu-open .scrim{display:block}
  nav.side{position:fixed;left:0;top:0;bottom:0;height:auto;width:min(86vw,330px);z-index:120;transform:translateX(-105%);transition:transform .22s;background:var(--bg2);border-right:0;box-shadow:var(--shadow);padding:1rem .8rem 2rem;visibility:hidden}
  body.menu-open nav.side{transform:none;visibility:visible}
  nav.side .phone-li{display:block}
  nav.side a.item,nav.side .nav-minor a.item{min-height:44px}
  nav.side .navlabel{margin:.8rem 0 .15rem}
  main{padding:1.5rem 16px 0}
  .two{grid-template-columns:1fr}
  .toc ol{columns:1}
  .viewswitch{display:flex;flex-wrap:wrap}   /* the two halves stack when large text will not fit them side by side */
  .viewswitch button{flex:1 1 9.5rem;justify-content:center;padding:0 .3rem;gap:.35rem;font-size:.88rem;border-left:0;box-shadow:-1px 0 0 var(--edge),0 -1px 0 var(--edge)}
  .viewswitch button span{font-size:.76rem}
  .toolbox{grid-template-columns:minmax(0,1fr)}
  .pg-calculator h1{font-size:1.4rem}
  .content.home{display:block}
  .home-head h1{font-size:2.1rem}
  .hero-img img{aspect-ratio:3/2}
  .entries{grid-template-columns:minmax(0,1fr)}
  .entries .sit:nth-child(2){border-top:1px solid var(--line)}
  .entries dd a{min-height:44px}
  .contents{grid-template-columns:minmax(0,1fr)}
  .contents h3{padding-bottom:0}
  .contents ul{border-top:0;padding-top:.5rem}
  .site-footer a{display:inline-flex;align-items:center;min-height:44px}
}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} html{scroll-behavior:auto} }
@media print{
  .topbar,nav.side,.rail,.herebar,.scrim,.related,.lesson-complete,.print-btn,.filter,.viewswitch,.ess-more,.toast,.annot-ctl{display:none!important}
  html{font-size:100%}  /* print keeps its own sizes whatever the reader's text-size step */
  html.ess .content .sec:not([data-ess]){display:block}
  details.deeper>*,details.fold>*{display:block!important}
  .layout,.layout.has-rail{display:block}main{padding:0;max-width:none}body{background:#fff;color:#000;font-size:11pt}
  main > .content{max-width:none}
  .card,.callout{box-shadow:none;break-inside:avoid}
  .scenario,.quiz,.tool{break-inside:avoid}
  .tool .del,.tool-bar,.quiz summary::marker,.scenario button,.storage-note{display:none!important}
  .tool input,.tool select,.tool textarea{border:0;background:transparent;padding:0}
  .quiz details,.quiz details>*{display:block}
  .scenario .fb{display:block!important}
  a{color:#000;text-decoration:none}
  h2{break-after:avoid}
  .hero-img{display:none}
  .site-footer{display:block}
}

/* Print: record sheets and wide tables fit the page (2026-11-14). records.js keeps a text copy (.pv) of every field in
   a sheet; print shows the copies, which wrap, and hides the fields, which cannot. Headings wrap, the minimum widths go,
   and nothing is cut off at the page edge. A page with a sheet of more than six columns prints in landscape. */
.pv{display:none}
@media print{
  .table-wrap,.table-wrap.wide-table,html.rail-off .table-wrap.wide-table,.layout.has-rail .table-wrap.wide-table{width:auto!important;max-width:none!important;overflow:visible!important}
  .tool input,.tool select,.tool textarea,.tool label.hit{display:none!important}
  .tool .pv{display:inline;white-space:pre-wrap;overflow-wrap:anywhere}
  .tool table{width:100%;table-layout:auto;font-size:8.5pt;line-height:1.3}
  .tool th,.tool td{white-space:normal!important;min-width:5.5em!important;padding:1.3mm 2mm 1.3mm 0;overflow-wrap:anywhere;border-bottom:.25pt solid #666}   /* a long entry may break anywhere, but no column is squeezed below a date or a short word */
  .tool td.num,.tool tfoot td{white-space:nowrap!important}   /* a figure never splits across lines */
  .tool thead th{font-size:8pt;border-bottom:.75pt solid #000}
  .tool tbody td{height:7.5mm}   /* an empty row still leaves room to write */
  .tool th:has(.visually-hidden:only-child),.tool td:has(>.del){display:none}   /* the Remove column */
  .tool .empty{display:none}
  .tool th .small{display:none}   /* the (i) help mark */
  .tool.fields .field{margin:0 0 3mm;break-inside:avoid}
  .tool.fields label{font-weight:600;font-size:9pt;margin:0}
  .tool.fields .pv{display:block;min-height:6mm;border-bottom:.25pt solid #666;font-size:10pt}
  .tool{break-inside:auto}
  .tool tr{break-inside:avoid}
  .tool thead{display:table-header-group}   /* the heading row repeats on each page */
  .printall table{width:100%;font-size:8.5pt}
  .printall th,.printall td{white-space:normal;overflow-wrap:anywhere;min-width:5.5em}
  .printall thead{display:table-header-group}
  .printall tr{break-inside:avoid}
  .callout{font-size:9.5pt}
  /* A sheet of more than ten columns (records.js marks it) prints smaller, with narrower columns, so it still fits a landscape page. */
  .tool table.cols-many,.printall table.cols-many{font-size:7.5pt}
  .tool table.cols-many th,.tool table.cols-many td,.printall table.cols-many th,.printall table.cols-many td{min-width:0!important;padding-right:1.2mm}
  .tool table.cols-many thead th{font-size:7pt}
  /* Reading tables: cells wrap, labels wrap, minimum widths go. site.js asks for landscape when a table has more than six columns. */
  table.stack{font-size:8.5pt;line-height:1.3}
  table.stack th,table.stack td{white-space:normal!important;min-width:5.5em!important;overflow-wrap:anywhere;padding:1.3mm 2mm 1.3mm 0}
  table.stack thead{display:table-header-group}
  table.stack tr{break-inside:avoid}
  table .pill{white-space:normal}
  /* Paper is white whatever theme the reader uses: a manual that is dark by default must not print pale gray type. */
  :root,:root[data-theme="dark"],:root:not([data-theme="light"]){--bg:#fff;--bg2:#fff;--card:#fff;--ink:#000;--ink2:#222;--muted:#444;--line:#999;--edge:#666;
    --accent:#000;--brass:#000;--mauve:#000;--on-accent:#fff;--yw-bg:#f3f3f3;--yw-line:#999;--tip-bg:#f6f6f6;--warn-bg:#f3f3f3;--warn-line:#999;color-scheme:light}
  .site-footer{margin-top:6mm;padding:3mm 0 0;font-size:8pt;break-inside:avoid}
  .site-footer a{display:inline;min-height:0}
  .site-footer .more-fa,.site-footer span:has(a[href^="mailto:"]){display:none}
}

/* Column groups on a record sheet (2026-11-14; records.js). A wide sheet shows one group of columns at a time, chosen
   above the table; ungrouped columns show in every view. In print each group is its own table. */
.sheet-view{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.8rem 0 .2rem}
.sheet-view .sv-label{font-size:.85rem;font-weight:600;color:var(--ink2);margin-right:.2rem}
.sheet-view button{min-height:44px;padding:0 .9rem;border:1px solid var(--edge);border-radius:var(--r);background:var(--card);color:var(--ink2);font-size:.9rem;font-weight:500;cursor:pointer}
.sheet-view button:hover{border-color:var(--accent);color:var(--ink)}
.sheet-view button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.tool.grouped[data-view="1"] [data-g]:not([data-g="1"]),.tool.grouped[data-view="2"] [data-g]:not([data-g="2"]),.tool.grouped[data-view="3"] [data-g]:not([data-g="3"]),
.tool.grouped[data-view="4"] [data-g]:not([data-g="4"]),.tool.grouped[data-view="5"] [data-g]:not([data-g="5"]),.tool.grouped[data-view="6"] [data-g]:not([data-g="6"]){display:none}
/* A grouped sheet is there to fit the screen: its headings wrap and its number fields are narrower. */
.tool.grouped th{white-space:normal;vertical-align:bottom}
.tool.grouped td.num input,.tool.grouped input[type=text],.tool.grouped select,.tool.grouped textarea{min-width:4.5rem}
.print-groups{display:none}
@media print{
  .sheet-view{display:none!important}
  .tool.grouped>.table-wrap{display:none!important}
  .print-groups{display:block}
  .print-groups .pg-title{font-size:10pt;font-weight:600;margin:5mm 0 1mm;break-after:avoid}
  .print-groups table{margin:0 0 3mm}
}