/* miprep-shell v0.6 — Stripe-standard nav (mega-menu) + dense footer + AI-discovery.
   Ports UnifiedHeader + MegaNavMenu look-and-feel from apps/web (commit 972d795).
   Zero framework; pure CSS + vanilla-JS host. */

/* Palette synced with apps/web `src/styles/tokens.css` 2026-08-10 —
   docs/specs/visual-system-cross-surface-2026-08-10.md.
   This file is the ONLY stylesheet loaded by all five surfaces, so it is where
   the shared brand lives; a surface that redeclares these locally will drift,
   which is exactly how content/news/jobs ended up a palette behind. */
:root {
  /* USAGE RULE: blue is the BADGE MARK and nothing else — not links, not
     buttons, not borders, not bands. Its only consumer in this file's
     companion is nav.js's `<rect fill="var(--miprep-brand)">`. Both vars stay
     declared so the mark keeps a name; do not reach for them for anything
     else. `.miprep-ecosystem` used to be a solid blue band on every page of
     all five surfaces — by area the largest blue on miprep.ai — and it is
     cream now. If you are about to paint something --miprep-brand because it
     "looks like the brand", this comment is the reason not to.

     --miprep-blue / --miprep-blue-hover / --miprep-brand-hover are DELETED,
     not kept-and-unused: an unused colour token is an invitation, and the two
     near-identical blues the palette used to carry (0A66C2 alongside 0B65C2,
     one hex apart) were themselves the symptom of nobody owning it. One name,
     one hex, one consumer. Verified no external consumer across
     content/news/jobs/farm before removing.

     Hexes are spelled without the # above on purpose — scripts/brand_palette.py
     --check is deliberately literal and does not parse comments, and weakening
     it so prose can quote a colour would weaken it for real declarations too. */
  --miprep-brand: #0B65C2;

  /* Apple ramp, replacing the cold slate scale. Cold grey under a warm cream
     ground is the pairing the cream was chosen to avoid, so the ramp had to
     move with it. */
  --miprep-ink: #1D1D1F;
  --miprep-ink-2: #6E6E73;
  --miprep-ink-3: #86868B;
  --miprep-ink-4: #A1A1A6;

  /* Warm cream ground. White is the header strip and cards ONLY; everything at
     page level is cream, and cards lift off it with a hairline rule. */
  --miprep-cream: #F4F2EE;
  --miprep-line: #E6E2DA;
  --miprep-line-light: #EFECE5;
  --miprep-bg: #ffffff;
  --miprep-bg-2: #F4F2EE;
  --miprep-bg-3: #FAF9F6;

  /* Controls are black, not brand blue. */
  --miprep-control-bg: #000000;
  --miprep-control-fg: #ffffff;

  --miprep-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', system-ui, sans-serif;
}

/* ── Nav container (sticky, translucent, backdrop-blur — Stripe/Apple pattern) ── */
.miprep-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Solid, not rgba(255,255,255,.80) + blur: the landing ground is now warm
     cream #F4F2EE, and a translucent bar over it reads tinted rather than white. */
  background: #ffffff;
  font-family: var(--miprep-font);
}
.miprep-nav-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: 48px;
  /* Offset parent for .miprep-mega-flyout — without this the flyout
     anchors to .miprep-nav (full viewport width), breaking translateX. */
  position: relative;
}
.miprep-nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--miprep-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
/* Blue lives on the badge mark ONLY — not the wordmark, not buttons, not links.
   Narrowed 2026-08-10: miprep/docs/specs/landing-visual-system-2026-08-10.md */
.miprep-nav-mark { width: 26px; height: 26px; flex: none; display: block; }
.miprep-nav-logo {
  color: var(--miprep-ink);
  font-weight: 650;
  letter-spacing: -0.022em;
}

