/* ===================================================================== NARCISSOS × MHC · APP SHELL --------------------------------------------------------------------- Load order: fonts.css → tokens.css → components.css → shell.css → features/*.css Owns: base resets the old templates rely on, page background, the fixed header (.appbar) and bottom tab bar (.tabs.tabbar), page layout (.main, .view), splash, offline bar, legacy modal base (.mb/.md, paywall), the tab bar during onboarding, shared legacy classes used by more than one feature, the z-index ladder and the motion safety net. Overlays, toast, settings and onboarding layout: ui.css. LAYOUT CONTRACT FOR FEATURE VIEWS · .main pads for the real header (--hdr-h + --st) and tab bar (--tab-h + --sb). No spacer divs, ever. · Each .view carries the 20px gutter. Golden-mockup blocks (.mast, .sec, .pad) placed directly inside a .view drop their own gutter, so mockup markup can be pasted in as is and still lines up. Full-bleed blocks use margin-inline:calc(-1 * var(--gutter)). · Old templates stack .card blocks with a bottom margin (low-specificity :where() rule below). New layouts (.stack, .sec) override it for free. Z-INDEX LADDER (keep in sync with components.css, ui.css, learn.css and the JS overlays) .main 1 · dock 15 · appbar 20 · tabbar 30 · offline bar 35 · (scrim 40 · sheet/modal 50 inside their layer) · Learn reader .edr 100 (covers the app bar and the tab bar) · .mb modals 200 (#sM settings sheet, #pwM paywall) · confetti 300 · onboarding 600 (tabs 610, highlighted tab 650) · ui.js layers 700 (sheet, modal, celebration: each new layer on top of the last) · toast host 900 · splash 99999 TAB BAR RULES (init.js keyboard state machine, iOS WKWebView) .tabs stays position:fixed; bottom:0; a direct child of , with NO transform, NO will-change and NO filter on it. JS writes style.display and style.bottom on it. Style the inner .tabbar__in or the tabs instead. ===================================================================== */ /* ===================== 0. Base (legacy-safe) ===================== */ /* Old templates assume zero UA margins/paddings. Specificity 0: every class wins. */ *,*::before,*::after{margin:0;padding:0} html{overscroll-behavior:none;scroll-padding-top:calc(var(--hdr-h) + var(--st) + var(--s3))} body{min-height:100vh;min-height:100dvh;overflow-x:hidden;touch-action:manipulation; /* plain near-black page with a static paper grain (rendered once, no animation) */ background-image:var(--grain),var(--page-glow);background-repeat:repeat,no-repeat;background-size:180px 180px,100% 100%} button{-webkit-user-select:none;user-select:none} input,textarea{-webkit-user-select:text;user-select:text} /* iOS zooms into any field under 16px. Never go below. */ input,textarea,select{font-size:16px} /* the hidden attribute always wins over a component's own display (toggle rows, buttons, sections) */ [hidden]{display:none!important} :root{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .032 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); --status-band:var(--page); } [data-theme="light"]{ --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .16 0 0 0 0 .05 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* iOS keeps a white status bar (UIStatusBarStyleLightContent), so cream themes keep an ink band under it. On the web the top inset is 0 and the band vanishes. */ --status-band:var(--c-ink); } @media (prefers-color-scheme:light){[data-theme="auto"]{--status-band:var(--c-ink)}} /* Visible focus everywhere (keyboard users), ink on paper, accent on Noir */ :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--r1)} .tab:focus-visible{outline-offset:-2px} /* ===================== 1. Header ===================== */ .appbar{position:fixed;top:0;left:0;right:0;z-index:20;display:block;height:auto;gap:0; padding:var(--sat) env(safe-area-inset-right,0px) 0 env(safe-area-inset-left,0px); background:linear-gradient(var(--status-band) 0 var(--sat),transparent 0),var(--grain),var(--page);background-size:auto,180px 180px,auto; border-bottom:var(--hair) solid transparent;transition:border-color var(--d1)} .appbar.is-scrolled{border-bottom-color:var(--rule)} .appbar__in{display:flex;align-items:center;gap:2px;height:var(--appbar-h);max-width:var(--app-w);margin:0 auto;padding:0 6px 0 4px} .appbar__logo{border-radius:var(--r1)} .appbar__logo:active .pipsa{transform:rotate(-8deg) scale(.94)} .appbar__logo .pipsa{transition:transform var(--d2) var(--ease-stick)} .statpair{gap:0;padding:0;height:var(--tap)} .statpair .stat{height:var(--tap);padding:0 9px;border-radius:var(--r1);color:var(--fg)} .statpair .stat:active{transform:scale(.94)} .stat__v{min-width:1ch} .langbtn{color:var(--fg)} .langbtn:active,.iconbtn:active{transform:scale(.92)} /* narrow phones (320: iPhone SE / mini with Display Zoom; 360: small Android): a tighter row so the help and settings buttons stay on screen with 5-digit points. Every target keeps its 44px height. */ @media (max-width:374px){ .appbar__in{gap:0;padding:0 2px 0 0} .appbar__logo{width:40px} .statpair .stat{padding:0 5px} .statpair__sep{display:none} } @media (max-width:359px){ .statpair .stat{padding:0 4px;font-size:14px} .statpair .stat .ic{width:17px;height:17px} /* the help button needs the room: the theme stays one tap away in Settings */ #tB{display:none} } /* points counter bump after earning points (aP adds .sf) */ .sf{animation:sB .4s var(--ease-stick)} @keyframes sB{0%{transform:scale(1)}30%{transform:scale(1.18) rotate(-3deg)}100%{transform:none}} /* ===================== 2. Page layout ===================== */ .main{position:relative;z-index:1;max-width:var(--app-w);margin:0 auto; padding:calc(var(--hdr-h) + var(--st) + var(--s4)) env(safe-area-inset-right,0px) calc(var(--tab-h) + var(--sb) + var(--s8)) env(safe-area-inset-left,0px); /* Nothing may stick out sideways, not even for a frame: a tilted card mid-animation (anim-stick scales it up) made mobile browsers widen the layout viewport (428 → 435 px), so the fixed splash grew wider than the screen and window.innerHeight grew with it, which pinned the tab bar above the bottom. body's overflow-x:hidden goes to the viewport and does not stop that; clip (not hidden) keeps .main from becoming a scroll container, so the sticky docks inside the views still work. */ overflow-x:clip} /* keyboard open: the tab bar is hidden (init.js), drop its reservation */ body.kbOpen .main{padding-bottom:calc(var(--sb) + var(--s5))!important} .view{display:none;padding:0 var(--gutter)} .view.active{display:block;animation:view-in var(--d2) var(--ease-out)} @keyframes view-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* golden-mockup blocks inside a view: the view already carries the gutter */ .view>.mast,.view>.sec,.view>.pad{padding-left:0;padding-right:0} .view>.mast{padding-top:var(--s4)} /* old templates stack cards with a bottom margin; specificity 0 so new layouts win */ :where(.view) :where(.card){margin-bottom:var(--s4)} /* ===================== 3. Tab bar ===================== */ /* The