/* =========================================================================== * app-surface.css — responsive shell: phone → iPad → iPad landscape → desktop * =========================================================================== * Loaded by BOTH the dev shell and the production build (it is a real file, so * there is no dev/prod copy to drift). Everything here keys off the * `data-surface` attribute that surface.js stamps on — never off a raw * media query — so the dev device-frame preview and a real iPad resolve the * same rules from the same measurement. * * phone the shell as it always was: full-bleed, two-tier topbar * tablet same chrome, wider column, roomier gutters * desktop the topbar is REPLACED by a persistent left sidebar (.sidenav) * * The layout box the app actually lives in is: * .shell scroll container (flex row at desktop) * .sidenav desktop only — sticky nav rail * .shell-body topbar + main.stage * ========================================================================= */ :root { --content-max: 560px; --content-wide: 560px; --gutter: 16px; --sidenav-w: 248px; } html[data-surface="tablet"] { --content-max: 680px; --content-wide: 820px; --gutter: 24px; } html[data-surface="desktop"] { --content-max: 760px; --content-wide: 1120px; --gutter: 32px; } /* ---------- Shell skeleton ------------------------------------------------ * `.shell-body` exists so the sidebar can be a sibling of the topbar+main * stack rather than a peer of the topbar. It is layout-neutral below desktop. */ .shell-body { display: block; min-width: 0; } html[data-surface="desktop"] .shell { display: flex; align-items: flex-start; } html[data-surface="desktop"] .shell-body { flex: 1; min-width: 0; /* The sidebar carries the app's identity now, so the content plane gets the cream page tone edge-to-edge. */ background: var(--bg); min-height: 100dvh; } /* Row 1/2 of the topbar ARE the sidebar's content at desktop — showing both would be two navigations for the same destinations. */ html[data-surface="desktop"] header.topbar { display: none !important; } /* ---------- Sidebar (desktop only) --------------------------------------- */ .sidenav { display: none; } html[data-surface="desktop"] .sidenav { display: flex; flex-direction: column; flex: 0 0 var(--sidenav-w); width: var(--sidenav-w); box-sizing: border-box; align-self: flex-start; position: sticky; top: 0; height: 100dvh; /* When the shell is given a definite height — the dev device frame, and any packaged native shell that insets the web view — 100dvh is the WINDOW, not the box we actually live in, and the pinned footer (Settings) falls off the bottom. In production .shell is auto-height, where this resolves to none. */ max-height: 100%; overflow-y: auto; padding: 20px 12px calc(14px + env(safe-area-inset-bottom)); background: var(--bg-deep); border-right: 1px solid var(--line); gap: 2px; } /* Hidden while the first-run scrim owns the screen. */ html.fresh-user .sidenav { display: none !important; } .sidenav-brand { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px 16px; } .sidenav-brand-name { font-family: var(--font-head); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: var(--ink); line-height: 1.15; } .sidenav-brand-sub { font-size: 9px; color: var(--ink-soft); letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; } .sidenav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; } .sidenav-group[hidden] { display: none; } .sidenav-label { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); padding: 6px 10px 4px; } /* Nav items follow the app's surface language: a selected row is the RAISED, tappable card tone against the deeper rail; the rest are quiet text rows. */ .sidenav-item { appearance: none; background: transparent; border: 1px solid transparent; border-radius: 10px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: left; padding: 9px 10px; display: flex; align-items: center; gap: 9px; width: 100%; box-sizing: border-box; line-height: 1.25; transition: background 0.12s ease, color 0.12s ease; } .sidenav-item:hover:not(:disabled) { background: rgba(42, 38, 32, 0.05); color: var(--ink); } .sidenav-item[aria-selected="true"] { background: var(--card); border-color: var(--line); color: var(--ink); box-shadow: 0 1px 2px rgba(42, 38, 32, 0.05); } .sidenav-item:disabled { opacity: 0.45; cursor: default; } .sidenav-item-sub { display: block; font-size: 11px; font-weight: 500; color: var(--ink-faint); margin-top: 2px; } .sidenav-item-text { min-width: 0; } .sidenav-spacer { flex: 1 1 auto; min-height: 12px; } .sidenav-foot { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 8px; } .sidenav-item svg { flex: 0 0 auto; opacity: 0.75; } .sidenav-streak { font-size: 11px; color: var(--ink-soft); padding: 4px 10px 6px; font-weight: 600; } .sidenav-streak[hidden] { display: none; } /* ---------- Main stage --------------------------------------------------- * The phone shell pins main.stage to the 874px device height. On a real * tablet/desktop viewport that number means nothing — fill the viewport. */ html[data-surface="tablet"] main.stage, html[data-surface="desktop"] main.stage { min-height: calc(100dvh - 96px); } html[data-surface="desktop"] main.stage { min-height: 100dvh; padding-top: 22px; } html[data-surface="tablet"] .subject-root, html[data-surface="desktop"] .subject-root { min-height: 0; } /* ---------- Mode screens -------------------------------------------------- * `.mode-screen` is the shared wrapper for every full-screen sub-surface * (skill drills, past papers, the Editing Lab, the vocab modes). One rule * centres all of them in the readable column instead of letting a phone * layout stretch to 1400px. A screen that genuinely wants the whole plane — * the two-pane runner, a year test — adds `.mode-screen--wide`. */ html[data-surface="tablet"] .mode-screen, html[data-surface="desktop"] .mode-screen { max-width: var(--content-max); margin: 0 auto; width: 100%; box-sizing: border-box; } html[data-surface="tablet"] .mode-screen--wide, html[data-surface="desktop"] .mode-screen--wide { max-width: var(--content-wide); } /* ---------- Mode header -------------------------------------------------- * The shared back/progress/eyebrow header (window.ModeHeader) is a full-bleed * strip. Once the content below it is a centred column, a Back button pinned * to the far left of a 1400px window reads as belonging to something else — * so the header takes the same column and the same gutter as its content. * `.is-wide` (the split runner) opts into the wider budget. */ html[data-surface="tablet"] .mode-header, html[data-surface="tablet"] .mode-header-eyebrow, html[data-surface="tablet"] .progress-bar-track, html[data-surface="desktop"] .mode-header, html[data-surface="desktop"] .mode-header-eyebrow, html[data-surface="desktop"] .progress-bar-track { max-width: var(--content-max); margin-left: auto; margin-right: auto; width: 100%; box-sizing: border-box; padding-left: var(--gutter); padding-right: var(--gutter); } html[data-surface="desktop"] .is-wide .mode-header, html[data-surface="desktop"] .is-wide .mode-header-eyebrow, html[data-surface="desktop"] .is-wide .progress-bar-track { max-width: var(--content-wide); } /* ---------- Settings ------------------------------------------------------ * A settings form at 1200px wide is unreadable. Centre it in the content * column like every other surface, and let the body use the two-column * budget so long option lists don't become a mile of scrolling. */ html[data-surface="tablet"] .settings-page, html[data-surface="desktop"] .settings-page { max-width: var(--content-wide); margin: 0 auto; padding: 28px var(--gutter) 64px; width: 100%; box-sizing: border-box; } html[data-surface="desktop"] .settings-page { min-height: 100dvh; } html[data-surface="tablet"] .settings-body, html[data-surface="desktop"] .settings-body { max-width: var(--content-max); } html[data-surface="desktop"] .settings-title { font-size: 34px; } /* ---------- Onboarding ---------------------------------------------------- * The first-run flow is a modal column and stays one; it just gets air. */ html[data-surface="desktop"] .onboard-shell { max-width: 620px; } /* ---------- Pointer affordances ------------------------------------------ * A desktop user hovers before they click. The phone build has almost no hover * states because nothing hovers on a touchscreen; add the minimum so the app * doesn't feel inert under a cursor. Scoped to real pointers so a Magic * Keyboard iPad gets it and a finger doesn't. */ @media (hover: hover) and (pointer: fine) { html[data-surface="desktop"] button:not(:disabled), html[data-surface="tablet"] button:not(:disabled) { transition: filter 0.12s ease, transform 0.12s ease; } html[data-surface="desktop"] button:not(:disabled):hover { filter: brightness(0.985); } } /* ---------- Wide-surface scrollbars -------------------------------------- * The rail and the content plane scroll independently at desktop; keep the * bars quiet so the app doesn't grow two loud gutters. */ html[data-surface="desktop"] .sidenav::-webkit-scrollbar { width: 8px; } html[data-surface="desktop"] .sidenav::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; } html[data-surface="desktop"] .sidenav::-webkit-scrollbar-track { background: transparent; }