/* ── Mega-nav ── */
.miprep-nav-mega {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
}
.miprep-nav-mega > ul {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.miprep-mega-item {
  position: relative;
}
.miprep-mega-item > a.miprep-mega-trigger {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--miprep-ink-2);
  text-decoration: none;
  transition: background-color 120ms;
}
.miprep-mega-item > a.miprep-mega-trigger:hover {
  background: var(--miprep-line-light);
  color: var(--miprep-ink);
}

/* ── Dropdown — Stripe-pattern: single-open + slide transition.
   JS toggles .is-open on the item; panel visibility + transform driven by
   that class only. No <details>. Only one panel visible at a time. ── */
.miprep-mega-item > .miprep-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--miprep-ink-2);
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms, color 120ms;
}
.miprep-mega-item > .miprep-mega-trigger:hover,
.miprep-mega-item.is-open > .miprep-mega-trigger {
  background: var(--miprep-line-light);
  color: var(--miprep-ink);
}
.miprep-mega-item > .miprep-mega-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.25);
}
.miprep-mega-chevron {
  color: var(--miprep-ink-4);
  transition: transform 180ms ease;
}
.miprep-mega-item.is-open .miprep-mega-chevron {
  transform: rotate(180deg);
}

/* ── Shared flyout — MiOffice/Stripe pattern.
   ONE fixed-width panel below the nav bar. JS swaps innerHTML on hover
   and slides it horizontally under whichever trigger is active. ── */
.miprep-mega-flyout {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  width: 720px;
  max-width: calc(100vw - 32px);
  border-radius: 12px;
  border: 1px solid var(--miprep-line);
  background: var(--miprep-bg);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* transform driven by JS (translateX per active trigger); transition on
     transform gives the slide feel. Opacity handles fade in/out. */
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 180ms;
}
.miprep-mega-flyout.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1),
              visibility 0s linear 0s;
}
.miprep-mega-flyout-inner {
  padding: 0;
}
.miprep-mega-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  padding: 24px;
}
.miprep-mega-group h4 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--miprep-ink-3);
  margin: 0 0 12px;
}
.miprep-mega-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.miprep-mega-group a {
  display: block;
  padding: 8px 10px;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 100ms;
}
.miprep-mega-group a:hover {
  background: var(--miprep-line-light);
}
/* Submenu group labels are ink, not brand blue (2026-08-10). Blue is the badge
   mark only — see the note on .miprep-nav-mark. */
.miprep-mega-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--miprep-ink);
}
.miprep-mega-sub {
  display: block;
  font-size: 12px;
  color: var(--miprep-ink-3);
  margin-top: 2px;
  line-height: 1.4;
}
.miprep-mega-footer {
  padding: 12px 24px;
  background: var(--miprep-bg-3);
  border-top: 1px solid var(--miprep-line);
  font-size: 12.5px;
}
.miprep-mega-footer a {
  color: var(--miprep-ink);
  text-decoration: none;
  font-weight: 500;
}
.miprep-mega-footer a:hover { text-decoration: underline; }

/* Hover-open handled entirely by JS via .is-open class (see nav.js
   wireMegaBehavior). No CSS :hover on the item — that's what let all
   three panels stack open at once. */

/* ── Auth (right side) ── */
.miprep-nav-auth {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.miprep-nav-signin {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--miprep-ink-2);
  text-decoration: none;
  transition: background-color 120ms;
}
.miprep-nav-signin:hover {
  background: var(--miprep-line-light);
  color: var(--miprep-ink);
}
.miprep-nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  /* Black, not blue — controls carry no brand colour now. */
  background: #000;
  color: white;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms;
}
.miprep-nav-cta:hover { background: #2b2b2b; }
.miprep-nav-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(10, 102, 194, 0.20);
}

