/* The whiteboard, new courses only. Same class names the player writes (lesson.js buildPage, lesson-ext.js); the second half clears what the older board rules in lesson.html would leave behind. */
.board{position:relative;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden;background:var(--paper);border:1px solid var(--paper-line);border-radius:var(--r-board);box-shadow:0 1px 2px rgba(28,36,48,.05);color:var(--pen-ink);font-family:var(--font-hand)}
.sheet{overflow-anchor:none;flex:1;min-width:0;overflow:hidden auto;padding:0 clamp(14px,3vw,36px) 28px;font-size:var(--fs,var(--board-fs));line-height:var(--board-lh);
 background-image:radial-gradient(circle at 1.2px 1.2px,var(--paper-dot) 1.1px,transparent 1.5px);background-size:22px 22px;background-attachment:local;scrollbar-width:thin;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.sheet:focus-visible{outline:3px solid var(--pen-accent);outline-offset:-3px;border-radius:var(--r-board)}
.sheet.turn{animation:sheetin var(--dur-page) ease-out}
@keyframes sheetin{from{opacity:0}to{opacity:1}}
.sheet>:first-child{margin-top:14px}
.sheet>.k-head:first-child{margin-top:0}

/* every item */
.item{position:relative;margin:0 0 .36em}
.wc{display:inline-block;white-space:nowrap}
/* a letter fades in, 90 ms. The clock is untouched */
.c{opacity:0;position:relative;transition:opacity var(--dur-ink) linear}.c.on{opacity:1}
.c.cur::after{content:"";position:absolute;left:100%;bottom:.14em;width:.2em;height:.2em;margin-left:.06em;border-radius:50%;background:var(--pen-accent);opacity:.75}
.mk{position:relative}
.mk .fx{position:absolute;overflow:visible;pointer-events:none;visibility:hidden}
.fx path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}

