/* thedeckprofessor.com. the lessons: lesson pages, the course map, subject pages, and the "Try it" strip
   on answer pages. Loaded after site.css and uses only its tokens. The drawing rules for lesson-draw.js
   are written by tools/build_lessons.py into lessons/draw.css from the same source the drawings use, so
   the two can never disagree. */

/* ---------- drawing materials, light and dark ---------- */
:root{
  --ld-wood:#dcc59b; --ld-wood2:#c9ad7c; --ld-conc:#c9c6bf; --ld-metal:#7d8488; --ld-brick:#b9765b;
  --ld-soil:#ece5d6; --ld-back:#d9ccb2; --ld-frost:#cfe3f2; --ld-frostln:#3f7fa6; --ld-water:#2f76a8;
  --ld-rot:#5b3b22; --ld-rust:#9c4a1c; --ld-alu:#a9b3b8; --ld-glass:#dbe9ef;
  --ld-light:#ffd86b; --ld-shade:#1a2128; --ld-grass:#e4ecd8; --ld-street:#d6d3cc;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ld-wood:#8f7650; --ld-wood2:#6f5b3e; --ld-conc:#6c6a66; --ld-metal:#9aa3a8; --ld-brick:#8c5641;
    --ld-soil:#2a2723; --ld-back:#3a3228; --ld-frost:#23394a; --ld-frostln:#7fb6da; --ld-water:#6fb1e0;
    --ld-rot:#c79a6d; --ld-rust:#e0915f; --ld-alu:#c3ccd0; --ld-glass:#2c4450;
    --ld-light:#b8962e; --ld-shade:#000000; --ld-grass:#223024; --ld-street:#34322e;
  }
}
:root[data-theme="dark"]{
  --ld-wood:#8f7650; --ld-wood2:#6f5b3e; --ld-conc:#6c6a66; --ld-metal:#9aa3a8; --ld-brick:#8c5641;
  --ld-soil:#2a2723; --ld-back:#3a3228; --ld-frost:#23394a; --ld-frostln:#7fb6da; --ld-water:#6fb1e0;
  --ld-rot:#c79a6d; --ld-rust:#e0915f; --ld-alu:#c3ccd0; --ld-glass:#2c4450;
  --ld-light:#b8962e; --ld-shade:#000000; --ld-grass:#223024; --ld-street:#34322e;
}

.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- lesson page ---------- */
.lesson-page{padding-block:var(--s8) var(--s16)}
.lesson-page h1{max-width:24ch}
.lesson-page .lede{margin-bottom:var(--s5)}
/* the mode is what the learner does, written as words, not a capitalised tag */
.eyebrow.lesson-mode{text-transform:none;letter-spacing:0;font-size:14px}
.lesson-fig{margin-top:var(--s5)}
.lesson-fig .demo-head b{font-size:17px}
.lesson-fig .demo-head .hint{font-weight:600;color:var(--accent-ink)}
.lesson-fig.ld .demo-stage,.lesson-fig.ld .demo-stage .frame{background:var(--card)}
.lesson-fig .frame .static>svg,.lesson-fig .frame .live>svg{display:block;width:100%;height:100%}
/* on a phone the lesson draws on a squarer canvas with larger words, and the frame follows it */
.lesson-fig.ld.narrow .demo-stage .frame{aspect-ratio:480/400}
.lesson-fig .ldsvg text{user-select:none}
.lesson-fig.predicting .facts{display:none}
/* while a question waits, the switches that change the deck wait out of sight, with their labels and help */
.lesson-fig [data-ctl].waiting{display:none !important}
.lesson-fig .demo-foot{color:var(--muted)}
.lesson-fig .facts .v{white-space:normal}