/* ── Burger button — hidden on desktop, shown when mega hides on mobile ── */
.miprep-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  gap: 4px;
  flex-direction: column;
}
.miprep-nav-burger:hover { background: var(--miprep-line-light); }
.miprep-nav-burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--miprep-ink);
  border-radius: 1px;
  transition: transform 180ms ease, opacity 120ms ease;
}
.miprep-nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.miprep-nav-burger.is-open span:nth-child(2) { opacity: 0; }
.miprep-nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Mobile drawer — full-screen overlay + slide-down sheet ── */
.miprep-nav-drawer {
  display: none;
  position: fixed;
  inset: 48px 0 0 0;
  z-index: 45;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms ease, visibility 0s linear 180ms;
}
.miprep-nav-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 180ms ease, visibility 0s linear 0s;
}
.miprep-nav-drawer-inner {
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--miprep-bg);
  padding: 20px 20px 32px;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-8px);
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.miprep-nav-drawer.is-open .miprep-nav-drawer-inner { transform: translateY(0); }
.miprep-drawer-section { padding: 10px 0 12px; border-bottom: 1px solid var(--miprep-line-light); }
.miprep-drawer-section:last-of-type { border-bottom: 0; }
.miprep-drawer-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600; color: var(--miprep-ink-3); margin: 8px 0 6px;
}
.miprep-drawer-subtitle {
  font-size: 11px; font-weight: 500; color: var(--miprep-ink-4);
  margin: 10px 0 4px;
}
.miprep-drawer-link {
  display: block; padding: 10px 10px; border-radius: 6px;
  font-size: 15px; color: var(--miprep-ink); text-decoration: none;
}
.miprep-drawer-link:hover { background: var(--miprep-line-light); }
.miprep-drawer-footer { color: var(--miprep-ink); font-weight: 500; }
.miprep-drawer-auth {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--miprep-line);
}
.miprep-drawer-auth .miprep-nav-cta,
.miprep-drawer-auth .miprep-nav-signin {
  height: 44px; justify-content: center; font-size: 15px;
}

/* Mobile activation — hide mega + auth CTAs, show burger + drawer.
   Kept `.miprep-nav-signin` visible on desktop only; drawer shows auth. */
@media (max-width: 900px) {
  .miprep-nav-mega { display: none; }
  .miprep-nav-auth { display: none; }
  .miprep-nav-burger { display: flex; }
  .miprep-nav-drawer { display: block; }
  .miprep-mega-flyout { display: none; } /* flyout unused on mobile */
}

/* ── TOC (article-only, unchanged v0.2) ── */
.miprep-toc-inner {
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-left: 16px;
  border-left: 1px solid var(--miprep-line);
  font-family: var(--miprep-font);
}
.miprep-toc-label {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--miprep-ink-3); margin-bottom: 12px;
}
.miprep-toc-list { list-style: none; margin: 0; padding: 0; }
.miprep-toc-item { margin: 4px 0; }
.miprep-toc-item a {
  display: block; padding: 4px 10px; border-left: 2px solid transparent;
  font-size: 13px; color: var(--miprep-ink-2); text-decoration: none;
  border-radius: 0 4px 4px 0; line-height: 1.4;
}
.miprep-toc-item a:hover { color: var(--miprep-ink); background: var(--miprep-bg-2); }
.miprep-toc-item a.is-active {
  color: var(--miprep-ink); border-left-color: var(--miprep-ink); font-weight: 500;
  background: var(--miprep-bg-2);
}
.miprep-toc-lvl-3 a { padding-left: 22px; font-size: 12.5px; color: var(--miprep-ink-3); }