/* heading: course pen, a highlighter band that draws under it, and it stays in view while the board scrolls */
.k-head{position:sticky;top:0;z-index:3;margin:0 calc(-1*clamp(14px,3vw,36px)) .42em;padding:.42em clamp(14px,3vw,36px) .2em;background:var(--paper);color:var(--pen-accent);font-size:var(--board-head)em;font-size:calc(var(--board-head)*1em);line-height:1.15}
.k-head::after{content:"";display:block;height:.17em;margin-top:.12em;border-radius:99px;background:var(--c-hl);transform-origin:0 50%;transform:scaleX(var(--p,0))}
[data-theme=dark] .k-head::after{filter:saturate(1.2) brightness(.92)}
/* citation or small note */
.k-sub{font:500 max(13.5px,.62em)/1.4 var(--font-ui);color:var(--pen-mute);margin:.1em 0 .55em}
/* plain points */
.k-pt,.k-wrong,.k-right{padding-left:1.05em}
.k-pt.started::before{content:"";position:absolute;left:.22em;top:.52em;width:.34em;height:.34em;border-radius:50%;background:var(--pen-accent)}
.k-given{padding-left:0}
.k-opt{font-size:1.08em}
.k-bar{font:500 max(14px,.66em)/1.25 var(--font-ui)}
/* working: typed figures, so a 3 is never read as an 8 */
.k-form{font:600 .76em/1.4 var(--font-ui);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em;padding-left:.7em;box-shadow:none}
.k-form.started{box-shadow:inset 3px 0 0 var(--c-hl)}
/* the line to take away */
.k-res{width:fit-content;max-width:100%;font:700 .8em/1.35 var(--font-ui);font-variant-numeric:tabular-nums lining-nums;padding:.26em .62em;margin:.1em 0 .5em;border-radius:8px}
.k-res.started{background:var(--c-hl);color:#14202e}
/* wrong and right. Red means wrong and nothing else */
.k-wrong{color:var(--pen-ink)}
.k-right{color:var(--pen-right)}
.k-wrong.started::before,.k-right.started::before{position:absolute;left:.08em;top:.1em;font:800 .78em/1.4 var(--font-ui)}
.k-wrong.started::before{content:"\2715";color:var(--pen-wrong)}
.k-right.started::before{content:"\2713"}

/* marks: [[num:]] ring, [[term:]] highlighter, [[bad:]] strike */
.m-circle{font-family:var(--font-ui);font-weight:700;font-size:.78em;font-variant-numeric:tabular-nums lining-nums;margin:0 .42em}
.k-form .m-circle,.k-res .m-circle,.cell .m-circle,.k-sub .m-circle,.k-bar .m-circle{font-size:1em}
.m-circle path{stroke:var(--pen-accent);stroke-width:2.2}
.m-under{margin:0}.m-under .wc{background:linear-gradient(var(--pen-accent),var(--pen-accent)) 0 100%/calc(var(--m,0)*100%) 2px no-repeat}
.m-hl{background:linear-gradient(transparent 10%,var(--c-hl) 10% 92%,transparent 92%) 0 0/calc(var(--m,0)*100%) 100% no-repeat;padding:0 .12em;margin:0 -.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.m-strike{background:linear-gradient(var(--pen-wrong),var(--pen-wrong)) 0 58%/calc(var(--m,0)*100%) 2px no-repeat}
.col-blu{color:var(--pen-accent)}.col-red{color:var(--pen-wrong)}.col-grn{color:var(--pen-right)}
.arrow{position:relative;height:22px;width:22px;margin:-.1em 0 .1em .92em}
.arrow .fx{position:absolute;inset:0;width:100%;height:100%;visibility:hidden}
.arrow path{stroke:var(--pen-right);stroke-width:2.4}

/* tables: typed, left aligned, ruled line by line as they are written */
.tbl{position:relative;margin:.15em 0 .55em;font:500 .72em/1.3 var(--font-ui);font-variant-numeric:tabular-nums lining-nums;min-width:0}
.tbl .item{margin:0}
/* a table is a table when its group name is also a class on the page (num, dl, lb, bs, cp: QA final7 H1) */
.sheet .tbl{width:auto;height:auto;max-width:none;border-radius:0;grid-row:auto;place-items:normal;align-items:normal;justify-content:normal;flex-wrap:nowrap;row-gap:normal}
.sheet .tbl:not(.ncol){column-gap:normal}
.sheet .tbl .wc,.sheet .tbl .wc span,.sheet .tbl .rule{font-weight:inherit;font-variant-numeric:inherit}
.sheet .tbl .m-circle{font-weight:700;font-variant-numeric:tabular-nums lining-nums}
.k-row,.k-hrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:.7em;align-items:center;padding:.42em .5em}
.k-hrow{color:var(--pen-accent);font-weight:700;font-size:.92em}
.k-hrow.started{background:color-mix(in srgb,var(--c-hl) 42%,transparent);border-radius:7px 7px 0 0}
.k-row .cell.c0{font-weight:600}
.cell{min-width:0;overflow-wrap:anywhere}
.tbl.ncol{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,auto));column-gap:0}
.tbl.ncol>.item{grid-column:1/-1}
.tbl.ncol>.k-row,.tbl.ncol>.k-hrow{grid-template-columns:subgrid;column-gap:normal}
.tbl.ncol .cell{padding-right:.6em}
/* a table too wide for this screen even at its smallest type: each row a block, each value with its column's name */
.tbl.x-stack{display:block}.tbl.x-stack .k-hrow{display:none}
.tbl.x-stack>.k-row{display:block;padding:.5em .5em}
.tbl.x-stack .cell{display:block;padding:0;overflow-wrap:break-word}
.tbl.x-stack .cell .wc{white-space:normal}
.tbl.x-stack .cell[data-h]::before{content:attr(data-h) ": ";color:var(--pen-mute);font-weight:500}
/* a column's name appears with its row, not before the narrator reaches the table (QA 2026-11-01 M2: "About:" x5 from second 0) */
.tbl.x-stack>.k-row:not(.started) .cell[data-h]::before{visibility:hidden}
.rule{position:absolute;left:0;right:0;bottom:0;height:0;border-bottom:1px solid var(--pen-fig);transform-origin:0 50%;transform:scaleX(var(--p,0));opacity:.55}
.k-hrow .rule{border-bottom-width:1.5px;opacity:.9}

