/* Round 3 lessons: fact blocks, takeaway poster card, scaleX progress bars, header "More" menu. Loads after learn-play.css. */
:root{--ll-ink:#14110F;--ll-cream:#FFF4DC;--ll-paper:#FFFBF0;--ll-sand:#F7E6BF;--ll-gold:#F6A91B;--ll-tomato:#C8361F;--ll-green:#0B3D2E}

/* Lesson body */
.reader-content .lp-hook{background:var(--ll-sand);border:3px solid var(--ll-ink);border-left-width:8px;border-left-color:var(--ll-tomato);border-radius:0 14px 14px 0;box-shadow:4px 4px 0 var(--ll-ink)}
.reader-content .lp-hook .story-label{color:var(--ll-tomato);font:700 11px/1.3 'Kubear Mono',ui-monospace,monospace}
.reader-content .lp-hook p{margin:0;font-size:17px;line-height:1.55;font-weight:600;color:var(--ll-ink)}
.lp-facts{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:10px;counter-reset:lpfact}
.lp-facts li{counter-increment:lpfact;position:relative;padding:12px 14px 12px 52px;border:2px solid var(--ll-ink);border-radius:14px;background:var(--ll-paper);box-shadow:3px 3px 0 var(--ll-ink);font-size:16px;line-height:1.55;color:var(--ll-ink)}
.lp-facts li::before{content:counter(lpfact);position:absolute;left:12px;top:12px;width:28px;height:28px;display:grid;place-items:center;border:2px solid var(--ll-ink);border-radius:50%;background:var(--ll-gold);font:800 14px/1 'Kubear Display','Arial Black',sans-serif}
.lp-facts li strong{display:block;font-family:'Kubear Display','Arial Black',sans-serif;font-weight:800;letter-spacing:-.01em;margin-bottom:2px}
.reader-body .source-note-inline{display:block}
.worked-example{border:3px solid var(--ll-ink);background:var(--ll-cream);box-shadow:4px 4px 0 var(--ll-ink)}
.worked-example p{color:var(--ll-ink);font-size:16px;line-height:1.65}
.worked-example .story-label{color:var(--ll-tomato);font:700 11px/1.3 'Kubear Mono',ui-monospace,monospace}
.quiz-option .quiz-opt-text{display:inline-block}

/* "Today you learned" poster card */
.lp-takeaway{position:relative;margin:26px 0 8px;padding:22px 20px 16px;border:4px solid var(--ll-ink);border-radius:18px;background:var(--ll-paper);box-shadow:6px 6px 0 var(--ll-ink);transform:rotate(-.6deg)}
.lp-tk-eyebrow{display:inline-block;padding:4px 10px;border:2px solid var(--ll-ink);border-radius:999px;background:var(--ll-tomato);color:var(--ll-cream);font:700 11px/1.3 'Kubear Mono',ui-monospace,monospace;letter-spacing:.1em}
.lp-tk-line{margin:14px 0 14px;font-family:'Kubear Display','Arial Black',sans-serif;font-weight:800;font-size:clamp(22px,5.6vw,30px);line-height:1.15;letter-spacing:-.02em;color:var(--ll-ink);overflow-wrap:anywhere}
.lp-key{background:none;color:inherit;padding:0 .08em;font-variant-numeric:tabular-nums}
.lp-key-static{background:linear-gradient(transparent 48%,var(--ll-gold) 48%)}
.lp-tk-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.lp-tk-brand{font:700 11px/1.3 'Kubear Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ll-green)}
.lp-takeaway .button{min-height:44px}
.lp-track{margin:10px 2px 22px;font-size:14px;line-height:1.5}
.lp-track a{color:var(--ll-green);text-decoration:underline;text-underline-offset:3px;font-weight:600}

/* Progress bars use transform:scaleX (inline) instead of width. */
.lp-bar span,.lp-course-bar i,.progress-mini span,.reader-progress span{width:100%;transform-origin:left center;transition:transform var(--km-slow,420ms) var(--km-ease-out,cubic-bezier(.2,.8,.2,1));animation:lp-grow var(--km-slow,420ms) var(--km-ease-out,cubic-bezier(.2,.8,.2,1)) backwards;will-change:transform}
@keyframes lp-grow{from{transform:scaleX(0)}}
@media (prefers-reduced-motion:reduce){.lp-bar span,.lp-course-bar i,.progress-mini span,.reader-progress span{animation:none;transition:none}}
html.km-reduce .lp-bar span,html.km-reduce .lp-course-bar i,html.km-reduce .progress-mini span,html.km-reduce .reader-progress span{animation:none;transition:none}

/* Celebration: KM draws the confetti; keep the dim light enough to see it. */
.lp-celebrate::backdrop{background:rgba(20,17,15,.5)}

/* Header: Learn, Progress, Saved, Play; Search and Glossary sit behind "More". */
.nav-more{position:relative;display:flex;align-items:center;height:100%}
.nav-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;min-height:44px;padding:0 12px;font:700 12.5px/1 'Kubear Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--ll-ink);border-radius:999px}
.nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:"";width:6px;height:6px;margin-left:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-more[open] summary,.nav-more summary:hover{background:var(--ll-gold)}
.nav-more-list{position:absolute;top:calc(100% - 8px);right:0;min-width:170px;padding:8px;display:grid;gap:2px;border:3px solid var(--ll-ink);border-radius:14px;background:var(--ll-paper);box-shadow:4px 4px 0 var(--ll-ink);z-index:30}
.nav-more-list a{height:auto!important;min-height:44px;padding:0 12px;border-radius:10px}
.nav-more-list a:hover{background:var(--ll-sand)!important}
.nav-more summary:focus-visible{outline:3px solid #2B2A7A;outline-offset:2px}

@media (max-width:420px){.lp-takeaway{padding:18px 16px 14px;box-shadow:4px 4px 0 var(--ll-ink)}.lp-facts li{padding-left:48px}}

/* Round 4 visuals: lesson scene, quiz art cues, takeaway art, poster learning trail. Transform/opacity only; static under reduced motion. */
.lp-scene{display:none}
.lp-scene.is-on{display:flex;align-items:flex-end;justify-content:center;gap:14px;margin:6px 0 16px;padding:14px 12px 10px;border:3px solid var(--ll-ink);border-radius:18px;background:var(--ll-sand);box-shadow:5px 5px 0 var(--ll-ink);min-height:196px;overflow:hidden}
.lp-scene .lp-scene-a,.lp-scene .lp-scene-b{display:block;line-height:0}
.lp-scene .lp-scene-b{transform:rotate(5deg) translateY(-4px)}
.quiz-option{position:relative}
.lp-pop{position:absolute;right:10px;top:-18px;pointer-events:none;line-height:0;z-index:2}
.lp-pop-miss{top:-14px}
.lp-tk-art{position:absolute;right:12px;top:-26px;line-height:0;transform:rotate(6deg)}
.lp-takeaway{overflow:visible}
.lp-fig{font-variant-numeric:tabular-nums;font-weight:800}
.lp-poster{margin:18px 0;padding:10px 6px 6px;border:3px solid var(--ll-ink);border-radius:18px;background:var(--ll-sand);box-shadow:5px 5px 0 var(--ll-ink)}
.lp-poster svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;overflow:visible}
.lp-stop{cursor:pointer;outline:none}
.lp-stop:focus-visible circle:nth-of-type(2){stroke:#C8361F;stroke-width:4}
.lp-pin{transform-box:fill-box;transform-origin:50% 100%;animation:lp-bounce 1.1s ease-in-out infinite}
@keyframes lp-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (max-width:480px){.lp-scene.is-on{min-height:172px;gap:8px}.lp-tk-art{top:-22px}}
@media (prefers-reduced-motion:reduce){.lp-pin{animation:none}}
html.km-reduce .lp-pin{animation:none}

/* long source names wrap on small phones */
.source-note-inline a{white-space:normal;overflow-wrap:anywhere}