/* ── AI Discovery footer ── */
.miprep-ai-discovery {
  border-top: 1px solid var(--miprep-line);
  border-bottom: 1px solid var(--miprep-line);
  background: var(--miprep-bg);
  font-family: var(--miprep-font);
}
.miprep-ai-inner { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
.miprep-ai-inner h2 { font-size: 20px; font-weight: 600; color: var(--miprep-ink); margin: 0 0 8px; letter-spacing: -0.01em; }
.miprep-ai-lede { font-size: 14px; color: var(--miprep-ink-2); margin: 0 0 20px; }
.miprep-ai-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.miprep-ai-grid a {
  display: block; padding: 12px 14px; border: 1px solid var(--miprep-line);
  border-radius: 8px; text-decoration: none;
  background: var(--miprep-bg); transition: border-color 0.15s, background 0.15s;
}
.miprep-ai-grid a:hover { border-color: #D8D3C9; background: var(--miprep-bg-2); }
.miprep-ai-label { display: block; font-family: 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--miprep-ink); font-weight: 500; }
.miprep-ai-sub { display: block; margin-top: 3px; font-size: 12px; color: var(--miprep-ink-3); }

/* ── Ecosystem — was a solid blue band ("colored", v0.2) until 2026-08-10 ──
   It rendered on every page of all five surfaces, which made it the largest
   single blue surface on miprep.ai and the loudest contradiction of the
   badge-mark-only rule. Now cream like everything else at page level, with the
   band read from the hairline rules rather than from a fill. */
.miprep-ecosystem {
  background: var(--miprep-bg-2); color: var(--miprep-ink); font-family: var(--miprep-font);
  border-top: 1px solid var(--miprep-line);
}
.miprep-ecosystem-inner { max-width: 1200px; margin: 0 auto; padding: 48px 24px; }
.miprep-ecosystem-inner h2 { font-size: 22px; font-weight: 600; margin: 0 0 24px; color: var(--miprep-ink); }
.miprep-ecosystem-grid { display: grid; gap: 32px; grid-template-columns: repeat(4, 1fr); }
.miprep-ecosystem-grid h3 {
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--miprep-ink-3); margin: 0 0 12px;
}
.miprep-ecosystem-grid a {
  display: block; color: var(--miprep-ink-2); text-decoration: none; font-size: 14px; padding: 4px 0;
}
.miprep-ecosystem-grid a:hover { color: var(--miprep-ink); text-decoration: underline; }

/* ── Brand footer — Stripe-density 5-col + bottom row ── */
.miprep-footer {
  margin-top: 0;
  border-top: 1px solid var(--miprep-line);
  background: var(--miprep-bg-2);
  padding: 56px 0 32px;
  font-family: var(--miprep-font);
}
.miprep-footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
.miprep-footer-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 32px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--miprep-line);
}
.miprep-footer-col h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--miprep-ink);
  margin: 0 0 14px;
  letter-spacing: 0.02em;
}
.miprep-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.miprep-footer-col a {
  color: var(--miprep-ink-3);
  text-decoration: none;
  font-size: 12px;
  transition: color 100ms;
}
.miprep-footer-col a:hover {
  color: var(--miprep-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.miprep-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  flex-wrap: wrap;
}
.miprep-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.miprep-footer-logo {
  color: var(--miprep-ink);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.miprep-footer-copy {
  color: var(--miprep-ink-4);
  font-size: 11px;
}
.miprep-footer-legal {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.miprep-footer-legal a {
  color: var(--miprep-ink-3);
  text-decoration: none;
  font-size: 11px;
  transition: color 100ms;
}
.miprep-footer-legal a:hover { color: var(--miprep-ink); }

@media (max-width: 900px) {
  .miprep-footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .miprep-ecosystem-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ── Skip link (accessibility) ── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 100;
  padding: 8px 16px;
  /* A control, so black — same rule as every other button since 2026-08-10. */
  background: var(--miprep-control-bg);
  color: var(--miprep-control-fg);
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
}
.skip-link:focus { left: 8px; }

/* ── Logo "AI" mark — subtle brand accent ── */
/* "AI" is type inside the wordmark, not a coloured chip. A blue pill here would
   put the accent back on the lettering, which moving it to the badge undid. */
.miprep-nav-logo-ai {
  color: var(--miprep-ink-3);
  font-size: 0.8em;
  font-weight: 550;
  letter-spacing: 0.01em;
}
.miprep-footer-logo .miprep-nav-logo-ai {
  /* Matches the nav lockup: "AI" is type, not a blue chip. */
  background: none;
  color: var(--miprep-ink-3);
  font-size: 0.8em;
  font-weight: 550;
  padding: 0;
}

/* AI-discovery: keep DOM anchors for crawlers, invisible to humans. */
.miprep-ai-discovery-hidden { display: none !important; }