/* =====================================================================
   Lanyard lesson player (step-by-step lessons), interactive checks,
   drag and drop, summary cards and the per-lesson Revise view.
   Uses the theme tokens from index.html / theme-bold.css, so light and
   dark mode both work.
   ===================================================================== */
.lp{display:grid;gap:1rem;max-width:760px;margin:0 auto;width:100%}
.lp-top{display:grid;gap:.6rem}
.lp-top .row{justify-content:space-between}
.lp-title{font-size:clamp(1.35rem,4.4vw,2rem)}
.lp-prog{display:grid;gap:.35rem}
.lp-prog-txt{display:flex;justify-content:space-between;font-weight:700;font-size:.9rem}
.lp-segs{display:flex;gap:4px}
.lp-seg{flex:1;height:10px;border-radius:999px;background:var(--surface-2);border:1.5px solid var(--line);padding:0;min-width:0}
.lp-seg.done{background:var(--accent);border-color:var(--edge)}
.lp-seg.cur{background:var(--ink);border-color:var(--edge)}
.lp-seg:disabled{cursor:default}

.lp-card{background:var(--surface);border:2px solid var(--edge);border-radius:var(--r-lg,24px);box-shadow:5px 5px 0 var(--shadow);padding:clamp(1rem,4vw,1.6rem);display:grid;gap:1rem;min-width:0;overflow-wrap:anywhere}
.lp-card .prose{max-width:none}
.lp-card .prose p+p,.lp-card .prose p+ul,.lp-card .prose ul+p{margin-top:.7rem}
.lp-card figure{margin:0}
.lp-card svg{max-width:100%;height:auto}
.lp-card .tbl-wrap{overflow-x:auto;max-width:100%}
.lp-kind{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;border-radius:999px;background:var(--ink);color:#16120d;justify-self:start;border:2px solid var(--edge)}
.lp-kind.sky{background:var(--accent);color:var(--accent-fg)}
.lp-kind.navy{background:var(--navy,#0b1630);color:#fff}
.lp-step-h{font-size:clamp(1.1rem,3.6vw,1.45rem)}
.lp-enter{animation:lpIn .28s ease-out}
.lp-enter.back{animation-name:lpInBack}
@keyframes lpIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes lpInBack{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}

/* bottom navigation: sticky on phones */
.lp-nav{position:sticky;bottom:0;z-index:5;display:flex;gap:.6rem;align-items:center;justify-content:space-between;padding:.7rem 0 calc(.7rem + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 70%,transparent)}
.lp-nav .btn{min-height:48px;min-width:110px;justify-content:center;font-size:1rem}
.lp-nav .lp-hint{font-size:.85rem;color:var(--muted);text-align:center;flex:1;min-width:0}

/* the check box under each step */
.lp-check{border-top:2px dashed var(--line);padding-top:1rem;display:grid;gap:.8rem}
.lp-check-h{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.lp-check-h b{font-family:var(--font-display);font-size:1rem}
.lp-check-h small{color:var(--muted);font-weight:500}
.lp-lock{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);border:2px solid var(--edge);color:#16120d;font-size:.85rem;flex:none}
.lp-check.solved .lp-lock{background:var(--good);color:#fff}
.lp-actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.lp-actions .btn{min-height:44px}
.lp-msg{font-weight:700;padding:.6rem .8rem;border-radius:12px;background:var(--surface-2)}
.lp-msg.ok{background:color-mix(in srgb,var(--good) 18%,var(--surface));color:var(--fg)}
.lp-msg.no{background:color-mix(in srgb,var(--bad) 14%,var(--surface));color:var(--fg)}
.lp-expl{font-size:.95rem}

/* multiple choice */
.lp-opts{display:grid;gap:.5rem}
.lp-opt{text-align:left;padding:.8rem 1rem;min-height:48px;border-radius:14px;border:2px solid var(--line);background:var(--bg);font-weight:600;display:flex;gap:.6rem;align-items:flex-start}
.lp-opt .k{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--surface-2);font-size:.8rem;font-weight:800}
.lp-opt[aria-pressed="true"]{border-color:var(--edge);background:color-mix(in srgb,var(--accent) 35%,var(--surface));box-shadow:3px 3px 0 var(--shadow)}
.lp-opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 20%,var(--surface))}
.lp-opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,var(--surface))}
.lp-opt:disabled{cursor:default;opacity:1}
.lp-mq+.lp-mq{border-top:1px solid var(--line);padding-top:.8rem}
.lp-mq>b{display:block;margin-bottom:.5rem}

