/* ============================================================================
   MSR Decode — shared visual system (2026-09-02 institutional redesign, pass 3)
   Every page links this AFTER its own embedded <style> block, but its :root
   still competes with that page's OWN :root at equal specificity — later source
   wins only for properties the page doesn't also declare in a more specific
   place, and several pages redeclare tokens defensively. Every token below is
   !important for that reason: this is the one file to edit to re-theme the
   site, and it must actually win regardless of a page's own declaration order.
   ============================================================================ */

:root{
  /* ---- PAPER / INK / DEEP INSTITUTIONAL TONE ---- */
  --bg:#F3F2ED!important;
  --surface-1:#EDEBE2!important;
  --surface-2:#E3E0D2!important;
  --bg-soft:#EDEBE2!important;
  --ink:#111214!important;
  --ink-2:#33383A!important;
  --ink-soft:#383D3B!important;
  --muted:#5B615D!important;
  --faint:#646A66!important;
  --faint-line:#9DA59F!important;

  --hairline:rgba(17,18,20,.13)!important;
  --rule:rgba(17,18,20,.17)!important;
  --hairline-strong:rgba(17,18,20,.24)!important;

  /* ---- PRIMARY SIGNAL (forensic mint — replaces the old periwinkle accent) ---- */
  --tint:rgba(94,140,120,.10)!important;
  --tint-strong:rgba(94,140,120,.18)!important;
  --peri:#AFCBBE!important;
  --peri-ink:#3E4F64!important;

  /* ---- DEEP PANEL (dark sections) ---- */
  --panel-dark:#12201C!important;
  --panel-dark-2:#1A2B26!important;
  --panel-dark-text:#F3F2ED!important;
  --panel-dark-muted:rgba(243,242,237,.68)!important;
  --panel-dark-line:rgba(243,242,237,.14)!important;

  /* ---- STATUS: verdict semantics (text/label always carries meaning too) ---- */
  --good:#4C617A!important;
  --good-text:#3B4C61!important;
  --good-soft:rgba(76,97,122,.08)!important;
  --good-line:rgba(76,97,122,.26)!important;
  --bad:#A8493F!important;
  --bad-text:#8A3E36!important;
  --bad-soft:rgba(168,73,63,.06)!important;
  --bad-line:rgba(168,73,63,.20)!important;
  --caution:#93662C!important;
  --caution-text:#71501F!important;
  --caution-soft:rgba(147,102,44,.07)!important;
  --caution-line:rgba(147,102,44,.22)!important;

  /* ---- TYPE: editorial grotesk for display/body, mono strictly for data ---- */
  --sans:'Instrument Sans','Inter var','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,'SF Mono','Cascadia Mono','Cascadia Code','Roboto Mono',Menlo,Consolas,monospace!important;

  /* ---- RADII: evidence-stamp restraint, not capsule/SaaS pills ---- */
  --r-xs:4px!important; --r-sm:6px!important; --r-md:8px!important; --r-lg:10px!important; --r-xl:14px!important; --r-pill:8px!important;
}

/* A dark deep-panel section still needs a warm paper-toned focus ring, not black */
.panel-dark :focus-visible,[style*="--panel-dark"] :focus-visible{outline-color:var(--panel-dark-text)}

/* ---- Evidence-stamp status label: replaces capsule .chip look with a bordered,
   small-radius tag — text/label still carries the status; color is secondary. ---- */
.chip,[class*="chip--"]{border-radius:var(--r-sm)!important}

/* ---- Buttons: restrained rectangle, not a bubbly capsule. ---- */
.btn,main .btn,.topnav a,.pcta,.offer-tag,.dc-nom .btn,.form-card .btn{border-radius:var(--r-md)!important}

/* particle/confetti canvases are removed from markup+JS at the source; this is a
   belt-and-suspenders hide for any stray reference left on an untouched template. */
canvas.hero-field,canvas.band-field,canvas[data-legacy-particle]{display:none!important}

@media (prefers-reduced-motion:reduce){
  canvas.case-field,canvas.msr-star{display:none!important}
}

/* ============================================================================
   NAV — Research dropdown (IA simplification pass, 2026-09-03). Methodology,
   Integrity Research and Archive & Corrections nest under a single "Research"
   trigger instead of each holding their own top-level nav slot. Hover/focus
   driven, no JS: the mobile drawer instead lists the same three as always-
   visible indented rows (see .mm-sub below), since a second toggle inside an
   already-open drawer is more friction than it saves.
   ============================================================================ */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop-trigger{display:inline-flex!important;align-items:center;gap:5px}
