/* ============================================================================
   site-chrome.css — the MEPasado header, in one file.

   WHAT THIS IS
   ------------
   Every page on this site carries the same bar: the gear lockup, the burger
   toggle, the theme control, and the 40-course catalog mega-menu. Until now
   each page carried its own COPY of the rules behind that bar — 45 copies,
   and they drifted. `List of Courses.html` sat a full generation behind for
   weeks: no lockup, no mega-menu, no theme toggle, and nobody noticed,
   because nothing tied the copies together.

   This file holds the rules that were BYTE-IDENTICAL on all five surfaces
   (course pages, the Web Apps hub, the landing page, the catalog and
   Pricing) at the time of extraction. Nothing here was redesigned; it is a
   lift, verified by screenshot-diffing every page before and after.

   WHAT IS DELIBERATELY *NOT* HERE
   -------------------------------
   Four things differ by design and stay in each page's own <style>:

     1. THE TOKEN BLOCKS.  Course pages and the hub are Editorial Notebook
        (bone/cobalt) with an Ebora alternate; the landing, catalog and
        Pricing are Ebora (lavender/indigo). Same token NAMES, different
        values — that is the whole point of the split. This file only ever
        reads tokens, never declares them.

     2. `.nav` LAYOUT.  Flex space-between on course/hub/catalog, a
        1fr-auto-1fr grid on the landing and Pricing, which centre their
        section links between the brand and the actions.

     3. `.nav-btn`.  Two deliberate variants: outlined-ink where the row is
        peer destinations, bare-until-hover where the landing is ranking one
        action above the rest.

     4. THE BURGER BREAKPOINT.  880px on course pages (their row is shorter,
        and 880 is already where the page stops being an app shell), 1000px
        on the root pages. Both were measured against the real row width,
        including the Sign in / Sign up pair that course-menu.js injects.

   THE MEGA-MENU IS A CONTRACT
   ---------------------------
   `.mega-grid`, `.mega-col`, `.mega-h`, `.mega-list`, `.mega-dot`,
   `.mega-dot.is-wip`, `.mega-name` are not free-floating class names — they
   are the markup `MEPasadoCourses.renderMenu()` emits from course-menu.js.
   Change one of those names here and you must change it there in the same
   commit. That coupling is the main reason this file exists: the styles and
   the markup that needs them now live one directory apart instead of being
   scattered across 45 pages.

   LOADING
   -------
   Linked BEFORE each page's own <style>, so a page can still override
   anything here. Root pages use `theme/site-chrome.css`, course pages
   `../theme/site-chrome.css`. It is a plain stylesheet on purpose: pages on
   this site must work opened straight off disk, and a <link> loads fine over
   file:// where a module script would not. If it ever fails to load, the
   page is unstyled but COMPLETE — every link still works.

   Registered in Deploy\build-vault.ps1 (staged copy + URL rewrite), the same
   as course-menu.js. A new shared asset that skips that step 404s once
   deployed.
   ============================================================================ */

/* ---------- base ---------- */
*{box-sizing:border-box;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:var(--accent-dark);}
::selection{background:var(--accent-tint-edge);}

