/* WINDROSE — Quiet Instruments reskin for legacy (DC-runtime) pages.
   Loaded AFTER the page's inline <style>; declarations use !important to win
   over inline styles. Pure look-layer: no markup, no copy, no behaviour.
   NOTE: every [style*=…] selector appears twice — raw authored form
   ("prop:value") and React-normalised form ("prop: value"). */

/* ── palette: map legacy tokens to the Quiet Instruments palette ── */
:root{
  --paper:#FAFAF7 !important;
  --ink:#141413 !important;
  --graphite:#4A4A48 !important;     /* long-form body (was #6A6A66) */
  --hairline:#E4E3DD !important;
  --idea:#87867F !important;         /* neutral gray — nothing decorates */
  --idea-mid:#C9C8C1 !important;
  --idea-tint:#F5F4F0 !important;
  --sim:#C0182B !important;          /* the needle: keeps meaning */
  --sim-mid:#EFC4C8 !important;
  --sim-tint:#FAF1F1 !important;
  --engine:#0E6B4F !important;
  --engine-mid:#BFDCD0 !important;
  --engine-tint:#F0F4F2 !important;
  --summary:#141413 !important;      /* Klein blue retired — quiet ink */
  --summary-mid:#C9C8C1 !important;
  --summary-tint:#F5F4F0 !important;
}

/* ── type: monumental quiet serif, weight 400 ── */
main h1{
  font-family:"STIX Two Text",Georgia,serif !important;
  font-weight:400 !important;
  font-size:clamp(38px,5.2vw,62px) !important;
  line-height:1.06 !important;
  letter-spacing:-.015em !important;
}
main h2{
  font-family:"STIX Two Text",Georgia,serif !important;
  font-weight:400 !important;
  font-size:clamp(26px,3.4vw,38px) !important;
  line-height:1.15 !important;
  letter-spacing:-.01em !important;
}
main h3{font-weight:500 !important}

/* hero header: centered statement, prose stays readable */
main > header{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding-top:clamp(72px,10vh,120px) !important;
  padding-bottom:clamp(48px,7vh,84px) !important;
}
main > header h1{max-width:18em !important}
main > header > p{text-align:left;max-width:36em !important}

/* sections breathe; hairlines separate */
main > section{padding-top:clamp(64px,9vh,104px) !important;padding-bottom:clamp(64px,9vh,104px) !important}
main > section > h2{text-align:center;max-width:24em;margin-left:auto !important;margin-right:auto !important}

/* kickers → eyebrow discipline (generic: any uppercase mono label) */
main [style*="text-transform:uppercase"],
main [style*="text-transform: uppercase"]{
  font-size:11px !important;
  letter-spacing:.3em !important;
  color:#87867F !important;
  font-weight:500 !important;
}
main > section > [style*="text-transform:uppercase"],
main > section > [style*="text-transform: uppercase"],
main > header > [style*="text-transform:uppercase"],
main > header > [style*="text-transform: uppercase"]{text-align:center}
/* …but dense readouts inside panels keep their tighter spacing */
main [style*="border:1.5px"] [style*="text-transform:uppercase"],
main [style*="border: 1.5px"] [style*="text-transform: uppercase"],
main [style*="border:1px"] [style*="text-transform:uppercase"],
main [style*="border: 1px"] [style*="text-transform: uppercase"]{
  letter-spacing:.22em !important;
}

/* ── panels: instrument cards, not heavy ink boxes ── */
main [style*="border:1.5px solid var(--ink)"],
main [style*="border: 1.5px solid var(--ink)"]{
  border:1px solid #C9C8C1 !important;
  border-radius:2px;
  background:#FFFFFF !important;
}
main [style*="border:1px solid var(--hairline)"],
main [style*="border: 1px solid var(--hairline)"]{border-radius:2px}

/* decorative 8px squares → quiet ticks */
main [style*="width:8px;height:8px"],
main [style*="width: 8px"][style*="height: 8px"]{width:2px !important;border-radius:0}

/* ── CTAs: one solid button look; secondary = quiet link ── */
main a[style*="background:var(--accent)"],
main a[style*="background: var(--accent)"]{border-radius:2px;font-weight:500 !important}
main a[style*="border:1.5px solid var(--ink)"],
main a[style*="border: 1.5px solid var(--ink)"]{
  border:0 !important;
  border-bottom:1px solid #C9C8C1 !important;
  background:transparent !important;
  padding:0 0 3px 0 !important;
  font-weight:400 !important;
  border-radius:0;
}
main a[style*="border:1.5px solid var(--ink)"]:hover,
main a[style*="border: 1.5px solid var(--ink)"]:hover{border-bottom-color:var(--accent,#141413) !important}

/* micro-labels (STEP 01, STATE · RUNNING …): red is the needle, labels are quiet */
main div[style*="monospace"][style*="color:var(--sim)"],
main div[style*="monospace"][style*="color: var(--sim)"]{color:#87867F !important}
/* red list-marker arrows are markers, not warnings */
main span[style*="color:var(--sim)"][style*="flex"],
main span[style*="color: var(--sim)"][style*="flex"]{color:#87867F !important}
/* activity bars/marks: activity is not a warning — accent, not red */
main div[style*="background:var(--sim)"],
main div[style*="background: var(--sim)"]{background:var(--accent,#141413) !important}

/* FAQ affordance: the sign points, it does not decorate */
main .faq-sign{color:#87867F !important}
main details summary{font-weight:500}

/* pre blocks read as instrument output */
main pre{
  border:1px solid #C9C8C1 !important;
  border-radius:2px;
  background:#FFFFFF !important;
}

/* focus visibility parity with the new system */
main a:focus-visible,main button:focus-visible,main summary:focus-visible{
  outline:2px solid #141413;outline-offset:4px;border-radius:2px;
}