/* Simple Learning Hub — LEARN section (chapter reading + interactive diagram viewer). See HANDOVER.md → "Learn section". */
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/learn/a/poppins-700.woff2) format('woff2')}
html:not([data-ln=hi]) .Lh,html:not([data-ln=hg]) .Lg,html[data-ln=hi] .Le,html[data-ln=hg] .Le:has(~ .Lg){display:none!important}
.lrn{max-width:760px;margin:0 auto;padding:0 14px 40px}
.lrn h1{font-size:1.45rem;line-height:1.25;margin:.3em 0 .2em}
.lrn .sub{color:var(--mut);margin:0 0 10px}
.lrn h2{font-size:1.18rem;line-height:1.3;margin:1.6em 0 .5em;padding-top:.4em;border-top:2px solid var(--line);scroll-margin-top:70px}
.lrn h3{font-size:1.02rem;margin:1.3em 0 .4em;scroll-margin-top:70px}
.lrn h2 .sn,.lrn h3 .sn{display:inline-block;min-width:2.4em;margin-right:.45em;color:var(--link);font-variant-numeric:tabular-nums}
.lrn p,.lrn li{line-height:1.7;font-size:1rem}
.lrn ul,.lrn ol{padding-left:1.25em}
.lrn .figref{font-size:.78rem;font-weight:600;color:var(--mut);white-space:nowrap}
.lrn .box{border-left:4px solid var(--y);background:var(--soft);border-radius:8px;padding:10px 12px;margin:12px 0}
.lrn .box b.bt{display:block;margin-bottom:2px}
.lrn .ex{border-left-color:#39e27a}
.lrn .ncert{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.lrn .pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:6px 12px;background:var(--card);color:var(--ink);text-decoration:none;font-size:.88rem;font-weight:600}
.lrn .how{font-size:.9rem;background:var(--card);border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:10px 0}
.lrn .toc{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 12px;margin:12px 0}
.lrn .toc summary{cursor:pointer;font-weight:700;padding:6px 0}
.lrn .toc ol{list-style:none;padding:0;margin:4px 0 8px}.lrn .toc li{line-height:1.5;padding:3px 0;font-size:.93rem}.lrn .toc li.s3{padding-left:1.6em;font-size:.88rem}
.lrn .toc a{color:var(--ink);text-decoration:none}.lrn .toc a span{color:var(--link);font-weight:700;margin-right:6px}
/* concept chips */
a.cc{display:inline;color:var(--link);font-weight:600;text-decoration:none;border-bottom:2px dotted currentColor;padding:0 1px;border-radius:3px;white-space:normal;-webkit-tap-highlight-color:rgba(255,210,31,.35)}
a.cc .ic{display:inline-block;width:1.05em;height:1.05em;margin-left:2px;vertical-align:-.15em;border-radius:4px;background:var(--link);color:#fff;font-size:.62em;line-height:1.75em;text-align:center;font-weight:800;font-style:normal}
a.cc.d3 .ic{background:#7b3fe4}
a.cc:hover,a.cc:focus-visible{background:rgba(255,210,31,.3)}
dfn.kt{font-style:normal;font-weight:700;border-bottom:1px dashed var(--mut);cursor:help}
#ktip{position:absolute;z-index:60;max-width:290px;background:#081c2c;color:#fff;border-radius:10px;padding:9px 11px;font-size:.88rem;line-height:1.45;box-shadow:0 6px 24px rgba(0,0,0,.3)}
#ktip b{color:#ffd21f}#ktip i{display:block;font-style:normal;opacity:.85;margin-top:3px}
/* diagram strip */
.dstrip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.dcard{flex:0 0 138px;scroll-snap-align:start;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;padding:6px;font-size:.8rem;line-height:1.3;display:flex;flex-direction:column;gap:5px}
.dcard img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;border-radius:8px}
.dcard b{font-size:.8rem}.dcard small{color:var(--mut);font-size:.72rem}
.dgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.dgrid .dcard{flex:none}
/* inline figure button inside notes */
.fig{display:flex;gap:10px;align-items:center;border:1px solid var(--line);background:var(--card);border-radius:12px;padding:8px;margin:12px 0;color:var(--ink);text-decoration:none}
.fig img{width:84px;height:84px;object-fit:contain;background:#fff;border-radius:8px;flex:none}
.fig b{display:block}.fig small{color:var(--mut)}.fig .go{margin-left:auto;font-weight:700;color:var(--link);white-space:nowrap;font-size:.85rem}
/* end blocks */
.endg{display:grid;gap:10px;margin:14px 0}
.endc{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:12px;color:var(--ink);text-decoration:none}
.endc .e{font-size:1.6rem}.endc b{display:block}.endc small{color:var(--mut)}
.pn{display:flex;gap:8px;justify-content:space-between;margin:18px 0}.pn a{flex:1}
/* viewer */
.lv{position:fixed;inset:0;z-index:50;background:rgba(4,14,22,.6);display:flex;align-items:flex-end;justify-content:center}
.lv[hidden]{display:none}
.lvp{background:var(--card);color:var(--ink);width:100%;max-width:760px;height:100%;max-height:100%;display:flex;flex-direction:column;border-radius:0;overflow:hidden}
@media(min-width:800px){.lv{align-items:center}.lvp{height:92vh;border-radius:16px}}
.lvin{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--card);display:flex;flex-direction:column;height:min(88vh,820px)}
.lvh{display:flex;align-items:flex-start;gap:8px;padding:10px 12px 6px;border-bottom:1px solid var(--line)}
.lvh .t{flex:1;min-width:0}.lvh .t b{display:block;font-size:1rem;line-height:1.3}.lvh .t small{color:var(--mut);font-size:.76rem}
.lvb{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:9px;min-width:38px;height:38px;font-size:1rem;font-weight:700;cursor:pointer;padding:0 9px}
.lvb[aria-pressed=true]{background:var(--y);color:#081c2c;border-color:var(--y)}
.lvg{display:flex;gap:6px;overflow-x:auto;padding:6px 10px;border-bottom:1px solid var(--line)}
.lvg button{flex:none;border:1px solid var(--line);background:var(--soft);color:var(--ink);border-radius:999px;padding:5px 11px;font-size:.8rem;font-weight:600;cursor:pointer}
.lvg button.on{background:#081c2c;color:#ffd21f;border-color:#081c2c}
.lvc{position:relative;flex:1;min-height:0;overflow:hidden;background:#fff;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.lvc .cv{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.lvc svg{display:block;width:100%;height:100%}
.lvz{position:absolute;right:6px;top:6px;display:flex;gap:5px}.lvz .lvb{min-width:34px;height:34px;padding:0 6px}
.lvz .lvb{background:rgba(255,255,255,.94);color:#081c2c;border-color:#cfd8de}
.lvs{display:flex;align-items:center;gap:6px;padding:7px 10px;border-top:1px solid var(--line);background:var(--soft)}
.lvs .cap{flex:1;font-size:.86rem;line-height:1.35;min-height:2.7em}
.lvs .n{font-size:.75rem;color:var(--mut);white-space:nowrap}
.lvi{padding:9px 12px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.5;min-height:4.4em;max-height:34vh;overflow:auto}
.lvi .nm{font-weight:700;font-size:1rem}.lvi .hn{color:var(--mut);margin-left:6px}
.lvi .tip{color:var(--mut)}
.lvf{display:flex;gap:12px;flex-wrap:wrap;padding:6px 12px 10px;font-size:.8rem;border-top:1px solid var(--line)}
.lvf a{color:var(--link)}
.lvload{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#56636e;font-size:.9rem}
/* svg states (the diagram's own colours live in each SVG) */
.lvc svg [data-p]{cursor:pointer;transition:opacity .25s}
.lvc svg.sel [data-p]:not(.on){opacity:.18}
.lvc svg.sel .lb:not(.on){opacity:.12}
.lvc svg .on:not(.lb){animation:lvpulse 1.2s ease-in-out 2}
.lvc svg .lb.on text{font-weight:800;fill:#c2185b}
.lvc svg .lb.on line,.lvc svg .lb.on polyline,.lvc svg .lb.on path{stroke:#c2185b;stroke-width:2}
@keyframes lvpulse{50%{opacity:.55}}
.lvc svg.nolbl .lb{display:none}
.lvc svg [data-s]{transition:opacity .45s}
.lvc svg .hid{opacity:0!important;pointer-events:none}
.quiz .lb text{fill:transparent}

.lvp [hidden],.lvin [hidden]{display:none!important}
.cc .ic{display:inline-block;width:.5em;height:.5em;margin-left:.35em;border:2px solid currentColor;transform:rotate(45deg);border-radius:2px;vertical-align:.08em;opacity:.8}.cc.d3 .ic{border-radius:50%;transform:none}

/* reading-language switch (English | हिंदी | Hinglish) */
.lsw{position:sticky;top:var(--hdrh,60px);z-index:15;display:flex;gap:6px;margin:10px -4px 8px;padding:7px 4px;background:var(--bg,#fff);border-bottom:1px solid var(--line,#e3e8ec)}
.lsw button{flex:1;min-height:46px;border:2px solid #cfd8de;border-radius:12px;background:var(--card,#fff);color:inherit;font:700 1rem/1.1 system-ui,sans-serif;cursor:pointer}
.lsw button[data-ln=hi]{font-family:"Noto Sans Devanagari",system-ui,sans-serif;font-size:1.06rem}
.lsw button.on{background:#0b3c5d;border-color:#0b3c5d;color:#fff}
.lsw button small{display:block;font-weight:500;font-size:.68rem;opacity:.8;margin-top:2px}
.lswh{font-size:.82rem;margin:-2px 0 10px;color:var(--mut,#56636e)}
/* tap-to-understand */
.tb{position:relative;cursor:pointer;-webkit-tap-highlight-color:rgba(255,193,7,.25)}
.tb .trb{display:inline-flex;align-items:center;justify-content:center;width:30px;height:26px;margin-left:6px;vertical-align:middle;border:1.5px solid #ffb300;background:#fff8e1;color:#b26a00;border-radius:8px;font:700 .9rem/1 "Noto Sans Devanagari",system-ui,sans-serif;cursor:pointer;padding:0}
.box.tb .trb{position:absolute;top:8px;right:8px;margin:0}
.tb.trsel{background:#fff8e1;box-shadow:0 0 0 3px #fff8e1;border-radius:6px}
#trsw{position:fixed;inset:0;z-index:60;pointer-events:none}
#trsw.on{pointer-events:auto}
#trsbg{position:absolute;inset:0;background:rgba(8,28,44,.35);opacity:0;transition:opacity .2s}
#trsw.on #trsbg{opacity:1}
#trs{position:absolute;left:0;right:0;bottom:0;max-height:72vh;overflow:auto;background:var(--card,#fff);color:var(--ink,#14212b);border-radius:18px 18px 0 0;padding:12px 14px 18px;box-shadow:0 -8px 30px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .22s ease-out}
#trsw.on #trs{transform:none}
#trs .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
#trs .x{width:40px;height:40px;border-radius:50%;border:1px solid #cfd8de;background:transparent;font-size:1.1rem;cursor:pointer;color:inherit}
#trs .tabs{display:flex;gap:6px;margin-bottom:10px}
#trs .tabs button{flex:1;min-height:44px;border-radius:11px;border:2px solid #cfd8de;background:transparent;color:inherit;font:700 .95rem/1.1 system-ui,"Noto Sans Devanagari",sans-serif;cursor:pointer}
#trs .tabs button.on{background:#ffb300;border-color:#ffb300;color:#14212b}
#trs .tabs button:disabled{opacity:.4}
#trs .tx{font-size:1.06rem;line-height:1.65;padding:10px 12px;background:#fffdf5;border:1px solid #ffe082;border-radius:12px}
#trs .tx[lang=hi]{font-family:"Noto Sans Devanagari",system-ui,sans-serif;font-size:1.1rem}
#trs .tx .bt{display:block;margin-bottom:4px}
#trs .ft{font-size:.78rem;opacity:.75;margin:8px 2px 0}
html.trsopen{overflow:hidden}
html[data-theme=dark] #trs .tx{background:#1d2a33;border-color:#5d4a14}
/* premium v1 (2026-11-01) */.lrn h1{letter-spacing:-.02em}.lrn h2{border-top:1px solid var(--line)}.lrn .box{border-radius:12px;border-left-width:3px}.lrn .ex{border-left-color:#3fb3a9}.lrn .pill{box-shadow:0 1px 2px rgba(7,26,38,.05);transition:border-color .2s}.lrn .pill:hover{border-color:rgba(13,79,95,.4)}.lrn .toc,.dcard,.fig,.endc{border-radius:14px;box-shadow:0 1px 2px rgba(7,26,38,.05),0 6px 18px -8px rgba(7,26,38,.14)}.dcard,.fig,.endc{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}.dcard:active,.fig:active,.endc:active{transform:scale(.985)}.lrn .toc{display:block;padding:8px 14px}.lrn .toc a{display:inline;border:0;background:transparent;padding:0;border-radius:0;font-size:inherit}.lrn .toc li{border-bottom:1px solid var(--line);padding:7px 0}.lrn .toc li:last-child{border-bottom:0}
