/* ============================================================
   Rule the Bar — shared guides stylesheet
   Used by the guides hub (/guides/) and all 22 guide articles.
   Brand tokens + fonts mirror the main app (site/index.html).
   Article class names (.wrap, nav.bc, .lead, .cta, .rel, footer)
   are preserved so guide bodies need ZERO content edits.
   ============================================================ */
:root{
  --bg:#f6f3ff; --v:#7c3aed; --vl:#ede9fe; --vm:#a78bfa; --vd:#4c1d95;
  --pk:#e8006f; --em:#059669; --or:#f97316;
  --text:#130d2e; --mid:#3d3568; --muted:#8577b8;
  --surface:#fff; --border:#ece8fc; --r:12px; --rl:18px; --rxl:24px;
  --grad-headline:linear-gradient(95deg,#7c3aed 0%,#c026d3 38%,#e8006f 64%,#f97316 100%);
  --grad-btn:linear-gradient(135deg,#7c3aed,#9333ea);
  --grad-nav:linear-gradient(120deg,#6d28d9,#7c3aed 55%,#8b3ff0);
  --grad-progress:linear-gradient(90deg,#7c3aed,#e8006f);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  color:var(--text);background:
    radial-gradient(900px 620px at 93% 26%, rgba(255,206,224,.40) 0%, transparent 56%),
    radial-gradient(820px 600px at 6% -4%, #efe9ff 0%, transparent 52%),
    #f5f1ff;
  background-attachment:fixed;line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}

/* ---------- Sticky site header (matches the app nav) ---------- */
.site-nav{position:sticky;top:0;z-index:100;background:var(--grad-nav);
  box-shadow:0 1px 0 rgba(255,255,255,.12) inset, 0 8px 30px rgba(76,29,149,.22)}
/* 3-zone grid mirrors the main app nav EXACTLY (index.html): full-width,
   logo left, tabs centered, CTAs right. Pill styling + breakpoints are
   copied verbatim from the SPA so the nav is universal across the site. */
.site-nav .inner{height:66px;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;padding:0 1.5rem;gap:8px}
.site-nav .logo{grid-column:1;justify-self:start;display:flex;align-items:center}
.site-nav .logo img{height:28px;width:auto;display:block}
/* Center tabs sit inside a translucent pill-group, matching the SPA nav */
.site-nav .nav-center{grid-column:2;justify-self:center;display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);
  padding:5px;border-radius:9999px}
.site-nav .nav-right{grid-column:3;justify-self:end;display:flex;align-items:center;gap:10px}
.np{display:inline-flex;align-items:center;background:transparent;
  border:none;border-radius:9999px;padding:9px 17px;
  font-size:14px;font-weight:500;color:rgba(255,255,255,.92);cursor:pointer;white-space:nowrap;text-decoration:none;
  transition:background .18s,color .18s;font-family:'DM Sans',sans-serif}
.np:hover{background:rgba(255,255,255,.18);color:#fff}
.nav-center .np.active{background:rgba(255,255,255,.22);color:#fff}
.nav-right .np{background:rgba(255,255,255,.0)}
.np.hi{background:#fff;color:var(--vd);font-weight:600;padding:9px 19px;
  box-shadow:0 6px 18px rgba(0,0,0,.14)}
.np.hi:hover{background:#fff;color:var(--vd);transform:translateY(-1px)}
/* Mobile hamburger (CSS-only toggle): hidden on desktop */
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nav-burger{display:none}
@media(max-width:768px){
  .site-nav .inner{padding:0 1rem}
  .np{min-height:38px;padding:8px 12px;font-size:12.5px}
}
@media(max-width:560px){
  /* Hamburger on the FAR LEFT (before the logo) so it's clear of the
     Log in / Get access buttons, which stay pinned right. Dropdown is a
     clean white menu anchored under the burger. */
  .site-nav .inner{display:flex;align-items:center;gap:10px}
  .site-nav .nav-burger{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:40px;height:40px;border-radius:10px;font-size:19px;line-height:1;color:#fff;cursor:pointer;
    background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);-webkit-tap-highlight-color:transparent}
  .site-nav .nav-right{margin-left:auto;gap:6px}
  .site-nav .nav-center{display:none;position:absolute;top:62px;left:8px;width:230px;max-width:calc(100vw - 16px);
    flex-direction:column;gap:2px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:8px;
    box-shadow:0 18px 44px rgba(19,13,46,.28);z-index:200}
  .site-nav .nav-toggle:checked ~ .nav-center{display:flex}
  .site-nav .nav-center .np{width:100%;justify-content:flex-start;min-height:44px;font-size:14px;font-weight:500;
    background:transparent;border:none;color:var(--text);border-radius:9px;padding:11px 12px}
  .site-nav .nav-center .np:hover,.site-nav .nav-center .np:active{background:var(--vl);color:var(--v)}
  .site-nav .logo img{height:26px}
  .np{padding:7px 11px;font-size:12px}
}
@media(max-width:560px){
  /* Footer: give the 9 links tappable rows + sensible spacing on phones */
  .site-foot{padding:2rem 1.1rem}
  .site-foot .links{gap:.5rem 1.1rem}
  .site-foot .links a{min-height:40px;padding:4px 0}
}
@media(max-width:360px){
  .site-nav .inner{padding:0 .7rem}
  .site-nav .logo img{height:24px}
  .np{padding:6px 9px;font-size:11px}
  .site-nav .nav-right{gap:5px}
  nav.bc{font-size:12px;overflow-wrap:break-word}
  .cat-nav a{padding:6px 12px;font-size:12px}
  .wrap,.hub-wrap{padding-left:.85rem;padding-right:.85rem}
}

/* ---------- Article container & typography ---------- */
.wrap{max-width:820px;margin:0 auto;padding:2rem 1.25rem 4rem}
nav.bc{font-size:13px;color:var(--muted);margin:0 0 1.25rem}
nav.bc a{color:var(--v);text-decoration:none}
nav.bc a:hover{text-decoration:underline}
h1{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:clamp(2rem,5vw,2.6rem);
  line-height:1.12;letter-spacing:-.02em;margin:.25rem 0 1rem;color:var(--text)}
h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.5rem;
  letter-spacing:-.01em;margin:2.25rem 0 .5rem;color:var(--text)}
h3{font-size:1.05rem;font-weight:600;margin:1.25rem 0 .35rem;color:var(--mid)}
p,li{font-size:16px;color:var(--mid)}
.lead{font-size:18px;color:var(--text)}
ul{padding-left:1.2rem}
a{color:var(--v)}
blockquote{margin:1.25rem 0;padding:.75rem 1.1rem;border-left:3px solid var(--vm);
  background:var(--vl);border-radius:0 var(--r) var(--r) 0;color:var(--mid);font-style:italic}
table{width:100%;border-collapse:collapse;margin:1.25rem 0;font-size:15px}
th,td{border:1px solid var(--border);padding:.6rem .7rem;text-align:left;vertical-align:top}
th{background:var(--vl);color:var(--text);font-weight:600}

/* ---------- CTA & related (existing class names kept) ---------- */
.cta{display:block;text-align:center;background:var(--grad-btn);
  color:#fff;text-decoration:none;font-weight:600;font-size:17px;padding:20px 30px;border-radius:18px;
  margin:2.25rem 0;box-shadow:0 14px 32px rgba(124,58,237,.34);transition:transform .18s,box-shadow .18s}
.cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(124,58,237,.46)}
.rel{border-top:1px solid var(--border);margin-top:2.5rem;padding-top:1.25rem;font-size:14px}
.rel strong{display:block;margin-bottom:.7rem;color:var(--text);font-size:15px}
.rel br{display:none}
/* Related-guide links render as violet chips/tiles (matches the hub
   category chips) instead of plain text — applies to all guides + hub. */
.rel a{display:inline-flex;align-items:center;margin:.3rem .5rem .3rem 0;padding:8px 15px;
  background:var(--vl);color:var(--v);font-size:13.5px;font-weight:500;line-height:1.2;
  border-radius:24px;border:1px solid transparent;text-decoration:none;
  transition:border-color .15s,background .15s,transform .12s}
.rel a:hover{border-color:var(--vm);background:#fff;transform:translateY(-1px)}

/* ---------- In-article fine-print footer (existing <footer>) ---------- */
footer{font-size:12px;color:var(--muted);border-top:1px solid var(--border);
  margin-top:2rem;padding-top:1rem}

/* ---------- Gradient site footer (matches new design system) ---------- */
.site-foot{background:var(--grad-nav);padding:3rem 1.25rem 2.25rem;margin-top:3.5rem;border:0}
.site-foot .inner{max-width:1080px;margin:0 auto}
.site-foot .top{display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem;padding-bottom:1.5rem;
  border-bottom:1px solid rgba(255,255,255,.16)}
.site-foot img{height:26px;width:auto;display:block;filter:brightness(0) invert(1)}
.site-foot .links{display:flex;gap:1.5rem;flex-wrap:wrap}
.site-foot .links a{font-size:14px;color:rgba(255,255,255,.86);text-decoration:none;
  min-height:32px;display:inline-flex;align-items:center;transition:color .15s}
.site-foot .links a:hover{color:#fff}
.site-foot .legal{font-size:12px;color:rgba(255,255,255,.6);line-height:1.6;
  padding-top:.25rem}

/* ============================================================
   HUB-ONLY (the /guides/ index page)
   ============================================================ */
.hub-wrap{max-width:1080px;margin:0 auto;padding:2rem 1.25rem 4rem}
.hub-hero{max-width:760px;margin:0 auto 1rem}
.hub-hero h1{margin-top:.25rem}
.cat{margin:2.75rem 0 0}
.cat>h2{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.45rem;
  letter-spacing:-.01em;margin:0 0 .25rem;color:var(--text)}
.cat>.cat-sub{font-size:14.5px;color:var(--muted);margin:0 0 1.1rem}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.gcard{display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--rl);padding:1.1rem 1.2rem;
  text-decoration:none;color:inherit;min-height:44px;
  transition:transform .15s ease,box-shadow .18s ease,border-color .18s ease}
.gcard:hover{transform:translateY(-2px);border-color:var(--vm);
  box-shadow:0 10px 28px rgba(124,58,237,.14)}
.gcard h3{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.1rem;
  color:var(--text);margin:0 0 .4rem;line-height:1.25;display:flex;
  align-items:baseline;justify-content:space-between;gap:.5rem}
.gcard h3 .arrow{color:var(--vm);font-weight:400;transition:transform .15s ease}
.gcard:hover h3 .arrow{transform:translateX(3px)}
.gcard p{font-size:14px;color:var(--mid);margin:0;line-height:1.5}
.hub-narrow{max-width:820px;margin-left:auto;margin-right:auto}

/* Quick category nav — compact chips that jump to each section, so the
   page reads as organized rather than a long wall of cards. */
.cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.25rem 0 .5rem}
.cat-nav a{display:inline-flex;align-items:center;min-height:38px;padding:7px 15px;
  border-radius:24px;background:var(--vl);color:var(--v);font-size:13px;font-weight:500;
  text-decoration:none;border:1px solid transparent;transition:border-color .15s,background .15s}
.cat-nav a:hover{border-color:var(--vm);background:#fff}

/* Compact variant for the MBE-subject cards (short titles → denser grid,
   smaller cards, so 7 subjects don't dominate the page). */
.card-grid.compact{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.7rem}
.card-grid.compact .gcard{padding:.85rem .95rem}
.card-grid.compact .gcard h3{font-size:1rem;margin-bottom:.2rem}
.card-grid.compact .gcard p{font-size:12.5px}

@media(max-width:600px){.card-grid{grid-template-columns:1fr}.card-grid.compact{grid-template-columns:1fr 1fr}}

/* Article mobile robustness: tighter gutters, long words wrap, and wide
   comparison tables scroll horizontally instead of squishing/overflowing. */
@media(max-width:560px){
  .wrap{padding:1.5rem 1rem 3rem}
  .hub-wrap{padding:1.5rem 1rem 3rem}
  body{overflow-wrap:break-word}
  .wrap table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}