/* ==========================================================================
   Shared base styles — Claude Code Training
   Extracted from per-page <style> blocks (Phase 3 CSS dedup).

   This file holds ONLY rules verified byte-identical (or safely split into
   an identical common subset + per-page override) across 3+ pages. Anything
   page-specific, or anything with even a minor value conflict between pages,
   was deliberately left in that page's own inline <style> block. See a few
   rules below marked "(base — pages add their own override)": the property
   set here is intentionally partial; each consuming page supplies the
   remaining page-specific properties (padding, max-width, gap, z-index, etc.)
   in its own <style> block, loaded after this stylesheet so its overrides win.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Layout tokens used by the shared app-rail rules at the bottom of this file. Defined here
       rather than per page, or a page that forgets them silently loses the rail's geometry. */
    --nav-h:        69px;
    --sidebar-w:    300px;
    --ink:          #1B365D;
    --ink-deep:     #122543;
    --accent:       #487A7B;
    --accent-light: rgba(72,122,123,0.10);
    --accent-mid:   rgba(72,122,123,0.25);
    --muted:        #707372;
    --imb-red:      #B83A4B;
    --imb-teal:     #009681;
    --imb-orange:   #E87722;
    --imb-yellow:   #F3D54E;
    --bg:           #F7F8FA;
    --white:        #FFFFFF;
    --border:       #DDE1E7;
    --shadow-sm:    0 1px 3px rgba(27,54,93,0.08);
    --shadow-md:    0 4px 12px rgba(27,54,93,0.12);
    --radius:       10px;
    --success:      #2E8B57;
    --success-bg:   rgba(46,139,87,0.10);
}

/* Matches assessments.html, samples.html, index.html, lessons.html verbatim.
   admin.html, assessment.html, assessment-org.html keep their own distinct
   body rule inline (different font-family fallback and/or min-height), which
   fully overrides every property set here. */
body { font-family: 'Source Sans 3', 'Segoe UI', sans-serif; background: var(--bg); color: var(--ink); line-height: 1.65; }

/* NAV — base (all 7 pages; z-index differs 50/100 and is set per-page) */
.nav { background: var(--white); border-bottom: 1px solid var(--border); position: sticky; top: 0; box-shadow: var(--shadow-sm); }
/* NAV — inner common subset (all 7 pages; max-width and gap differ and are set per-page) */
.nav-inner { margin: 0 auto; padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }

/* NAV links — matches assessments.html, samples.html, index.html verbatim;
   lessons.html adds `align-items: center` via its own supplemental rule. */
.nav-links { display: flex; gap: 1.5rem; list-style: none; }
/* Matches assessments.html, samples.html, index.html, lessons.html verbatim. */
.nav-links a { font-family: 'Nunito Sans', sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: color .2s; }
/* Hover color (accent) agrees across assessments/samples/index/lessons even
   though assessments.html and samples.html separately style `.active` with
   two different colors (ink vs accent) — those `.active` rules stay inline. */
.nav-links a:hover { color: var(--accent); }

/* HERO — base gradient/color/text-align (assessments/index/lessons/samples).
   Padding (and position/overflow on assessments+index) differ per page and
   are set in each page's own <style> block, layered on top of this base. */
.hero { background: linear-gradient(135deg, var(--ink) 0%, var(--ink-deep) 55%, #0E1E38 100%); color: var(--white); text-align: center; }

/* FOOTER — matches assessments.html, samples.html, index.html, lessons.html
   verbatim. admin.html, assessment.html, assessment-org.html have no
   .footer element in their markup, so these rules are inert there. */
.footer { background: var(--white); color: var(--muted); padding: 2.5rem 1.5rem; text-align: center; border-top: 1px solid var(--border); }
.footer-inner { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.footer-logo { height: 48px; opacity: 1; }
.footer p { font-size: 0.85rem; }
.footer a { color: var(--accent); font-weight: 600; }
.footer a:hover { color: var(--ink); }

/* PAGE wrapper — matches assessments.html, index.html, lessons.html verbatim.
   samples.html overrides with its own complete .page rule (880px). */
.page { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; }

/* ==========================================================================
   APP RAIL — the fixed full-height left rail, shared by lessons.html (course
   reader) and admin.html (admin console).
   
   Lives here rather than inline on each page because it is now genuinely shared:
   two pages, one implementation. The page-specific contents of the rail — lesson
   rows, admin section links — stay inline on their own page.
   
   The rail is `fixed`, not `sticky`. It was sticky once and never worked:
   align-items:stretch made it exactly as tall as its containing block, and a
   sticky box with zero slack has nowhere to travel, so it scrolled away with the
   page. `overflow: hidden` here plus `overflow-y: auto` on .sidebar-modules is
   what pins the brand — the rail never scrolls, only the list inside it does.
   ========================================================================== */
.course-layout { display: flex; align-items: stretch; min-height: calc(100vh - var(--nav-h)); }
.course-main { flex: 1; min-width: 0; }

.course-sidebar {
    width: var(--sidebar-w); flex-shrink: 0;
    position: fixed; top: 0; left: 0; bottom: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--ink) 0%, var(--ink-deep) 100%);
    border-right: 1px solid rgba(255,255,255,0.08);
    display: flex; flex-direction: column;
    z-index: 120;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.sidebar-header { padding: 1.35rem 1.1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
.sidebar-modules { flex: 1; overflow-y: auto; padding: 0.5rem 0; }
.sidebar-footer { padding: 0.85rem 1.1rem; border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }

/* Brand block: logo centred, name under it. The name is white because the rail is
   navy — it shipped once as var(--ink), a 1.00:1 contrast against its own background. */
.sidebar-brand { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-decoration: none; padding: 0.25rem 0 0.9rem; }
.sidebar-brand-logo { display: block; width: 150px; height: auto; max-width: 100%; }
.sidebar-brand-name { font-family: 'Nunito Sans', sans-serif; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.01em; color: var(--white); text-align: center; }
.sidebar-brand:hover .sidebar-brand-name { color: var(--imb-yellow); }

@media (min-width: 901px) {
    /* The rail is out of flow, so the bar and the content are pulled clear of it — but ONLY on the
       pages that actually have a rail. Unscoped, this offsets the nav on every page loading this
       stylesheet and leaves a 300px gap beside the bar on the ones without one. */
    body.has-rail .nav { margin-left: var(--sidebar-w); }
    body.has-rail .course-main { margin-left: var(--sidebar-w); }
}
@media (max-width: 900px) {
    /* Off-canvas drawer. Each page supplies its own toggle button and backdrop. */
    .course-sidebar {
        top: var(--nav-h); height: calc(100vh - var(--nav-h));
        width: 84vw; max-width: 320px;
        z-index: 150; transform: translateX(-100%);
        transition: transform .24s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 24px rgba(0,0,0,0.3);
    }
    .course-sidebar.is-open { transform: translateX(0); }
}