/* drag and drop chips, bins and slots */
.dnd-bank{display:flex;flex-wrap:wrap;gap:.5rem;padding:.7rem;border-radius:14px;background:var(--surface-2);min-height:58px;align-items:flex-start}
.dnd-bank.empty::after{content:'All placed';color:var(--muted);font-size:.85rem;align-self:center}
.chip-d{touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .85rem;min-height:44px;border-radius:12px;border:2px solid var(--edge);background:var(--surface);color:var(--fg);font-weight:600;font-size:.95rem;line-height:1.25;text-align:left;box-shadow:2px 2px 0 var(--shadow);max-width:100%}
.chip-d[aria-pressed="true"]{background:var(--ink);color:#16120d;transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--shadow)}
.chip-d.ok{background:color-mix(in srgb,var(--good) 25%,var(--surface));border-color:var(--good)}
.chip-d.no{background:color-mix(in srgb,var(--bad) 18%,var(--surface));border-color:var(--bad)}
.chip-d.lifted{opacity:.35}
.dnd-ghost{position:fixed;z-index:1000;pointer-events:none;transform:rotate(-2deg) scale(1.04);box-shadow:6px 6px 0 var(--shadow);opacity:.95;margin:0}
.dnd-over{outline:3px dashed var(--ink);outline-offset:2px}
.dnd-bins{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.dnd-bin{border:2px dashed var(--line);border-radius:14px;padding:.6rem;display:grid;gap:.45rem;align-content:start;min-height:96px;background:var(--bg);text-align:left;width:100%}
.dnd-bin>.bin-h{font-family:var(--font-display);font-weight:700;font-size:.92rem;display:flex;justify-content:space-between;gap:.4rem;align-items:center}
.dnd-bin.armed{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 10%,var(--bg))}
.dnd-bin .chips{display:flex;flex-wrap:wrap;gap:.4rem}
.dnd-tip{font-size:.85rem;color:var(--muted)}

/* order */
.dnd-order{list-style:none;margin:0;padding:0;display:grid;gap:.45rem;counter-reset:ord}
.dnd-order li{display:flex;gap:.5rem;align-items:center}
.dnd-order li::before{counter-increment:ord;content:counter(ord);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:var(--accent-fg);font-weight:800;border:2px solid var(--edge)}
.dnd-order .chip-d{flex:1}
.ord-btns{display:flex;flex-direction:column;gap:2px}
.ord-btns button{width:36px;height:22px;border-radius:6px;border:1.5px solid var(--line);background:var(--surface);font-size:.7rem;line-height:1;padding:0}

/* match */
.dnd-match{display:grid;gap:.55rem}
.dnd-mrow{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:.5rem;align-items:stretch}
@media (max-width:520px){.dnd-mrow{grid-template-columns:1fr}}
.dnd-term{padding:.6rem .8rem;border-radius:12px;background:var(--panel,#0b1630);color:var(--on-panel,#fff);font-weight:700;display:flex;align-items:center}
.dnd-slot{border:2px dashed var(--line);border-radius:12px;min-height:48px;padding:.3rem;display:flex;align-items:center;background:var(--bg);width:100%;text-align:left}
.dnd-slot .ph{color:var(--muted);font-size:.85rem;padding:0 .5rem}
.dnd-slot.armed{border-color:var(--ink)}
.dnd-slot .chip-d{width:100%}

/* gap fill */
.gap-txt{line-height:2.4;font-size:1.02rem}
.gap-slot{display:inline-flex;align-items:center;justify-content:center;min-width:110px;min-height:40px;vertical-align:middle;margin:0 .15rem;padding:0 .5rem;border:2px dashed var(--line);border-radius:10px;background:var(--bg);font-weight:700;color:var(--fg)}
.gap-slot.filled{border-style:solid;border-color:var(--edge);background:color-mix(in srgb,var(--accent) 30%,var(--surface))}
.gap-slot.armed{border-color:var(--ink);background:color-mix(in srgb,var(--ink) 14%,var(--bg))}
.gap-slot.ok{border-color:var(--good);background:color-mix(in srgb,var(--good) 22%,var(--surface))}
.gap-slot.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 16%,var(--surface))}

/* tap to reveal */
.rv-grid{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.rv{perspective:900px;border:0;background:none;padding:0;min-height:130px;text-align:left;width:100%}
.rv-in{position:relative;display:block;min-height:130px;height:100%;transition:transform .45s;transform-style:preserve-3d}
.rv[aria-pressed="true"] .rv-in{transform:rotateY(180deg)}
.rv-f{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:16px;border:2px solid var(--edge);padding:1rem;display:grid;align-content:center;gap:.3rem;box-shadow:3px 3px 0 var(--shadow);overflow:auto}
.rv-f.front{background:var(--ink);color:#16120d;font-family:var(--font-display);font-weight:700}
.rv-f.front small{font-family:var(--font-body);font-weight:600;opacity:.75}
.rv-f.back{background:var(--surface);color:var(--fg);transform:rotateY(180deg);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.rv-in{transition:none}.lp-enter{animation:none}}

/* news hook */
.lp-news{border-radius:16px;border:2px solid var(--edge);overflow:hidden}
.lp-news .nh{background:var(--panel,#0b1630);color:var(--on-panel,#fff);padding:.8rem 1rem;display:grid;gap:.25rem}
.lp-news .nh .eyebrow{color:var(--accent)}
.lp-news .nb{padding:1rem;display:grid;gap:.8rem}
.lp-vid{display:flex;gap:.7rem;align-items:center;padding:.7rem .9rem;border-radius:14px;background:var(--surface-2);text-decoration:none;color:var(--fg);font-weight:700;min-height:48px}
.lp-vid .play{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--ink);border:2px solid var(--edge)}
.lp-vid small{display:block;font-weight:500;color:var(--muted)}
.lp-think{padding:.8rem 1rem;border-radius:14px;background:color-mix(in srgb,var(--accent) 22%,var(--surface));border:2px solid var(--edge)}

/* summary card */
.lp-sum{background:var(--panel,#0b1630);color:var(--on-panel,#fff);border-radius:var(--r-lg,24px);padding:clamp(1rem,4vw,1.6rem);display:grid;gap:1rem;border:2px solid var(--edge);box-shadow:5px 5px 0 var(--shadow)}
.lp-sum h2,.lp-sum h3{color:inherit}
.lp-sum .eyebrow{color:var(--accent)}
.lp-sum ul.can{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.lp-sum ul.can li{display:flex;gap:.5rem;align-items:flex-start}
.lp-sum ul.can li::before{content:'✓';flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--good);color:#fff;font-size:.75rem;font-weight:800;margin-top:.1rem}
.lp-sum .rv-f.back{color:var(--fg)}
.lp-score{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.lp-score .big{font-family:var(--font-display);font-size:2.4rem;font-weight:800;color:var(--ink);line-height:1}
.lp-tip{border-radius:14px;background:color-mix(in srgb,var(--ink) 18%,transparent);padding:.8rem 1rem;border:1.5px solid var(--ink)}
.lp-done-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.lp-done-actions .btn{min-height:46px}

/* XP pop */
.xp-pop{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:1200;background:var(--ink);color:#16120d;border:2px solid var(--edge);box-shadow:3px 3px 0 var(--shadow);font-family:var(--font-display);font-weight:800;padding:.4rem .9rem;border-radius:999px;animation:xpPop 1.6s ease-out forwards;pointer-events:none;white-space:nowrap}
@keyframes xpPop{0%{opacity:0;transform:translate(-50%,16px) scale(.8)}15%{opacity:1;transform:translate(-50%,0) scale(1.08)}70%{opacity:1;transform:translate(-50%,-12px) scale(1)}100%{opacity:0;transform:translate(-50%,-34px)}}
@media (prefers-reduced-motion:reduce){.xp-pop{animation:none;opacity:1}}

/* mode switch (step-by-step / revise) */
.lp-modes{display:inline-flex;border:2px solid var(--edge);border-radius:999px;overflow:hidden;background:var(--surface)}
.lp-modes button{border:0;background:none;padding:.45rem .85rem;font-weight:700;font-size:.86rem;min-height:40px}
.lp-modes button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg)}
.rev-sum{display:grid;gap:.6rem}

/* written step */
.lp-card .wq{border:0;padding:0;background:none}
.lp-card textarea{width:100%;min-height:180px;border-radius:12px;border:2px solid var(--line);background:var(--bg);padding:.8rem;font-size:1rem;line-height:1.5}
.ai-note{font-size:.8rem;color:var(--muted)}

/* confetti */
.lp-confetti{position:fixed;inset:0;pointer-events:none;z-index:1100;overflow:hidden}
.lp-confetti i{position:absolute;top:-12px;width:10px;height:14px;border-radius:2px;animation:conf 1.6s ease-in forwards}
@keyframes conf{to{transform:translateY(105vh) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.lp-confetti{display:none}}

/* site footer: AI note */
.site-foot{max-width:1120px;margin:0 auto;padding:0 16px 2rem;color:var(--muted);font-size:.8rem}
.site-foot p{max-width:72ch}

/* dyslexia-friendly font option (Aa button in the top bar): Lexend, a font designed for reading ease, with extra spacing */
.font-btn{margin-left:.4rem}
.font-btn[aria-pressed="true"]{background:var(--on-bar,#16120d);color:var(--bar,#ff7a00)}
:root[data-font="dys"]{--font-body:"Lexend","Verdana",system-ui,sans-serif;--font-display:"Lexend","Verdana",system-ui,sans-serif}
:root[data-font="dys"] body{letter-spacing:.02em;word-spacing:.08em;line-height:1.7}
:root[data-font="dys"] h1,:root[data-font="dys"] h2,:root[data-font="dys"] h3{letter-spacing:0}
:root[data-font="dys"] .prose p,:root[data-font="dys"] .lp-card p,:root[data-font="dys"] li{line-height:1.75}