.nav-drop-trigger::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px;opacity:.55}
.nav-drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(2px);min-width:196px;background:var(--bg);border:1px solid var(--hairline);border-radius:var(--r-md);box-shadow:0 14px 34px rgba(0,0,0,.14);padding:6px;margin-top:10px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 140ms ease,transform 140ms ease;z-index:80}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:calc(var(--r-md) - 2px);font-size:14px;font-family:var(--sans);white-space:nowrap;color:var(--ink)!important;text-decoration:none}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--surface-1)}
.nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}

/* mobile drawer: Research's 3 children shown as always-visible indented rows */
.mobile-menu a.mm-sub{font-size:14.5px!important;font-weight:400!important;color:var(--muted)!important;padding-left:22px!important}

/* ============================================================================
   ARCHIVE BANNER — one reusable component for historical/superseded pages
   (Research/Archive migration pass, 2026-09-03d). Replaces four hand-rolled
   inline-styled notice blocks on record/scorecard/ledger/workpaper so archive
   status reads identically wherever it appears. Status is carried by text, not
   colour alone; the block sits above the frozen body it describes, never
   replacing it. Variant .arch-banner--record labels a dated snapshot rather
   than a retired program.
   ============================================================================ */
.arch-banner{border:1px solid var(--hairline);border-left:3px solid var(--ink);border-radius:var(--r-md);background:var(--bg-soft);padding:16px 20px;margin:0 0 24px}
.arch-tag{display:flex;flex-wrap:wrap;align-items:center;gap:7px 10px;margin:0 0 9px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.arch-tag .arch-state{border:1px solid var(--hairline);border-radius:999px;padding:3px 9px;color:var(--ink);background:var(--bg)}
.arch-body{font-size:14px;line-height:1.6;color:var(--ink);margin:0}
.arch-body + .arch-body{margin-top:9px}
.arch-cta{margin:11px 0 0}
.arch-cta a{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hairline);padding-bottom:2px}
.arch-cta a:hover,.arch-cta a:focus-visible{border-bottom-color:var(--ink)}
@media (max-width:560px){.arch-banner{padding:14px 16px}}

/* Divider that separates a page's current-status layer from the frozen body
   below it. Text-only label on a rule, so the boundary survives with CSS off. */
.arch-divider{display:flex;align-items:center;gap:12px;margin:26px 0 18px;font-family:var(--sans);font-size:11px;font-weight:600;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.arch-divider::after{content:"";flex:1;height:1px;background:var(--hairline)}

/* ============================================================================
   DISCLOSURE — progressive-disclosure accordion, promoted from about.html's
   inline <style> to a shared component (2026-09-03d) now that /research uses
   it too for the collapsed "Methods & Archive" branch. Native <details>, no
   JS: the open/closed state is announced by the element itself. about.html
   keeps only its page-specific extras (.disclosure-body .verify/.topics and
   the print override) on top of this base.
   ============================================================================ */
.disclosure{margin-top:20px;border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--surface-1);overflow:hidden}
.disclosure+.disclosure{margin-top:14px}
.disclosure[open]{border-color:var(--hairline-strong)}
.disclosure>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(18px,2.6vw,26px);font-family:var(--sans);font-size:15.5px;font-weight:600;color:var(--ink);transition:background var(--t-fast)}
.disclosure>summary::-webkit-details-marker{display:none}
.disclosure>summary:hover{background:var(--tint)}
.disclosure>summary:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.disclosure[open]>summary{border-bottom:1px solid var(--hairline)}
.disclosure-x{font-family:var(--mono);font-weight:400;font-size:15px;color:var(--faint);flex:none;transition:transform var(--t-fast)}
.disclosure[open] .disclosure-x{transform:rotate(45deg)}
.disclosure-body{padding:2px clamp(18px,2.6vw,26px) clamp(20px,2.8vw,26px)}
@media (max-width:640px){.disclosure>summary{padding:16px 18px;font-size:15px}}

/* ============================================================================
   BREADCRUMBS (2026-09-03d) — restrained hierarchy for archive/research pages,
   deliberately NOT a second navigation bar: text-size links, no buttons, and
   the current page is plain text carrying aria-current. Exempt from the
   one-prominent-link-per-destination rule because it states location, not
   choice. Separators are CSS ::before so they are not read out as content.
   ============================================================================ */
.crumbs{margin:0 0 18px}
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 6px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.crumbs li{display:flex;align-items:center;gap:0 6px}
.crumbs li+li::before{content:"/";color:var(--faint);font-size:12px}
/* min-height keeps each crumb a >=24px pointer target (WCAG 2.5.8) without
   making the row look like a button bar. */
.crumbs a{display:inline-flex;align-items:center;min-height:24px;color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.crumbs a:hover,.crumbs a:focus-visible{color:var(--ink);border-bottom-color:var(--hairline)}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}
@media (max-width:560px){.crumbs ol{font-size:12px}}