/* NeevStep app-shell fixes, loaded after app-N.css. Rename (shell-6.css) on change — hCDN ignores ?v=.
   Lesson player footer (Back / I have a doubt / Next) was hidden behind the Android navigation bar in the
   installed app: 100dvh there can include the area under the system bar. Pin the player to the visible
   screen instead, and keep the footer clear of the bar / home indicator. */
body.learn{position:fixed;inset:0;height:auto;min-height:0;width:100%}
body.learn .lr-foot{padding-bottom:max(12px, calc(8px + env(safe-area-inset-bottom, 0px)))}

/* Student header: logo left, student's full name + Log out right. Lesson name sits on the progress line. */
.lr-top{gap:10px}
.lr-top .sp{flex:1}
.lr-who{display:flex;align-items:center;gap:8px;min-width:0}
.lr-who b{font-size:15.5px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.lr-who b:empty,.lr-who b:empty+*{display:none}
.lr-av{width:32px;height:32px;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
.lr-av:empty{display:none}
.lr-out{font:600 13.5px "Lexend",sans-serif;color:#fff;background:transparent;border:1.5px solid rgba(255,255,255,.55);border-radius:10px;padding:7px 12px;cursor:pointer;white-space:nowrap;min-height:38px}
.lr-out:hover{background:var(--vio-d);border-color:#fff}
.lr-out:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.lr-prog{flex-wrap:wrap;row-gap:6px}
.lr-prog .lr-what{flex-basis:100%;display:flex;align-items:baseline;gap:8px;min-width:0;line-height:1.25}
.lr-prog .lr-what b{font-size:15px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lr-prog .lr-what small{font-size:12.5px;color:var(--muted);white-space:nowrap}

/* Teacher's spoken words are heard, not shown (owner, 28 Sep 2026): hide the caption line under the name.
   Photo, name and pause / hear-again stay; while he talks the photo ring pulses and the name says so. */
.tch-say p{display:none}
.tch.talk .tch-say b::after{content:" · speaking…";font-weight:500;color:var(--muted)}

/* Key words only on screen (owner, 28 Sep 2026): {"kw": [...]} blocks — big pills, one after another. */
.kw{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:4px 0 16px}
.kw span{font:700 clamp(18px,4.4vw,24px)/1.2 "Lexend",sans-serif;color:var(--vio-d);background:var(--vio-s);border:2px solid #D9D1FF;padding:10px 18px;border-radius:999px;animation:rise .45s ease both}
.kw span:nth-child(2){animation-delay:.35s}.kw span:nth-child(3){animation-delay:.7s}.kw span:nth-child(4){animation-delay:1.05s}
.kw span:nth-child(5){animation-delay:1.4s}.kw span:nth-child(6){animation-delay:1.75s}.kw span:nth-child(7){animation-delay:2.1s}

/* Live figures: <g data-at="k" style="--d:.6s"> appears when spoken line k+1 starts, then draws itself.
   Hidden until then; lines draw out, dots / letters / arcs fade in just after. */
.fig [data-at]{opacity:0}
.fig [data-at].on{opacity:1}
.fig [data-at].on .s,.fig [data-at].on .hl,.fig [data-at].on .hl2,.fig [data-at].on .g,.fig [data-at].on polyline.m{opacity:1;stroke-dasharray:1;stroke-dashoffset:1;animation:nsdraw 1.1s ease forwards;animation-delay:var(--d,0s)}
.fig polyline.m{stroke-width:4}
.fig [data-at].on text,.fig [data-at].on .dot,.fig [data-at].on .a,.fig [data-at].on .a2,.fig [data-at].on .sf,.fig [data-at].on .d{opacity:0;animation:nsfade .45s ease forwards;animation-delay:calc(var(--d,0s) + .45s)}
.fig .hl{fill:none}.fig polyline{fill:none}
@keyframes nsdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes nsfade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.fig [data-at].on *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}.kw span{animation:none}}

/* v8 lesson format (28 Sep 2026): Why → concept (word-synced) → board → check */
.c-sun{background:var(--sun-s);color:var(--sun-ink)}
/* word-synced parts: [data-cue] waits for its word; when it lands it pops (dots / letters) or draws (lines, above) */
.kw span[data-cue]{opacity:0;animation:none}
.kw span[data-cue].on{animation:nspop .5s cubic-bezier(.3,1.6,.5,1) both}
.fig [data-cue].on .dot,.fig [data-cue].on text{opacity:0;transform-box:fill-box;transform-origin:center;animation:nspop .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:var(--d,0s)}
.fig .halo{fill:none;stroke:var(--sun-d);stroke-width:3}
.fig [data-at].on .halo{opacity:0;transform-box:fill-box;transform-origin:center;animation:nshalo 1.1s ease-out 2;animation-delay:var(--d,0s)}
.fig .glow{fill:var(--sun);opacity:.35}
.fig .ok{font:800 22px "Lexend",sans-serif;fill:var(--mint)}
.fig .no{font:800 22px "Lexend",sans-serif;fill:var(--coral)}
.fig .q{font:800 20px "Lexend",sans-serif;fill:var(--coral-ink)}
.fig .sky{fill:#E4EDFF}.fig .sun{fill:var(--sun)}.fig .paper{fill:var(--sun-s);stroke:var(--sun-d);stroke-width:2}
.fig .cloth{fill:#FFE8E8;stroke:var(--coral);stroke-width:2}
.fig .thrs{fill:none;stroke:var(--coral);stroke-width:3;stroke-dasharray:1}
.fig [data-at].on .thrs{animation:nsdraw 1.4s ease forwards;animation-delay:var(--d,0s)}
@keyframes nspop{0%{opacity:0;transform:scale(.3)}70%{opacity:1;transform:scale(1.25)}100%{opacity:1;transform:scale(1)}}
@keyframes nshalo{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(2.2)}}

/* board step */
.board{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;margin:6px 0 14px;text-align:center}
.brd{width:100%;max-width:420px;height:auto;display:block;margin:0 auto;touch-action:none;user-select:none;-webkit-user-select:none}
.brd .grid line{stroke:#E9E6FB;stroke-width:1}
.brd .kbody{fill:var(--sun-s);stroke:none}
.brd .stick{stroke:#A0652B;stroke-width:6;stroke-linecap:round}
.brd .kside{stroke:var(--coral);stroke-width:3;stroke-dasharray:2 5;stroke-linecap:round}
.brd .klen{font:700 14px "Lexend",sans-serif;fill:var(--coral-ink);text-anchor:middle;dominant-baseline:central;paint-order:stroke;stroke:#fff;stroke-width:4px}
.brd .kpt{cursor:grab}
.brd .kpt .hit{fill:var(--vio);opacity:.14}
.brd .kpt .dotp{fill:var(--vio)}
.brd .kpt.on .hit{opacity:.3}
.brd .kpt.follow{cursor:default}.brd .kpt.follow .dotp{fill:var(--lil)}.brd .kpt.follow .hit{opacity:0}
.brd .kname{font:800 17px "Lexend",sans-serif;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.board:not(.locked) .kpt:not(.follow) .hit{animation:nsbreath 1.6s ease-in-out infinite}
.board.locked .kpt{cursor:default}
.brd-note{font-size:14px;color:var(--muted);margin:6px 0 0}
@keyframes nsbreath{50%{opacity:.32}}
.tasks{display:flex;flex-direction:column;gap:10px}
.task{background:#fff;border:2px solid var(--line);border-radius:16px;padding:12px 14px}
.task label{display:block;font:700 17px "Lexend",sans-serif;color:var(--ink);margin-bottom:8px}
.task-row{display:flex;align-items:center;gap:10px}
.task-row .in{flex:1;min-width:0;font-size:20px;font-weight:700;margin:0}
.task-row span{font-weight:700;color:var(--muted)}
.task-row .btn{margin:0}
.task.ok{border-color:var(--mint);background:var(--mint-s)}
.task.bad{animation:nsshake .4s}
@keyframes nsshake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.board .kpt .hit{animation:none}.fig [data-at].on .halo{animation:none}}

/* Check + board steps (owner, 28 Sep 2026: "scroll up to see the shape, then choose"): the shape never leaves the screen.
   Phone / portrait: the shape sticks to the top while answers scroll under it. Wide (tablet landscape, panel): side by side. */
.qa-see{position:sticky;top:-22px;z-index:3;background:var(--bg);padding:4px 0 8px;margin:0 -4px}
.qa-see .fig{margin:0 4px 4px;padding:8px}
.qa-see .fig svg{max-height:34vh;width:auto;max-width:100%}
.qa-see .board{margin:0 4px 4px;padding:8px}
.qa-see .brd{max-height:40vh;width:auto;max-width:100%}
.qa-see .kw{margin:2px 0 8px}
.qa-see .kw span{font-size:16px;padding:6px 12px}
.qa-do{padding-top:6px}
@media (min-width:860px){
  .lr-step.t-check,.lr-step.t-board{max-width:1180px}
  .qa{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:start}
  .qa-see{top:0;margin:0;padding:0}
  .qa-see .fig svg{max-height:58vh}
  .qa-see .brd{max-height:64vh}
  .qa-do{padding-top:0}
  .t-check .opts{grid-template-columns:1fr}
}

/* No teacher bar (owner, 28 Sep 2026): Aman Sir is heard, not shown. Pause / hear-again sit small in the progress row;
   the pause button breathes while he talks. */
.tch{display:none!important}
.lr-tctl{display:flex;gap:6px;flex:none}
.lr-tctl[hidden]{display:none}
.lr-tctl .tch-b{width:34px;height:34px;font-size:13px;border-width:2px}
.lr-tctl.talk #tpause{border-color:var(--vio);animation:nstalk 1.1s ease-in-out infinite}
@keyframes nstalk{50%{box-shadow:0 0 0 5px rgba(91,61,245,.18)}}
@media (prefers-reduced-motion:reduce){.lr-tctl.talk #tpause{animation:none}}
/* Log out = icon only (owner, 28 Sep 2026) */
.lr-out{width:40px;height:40px;min-height:40px;padding:0;display:grid;place-items:center;border-radius:12px}
.lr-out[hidden]{display:none}

/* Check steps on a phone / portrait tablet (owner, 28 Sep 2026: the question scrolled away under the picture):
   the question and its options live in one card pinned to the bottom, the picture sits above it. */
@media (max-width:859px){
  .t-check .qa-see{position:static;margin:0;padding:0}
  .t-check .qa-see .fig svg{max-height:30vh}
  .t-check > .chip{display:none}
  .t-check h1{font-size:20px;margin-bottom:6px}
  .t-check .qa-do:has(.q:not(.hid)){position:sticky;bottom:-30px;z-index:4;background:#fff;margin:10px -16px -30px;padding:14px 16px 18px;
    border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(23,21,58,.10);border-top:1px solid var(--line)}
  .t-check .q{font-size:17px;line-height:1.4;margin:0 0 10px}
  .t-check .opts{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px}
  .t-check .opts.long{grid-template-columns:1fr}
  .t-check .opt{min-height:50px;padding:10px 12px;font-size:16.5px;border-width:2px;border-radius:14px;box-shadow:0 2px 0 var(--line2)}
  .t-check .opts:not(.long) .opt{justify-content:center}
  .t-check .opt i{width:24px;height:24px;font-size:12px}
  .t-check #fb .fb{margin-top:10px;font-size:15.5px;padding:10px 12px}
}
/* "पता नहीं" is asking for help, not an answer: lighter, dashed */
.opt.idk{background:transparent;border-style:dashed;box-shadow:none;color:var(--muted)}
.opt.idk i{background:transparent}
/* spoken question: each word lands with Sir's voice */
.q .qw{opacity:0;transition:opacity .18s ease,color .18s ease}
.q .qw.on{opacity:1}
@media (prefers-reduced-motion:reduce){.q .qw{transition:none}}

/* Chat-format stage (assets/scene-N.js, 28 Sep 2026): the Quadrilaterals teacher-chat pictures. Colours the stage
   code expects, kept inside .scene so the rest of NeevStep keeps its own palette. */
.scene{--orange:#C8621A;--blue:#1E5EFF;--blue-soft:#E7EDFF;--purple:#6A3BC7;--purple-soft:#F1EAFF;--green:#1E8E3E;
  --green-soft:#E8F5EC;--yellow:#FFF3BF;--wood:#C08A4A;--wood-d:#8A5E2B;--red:#C8341A;--paper:#fff;--ink:#1B1F2A;--muted:#5B6172;--line:#E2DED3;
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:8px;margin:6px 0 12px;overflow:hidden}
.scene svg{display:block;width:100%;height:auto;max-height:46vh;margin:0 auto}
.scene .strip{transition:opacity .45s ease,transform .45s ease}
.scene .joint{transition:opacity .35s ease}
.scene #shape,.scene #photo,.scene #verts,.scene #labels,.scene #compare,.scene #frame{transition:opacity .45s ease}
.scene .hl{stroke-width:10;stroke-linecap:round;opacity:0;transition:opacity .4s ease,stroke .3s}
.scene .hlu{stroke:#fff;stroke-width:18;stroke-linecap:round;opacity:0;transition:opacity .4s ease}
.scene .slab{opacity:0;transition:opacity .4s ease}
.scene .sw{font-size:27px;fill:var(--orange)}
.scene .dg{stroke:var(--purple);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420;opacity:0;transition:opacity .3s ease,stroke-dashoffset .8s ease}
.scene .dg.on{opacity:1;stroke-dashoffset:0}
.scene .vd{transition:opacity .4s ease,r .3s ease}
.scene #spot{pointer-events:none}
@media (max-width:859px){ .t-check .qa-see .scene svg{max-height:30vh} .t-check .qa-see .scene{padding:4px;margin-bottom:6px} }
@media (min-width:860px){ .qa-see .scene svg{max-height:62vh} }