/* ═══════════════════════════════════════════════════════════════════════════════════════════════ AI Learning — the chrome rules for the whole experience. [2026-08-03] Pawan: "we never want header and footer to win — only first time when you start you show header, and it shall never have any blank white row on top of it, then it shrinks to 2%, same for footer. We focus on screen. We are okay with scrollbars, we don't want this to be artificial, so use article templates not artificial app template." Everything here is PAGE-SCOPED. Not one line of assets/shell/shell.js or shell.css changes, because those carry fifteen other surfaces including the kids' sound apps, and this is a request about this course rather than about the site. What the shell already gives us, which I nearly rebuilt by hand before reading it: · .sh-topbar.sh-slim — the header collapses to a 24px strip with a peek button, guarded against the flutter loop. That IS "shrinks to 2%", already built and already correct. · .sh-foot .sh-expand — the roll-out site map. The expander he asked for already exists. · [data-shell-mode="app"] .sh-cont{display:none} — app mode already hides the Continue pills. So there are only two things to actually do. ═══════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── 1 · the footer stops competing ────────────────────────────────────────────────────────────── The four Continue pills — CBSE Tutor, Grammar Academy, Thinking Lab, Junior Maths — are four alternative journeys offered at the exact moment a learner is inside this one. They are not deleted; they live one tap away inside the site map that the expander already opens. What is left is a thin bar with one control on it. */ .sh-cont{display:none} /* The bar that remains should read as a rule at the bottom of the page, not as a section. */ .sh-foot .sh-fbar{padding-top:.55rem;padding-bottom:.55rem;min-height:0} .sh-foot .sh-expand{font-size:var(--fs-ui,var(--fs-ui,14px));padding:.42rem .8rem;min-height:34px; border-color:transparent;background:transparent;opacity:.72} .sh-foot .sh-expand:hover{opacity:1;border-color:var(--sh-border);background:var(--sh-card)} /* ── 2 · nothing above the header, ever ────────────────────────────────────────────────────────── shell.js injects the topbar as the FIRST CHILD of . Any vertical padding on body therefore lands ABOVE it and prints a blank strip over the header — which is exactly what Pawan saw. The day pages were fixed on 1 August; this makes it structural for the whole folder so no new page can reintroduce it. Horizontal padding is fine and stays with .wrap. */ body{padding-top:0 !important;padding-bottom:0 !important;margin-top:0 !important} /* ── 3 · the article template, which is the default and the only one ───────────────────────────── Pawan: "we are okay with scrollbars, use article templates not artificial app template." A page of explanation that cannot be scrolled back is an article wearing an app costume — the reader cannot re-read the sentence two screens ago, which is the one thing a beginner does most. The apps-never-scroll rule still holds for tools and games. It was never about prose. Scrolling also has a second job here: the shell only slims the header once the page has runway (maxY > 1.2 viewports). A locked 100svh page can never slim, so an app-shaped page is a page whose header is guaranteed to stay full height forever — the opposite of what was asked for. */ .exp-article{width:min(95vw,760px);margin:0 auto;padding:26px 14px 40px} @media(max-width:759px){.exp-article{padding:18px 12px 32px}} /* one idea per screenful, with real air between — the page is the content, nothing else competes */ .exp-sec{padding:0 0 2.6rem} .exp-sec + .exp-sec{border-top:1px solid var(--border-soft);padding-top:2.4rem} .exp-sec > * + *{margin-top:.9rem}