.lesson-deck{margin:0 0 var(--s4);font-size:14px}
.lesson-deckline{margin:0 0 var(--s2);color:var(--muted);line-height:1.45}
.lesson-deckline b{color:var(--ink)}
details.lesson-pick>summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--accent-ink);padding:4px 0}
.dp-starters{display:grid;gap:6px;margin:var(--s2) 0 0}
.dp-starters-label{margin:0;font-size:12.5px;color:var(--muted)}
.dp-starter{font:inherit;text-align:left;display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:var(--r-md);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.dp-starter b{font-size:14px}
.dp-starter span{font-size:12.5px;color:var(--muted)}
.dp-starter:hover{border-color:var(--ink)}
.dp-starter[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}

/* the hint: closed until the learner asks for it */
details.lesson-hint{margin:0 0 var(--s4);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:6px 12px}
details.lesson-hint>summary{cursor:pointer;font-size:14px;font-weight:700;color:var(--accent-ink);padding:4px 0}
details.lesson-hint p{margin:var(--s2) 0 var(--s1);font-size:14.5px;line-height:1.45}
details.lesson-hint[open]{border-style:solid;border-color:var(--warn-line);background:var(--warn-soft)}

/* the rule the lesson teaches: closed until the deck is put right, or until the learner opens it */
details.lesson-rule{margin:var(--s6) 0 0;max-width:72ch;border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s5)}
details.lesson-rule>summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--accent-ink)}
details.lesson-rule p{margin:var(--s2) 0 0;font-size:16.5px;line-height:1.55}
details.lesson-rule[open]{border-color:var(--accent);background:var(--accent-soft)}

.lesson-tools{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s3)}
.lesson-tools:empty{display:none}
.btn.lesson-btn{font-size:13.5px;padding:7px 14px}

.lesson-predict{border:1.5px solid var(--accent);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:0 0 var(--s4);background:var(--accent-soft)}
.lesson-q{margin:0 0 var(--s3);font-weight:700;font-size:15.5px;line-height:1.4}
.lesson-predict .seg button:disabled{cursor:default;opacity:.65}
.lesson-predict .seg button[aria-pressed="true"]:disabled{opacity:1}
.lesson-a{margin:var(--s3) 0 0;font-size:14.5px;line-height:1.45}
.lesson-a.right b{color:var(--accent-ink)}
.lesson-a.wrong b{color:var(--warn)}
.lesson-predict .lesson-btn{margin-top:var(--s3)}

.lesson-under{padding:0}
.lesson-under:empty{display:none}
.lesson-underview svg{display:block;width:100%;height:auto;margin-top:var(--s3);border-radius:var(--r-md)}
.lesson-underview .lesson-table{margin:var(--s3) 0 0}
.lesson-underhint{margin:var(--s3) 0 0;font-size:14px;color:var(--muted)}
.lesson-parts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s3)}
.lesson-parts:empty{display:none}
.lesson-partslabel{flex-basis:100%;margin:0;font-size:13px;font-weight:700;color:var(--muted)}
.lesson-part{font:inherit;font-size:13px;padding:5px 11px;border-radius:var(--r-pill);border:1.5px solid var(--line-strong);background:var(--card);color:var(--ink);cursor:pointer}
.lesson-part:hover{border-color:var(--ink)}
/* the drawing is the control; the same parts in words wait folded behind one disclosure, grouped with counts */
details.lesson-partlist{flex-basis:100%}
details.lesson-partlist>summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--accent-ink);padding:4px 0}
.lesson-partgroup{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:var(--s2)}
/* the rule set picked, and whether it changes this lesson */
.lesson-basis{margin:0 0 var(--s3);font-size:13.5px;color:var(--muted);line-height:1.45}
.lesson-whole{margin-top:var(--s3);background:#f7f6f2;border-radius:var(--r-md);overflow:hidden}
.lesson-whole svg{display:block;width:100%;height:auto}

.lesson-seq ol.seq{list-style:none;counter-reset:st;padding:0;margin:0 0 var(--s4);display:grid;gap:5px}
.lesson-seq li{counter-increment:st;display:flex;gap:6px;align-items:stretch}
.lesson-seq li .pick{flex:1 1 auto;min-width:0;font:inherit;font-size:14px;text-align:left;padding:7px 10px 7px 34px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;position:relative}
.lesson-seq li .pick::before{content:counter(st);position:absolute;left:10px;top:7px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.lesson-seq li.sel .pick{border-color:var(--accent);background:var(--accent-soft)}
.lesson-seq li.bad .pick{border-color:var(--warn-line);background:var(--warn-soft)}
.lesson-seq li .up,.lesson-seq li .down{font:inherit;font-size:12.5px;padding:0 9px;border-radius:var(--r-sm);border:1.5px solid var(--line-strong);background:transparent;color:var(--ink);cursor:pointer}
.lesson-seq li button:disabled{opacity:.35;cursor:default}

.lesson-nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s3);margin:var(--s8) 0 0;padding-top:var(--s5);border-top:1px solid var(--line)}
.lesson-nav a{text-decoration:none;font-weight:600;font-size:15px;max-width:48%}
.lesson-nav a.next{margin-left:auto;text-align:right}
@media (max-width:600px){.lesson-nav a{max-width:100%}.lesson-nav a.next{text-align:left;margin-left:0}}

