/* learn-template course shell. Palette tokens live in :root (light) and the two dark blocks; change those and nothing else. */
:root{
  --bg:#f4f5f6; --bg2:#ffffff; --ink:#251e1b; --ink2:#433a36; --muted:#655b56;
  --line:#d9dde1; --accent:#2b5d78; --accent2:#9dbbcc; --brass:#7a4a2b; --mauve:#7b4a68;
  --warn-bg:#f3eef1; --warn-line:#cdb6c3; --yw-bg:#e5edf2; --yw-line:#b5c9d6;
  --tip-bg:#eceff2; --card:#ffffff; --shadow:0 1px 2px rgba(37,30,27,.05),0 8px 24px rgba(37,30,27,.06);
  --radius:12px; --max:1180px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#1c1715; --bg2:#26201d; --ink:#efe8e1; --ink2:#d3c8bf; --muted:#a09389;
  --line:#3a312c; --accent:#86b8d4; --accent2:#3d6b86; --brass:#d5a88a; --mauve:#d4a8c4;
  --warn-bg:#2a2024; --warn-line:#5a4350; --yw-bg:#1b2a33; --yw-line:#35546a;
  --tip-bg:#2a2320; --card:#26201d; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}}
:root[data-theme="dark"]{
  --bg:#1c1715; --bg2:#26201d; --ink:#efe8e1; --ink2:#d3c8bf; --muted:#a09389;
  --line:#3a312c; --accent:#86b8d4; --accent2:#3d6b86; --brass:#d5a88a; --mauve:#d4a8c4;
  --warn-bg:#2a2024; --warn-line:#5a4350; --yw-bg:#1b2a33; --yw-line:#35546a;
  --tip-bg:#2a2320; --card:#26201d; --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
/* Reader text size (the nav's Text size control in site.js; course.json textScale sets the default step). Every rem and the
   body size scale from --text-scale, so no element carries its own per-step size. Step 0 is the shell's 17px body. */
:root{--text-scale:1}
:root[data-text="1"]{--text-scale:1.15}
:root[data-text="2"]{--text-scale:1.3}
html{scroll-behavior:smooth;font-size:calc(100% * var(--text-scale))}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:calc(17px * var(--text-scale));line-height:1.6}
h1,h2,h3{overflow-wrap:break-word}
h1,h2,h3,h4{font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-weight:600;line-height:1.15;margin:0 0 .5rem;color:var(--ink)}
h1{font-size:2.6rem;letter-spacing:-.01em}
h2{font-size:1.9rem;margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}
h2:first-of-type{border-top:0;margin-top:1rem}
h3{font-size:1.35rem;margin-top:1.8rem}
h4{font-size:1.1rem;margin-top:1.2rem;font-family:"Inter",system-ui,sans-serif;font-weight:600;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
p{margin:.6rem 0 1rem}
a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--brass)}
ul,ol{padding-left:1.35rem;margin:.4rem 0 1rem}
li{margin:.3rem 0}
li::marker{color:var(--accent)}
strong{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{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:600;margin-bottom:.4rem}
.lede{font-size:1.2rem;color:var(--ink2);max-width:62ch;margin-bottom:1.5rem}
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);min-height:100vh}
nav.side{background:#FFFFFF;border-right:1px solid var(--line);padding:1.4rem 1.1rem 2rem;position:sticky;top:0;height:100vh;overflow-y:auto}
nav.side .brand{font-family:"Cormorant Garamond",serif;font-size:1.35rem;font-weight:600;line-height:1.2;margin-bottom:.2rem;color:var(--ink);text-decoration:none;display:block}
nav.side .brand small{display:block;font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin-top:.3rem}
nav.side .group{margin-top:1.2rem}
nav.side .group h5{font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 .4rem .4rem}
nav.side a.item{display:flex;gap:.55rem;align-items:flex-start;padding:.42rem .5rem;border-radius:8px;color:var(--ink2);text-decoration:none;font-size:.9rem;line-height:1.3}
nav.side a.item:hover{background:var(--tip-bg);color:var(--ink)}
nav.side a.item.active{background:var(--yw-bg);color:var(--ink);font-weight:600}
nav.side a.item .n{font-family:"Cormorant Garamond",serif;font-weight:700;color:var(--brass);min-width:1.3rem;font-size:1rem}
nav.side a.item .done{margin-left:auto;color:var(--accent);font-size:.8rem}
nav.side .textsize{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin:1rem 0 0}
nav.side .ts-label{flex-basis:100%;font-size:.82rem;font-weight:600;color:var(--ink2)}
nav.side .textsize button{font:inherit;font-weight:600;line-height:1;min-width:44px;min-height:44px;padding:0 .5rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink2);cursor:pointer}
nav.side .textsize button[data-step="0"]{font-size:.85rem}
nav.side .textsize button[data-step="1"]{font-size:1rem}
nav.side .textsize button[data-step="2"]{font-size:1.15rem}
nav.side .textsize button:hover{border-color:var(--accent);color:var(--ink)}
nav.side .textsize button[aria-pressed="true"]{background:var(--yw-bg);border-color:var(--accent);color:var(--ink);box-shadow:inset 0 -3px 0 var(--accent)}
nav.side .progress{margin-top:1.4rem;padding:.8rem;border:1px solid var(--line);border-radius:10px;background:var(--card);font-size:.8rem;color:var(--ink2)}   /* the setup panel personalize.js adds to the menu */
nav.side a.item.chapter{padding-left:.6rem}
.topbar{display:none}
main{padding:2.2rem 3rem 5rem;max-width:var(--max)}
main > .content{max-width:78ch}
.wide{max-width:none}
.hero{padding:1rem 0 1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.3rem;box-shadow:var(--shadow);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:"Cormorant Garamond",serif;font-size:1.6rem;color:var(--brass);font-weight:700}
.card p{font-size:.95rem;color:var(--ink2);margin-bottom:.6rem}
.callout{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--tip-bg);padding:.9rem 1.1rem;border-radius:0 10px 10px 0;margin:1.2rem 0;font-size:.97rem}
.callout.warn{border-left-color:var(--mauve);background:var(--warn-bg);border-color:var(--warn-line)}
.callout.yw{border-left-color:var(--accent);background:var(--yw-bg);border-color:var(--yw-line)}
.callout .tag{display:inline-block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--accent);margin-bottom:.3rem}
.callout.warn .tag{color:var(--mauve)}
.callout.fiction{border-left-color:var(--brass);background:var(--tip-bg)}
.callout.fiction .tag{color:var(--brass)}
.callout.boundary{border-left-color:#8c3b3b;background:#f8efef;border-color:#e3c4c4}
.callout.boundary .tag{color:#8c3b3b}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .callout.boundary{background:#2d1f1f;border-color:#5a3a3a}:root:not([data-theme="light"]) .callout.boundary .tag{color:#e39a9a}}
:root[data-theme="dark"] .callout.boundary{background:#2d1f1f;border-color:#5a3a3a}:root[data-theme="dark"] .callout.boundary .tag{color:#e39a9a}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}
.steps{counter-reset:step;list-style:none;padding-left:0}
.steps>li{counter-increment:step;position:relative;padding-left:2.6rem;margin:.8rem 0}
.steps>li::before{content:counter(step);position:absolute;left:0;top:.05rem;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--brass);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-family:"Inter",sans-serif}
.steps>li strong:first-child{display:block;margin-bottom:.15rem}
table{width:100%;border-collapse:collapse;font-size:.92rem;margin:1rem 0 1.5rem;background:var(--card)}
th,td{padding:.55rem .7rem;border:1px solid var(--line);text-align:left;vertical-align:top}
th{background:var(--tip-bg);font-weight:600;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink2)}
tr:nth-child(even) td{background:color-mix(in srgb,var(--card) 92%,var(--line))}
.table-wrap{position:relative;overflow-x:auto;margin:1rem 0 1.5rem;border-radius:10px;border:1px solid var(--line)}
.table-wrap table{margin:0;border:0}
.pill{display:inline-block;padding:.12em .6em;border-radius:999px;font-size:.74rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.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:#fff;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:not([data-theme="light"]) .pill.test{color:#161b24}}
: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}:root[data-theme="dark"] .pill.test{color:#161b24}
.check{list-style:none;padding-left:0}
.check li{display:flex;gap:.6rem;align-items:flex-start;padding:.35rem 0;border-bottom:1px dashed var(--line)}
.check li input{margin-top:.35rem;accent-color:var(--accent);width:1.05rem;height:1.05rem;flex:none}
.check li label{cursor:pointer}
.check li.done label{color:var(--muted);text-decoration:line-through}
.lesson-complete{margin-top:2.5rem;padding:1rem 1.2rem;border:1px dashed var(--mauve);border-radius:10px;display:flex;align-items:center;gap:.8rem;background:var(--yw-bg)}
.lesson-complete input{width:1.3rem;height:1.3rem;accent-color:var(--accent)}
.lesson-complete label{font-weight:600;cursor:pointer}
/* Related (site.js): the foot of a chapter lists the chapters it assumes and the pages worth reading next, as a labeled list */
.related{margin-top:2.5rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:.95rem}
.related[hidden]{display:none}
.related .label{font-family:"Inter",sans-serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:0 0 .4rem}
.related .before{margin:0 0 1rem;color:var(--ink2)}
.related .before b{font-weight:600;color:var(--ink)}
.related ul{list-style:none;padding:0;margin:0}
.related li{margin:0;padding:.45rem 0;border-top:1px solid var(--line)}
.related li:last-child{border-bottom:1px solid var(--line)}
.related a{text-decoration:none}
.related a:hover{text-decoration:underline}
/* Home page: Find what you need and the Contents, grouped by section, with hairline rules and no cards or numbers */
.entries{margin:1rem 0 1.5rem}
.entries dt{font-weight:600;margin-top:.9rem;padding-top:.7rem;border-top:1px solid var(--line)}
.entries dt:first-child{margin-top:0}
.entries dd{margin:.25rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.95rem}
.contents h3{font-family:"Inter",sans-serif;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin:1.6rem 0 .3rem}
.contents h3:first-child{margin-top:.8rem}
.contents ul{list-style:none;padding:0;margin:0}
.contents li{margin:0;padding:.6rem 0;border-top:1px solid var(--line)}
.contents li:last-child{border-bottom:1px solid var(--line)}
.contents li a{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--ink)}
.contents li a:hover{color:var(--accent)}
.contents li span{display:block;font-size:.92rem;color:var(--ink2);margin-top:.1rem}
.toc{font-size:.92rem;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.9rem 1.2rem;margin:1.2rem 0 1.6rem}
.toc ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:2rem}
.toc li{break-inside:avoid}
.toc a{text-decoration:none}
.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:"Cormorant Garamond",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:#fff;border-color:var(--accent)}
.calc{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:.8rem;margin:1rem 0}
.calc label:has(textarea){grid-column:1/-1}
.calc label{display:flex;flex-direction:column;font-size:.85rem;color:var(--ink2);gap:.25rem}
.calc input,.calc select,.calc textarea{padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink);font:inherit;font-size:1rem}
.result{background:var(--yw-bg);border:1px solid var(--yw-line);border-radius:10px;padding:1rem 1.2rem}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;font-size:.95rem}
.kv b{color:var(--ink2);font-weight:600}
.small{font-size:.85rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
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}
.theme-toggle{position:fixed;right:14px;bottom:14px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;font-size:.8rem;cursor:pointer;color:var(--ink2);box-shadow:var(--shadow)}
.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}
/* Chapter parts (Understand, See it, Practice, Your X, Check your work) */
.part{display:inline-block;font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--brass);border:1px solid var(--line);border-radius:999px;padding:.15rem .6rem;margin-bottom:.4rem;background:var(--card)}
h2 .part{vertical-align:middle;margin-left:.5rem;margin-bottom:0}
/* Knowledge check and branching scenario */
.quiz{border:1px solid var(--line);border-radius:10px;background:var(--card);padding:.2rem 1rem;margin:1.2rem 0}
.quiz details{border-bottom:1px dashed var(--line);padding:.6rem 0}
.quiz details:last-child{border-bottom:0}
.quiz summary{cursor:pointer;font-weight:600;color:var(--ink)}
.quiz summary::marker{color:var(--accent)}
.quiz .a{margin:.5rem 0 .2rem 1rem;font-size:.95rem;color:var(--ink2)}
.scenario{border:1px solid var(--yw-line);border-radius:10px;background:var(--card);padding:1rem 1.2rem;margin:1.2rem 0}
.scenario .q{font-weight:600;margin-bottom:.6rem}
.scenario .opts{display:flex;flex-direction:column;gap:.45rem}
.scenario button{text-align:left;font:inherit;font-size:.95rem;padding:.55rem .8rem;border:1px solid var(--line);border-radius:8px;background:var(--bg2);color:var(--ink);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:.8rem;padding:.7rem .9rem;border-radius:8px;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)}
/* 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:"Cormorant Garamond",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 */
.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-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{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}
}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} nav.side{transition:none} }
@media (max-width: 900px){
  .layout{grid-template-columns:minmax(0,1fr)}  /* minmax(0,…) so a wide sheet scrolls inside .table-wrap instead of widening the page */
  nav.side{position:fixed;left:0;top:0;width:min(86vw,320px);transform:translateX(-105%);transition:transform .25s;z-index:50;box-shadow:var(--shadow)}
  nav.side.open{transform:none}
  .topbar{display:flex;align-items:center;gap:.8rem;padding:.7rem 16px;background:var(--bg2);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
  .topbar button{font:inherit;font-size:.9rem;padding:.4rem .7rem;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink)}
  .topbar .t{font-family:"Cormorant Garamond",serif;font-weight:600;font-size:1.1rem}
  main{padding:1.4rem 16px 4rem}
  h1{font-size:2rem}
  .toc ol{columns:1}
  .two{grid-template-columns:1fr}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:45;display:none}.scrim.on{display:block}
}
@media print{
  nav.side,.topbar,.theme-toggle,.related,.lesson-complete,.print-btn,.filter{display:none!important}
  html{font-size:100%}  /* print keeps its own sizes whatever the reader's text-size step */
  .layout{display:block}main{padding:0;max-width:none}body{background:#fff;color:#000;font-size:11pt}
  .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}
}