/* ---------- scrollbars ----------
   Rounded pill thumbs, sitewide, that highlight on hover and while dragging.
   The colours are TRANSLUCENT neutrals on purpose: a single grey-blue at low
   alpha reads as a soft light grey over the light themes (bone / lavender /
   white) and as a soft light thumb over the dark theme, so this one block is
   correct in every palette WITHOUT a per-theme selector — which matters
   because this file only ever reads tokens and the pages disagree on token
   names. `:active` (dragging) jumps to the page's own --accent so the bar you
   are holding is unmistakable. The 2px transparent border + background-clip
   floats the pill inside the track with a margin, so it reads as a rounded bar
   rather than a full-width block; border-radius:999px pills the ends.
   A page (or the course reference's .torque-scroll) can still override this,
   since site-chrome.css loads before each page's own <style>. */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-button{display:none;width:0;height:0;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{
  background:rgba(120,124,150,0.5);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
::-webkit-scrollbar-thumb:hover{background:rgba(120,124,150,0.82);}
::-webkit-scrollbar-thumb:active{background:var(--accent,#5b5bd6);}
::-webkit-scrollbar-corner{background:transparent;}
/* Firefox only. The standard scrollbar-width/-color are now honoured by Blink
   too (Chrome 121+), and setting them ALONGSIDE ::-webkit-scrollbar makes Blink
   render a hybrid that puts the up/down arrow buttons back. So they are fenced
   behind a Firefox-only @supports guard (Blink evaluates -moz-appearance as
   unsupported and skips the block), leaving Blink on the clean webkit path and
   giving Firefox a thin, tinted native bar. It inherits from :root, so a
   deliberate per-element hide (scrollbar-width:none) still wins. */
@supports (-moz-appearance:none){
  :root{scrollbar-width:thin;scrollbar-color:rgba(120,124,150,0.5) transparent;}
}

/* ---------- the bar ----------
   Full-bleed band with a hairline floor, so the nav sits on something instead
   of floating on the canvas. position:relative so the mega-menu can hang
   full-bleed off its bottom edge. */
.topbar{background:var(--card);border-bottom:1px solid var(--rule);position:relative;z-index:40;}
.ico{width:19px;height:19px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- brand lockup ----------
   Solved to two constraints:
     1. the two lines are the SAME WIDTH  (159.5px)
     2. the wordmark's ink-top and the tagline's baseline sit on the gear's
        top and bottom tooth tips
   gear-logo-mark.png is trimmed to the artwork, so the tips are 1.172% in from
   the image's top and bottom edges — a 40px mark spans y 0.47 .. 39.53.

   NOTE: Newsreader carries an optical-size axis, so its glyph widths are NOT
   linear in font-size — a width ratio measured at one size will not transfer to
   another. These numbers were solved by measuring at the final rendered sizes;
   re-solve the same way if the mark size, fonts, weights or letter-spacing
   change. Don't scale them by hand, and don't "fix" the odd decimals.

   `.brand` itself is not here: it is an <a> on four surfaces and a plain <div>
   on the landing page, which never links to itself. */
.mark{width:40px;height:40px;flex:none;display:block;object-fit:contain;}
.brand-text{display:flex;flex-direction:column;}
.brand-name{
  font-family:var(--serif);font-weight:600;font-size:33.92px;line-height:1;
  letter-spacing:-0.01em;margin-top:1.47px;white-space:nowrap;
}
/* two-tone wordmark: ME (the scope) in accent, Pasado (the promise) in ink */
.bn-me{color:var(--accent);}
.bn-pasado{color:var(--ink);}
.brand-tag{
  font-family:var(--sans);font-weight:500;font-size:10.56px;line-height:1;
  /* --muted, not --faint: at 10.56px the strapline is body text, and --faint
     measures 2.58:1 on white — under the 4.5:1 floor. --muted is 4.8:1 and
     still adapts to dark mode. Colour only; the lockup is solved by
     MEASUREMENT and none of these metrics move. */
  margin-top:-4.86px;color:var(--muted);white-space:nowrap;
}

/* ---------- burger toggle ----------
   Hidden until each page's own breakpoint turns it on — 880px on course pages,
   1000px on the root pages. See the note at the top. */
.nav-toggle{
  display:none;width:40px;height:40px;border:1.5px solid var(--ink);border-radius:10px;
  background:var(--card);color:var(--ink);align-items:center;justify-content:center;cursor:pointer;
}
.nav-toggle .ico{width:20px;height:20px;stroke-width:1.8;}
.nav-links a:hover{color:var(--ink);}

/* ---------- theme toggle ----------
   Wears .nav-btn so it sits in the row as an equal, but it is a control and not
   a destination, so it leads with the contrast glyph (#i-theme in each page's
   sprite). The glyph reports which theme you are ON, keyed straight off the
   root attribute — no JS keeps the icon in step.

   Course pages and the hub cycle three themes and rotate the contrast glyph
   between the two light ones; the root pages have a single light look and flip
   light <-> dark. Both share everything below. */
.theme-btn{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:none;
  font-family:inherit;font-size:inherit;line-height:inherit;
}
.theme-btn .ico{width:16px;height:16px;stroke-width:1.7;transition:transform 0.28s ease;}
.theme-btn .ico-moon{display:none;}
:root[data-theme="dark"] .theme-btn .ico-contrast{display:none;}
:root[data-theme="dark"] .theme-btn .ico-moon{display:block;}

/* ---------- the "Courses" trigger ----------
   Stays a real link to List of Courses.html — the panel is purely additive,
   opened on hover and focus and never on click, so a click always navigates.
   Below the mobile breakpoint each page hides the panel entirely and this falls
   back to a plain link. */
.nav-drop{display:flex;align-items:center;}
.nav-drop > a{display:inline-flex;align-items:center;gap:4px;}
.caret{width:15px;height:15px;stroke-width:2;transition:transform 0.16s ease;}
.nav-drop.is-open .caret{transform:rotate(180deg);}

/* ---------- catalog mega-menu ----------
   Full-bleed under the bar so it can hold all 40 courses in the same three
   curriculum groups List of Courses renders. Markup comes from
   course-menu.js — see THE MEGA-MENU IS A CONTRACT above. */
.mega{
  position:absolute;top:100%;left:0;right:0;z-index:39;
  background:var(--card);border-bottom:1px solid var(--rule);
  box-shadow:0 14px 28px rgba(31,35,64,0.10);
  padding:24px 0 18px;
  /* a short window must scroll the panel, not lose the bottom of the list */
  max-height:calc(100vh - 84px);overflow-y:auto;
  opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity 0.15s ease,transform 0.15s ease,visibility 0s linear 0.15s;
}
.mega.is-open{
  opacity:1;visibility:visible;transform:none;
  transition:opacity 0.15s ease,transform 0.15s ease,visibility 0s;
}
/* Allied & Professional holds 26 of the 40 rows, so it takes a double-width
   cell and flows into two inner columns rather than running off the fold */
.mega-grid{display:grid;grid-template-columns:1fr 1fr 2fr;gap:8px 30px;}
.mega-col{min-width:0;}
.mega-col:nth-child(3) .mega-list{columns:2;column-gap:26px;}
/* The panel hangs off a sans nav bar, so it is set in the nav's face, not the
   serif used for course names in page BODY content. A dropdown reads as part of
   the chrome it drops from; a serif list inside it looks imported. Hierarchy
   here comes from weight and size, not from a second family. */
.mega-h{
  font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:0.01em;
  line-height:1.25;color:var(--ink);
  padding-bottom:8px;margin-bottom:7px;border-bottom:1px solid var(--rule);
}
.mega-list{display:block;}
.mega-list a{
  display:flex;align-items:baseline;gap:8px;padding:4px 7px;border-radius:7px;
  font-family:var(--sans);font-size:14.5px;font-weight:400;letter-spacing:0;
  line-height:1.35;color:var(--ink);
  break-inside:avoid;-webkit-column-break-inside:avoid;
}
.mega-list a:hover{background:var(--accent-tint);color:var(--accent-dark);}
/* a filled dot = fully written, hollow = published outline. Shape carries the
   distinction, not colour alone. --teal is scoped on .topbar by the pages whose
   canvas palette has no teal in it. */
.mega-dot{
  flex:none;width:6px;height:6px;border-radius:50%;transform:translateY(-1px);
  background:var(--teal);border:1px solid var(--teal);
}
.mega-dot.is-wip{background:transparent;border-color:var(--faint);}
.mega-name{min-width:0;}
.mega-list a.is-wip .mega-name{color:var(--muted);}

/* the third column's inner two-up needs room; below this it goes single */
@media (max-width:1180px){
  .mega-grid{gap:8px 22px;}
  .mega-list a{font-size:13.5px;padding:3px 6px;}
}
@media (max-width:900px){
  .mega-grid{grid-template-columns:1fr 1fr;}
  .mega-col:nth-child(3){grid-column:1 / -1;margin-top:10px;}
}