.lesson-more{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);margin-top:var(--s8)}
.lesson-more:empty{display:none}
@media (max-width:820px){.lesson-more{grid-template-columns:1fr}}
.lesson-more h3{font-size:13px;font-family:var(--f-body);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2)}
.lesson-more ul{list-style:none;padding:0;margin:0;font-size:14.5px}
.lesson-more li{margin-bottom:6px}

/* ---------- course map and subject pages: every lesson with its own drawing ---------- */
.lesson-cat{margin-top:var(--s10)}
.lesson-cat h2{margin:0 0 var(--s1);font-size:clamp(22px,3vw,28px)}
.lesson-cat h2 a{color:var(--ink);text-decoration:none}
.lesson-cat h2 a:hover{color:var(--accent-ink)}
.lesson-grid{list-style:none;padding:0;margin:var(--s4) 0 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:var(--s4)}
.lesson-grid li{margin:0;max-width:none}
.lcard a{display:flex;flex-direction:column;gap:4px;height:100%;padding:0 0 var(--s3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--card);text-decoration:none;color:inherit;overflow:hidden}
.lcard a:hover,.lcard a:focus-visible{border-color:var(--accent)}
.lcard a:hover .ltitle{color:var(--accent-ink);text-decoration:underline}
.lcard .lthumb{display:block;aspect-ratio:800/520;background:#fff;border-bottom:1px solid var(--line)}
.lcard .lthumb img{display:block;width:100%;height:100%;object-fit:contain}
.lcard .ltitle{font-weight:700;font-size:16px;line-height:1.3;padding:var(--s2) var(--s3) 0}
.lcard .lmode{font-size:13px;font-weight:700;color:var(--accent-ink);padding:0 var(--s3)}
.lcard .ltask{font-size:14px;line-height:1.4;color:var(--muted);padding:0 var(--s3)}
.lcard .lstate{font-size:12.5px;font-weight:700;color:var(--accent-ink);padding:0 var(--s3)}
.lcard .lstate:empty{display:none}
@media (max-width:520px){
  .lesson-grid{grid-template-columns:1fr 1fr;gap:10px}
  .lcard .ltitle{font-size:14.5px;padding:6px 8px 0}
  .lcard .lmode,.lcard .lstate{padding:0 8px;font-size:12.5px}
  .lcard .ltask{display:none}
}
.lcard.done a{border-color:var(--accent)}
.lcard.done .ltitle::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-right:8px;vertical-align:middle}
.lcard.started .ltitle::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;border:2px solid var(--accent);margin-right:8px;vertical-align:middle;box-sizing:border-box}
.lesson-continue{margin:0 0 var(--s3)}

/* ---------- "Try it" on answer pages ---------- */
.tryit{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);margin:0 0 var(--s8);background:var(--card)}
.tryit .h{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:var(--s2)}
.tryit ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tryit li{margin:0;max-width:none}
.tryit a{display:inline-flex;gap:8px;align-items:baseline;padding:5px 12px;border:1.5px solid var(--line-strong);border-radius:var(--r-pill);text-decoration:none;color:var(--ink);font-size:14px;font-weight:600}
.tryit a:hover{border-color:var(--accent);color:var(--accent-ink)}
.tryit .mode{font-size:12.5px;font-weight:600;color:var(--muted)}

/* ---------- a focused drawing as a line sketch (the Drawing switch on an answer page) ----------
   The same drawing in lines on the page colour; the part being taught and anything wrong keep their colour. */
