/* Big, bold lesson reading (loaded last on lesson pages, server/teach.js). The idea: one idea at a time, large enough to
   take in at a glance, in comic panels. --ts is the reader's text size (A− / A+ in public/site/teach.js, saved per device). */
html{--ts:1}
html[data-ts="-1"]{--ts:.9}html[data-ts="1"]{--ts:1.12}html[data-ts="2"]{--ts:1.25}
body.teach-page .tc-part,body.teach-page .tc-activity,body.teach-page .lp-warmup,body.teach-page .tc-challenge,body.teach-page .lp-quiz{scroll-margin-top:90px}

/* a part is a big comic panel */
body.teach-page .tc-part-in{padding:clamp(20px,3vw,36px) clamp(18px,3vw,40px);border-width:4px;border-radius:30px;box-shadow:10px 10px 0 #1b1340;
  background:radial-gradient(circle,rgba(108,77,230,.13) 1.6px,transparent 2.2px) right top/14px 14px no-repeat,#fff;background-size:180px 180px,auto}
body.teach-page .tc-part-in>.eyebrow{display:inline-block;margin:0 0 6px;padding:5px 14px;border-radius:10px;background:#1b1340;color:#ffd23f;font:400 calc(17px*var(--ts)) var(--cm-display,Impact,sans-serif);letter-spacing:.08em;transform:rotate(-1.5deg)}
body.teach-page .tc-part h2{font-size:calc(clamp(34px,4.8vw,60px)*var(--ts));text-shadow:4px 4px 0 #ffd23f;margin:8px 0 18px}

/* the explanation: big, short lines, the first sentence as a "big idea" bubble */
body.teach-page .tc-theory{max-width:36em}
body.teach-page .tc-theory p{font:500 calc(22px*var(--ts))/1.6 var(--cm-ui,system-ui);color:#1b1340;margin:0 0 16px}
body.teach-page .tc-theory p:first-child{position:relative;padding:18px 22px 18px 74px;border:3px solid #1b1340;border-radius:24px;background:#fff3bf;box-shadow:5px 5px 0 #1b1340;font-weight:700;font-size:calc(24px*var(--ts))}
body.teach-page .tc-theory p:first-child::before{content:"💡";position:absolute;left:18px;top:14px;font-size:38px;line-height:1}
body.teach-page .tc-theory p:first-child::after{content:"";position:absolute;left:46px;bottom:-17px;width:26px;height:26px;background:#fff3bf;border-right:3px solid #1b1340;border-bottom:3px solid #1b1340;transform:rotate(45deg)}
body.teach-page .tc-theory p+p{padding-left:4px}

/* worked examples: caption boxes, big steps, a big answer */
body.teach-page .tc-worked{gap:22px;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
body.teach-page .tc-worked .w-trick{padding:22px 24px;border-width:3px;border-radius:22px;box-shadow:6px 6px 0 #1b1340;background:#f7f4ff}
body.teach-page .tc-worked .w-trick:nth-child(odd){transform:rotate(-.4deg)}body.teach-page .tc-worked .w-trick:nth-child(even){transform:rotate(.4deg)}
body.teach-page .tc-worked .w-trick h3{display:inline-block;margin:-36px 0 10px -6px;padding:4px 14px;border:3px solid #1b1340;border-radius:10px;background:#ffd23f;color:#1b1340;font-size:calc(24px*var(--ts));transform:rotate(-2deg);box-shadow:3px 3px 0 #1b1340}
body.teach-page .tc-worked .w-trick>p:first-of-type{font-size:calc(21px*var(--ts));line-height:1.45}
body.teach-page .tc-worked .w-trick ol{counter-reset:ws;list-style:none;padding:0}
body.teach-page .tc-worked .w-trick li{counter-increment:ws;position:relative;margin:10px 0;padding-left:44px;font:500 calc(20px*var(--ts))/1.5 var(--cm-ui,system-ui)}
body.teach-page .tc-worked .w-trick li::before{content:counter(ws);position:absolute;left:0;top:1px;display:grid;place-items:center;width:30px;height:30px;border:2.5px solid #1b1340;border-radius:50%;background:#fff;font:800 15px var(--cm-ui,system-ui)}
body.teach-page .tc-worked .w-result{font-size:calc(22px*var(--ts));padding:8px 16px;box-shadow:3px 3px 0 #1b1340}
body.teach-page .tc-fig .tc-svg{width:auto;max-width:100%;height:auto;min-width:min(100%,180px)}
body.teach-page .tc-try{font-size:calc(20px*var(--ts));border-width:3px;padding:14px 18px}
body.teach-page .tc-try b::before{content:"🤔 "}
body.teach-page .tc-note{font-size:calc(18px*var(--ts))}

/* practice, activities, quiz, warm-up: bigger to read and to tap */
body.teach-page .tc-practice-h h3{font:400 calc(32px*var(--ts)) var(--cm-display,Impact,sans-serif);letter-spacing:.03em;color:#6c4de6}
body.teach-page .tc-practice-h p{font-size:calc(18px*var(--ts))}
body.teach-page .tc-ans label{font:600 calc(19px*var(--ts))/1.45 var(--cm-ui,system-ui)}
body.teach-page .tc-ans input{font-size:calc(20px*var(--ts));min-height:48px}
body.teach-page .tc-ans-msg{font-size:calc(16px*var(--ts))}
body.teach-page .tc-say{font:500 calc(21px*var(--ts))/1.55 var(--cm-ui,system-ui)}
body.teach-page .tc-steps li{font-size:calc(19px*var(--ts))}
body.teach-page .lp-warmup h2{font-size:calc(clamp(26px,3.4vw,40px)*var(--ts));line-height:1.25}
body.teach-page .lp-warmup .lp-reveal p,body.teach-page .lp-warmup .lp-tip{font-size:calc(19px*var(--ts))}
body.teach-page .lp-q legend{font-size:calc(20px*var(--ts));line-height:1.45}
body.teach-page .lp-choices button{font-size:calc(18px*var(--ts));min-height:50px}
body.teach-page .lp-why{font-size:calc(17px*var(--ts))}
body.teach-page #mistakes .w-card h3{font-size:calc(21px*var(--ts))}body.teach-page #mistakes .w-card p{font-size:calc(18px*var(--ts))}
body.teach-page .tc-think p{font-size:calc(20px*var(--ts))}

/* the view controls: text size and focus (added by public/site/teach.js) */
.tc-view{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;font:700 14px var(--cm-ui,system-ui)}
.tc-view button{min-width:44px;height:40px;padding:0 12px;border:2.5px solid #1b1340;border-radius:12px;background:#fff;box-shadow:2px 2px 0 #1b1340;font:800 15px var(--cm-ui,system-ui);color:#1b1340;cursor:pointer}
.tc-view button[aria-pressed=true]{background:#ffd23f}

/* panels pop in as they arrive (only when the script is running and motion is welcome) */
@media (prefers-reduced-motion:no-preference){
  html.tc-reveal main .tc-part-in,html.tc-reveal main .tc-activity,html.tc-reveal main .w-trick{opacity:0;translate:0 26px;transition:opacity .5s ease,translate .5s cubic-bezier(.34,1.56,.64,1)}
  html.tc-reveal main .is-in,html.tc-reveal main .is-in .w-trick{opacity:1;translate:0 0}
}
/* focus mode: everything but the section being read fades back */
html.tc-focus main section.block:not(.tc-lit){opacity:.22;filter:saturate(.3);transition:opacity .35s,filter .35s}
html.tc-focus main section.tc-lit{opacity:1;filter:none;transition:opacity .35s,filter .35s}
@media(max-width:560px){body.teach-page .tc-theory p:first-child{padding:16px 16px 16px 60px}body.teach-page .tc-theory p:first-child::before{font-size:30px;left:14px}body.teach-page .tc-worked .w-trick:nth-child(n){transform:none}}
@media print{html.tc-reveal main *{opacity:1!important;translate:none!important}html.tc-focus main section{opacity:1!important;filter:none!important}}
body.lp-teaching main .tc-part-in,body.lp-teaching main .tc-activity,body.lp-teaching main .w-trick{opacity:1!important;translate:none!important}body.lp-teaching main section{opacity:1!important;filter:none!important}