@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&display=swap');
/* ============================================================
   Sage Teachers — shared shell stylesheet ("the brain" styles)
   ------------------------------------------------------------
   Loaded by every page (the homepage and, later, each per-app
   page). Global styles shared across all apps will move here
   gradually from index.html — starting with the base body rules
   and the global .hidden utility.

   Empty for now: we are wiring the spine first, then moving
   pieces over one at a time and testing each on preview.
   Started 2026-06-18.
   ============================================================ */

/* ====== Margin reset (2026-06-21) ======
   The homepage loads Tailwind, whose Preflight zeroes default element margins, so every app is
   authored assuming margins start at 0. Standalone per-app pages don't load Tailwind, so without
   this the browser's default 1em margins reappear — and because 1em scales with font-size, a big
   display number (e.g. Graph of the Day's 80px "57%") gains an 80px top+bottom margin and the
   layout blows apart. This replicates Tailwind's reset so standalone pages render like the homepage.
   Bare element selectors (specificity 0,0,1) so any Tailwind utility class still wins on the homepage. */
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd,pre{margin:0}
ul,ol,menu{margin:0;padding:0;list-style:none}

/* ====== Per-app page header frame (shared; one place) — built by Shell.mountHeader ======
   The homepage uses its own .main-header, not .st-header, so these never touch it. */
.st-header { flex-shrink: 0; display: flex; align-items: center; gap: 14px; padding: 10px 18px; background: #fff; border-bottom: 3px solid #000; }
.st-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer; }
.st-brand img { height: 34px; display: block; }
.st-wordmark { font-family: 'Space Grotesk', system-ui, sans-serif; line-height: 1; white-space: nowrap; letter-spacing: -0.03em; }
.st-wordmark .a { font-weight: 700; font-size: 1.5rem; color: #000; }
.st-wordmark .b { font-weight: 500; font-size: 1.5rem; color: #000; }
.st-spacer { flex: 1; }

/* ====== Shared header pills for per-app pages (Pilot Slice 2, 2026-06-20) ======
   SCOPED under `.st-header` on purpose: the homepage loads this same shell.css but has no
   `.st-header`, so none of these rules can affect it (zero homepage risk). When the homepage is
   migrated to the shared header later, we generalise the scope then. `.get-pro-pill`(+`.is-pro`)
   colours match index.html so applyProUI() looks consistent. */
.st-header .header-pill {
    display: inline-flex; align-items: center; gap: 8px;
    border: 2px solid #000; border-radius: 50px; padding: 6px 16px;
    font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 0.8rem;
    background: #fff; color: #000; cursor: pointer; box-shadow: 3px 3px 0 #000;
}
.st-header .get-pro-pill { background: #000; color: #fff; box-shadow: 3px 3px 0 #FFD700; position: relative; }
.st-header .get-pro-pill:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #FFD700; }
.st-header .get-pro-pill.is-pro { background: #7A9470; color: #fff; box-shadow: 3px 3px 0 #4a6440; cursor: pointer; }
.st-header .get-pro-pill.is-pro:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #4a6440; }
/* Show only the full label on the pill (the short single-glyph version is for narrow screens) —
   without this both showed at once, e.g. "✓ Pro ✓" / "⚡ Get Pro ⚡". */
.st-header .get-pro-pill .pro-short-text { display: none; }
.st-header .get-pro-pill .pro-full-text { display: inline; }
@media (max-width: 600px) {
    .st-header .get-pro-pill .pro-full-text { display: none; }
    .st-header .get-pro-pill .pro-short-text { display: inline; }
}
.st-header #sage-profile-pill { background: #fff; color: #000; }
.st-header #sage-google-pill { display: inline-flex; align-items: center; }

/* Uniform pill sizing for continuity (used by the homepage-migration header later) */
.st-header .header-pill { height: 40px; box-sizing: border-box; padding: 0 16px; display: inline-flex; align-items: center; }

/* Circular icon buttons — back + fullscreen, both identical white circles. Icon-only, no text.
   box-sizing:border-box so an <a> and a <button> render the exact same 40px size. */
.st-header .st-icon-btn {
    width: 40px; height: 40px; padding: 0; flex-shrink: 0; box-sizing: border-box;
    border: 2px solid #000; border-radius: 50%; background: #fff; box-shadow: 3px 3px 0 #000;
    cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
}
.st-header .st-icon-btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 #000; }

/* App-injected header controls (e.g. maths manipulatives' toggles) drop into this slot,
   the same #app-overlay-slot id apps already target — empty = hidden, so Tile Sheet shows nothing. */
.st-header #app-overlay-slot { display: inline-flex; align-items: center; gap: 8px; }
.st-header #app-overlay-slot:empty { display: none; }