/* CURATE — shared design tokens and chrome components.
   Edited once, used by every page via <link rel="stylesheet" href="styles/shared.css">.
   Page-specific layout stays in each page's own <style> block. */

:root{
  /* --muted was #6B7078, which is only 3.99:1 on --paper and 3.70:1 on the
     #DCDEE2 section band — below the 4.5:1 WCAG AA minimum. #5A5F66 is
     4.78:1 at worst across paper / band / panel / plate-alt. */
  --paper:#E5E6E8; --panel:#F3F4F5; --ink:#14161A; --muted:#5A5F66;
  --rule:#C4C7CC; --rule-soft:#D6D8DC; --signal:#1E3A5F; --signal-soft:#5A7899;
  --warm:#8E5A3C;

  /* ONE reading column for the whole site. Every page uses these — do not
     override --measure per page, or the header, body and footer stop lining
     up with each other. --measure is the OUTER box; --gutter sits inside it,
     so content edges are always (box edge + gutter) on every bar and page. */
  --measure:40rem;
  --gutter:1.5rem;
}
@media(min-width:1440px){ :root{--measure:44rem} }
@media(min-width:1920px){ :root{--measure:47rem} }

*{box-sizing:border-box; margin:0; padding:0}
/* Reserve the scrollbar gutter always, so a short view (e.g. an assessment
   question that fits one screen) doesn't render ~15px wider than a tall one
   and shift all the fixed-width content relative to the sticky header. */
html{-webkit-text-size-adjust:100%; font-size:16px; scrollbar-gutter:stable; overflow-y:scroll}
@media(min-width:1440px){ html{font-size:17px} }
@media(min-width:1920px){ html{font-size:18px} }
body{
  background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans",system-ui,sans-serif;
  font-size:1rem; line-height:1.5;
  /* sticky footer: page always fills the viewport, so the footer sits at the
     bottom instead of floating at whatever height the content happens to end.
     Without this the assessment footer jumps on every question. */
  display:flex; flex-direction:column; min-height:100vh;
}
@supports(min-height:100dvh){ body{min-height:100dvh} }
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--signal); outline-offset:3px}
/* the view heading gets focus on SPA navigation; it is not an interactive
   control, so suppress the ring there but keep it everywhere else */
h1[tabindex="-1"]:focus,#main[tabindex="-1"]:focus{outline:none}

/* visually hidden, still read by assistive tech */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* skip link: off-screen until focused */
.skip-link{
  position:absolute; left:0; top:0; z-index:60;
  transform:translateY(-120%);
  background:var(--ink); color:var(--paper);
  padding:.75rem 1.25rem; font-size:.875rem; text-decoration:none;
}
.skip-link:focus{transform:translateY(0)}

/* The canonical container. Header, body and footer all use this exact
   geometry, so their content edges align at every viewport width. */
.wrap{max-width:var(--measure); margin:0 auto; padding:0 var(--gutter)}

/* Opt-in escape hatch for content that genuinely needs more room than the
   reading column (wide diagrams, the card studio's previews). Centres on the
   viewport regardless of the parent's width. Deliberately uses `left` +
   `margin-left`, not `transform` — a transform here gets silently clobbered
   by any element that also animates via transform (e.g. the scroll-reveal
   motion classes), since only one transform value can win. */
.breakout{
  /* default --breakout to var(--measure): with nothing overriding it, a
     .breakout element is exactly as wide as .wrap and visually inert. Each
     page sets a wider --breakout (usually inside its own min-width query)
     only where it actually wants the widen effect to kick in. */
  --bw:min(var(--breakout, var(--measure)), calc(100vw - 2*var(--gutter)));
  width:var(--bw);
  position:relative; left:50%;
  margin-left:calc(var(--bw) / -2);
}

/* ---------- header ---------- */
/* The bar itself is full-bleed with no horizontal padding; the inner .wrap
   carries the gutter, exactly like every other .wrap on the site. */
.top{
  position:sticky; top:0; z-index:30; background:rgba(229,230,232,.88);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--rule);
  flex-shrink:0;
}
.top .wrap{
  display:flex; align-items:center; gap:.75rem; height:3.25rem;
}
.mark{
  font-size:.8125rem; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  color:inherit; text-decoration:none;
  /* WCAG 2.2 target size: the wordmark is a link, so give it 24px of height */
  display:inline-flex; align-items:center; min-height:24px;
}
.mark:hover{color:var(--signal)}
.top .spacer{flex:1}
.top .sub{
  font-family:"IBM Plex Mono",monospace; font-size:.6875rem;
  color:var(--muted); letter-spacing:.04em;
}
.top a.mini{
  font-family:"IBM Plex Mono",monospace; font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:2px;
}
.top a.mini:hover{border-bottom-color:var(--ink)}

/* ---------- footer ---------- */
/* margin-top:auto is what pins the footer to the bottom of a short page in the
   flex-column body. Without it the assessment footer moves on every question. */
.site-footer{
  margin-top:auto; flex-shrink:0;
  padding:2.5rem 0 4rem; font-size:.8125rem; color:var(--muted);
}
.site-footer .row{display:flex; gap:1.5rem; align-items:baseline; flex-wrap:wrap}
.site-footer .tag{font-family:"Source Serif 4",serif; font-style:italic; color:var(--ink)}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--ink)}

/* ---------- buttons ---------- */
button,.btn{font:inherit; cursor:pointer; border:none; background:none; color:inherit}
.btn{
  display:inline-block; background:var(--ink); color:var(--paper);
  padding:.875rem 1.875rem; font-size:.9375rem; font-weight:500;
  text-decoration:none; transition:background .15s;
}
.btn:hover{background:var(--signal)}
.btn:disabled{background:var(--rule); color:#8E9298; cursor:not-allowed}
.btn-line{background:none; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.btn-line:hover{background:var(--ink); color:var(--paper)}
.btn-quiet{
  color:var(--muted); font-size:.8125rem; text-decoration:underline;
  text-underline-offset:3px; padding:.5rem 0; background:none; border:none; cursor:pointer; font:inherit;
}
.btn-quiet:hover{color:var(--ink)}