/* figures: the player's classes, values unchanged, paper stays light */
.item.k-fig{margin:.7em 0 .4em}
.fig{min-width:0}.fig svg{display:block;width:100%;max-width:600px;height:auto;margin:0 auto;overflow:visible}
.fig text{font-family:var(--font-hand);font-size:22px;fill:#1c2230}
.fig .t-red{fill:#c42027}.fig .t-blu{fill:var(--pen-accent)}
.fig path{stroke-linecap:round;stroke-linejoin:round}
.fig .ld{fill:none;stroke:#5b6474;stroke-width:1.6}
.fig .m{fill:#f0d9ae;stroke:#7d5526;stroke-width:1.6}.fig .m2{fill:#e6c489;stroke:#7d5526;stroke-width:1.6}
.fig .ln{fill:none;stroke:#1c2230;stroke-width:2.4}.fig .wall{fill:#1c2230;stroke:#1c2230;stroke-width:1.6}
.fig .dim{fill:none;stroke:#c42027;stroke-width:2.2}.fig .load{fill:none;stroke:#c42027;stroke-width:3.2}
.fig .dash{fill:none;stroke:var(--pen-accent);stroke-width:2.2;stroke-dasharray:7 6}
.pcap{font:500 13.5px/1.4 var(--font-ui);color:var(--pen-mute);margin-top:6px;display:flex;flex-wrap:wrap;gap:0 12px;justify-content:space-between;align-items:center}
.pcap button{all:unset;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--pen-accent);text-decoration:underline;text-underline-offset:3px}
.pcap button:focus-visible{outline:3px solid var(--pen-accent);outline-offset:2px}

/* more below: a soft fade and a small chevron, never a scrollbar puzzle */
.sfade{position:absolute;left:0;right:0;bottom:0;height:30px;pointer-events:none;z-index:4;opacity:0;transition:opacity var(--dur-ui);background:linear-gradient(transparent,var(--paper));border-radius:0 0 var(--r-board) var(--r-board)}
.board.more-dn .sfade{opacity:1}
.sfade::after{content:"";position:absolute;left:50%;bottom:7px;width:9px;height:9px;margin-left:-5px;border-right:2px solid var(--pen-mute);border-bottom:2px solid var(--pen-mute);transform:rotate(45deg)}

/* plan-reading sheet on a question: Inter, as decided in EXECUTION-LIST row 4 */
.paper{background:#fcfcfa;border:1px solid var(--line2);border-radius:10px;padding:4px;color:#1c2230;min-width:0}
.paper svg{display:block;width:100%;max-width:600px;height:auto;margin:0 auto;overflow:visible}
.paper text{font-family:var(--font-fig);font-size:21px;fill:#1c2230}
.paper .t-red{fill:#c42027}.paper .t-blu{fill:#1749b8}
.paper path{stroke-linecap:round;stroke-linejoin:round}
.paper .ld{fill:none;stroke:#5b6474;stroke-width:1.6}
.paper .m{fill:#f0d9ae;stroke:#7d5526;stroke-width:1.6}.paper .m2{fill:#e6c489;stroke:#7d5526;stroke-width:1.6}
.paper .ln{fill:none;stroke:#1c2230;stroke-width:2.4}.paper .dim{fill:none;stroke:#c42027;stroke-width:2.2}
.paper .b{font-weight:600}.paper .dimt{fill:#b02a16;font-weight:600}
.paper .wl{fill:#1c2230;stroke:none}.paper .thin{fill:none;stroke:#1c2230;stroke-width:1.6}
.paper .dl{fill:none;stroke:#b02a16;stroke-width:1.6}
.paper .wood{fill:#f0d9ae;stroke:#7d5526;stroke-width:1.4}.paper .conc{fill:#dfe3e8;stroke:#5b6474;stroke-width:1.4}
.paper .gyp{fill:#fff;stroke:#1c2230;stroke-width:1.4}.paper .stuc{fill:#cfd4db;stroke:#5b6474;stroke-width:1.4}
.paper .hlz{fill:rgba(255,214,0,.32);stroke:#1c2230;stroke-width:3;stroke-dasharray:9 5}
.paper .hot{fill:transparent;stroke:none;cursor:pointer}
.paper .hot:hover,.paper .hot:focus-visible{fill:rgba(23,73,184,.12);stroke:#1749b8;stroke-width:2;stroke-dasharray:5 4;outline:none}
.paper .pcap{color:#2b3340;padding:4px 6px}
.xsr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){.sheet.turn{animation:none}.c{transition:none}}

/* ---- older board rules this design replaces ---- */
.board{--fs:var(--board-fs);--ink:var(--pen-ink);--blu:var(--pen-accent);--red:var(--pen-wrong);--grn:var(--pen-right);--hlc:var(--c-hl);--fxc:var(--pen-accent)}
.board::before,.tray,.eraser,.cover{display:none!important}
.sheet{position:relative;inset:auto;scroll-behavior:auto}
.hint{top:50%;left:50%;color:#fff;background:var(--pen-accent);border-radius:99px;padding:13px 22px;font:600 15px/1.25 var(--font-ui);box-shadow:0 6px 18px rgba(28,36,48,.22);z-index:4}
.c.cur::after{height:.2em;background:var(--pen-accent);border-radius:50%;transform:none}
.k-head{letter-spacing:-.005em}
.k-form,.k-res,.k-given,.k-pt,.k-opt{color:var(--pen-ink)}
.k-res{font-size:.8em;padding-left:.62em}
.k-sub{letter-spacing:0}
.m-circle path{stroke:var(--pen-accent)}
.arrow path{stroke:var(--pen-right)}
.xzoom,.pcap a{color:var(--pen-accent)}
.sfade.up{display:none}
.sfade.dn{top:auto;bottom:0;background:linear-gradient(transparent,var(--paper))}
.m-under .fx{display:none}