/* Accessibility & footer */
.skip{position:absolute;left:-999px;top:8px;background:#1f2a3c;color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:100;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,[tabindex]:focus-visible{outline:3px solid var(--brass);outline-offset:2px}
main:focus{outline:none}
/* 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. */
nav.side a.item{min-height:44px;align-items:center;padding-top:.3rem;padding-bottom:.3rem}
.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)}
@media print{.site-footer{display:block}}

/* Home page hero illustration */
.hero-img{display:block;margin:1.4rem 0 1.4rem}
.hero-img img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:50% 38%;border-radius:var(--radius);box-shadow:var(--shadow);background:var(--tip-bg)}
@media (max-width:900px){.hero-img img{aspect-ratio:3/2;object-position:50% 50%}}
@media print{.hero-img{display:none}}

/* 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:#fff;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}}

/* Essentials and optional depth */
.essentials{border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:.4rem 1.2rem 1rem;margin:1.6rem 0;background:var(--card)}
.essentials h2{margin-top:.8rem}
.deeper{border-left:3px dashed var(--line);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0}
.deeper>.tag,.part.deeper{font-family:"Inter",sans-serif;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.part.deeper{border-style:dashed}
ul.check li.optional label{color:var(--muted)}
ol.steps>li.optional::before{background:var(--muted)}
.deeper>.tag{display:block;margin-bottom:.3rem}
.essentials-toggle{font:inherit;font-size:.85rem;border:1px solid var(--line);background:var(--card);color:inherit;border-radius:999px;padding:.3rem .9rem;cursor:pointer;margin:.2rem 0 1rem}
.essentials-toggle[aria-pressed="true"]{border-color:var(--accent)}
html.essentials-only .deeper,html.essentials-only li.optional{display:none}
@media print{html.essentials-only .deeper,html.essentials-only li.optional{display:revert}.essentials-toggle{display:none}}

/* Dated tables: the row that matches today, and a blank column to write in */
tr.now td{background:var(--yw-bg)}
td.vetdate{min-width:7rem;border-bottom:1px solid var(--line)}