.ldsvg.ld-sketch .bg,.ldsvg.ld-sketch .soil,.ldsvg.ld-sketch .back,.ldsvg.ld-sketch .frozen,.ldsvg.ld-sketch .zone{fill:var(--card,#fff)}
.ldsvg.ld-sketch .m:not(.focus):not(.bad) .s{fill:var(--card,#fff);stroke:var(--ink,#1a2128)}
.ldsvg.ld-sketch .m:not(.focus):not(.bad) .ln,.ldsvg.ld-sketch .gradeln,.ldsvg.ld-sketch .dim{stroke:var(--ink,#1a2128)}
.ldsvg.ld-sketch .m:not(.focus):not(.bad) .lbl,.ldsvg.ld-sketch .dimt{fill:var(--ink,#1a2128)}
/* TDP-28 (lane p28): the lessons draw a line sketch too; the yard, the street and the lit and shaded areas lose
   their colour with the rest, so the whole picture reads as lines */
.ldsvg.ld-sketch .grass,.ldsvg.ld-sketch .street,.ldsvg.ld-sketch .light{fill:var(--card,#fff)}
.ldsvg.ld-sketch .shade{fill:var(--ink,#1a2128);opacity:.12}
.ldsvg.ld-sketch .m:not(.focus):not(.bad) .glass{fill:var(--card,#fff);stroke:var(--ink,#1a2128)}
/* TDP-28 fix round 1 (SF2): the part being taught is drawn in lines too, hatched inside a heavy outline in its own
   colour, so a drawing that is all highlighted part (the handrail profile) still changes when Line sketch is picked */
.ldsvg.ld-sketch .m.focus .s,.ldsvg.ld-sketch .m.focus .glass{fill:url(#ldhatch);fill-opacity:1;stroke:var(--accent,#14604a);stroke-width:2.4}

/* ---------- TDP-28 (lane p28): the drawing stays in view while its controls are used (DI-X3) ----------
   On a wide screen the drawing's frame sticks under the header while the switches beside it scroll. On a phone
   the drawing is a band across the top of the window, about a third of it, and the switches scroll under it
   (the pattern the other deck sites use); the second drawing and the parts list follow the switches. The figure
   clips its corners without becoming a scroll box: overflow hidden would stop anything inside it sticking. */
.demo.lesson-fig{overflow:visible;overflow:clip}
@media (min-width:821px){
  .lesson-fig .demo-stage .frame{position:sticky;top:78px;z-index:2}
}
/* TDP-28 fix round 1 (SF6): on a wide window the lesson figure takes the width the window has, up to 1760 px,
   instead of the text column's 1092 px, so the drawing grows and the switches beside it wrap into fewer lines; the
   drawing's column then holds more of what runs beside it (DI-X3, DI-X4). The frame still fits under the header. */
@media (min-width:1200px){
  .lesson-page .lesson-fig{width:min(1760px,calc(100vw - 96px));margin-left:calc((100% - min(1760px,calc(100vw - 96px))) / 2);margin-right:calc((100% - min(1760px,calc(100vw - 96px))) / 2)}
}
/* TDP-28 fix round 2 (R2-SF1): on a wide screen the frame is no taller than the room lesson.js measures between its
   place on the page and the bottom of the window (--first-screen), so the whole drawing shows on arrival; it keeps
   its proportions, is centred in its column, and is never narrower than 560 px, where the phone canvas would take
   over. Without the measure (scripting off) it is as wide as its column. From the same width the title takes the
   column's width, so a long one keeps to one line and the drawing starts at the same height on every lesson (on a
   1024 px window the frame is already at its narrowest, so the title's second line is what the first screen lacks). */
@media (min-width:821px){
  .lesson-page h1{max-width:none}
  .lesson-fig .demo-stage .frame{width:min(100%,max(560px,calc(var(--first-screen,9999px) * 800 / 520)));margin-inline:auto}
}
@media (max-width:820px){
  .lesson-fig .demo-body{display:flex;flex-direction:column;align-items:stretch}
  .lesson-fig .demo-stage{display:contents}
  .lesson-fig .demo-stage .frame{flex:none;position:sticky;top:60px;z-index:3;border-radius:0;max-height:42vh;background:#f7f6f2;border-bottom:1px solid var(--line);box-shadow:0 6px 10px -8px rgba(26,33,40,.25)}
  .lesson-fig.ld .demo-stage .frame{background:var(--card)}
  .lesson-fig .demo-side{order:1}
  .lesson-fig .lesson-under{order:2;padding:0 var(--s4) var(--s4)}
  .lesson-fig .lesson-under:empty{display:none}
}

@media print{
  .lesson-tools,.lesson-parts,.lesson-predict .seg,.lesson-nav,.lesson-seq .up,.lesson-seq .down,.tryit,details.lesson-pick{display:none !important}
  .lesson-fig.ld .demo-stage,.lesson-fig.ld .demo-stage .frame{background:#fff}
  /* the working estimate line under the drawing prints with it */
  .lesson-fig .demo-foot{display:flex !important;background:#fff;color:#000}
  .lesson-fig .demo-foot .nojs{display:none}
  details.lesson-hint,details.lesson-rule{border-color:#999;background:#fff}
}