/* ===========================================================================
   Deep Report v2 - "dossier" redesign
   Self-hosted fonts + design tokens ported 1:1 from the design-canvas prototype
   (redesign/Deep Report.dc.html). Everything else in the report is inline-styled
   to mirror the prototype exactly; this file only holds the pieces a prototype's
   <helmet> block and support.js provided: @font-face, :root tokens, base reset,
   and the :hover states the prototype expressed as style-hover="" attributes.
   Scope: all rules are namespaced under .drx so this design cannot leak into the
   rest of the site, and the site's global CSS cannot leak in.
=========================================================================== */

/* ---- Space Grotesk (variable, latin) - weights 500/600/700 ---- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/spacegrotesk/sg-latin.woff2') format('woff2');
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ---- IBM Plex Sans (variable, latin) - weights 400/500/600 + italic 400 ---- */
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibmplexsans/ibmsans-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/fonts/ibmplexsans/ibmsans-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- IBM Plex Mono (static, latin) - weights 400/500/600 ---- */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono/ibmmono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono/ibmmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/fonts/ibmplexmono/ibmmono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens: aligned to the storefront (2026-07-27) ----
   SUPERSEDES the 2026-07-17 note that used to live here. That note claimed the storefront was
   "styled entirely from these same tokens... so both pages moved together and nothing desynced".
   That is no longer true and was verified false by reading computed styles on the live
   /mmr-checker: deep-report-storefront.css does consume --gold/--teal, but the blueprint and neon
   sheets load after it and override those tokens page-wide. The storefront actually renders
   #0a0e1a surfaces, #00ffcc kickers, a #00ffcc -> #00ff7f CTA gradient with a green glow, #00ff7f
   wins, #ff4444 losses and #ffd700 as its secondary gold. The report was still the warm dossier
   (#121215 surfaces, antique #ffd700). Two products, one funnel, two palettes.

   Dark now takes the storefront's values exactly. This intentionally re-adopts #ffd700, which the
   2026-07-17 note had rejected as "yellow rather than gold" - that judgement was made against the
   warm #121215 dossier background. Against #0a0e1a with cyan and emerald beside it, #ffd700 is the
   storefront's own gold and reads as intended. If it ever looks wrong again, the fix is to change
   BOTH pages, not to fork the token back.

   LIGHT KEEPS ITS CONTRAST-TESTED GOLD. Do not "align" --gold to the blueprint's light #d97706:
   as small text that lands at 2.87:1, under the 4.5 bar, which is why #87640d exists. Light
   neutrals and win/loss/teal follow the blueprint's light ramp; the gold does not.

   Dark is the default; the site's own switcher (html[data-theme]) drives light, because this
   report no longer carries a theme toggle of its own (the nav's toggle is the only one). That is
   why these are keyed on the site attribute rather than the prototype's .theme-* classes. */
.drx {
  --bg:#0a0e1a; --bg2:#0d1420; --bg3:#141b2a;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  /* --mut is .52 white, not the storefront's .40-.45. This design puts 11px mono labels under
     almost every number, and .45 white lands at 4.2:1 on --bg2 - under the bar at that size.
     .52 reads as the same muted grey and clears it. */
  --text:#ffffff; --text2:rgba(255,255,255,.72); --mut:rgba(255,255,255,.52);
  --teal:#00ffcc; --win:#00ff7f; --loss:#ff4444;

  /* The storefront's signature move, available to the allowed-glow elements only (hero, verdict
     card, section numbers, status pills, the loser's queue gauge, dividers, roast border). Body
     copy, stat tiles, tables and the plan never take a glow - see the calm-body rule below. */
  --sf-grad:linear-gradient(135deg,#00ffcc,#00ff7f);
  --sf-glow:0 0 24px rgba(0,255,127,.24);

  /* --gold-fill paints the BUTTONS/badges. --gold is the accent used as TEXT (section kickers,
     numbers, "The verdict"). Same in dark, split in light: a gold light enough to read as gold on
     the light background fails as small text there (#d97706 = 2.87:1), so light accent text keeps
     the darker tested gold. Ink on the fill stays high contrast in both. */
  --gold:#ffd700;
  --gold-fill:#ffd700;
  --gold-ink:#05121a;   /* the storefront CTA's own ink colour, on #ffd700: 13:1. */

  /* Motion scale. Four durations for four jobs, so a 26-section document does not drift into
     four different ideas of "quick". Hover answers a pointer, disclosure moves a block of
     content, reveal introduces a section, resolve is a number arriving at its value - the only
     tier slow enough to read as deliberate rather than as lag. Use these, never a literal. */
  --drx-t-hover:180ms;
  --drx-t-disclose:250ms;
  --drx-t-reveal:400ms;
  --drx-t-resolve:750ms;
  --drx-e-out:cubic-bezier(.22,.61,.36,1);
}
html:not([data-theme=dark]) .drx {
  --bg:#fafafa; --bg2:#ffffff; --bg3:#f0f0f2;
  --line:rgba(0,0,0,.08); --line2:rgba(0,0,0,.14);
  --text:#1f2937; --text2:#4b5563; --mut:#6b7280;
  /* Light takes the blueprint's neutrals and red, but NOT its emerald or cyan as-is: on #fafafa
     #059669 is 3.4:1 and #0891b2 is 3.6:1, and both are used as 11-12px text (ledger win rates,
     the role chip, the ladder line). #047857 is the darker emerald from the storefront's own CTA
     gradient at 5.3:1; #177f8d is the tested teal at 4.6:1. Red #dc2626 clears at 4.7:1. */
  --teal:#177f8d; --win:#047857; --loss:#dc2626;
  --sf-grad:linear-gradient(135deg,#0891b2,#059669);
  --sf-glow:0 8px 26px rgba(8,145,178,.28);
  /* ONE gold for light, text and fill alike (the prototype's intent). It cannot be the mockup's
     literal #96700f: as text that reads 3.78:1 on --bg3, under the 4.5 bar. #87640d is the same
     colour ~6% darker and clears every light surface (4.52 / 4.90 / 5.30).
     A gold dark enough to pass as text is too dark for near-black ink, so the fill's ink flips to
     white here: #fff on #87640d is 5.4:1, where #141414 would be 3.4:1. That is the whole reason
     --gold-fill used to be a separate mid-orange (#d97706); unifying the colour is what forces
     the ink to move. */
  --gold:#87640d;
  --gold-fill:#87640d;
  --gold-ink:#ffffff;
}

/* Root paint as literals, not var()s: an element that declares a custom property and consumes it
   from its own inline style does not get that inline var() re-resolved when the token changes.
   KEEP THESE IN SYNC WITH --bg / --text above - they are the same colours written twice, and a
   token change that misses this pair leaves the page painted in the old palette. */
.drx { background:#0a0e1a; color:#ffffff; }
html:not([data-theme=dark]) .drx { background:#fafafa; color:#1f2937; }

/* ---- Base (prototype's <helmet> <style>) ---- */
.drx { font-family:'IBM Plex Sans',sans-serif; -webkit-font-smoothing:antialiased; }
.drx *{ box-sizing:border-box; }
.drx a{ color:var(--gold); text-decoration:none; }
.drx a:hover{ color:var(--text); }
.drx ::selection{ background:color-mix(in oklab, var(--gold) 35%, transparent); }

/* ---- Site-theme leak guard ----
   The site's global theme rules ([data-theme="dark"] h1..h6 / p / strong, specificity 0-1-1)
   select bare tags, so they reach inside .drx and out-rank inheritance from the .drx root -
   a namespace class alone does not isolate this design. Re-assert the drx tokens with a selector
   that outranks 0-1-1 outright rather than relying on stylesheet order.
   Headings would otherwise take the site's --text-secondary instead of this design's --text.
   strong matters most: it must resolve to --text so a bare <strong> from the **emphasis**
   convention reads brighter than the surrounding --text2 prose. Without this it inherits the
   muted body colour in light mode and the emphasis disappears. */
.drx :is(h1, h2, h3, h4, h5, h6, p),
[data-theme] .drx :is(h1, h2, h3, h4, h5, h6, p) { color: inherit; }
.drx :is(strong, b),
[data-theme] .drx :is(strong, b) { color: var(--text); }

/* ---- Sample banner + product toggle ----
   Only on /deep-report/sample. The gold-tinted strip is the prototype's provenance banner; the
   toggle swaps the same dataset between the two purchasable presentations. Built from the same
   pill vocabulary as the rest of the design (999px radius, mono uppercase micro-label, gold fill
   with --gold-ink for the active state) so it reads as part of the dossier, not a control bolted
   on top. Links, not buttons: each tier is a real shareable URL and needs no JS. */
.drx .drx-samplebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 20px;
  flex-wrap: wrap;
  min-height: 64px;
  padding: 10px 24px;
  background:
    radial-gradient(circle at 18% 50%, color-mix(in oklab, var(--teal) 9%, transparent), transparent 34%),
    linear-gradient(90deg, var(--bg2), color-mix(in oklab, var(--bg2) 94%, var(--teal)), var(--bg2));
  border-bottom: 1px solid color-mix(in oklab, var(--teal) 30%, var(--line));
  box-shadow: inset 0 -1px 0 color-mix(in oklab, var(--teal) 8%, transparent);
}
.drx .drx-samplebar-txt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 12.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text2);
}
.drx .drx-samplebar-txt::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--teal) 10%, transparent);
}
.drx .drx-tiertabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line2);
  border-radius: 999px;
  /* Opaque, not the banner's gold tint: the inactive tab must not read as a third state. */
  background: var(--bg);
}
.drx .drx-tiertab {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  font: 600 11.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mut);
  transition: color .18s ease, background .18s ease;
}
.drx .drx-tiertab small { font-size: 10.5px; font-weight: 500; opacity: .75; }
.drx .drx-tiertab:hover { color: var(--text); }
/* The active tab marks WHICH sample you are reading. It is a switcher, not an offer, so it takes
   a quiet fill instead of the gold CTA treatment. */
.drx .drx-tiertab.is-on { background: var(--bg3); color: var(--text); box-shadow: inset 0 0 0 1px var(--line2); }
/* The site's global `a:hover` and the .drx `a:hover{color:var(--text))}` rule would flip the
   active tab's ink to near-white on the gold fill. */
.drx .drx-tiertab.is-on:hover { color: var(--text); }
.drx .drx-tiertab.is-on small { opacity: .85; }
@media (max-width: 640px) {
  .drx .drx-samplebar { padding: 10px 16px; }
  .drx .drx-tiertabs { width: 100%; }
  .drx .drx-tiertab { flex: 1; justify-content: center; }
}

/* ==========================================================================
   Guided report reading
   A quiet orientation layer around the dossier: one tailored entry hub, one compact progress
   bar once the reader commits, and restrained disclosure controls inside evidence sections.
   The analysis remains the visual hero; these controls use graphite surfaces and hairlines,
   with colour reserved for state and finding severity.
========================================================================== */
.drx [data-screen-label] { scroll-margin-top: calc(var(--drx-nav-h, 64px) + 72px); }

/* ---- Section framing (3f) ----
   Proximity snapping, NOT mandatory: section heights vary hugely here (a receipts table against a
   one-line cleared check), so full-page snapping would fight flick-scrolling and break the read
   bar's progress. Proximity only settles the page onto a section top when the reader has already
   stopped near one, and never grabs a scroll in motion.
   This is deliberately a single class on the root so it can be switched off in one line if it
   feels wrong on a real read: delete .drx-snap from the wrapper and everything else is untouched.
   Cleared-strip rows and the match-history table are excluded - they are evidence to scroll
   through, not destinations to land on. */
@media (prefers-reduced-motion: no-preference) and (pointer: fine) {
  .drx-snap { scroll-snap-type: y proximity; }
  .drx-snap [data-screen-label] { scroll-snap-align: start; }
  .drx-snap [data-screen-label="Match history"],
  .drx-snap [data-screen-label="Cleared checks"],
  .drx-snap .drx-cleared { scroll-snap-align: none; }
}

.drx .drx-scroll-cue {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-top: 2px;
  padding: 9px 13px 9px 9px;
  color: var(--text2);
  background: color-mix(in oklab, var(--teal) 5%, var(--bg2));
  border: 1px solid color-mix(in oklab, var(--teal) 22%, var(--line));
  border-radius: 12px;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.drx .drx-scroll-cue:hover {
  color: var(--text);
  border-color: color-mix(in oklab, var(--teal) 50%, var(--line));
  background: color-mix(in oklab, var(--teal) 8%, var(--bg2));
  transform: translateY(1px);
}
.drx .drx-scroll-cue-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: color-mix(in oklab, var(--teal) 9%, var(--bg3));
  border-radius: 8px;
}
.drx .drx-scroll-cue-icon svg { width: 18px; height: 18px; }
.drx .drx-scroll-cue > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drx .drx-scroll-cue small {
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.drx .drx-scroll-cue strong {
  max-width: 48ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 600 12.5px/1.2 'Space Grotesk', sans-serif;
  color: var(--text);
}

.drx .drx-reading-hub {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  scroll-margin-top: calc(var(--drx-nav-h, 64px) + 18px);
  margin: 0 0 44px;
  padding: 32px;
  background:
    radial-gradient(circle at 92% -10%, color-mix(in oklab, var(--teal) 10%, transparent), transparent 32%),
    radial-gradient(circle at -8% 112%, color-mix(in oklab, var(--gold) 7%, transparent), transparent 30%),
    var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .16);
}
.drx .drx-reading-hub::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 auto auto 32px;
  width: 180px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: .8;
}
.drx .drx-reading-hub-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 24px;
}
.drx .drx-reading-eyebrow {
  display: block;
  margin-bottom: 10px;
  font: 600 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--teal);
}
.drx .drx-reading-hub h2 {
  max-width: 18ch;
  margin: 0 0 10px;
  font: 700 clamp(28px, 3.3vw, 40px)/1.08 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.drx .drx-reading-hub-head p {
  max-width: 62ch;
  margin: 0;
  font: 400 16px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
.drx .drx-reading-modes {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.drx .drx-reading-mode {
  min-width: 138px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 13px;
  appearance: none;
  color: var(--mut);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  text-align: left;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}
.drx .drx-reading-mode:focus { outline: none; }
.drx .drx-reading-mode:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.drx .drx-reading-mode span { font: 650 12.5px/1 'Space Grotesk', sans-serif; }
.drx .drx-reading-mode small {
  font: 500 8.5px/1.2 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.drx .drx-reading-mode:hover { color: var(--text2); }
.drx .drx-reading-mode.is-active {
  color: var(--text);
  background: var(--bg3);
  border-color: var(--line2);
  box-shadow: inset 0 1px 0 color-mix(in oklab, var(--text) 4%, transparent);
}
.drx .drx-reading-mode.is-active small { color: var(--teal); }

.drx .drx-resume {
  width: 100%;
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  padding: 12px 14px;
  appearance: none;
  color: var(--text);
  background: color-mix(in oklab, var(--teal) 6%, var(--bg));
  border: 1px solid color-mix(in oklab, var(--teal) 24%, var(--line));
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.drx .drx-resume:hover {
  background: color-mix(in oklab, var(--teal) 9%, var(--bg));
  border-color: color-mix(in oklab, var(--teal) 48%, var(--line));
}
.drx .drx-resume-mark { width: 36px; height: 36px; display: grid; place-items: center; color: var(--teal); background: color-mix(in oklab, var(--teal) 10%, var(--bg3)); border-radius: 9px; }
.drx .drx-resume-mark svg { width: 19px; height: 19px; }
.drx .drx-resume > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.drx .drx-resume small { font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.drx .drx-resume strong { font: 600 13.5px/1.25 'Space Grotesk', sans-serif; }
.drx .drx-resume-arrow { color: var(--teal); font-size: 18px; }

.drx .drx-findings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
}
.drx .drx-finding {
  --finding: var(--teal);
  position: relative;
  min-height: 230px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 20px;
  color: var(--text2);
  background: color-mix(in oklab, var(--bg3) 72%, var(--bg2));
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.drx .drx-finding::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--finding), transparent 72%);
  opacity: .85;
}
.drx .drx-finding::after {
  content: "";
  position: absolute;
  width: 150px;
  height: 150px;
  top: -90px;
  right: -70px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--finding) 9%, transparent);
  pointer-events: none;
}
.drx .drx-finding--danger { --finding: var(--loss); }
.drx .drx-finding--warning { --finding: var(--gold); }
.drx .drx-finding--clear { --finding: var(--win); }
.drx .drx-finding:hover {
  color: var(--text2);
  border-color: color-mix(in oklab, var(--finding) 45%, var(--line));
  background: color-mix(in oklab, var(--finding) 5%, var(--bg3));
  transform: translateY(-3px);
}
.drx .drx-finding-top { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.drx .drx-finding-top span:first-child {
  font: 650 11px/1 'IBM Plex Mono', monospace;
  color: var(--finding);
}
.drx .drx-finding-top span:last-child {
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--mut);
}
.drx .drx-finding > strong {
  margin-bottom: 9px;
  font: 650 19px/1.25 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
  color: var(--text);
  text-wrap: balance;
}
.drx .drx-finding > p { margin: 0 0 18px; font: 400 14px/1.6 'IBM Plex Sans', sans-serif; color: var(--text2); }
.drx .drx-finding-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  font: 650 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--finding);
}
.drx .drx-finding-link svg { width: 17px; height: 17px; transition: transform .18s ease; }
.drx .drx-finding:hover .drx-finding-link svg { transform: translateX(3px); }

.drx .drx-route {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 20px;
  padding-top: 18px;
  overflow-x: auto;
  scrollbar-width: none;
  border-top: 1px solid var(--line);
}
.drx .drx-route::-webkit-scrollbar { display: none; }
.drx .drx-route-label {
  margin-right: 4px;
  font: 600 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--mut);
}
.drx .drx-route a {
  font: 600 11px/1 'IBM Plex Mono', monospace;
  white-space: nowrap;
  color: var(--text2);
}
.drx .drx-route a:hover { color: var(--teal); }
.drx .drx-route i { width: 18px; height: 1px; flex: 0 0 18px; background: linear-gradient(90deg, var(--line2), color-mix(in oklab, var(--teal) 35%, var(--line))); }

/* Evidence disclosure: the script marks direct, data-heavy children only; headings, verdicts and
   its generated one-sentence summary remain in place. No layout is reconstructed in JS, so Blazor
   still owns the same nodes and inline grid/flex display values return intact when reopened. */
.drx .drx-section-summary {
  display: none;
  max-width: 68ch;
  margin: 0 0 18px;
  font: 400 16px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}
.drx.drx-mode-quick .drx-section-summary { display: block; }
.drx.drx-mode-quick .drx-section-narrative { display: none !important; }
.drx .drx-evidence-collapsed > .drx-evidence-auto { display: none !important; }
.drx.drx-mode-quick .drx-note { display: none; }
.drx .drx-evidence-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 20px;
  padding: 9px 12px;
  appearance: none;
  font: 600 9.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text2);
  background: var(--bg2);
  border: 1px solid var(--line2);
  border-radius: 9px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.drx .drx-evidence-toggle:hover { color: var(--teal); border-color: color-mix(in oklab, var(--teal) 42%, var(--line)); background: color-mix(in oklab, var(--teal) 5%, var(--bg2)); }
.drx .drx-evidence-toggle svg { width: 15px; height: 15px; transition: transform .18s ease; }
.drx .drx-evidence-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.drx .drx-next-card {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 13px 14px;
  color: var(--text2);
  background: color-mix(in oklab, var(--bg2) 82%, transparent);
  border: 1px solid var(--line);
  border-radius: 13px;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.drx .drx-next-card:hover {
  color: var(--text2);
  border-color: color-mix(in oklab, var(--teal) 36%, var(--line));
  background: color-mix(in oklab, var(--teal) 4%, var(--bg2));
  transform: translateY(-1px);
}
.drx .drx-next-index {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  font: 650 10px/1 'IBM Plex Mono', monospace;
  color: var(--teal);
  background: color-mix(in oklab, var(--teal) 8%, var(--bg3));
  border-radius: 9px;
}
.drx .drx-next-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.drx .drx-next-copy small { font: 600 8.5px/1 'IBM Plex Mono', monospace; letter-spacing: .13em; text-transform: uppercase; color: var(--teal); }
.drx .drx-next-copy strong { font: 600 13px/1.2 'Space Grotesk', sans-serif; color: var(--text); }
.drx .drx-next-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 12px/1.3 'IBM Plex Sans', sans-serif; color: var(--mut); }
.drx .drx-next-card > svg { width: 18px; height: 18px; color: var(--teal); transition: transform .18s ease; }
.drx .drx-next-card:hover > svg { transform: translateX(3px); }

/* Fixed reading status. It stays below the site's sticky nav (height measured by the script),
   is absent in the hero, and stands down before pricing so it never competes with conversion. */
.drx .drx-readbar {
  position: fixed;
  z-index: 850;
  top: var(--drx-nav-h, 64px);
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  color: var(--text);
  background: color-mix(in oklab, var(--bg2) 96%, transparent);
  border-bottom: 1px solid var(--line2);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.drx .drx-readbar.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.drx .drx-readbar-progress { position: absolute; inset: auto 0 0; height: 2px; background: var(--line); }
.drx .drx-readbar-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--teal), var(--win)); transition: width .22s ease; }
.drx .drx-readbar-inner {
  width: min(1180px, calc(100% - 48px));
  min-height: 56px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}
.drx .drx-readbar-count { font: 650 10px/1 'IBM Plex Mono', monospace; letter-spacing: .1em; color: var(--teal); white-space: nowrap; }
.drx .drx-readbar-current { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.drx .drx-readbar-current small,
.drx .drx-readbar-next small { font: 600 8px/1 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--mut); }
.drx .drx-readbar-current strong,
.drx .drx-readbar-next strong { max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.1 'Space Grotesk', sans-serif; color: var(--text); }
.drx .drx-readbar-next {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  appearance: none;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.drx .drx-readbar-next:hover { background: color-mix(in oklab, var(--teal) 6%, var(--bg3)); }
.drx .drx-readbar-next > span { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.drx .drx-readbar-next svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--teal); }
.drx .drx-readbar-outline {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  appearance: none;
  font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 9px;
  cursor: pointer;
}
.drx .drx-readbar-outline:hover { color: var(--teal); border-color: color-mix(in oklab, var(--teal) 40%, var(--line)); }
.drx .drx-readbar-outline svg { width: 17px; height: 17px; }

.drx .drx-outline-scrim {
  position: fixed;
  z-index: 1180;
  inset: 0;
  appearance: none;
  background: rgba(0, 0, 0, .58);
  border: 0;
}
.drx .drx-outline {
  position: fixed;
  z-index: 1190;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(390px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  padding: 22px;
  background: var(--bg2);
  border-left: 1px solid var(--line2);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .44);
  transform: translateX(102%);
  visibility: hidden;
  transition: transform .24s ease, visibility .24s ease;
}
.drx .drx-outline.is-open { transform: translateX(0); visibility: visible; }
.drx .drx-outline-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.drx .drx-outline-head > div { display: flex; flex-direction: column; gap: 5px; }
.drx .drx-outline-head small { font: 600 9px/1 'IBM Plex Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.drx .drx-outline-head strong { font: 650 19px/1.15 'Space Grotesk', sans-serif; }
.drx .drx-outline-head button { width: 36px; height: 36px; display: grid; place-items: center; appearance: none; color: var(--text2); background: var(--bg3); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.drx .drx-outline-head button:hover { color: var(--text); border-color: var(--line2); }
.drx .drx-outline-head svg { width: 18px; height: 18px; }
.drx .drx-outline-mode { margin-bottom: 14px; padding: 10px 12px; font: 550 9px/1.35 'IBM Plex Mono', monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); background: var(--bg3); border-radius: 9px; }
.drx .drx-outline-list { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding-right: 4px; }
.drx .drx-outline-link {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 8px;
  align-items: center;
  gap: 10px;
  padding: 11px 9px;
  color: var(--text2);
  border-bottom: 1px solid var(--line);
  border-radius: 8px;
}
.drx .drx-outline-link:hover { color: var(--text); background: var(--bg3); }
.drx .drx-outline-link.is-current { color: var(--text); background: color-mix(in oklab, var(--teal) 6%, var(--bg3)); }
.drx .drx-outline-link span:first-child { font: 600 9px/1 'IBM Plex Mono', monospace; color: var(--mut); }
.drx .drx-outline-link strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12.5px/1.2 'Space Grotesk', sans-serif; }
.drx .drx-outline-link i { width: 6px; height: 6px; border-radius: 50%; background: var(--line2); }
.drx .drx-outline-link.is-seen i { background: var(--win); }
.drx .drx-outline-link.is-current i { background: var(--teal); box-shadow: 0 0 0 3px color-mix(in oklab, var(--teal) 10%, transparent); }

@media (max-width: 900px) {
  .drx .drx-reading-hub { padding: 26px; }
  .drx .drx-reading-hub-head { grid-template-columns: 1fr; align-items: start; }
  .drx .drx-reading-modes { width: min(100%, 390px); }
  .drx .drx-reading-mode { min-width: 0; }
  .drx .drx-findings { grid-template-columns: 1fr; }
  .drx .drx-finding { min-height: 0; }
}
@media (max-width: 650px) {
  .drx [data-screen-label] { scroll-margin-top: calc(var(--drx-nav-h, 58px) + 64px); }
  .drx .drx-scroll-cue { width: 100%; }
  .drx .drx-scroll-cue strong { max-width: 32ch; }
  .drx .drx-reading-hub { margin-bottom: 28px; padding: 20px; border-radius: 17px; }
  .drx .drx-reading-hub h2 { font-size: 28px; }
  .drx .drx-reading-hub-head p { font-size: 15px; }
  .drx .drx-reading-mode { padding: 9px 10px; }
  .drx .drx-reading-mode small { display: none; }
  .drx .drx-finding { padding: 18px; border-radius: 14px; }
  .drx .drx-finding-top { margin-bottom: 15px; }
  .drx .drx-route { gap: 9px; }
  .drx .drx-route-label { display: none; }
  .drx .drx-readbar-inner { width: calc(100% - 20px); min-height: 54px; gap: 9px; }
  .drx .drx-readbar-count { font-size: 9px; }
  .drx .drx-readbar-current small { display: none; }
  .drx .drx-readbar-current strong { max-width: 23ch; }
  .drx .drx-readbar-next { width: 36px; height: 36px; flex: 0 0 36px; justify-content: center; padding: 0; }
  .drx .drx-readbar-next > span { display: none; }
  .drx .drx-readbar-outline { width: 36px; padding: 0; justify-content: center; }
  .drx .drx-readbar-outline span { display: none; }
  .drx .drx-next-copy span { display: none; }
  .drx .drx-outline { width: 100%; padding: 18px; border-left: 0; }
}
/* ---- Motion -----------------------------------------------------------------------------
   Every rule in this block is gated on .drx-reveal-armed, which deep-report-reader.js adds to
   the root only after it has confirmed IntersectionObserver support and wired the reveal
   observer. Without the script, before it runs, or on a browser it bails out of, nothing is
   parked and nothing is hidden: the report renders exactly as it did before this block existed.
   That is the same promise the rest of the reader makes, and it is the reason none of these
   initial states live in the markup.

   Only opacity, transform, stroke-dashoffset and width-inside-a-fixed-track are animated.
   Nothing here can reflow the document mid-scroll, and no fixed or sticky element is inside a
   transformed ancestor (the readbar, outline and sticky CTA all sit outside <main>). */

/* Section entrance. Once-only: the observer adds .is-revealed and stops watching, because a
   26-section dossier that re-animates on every scroll-up is exhausting to read. Sections already
   on screen at load are marked revealed before paint and never hold the pending state, so nobody
   watches the top of the report they just paid for fade in. */
.drx.drx-reveal-armed [data-drx-report-section] > * {
  opacity: 0;
  transform: translateY(8px);
}
.drx.drx-reveal-armed [data-drx-report-section].is-revealed > * {
  opacity: 1;
  transform: none;
  transition: opacity var(--drx-t-reveal) var(--drx-e-out),
              transform var(--drx-t-reveal) var(--drx-e-out);
}
/* Stagger the section's own direct children (kicker, heading, lead, then evidence blocks) so a
   section assembles rather than snapping in. Capped at the 5th child: past that the delay would
   outlast the reveal itself and the last block would visibly lag the scroll. */
.drx.drx-reveal-armed [data-drx-report-section].is-revealed > :nth-child(2) { transition-delay: 50ms; }
.drx.drx-reveal-armed [data-drx-report-section].is-revealed > :nth-child(3) { transition-delay: 100ms; }
.drx.drx-reveal-armed [data-drx-report-section].is-revealed > :nth-child(4) { transition-delay: 150ms; }
.drx.drx-reveal-armed [data-drx-report-section].is-revealed > :nth-child(n+5) { transition-delay: 200ms; }

/* The loser's queue arc draws itself. --drx-arc is the dash length, written inline by the Razor
   dial; parking dashoffset there puts the whole arc inside the 400-unit gap (the arc is 282.74
   long, so none of it shows), and releasing to 0 sweeps it in from the left. Both the full dial
   and the verdict-card mini gauge carry the attribute. */
.drx.drx-reveal-armed [data-drx-dial-fill] { stroke-dashoffset: var(--drx-arc, 0); }
.drx.drx-reveal-armed [data-drx-report-section].is-revealed [data-drx-dial-fill] {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--drx-t-resolve) var(--drx-e-out);
}

/* Bar fills. The target width is authored inline by Razor, so the script parks the value in a
   data attribute and puts it back on reveal rather than this sheet trying to out-specify an
   inline style. All this rule owns is the curve. */
.drx.drx-reveal-armed [data-drx-bar] {
  transition: width var(--drx-t-resolve) var(--drx-e-out);
}

/* Evidence disclosure. Expanding animates, collapsing does not: collapse is a "get this off my
   screen" action and content that lingers after the click reads as lag, not polish. Height is
   deliberately not animated either - these blocks are several screens tall and animating their
   height would reflow the document under the reader's scroll position. */
@keyframes drx-evidence-in {
  from { opacity: 0; transform: translateY(6px); }
}
.drx.drx-reveal-armed .drx-evidence-opening > .drx-evidence-auto {
  animation: drx-evidence-in var(--drx-t-disclose) var(--drx-e-out) both;
}
.drx.drx-reveal-armed .drx-evidence-opening > .drx-evidence-auto:nth-child(n+3) { animation-delay: 40ms; }
.drx.drx-reveal-armed .drx-evidence-opening > .drx-evidence-auto:nth-child(n+5) { animation-delay: 80ms; }
.drx.drx-reveal-armed .drx-evidence-opening > .drx-evidence-auto:nth-child(n+7) { animation-delay: 120ms; }
/* Open evidence keeps a tinted toggle so the reader can see which sections they have already
   opened while scanning back up the page. */
.drx .drx-evidence-toggle[aria-expanded="true"] {
  color: var(--teal);
  border-color: color-mix(in oklab, var(--teal) 32%, var(--line2));
}

@media (prefers-reduced-motion: reduce) {
  .drx .drx-scroll-cue,
  .drx .drx-finding,
  .drx .drx-next-card,
  .drx .drx-readbar,
  .drx .drx-outline { transition: none; }

  /* Reduced motion lands every value at its final state, it does not skip content. The script
     makes the same promise on its side: no count-up, and bars are restored without a transition. */
  .drx.drx-reveal-armed [data-drx-report-section] > *,
  .drx.drx-reveal-armed [data-drx-report-section].is-revealed > * {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0s;
  }
  .drx.drx-reveal-armed [data-drx-dial-fill],
  .drx.drx-reveal-armed [data-drx-report-section].is-revealed [data-drx-dial-fill] {
    stroke-dashoffset: 0;
    transition: none;
  }
  .drx.drx-reveal-armed [data-drx-bar] { transition: none; }
  .drx.drx-reveal-armed .drx-evidence-opening > .drx-evidence-auto { animation: none; }
}

/* ---- Section prose ----
   Section bodies arrive as \n\n-delimited paragraphs, so they render as real <p>s instead of
   one collapsed block. Long bodies (see TwoColumnProseChars) set two columns so a dossier
   section never opens with a wall of text; break-inside keeps a paragraph whole in one column.
   Single column under 900px, where two columns would be unreadable. */
.drx .drx-prose p { font:400 18px/1.75 'IBM Plex Sans',sans-serif; color:var(--text2); margin:0 0 14px; text-wrap:pretty; break-inside:avoid; }
.drx .drx-prose p:last-child { margin-bottom:0; }
.drx .drx-prose--split { columns:2; column-gap:44px; }
.drx .drx-prose--single { max-width:68ch; }
@media (max-width:900px) { .drx .drx-prose--split { columns:1; max-width:68ch; } }

/* ---- Sample guide notes ----
   Teaching callouts that only ever render on the public sample (/deep-report/sample and
   /deep-report-preview with no params): DeepReportV2's IsSample parameter is set from
   DeepReportPreview's server-computed IsSampleMode, which is false the instant a
   PurchaseToken is present, i.e. on every paid /mmr-report/{token} view. Nothing here is a
   client-side toggle, so there is no path for a note to reach a real customer's report.
   Deliberately NOT styled like the report's own card system (solid --bg2 fill, full border,
   no accent): the left accent bar and tinted fill read as a guide layer sitting on top of the
   analysis, not another finding inside it. */
.drx .drx-note {
  margin: 24px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--teal);
  background: color-mix(in oklab, var(--teal) 7%, var(--bg2));
  border-radius: 0 10px 10px 0;
}
.drx .drx-note-label {
  display: block;
  font: 600 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 6px;
}
.drx .drx-note p {
  margin: 0;
  font: 400 15.5px/1.65 'IBM Plex Sans', sans-serif;
  color: var(--text2);
}

/* ---- Loser's queue summary ----
   The value cards share the dial's height on wide screens, but centre their contents instead of
   pinning tiny type to opposite ends of the card. Fluid headline type uses the available desktop
   space, while explicit breakpoints make the tiles 4 -> 2 -> 1 columns before numbers can collide. */
.drx .drx-lq-summary {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}
.drx .drx-lq-dial {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
}
.drx .drx-lq-dial-inner {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
}
.drx .drx-lq-dial-reading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7.4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.drx .drx-lq-dial-score {
  font: 700 38px/1 'Space Grotesk', sans-serif;
}
.drx .drx-lq-clear-mark {
  color: var(--win);
  font: 700 38px/1 'Space Grotesk', sans-serif;
  text-shadow: 0 0 18px color-mix(in oklab, var(--win) 35%, transparent);
}
.drx .drx-lq-dial-status {
  color: var(--win);
  font: 600 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}
.drx .drx-lq-mini-reading {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7.4%;
  text-align: center;
  font: 700 34px/1 'Space Grotesk', sans-serif;
}
.drx .drx-lq-mini-reading .drx-lq-clear-mark { font-size: 34px; }
.drx .drx-lq-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  min-width: 0;
}
.drx .drx-lq-stat {
  min-width: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(16px, 1.35vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(16px, 1.45vw, 24px);
}
.drx .drx-lq-stat-value {
  max-width: 100%;
  color: var(--text);
  font: 700 clamp(36px, 2.55vw, 48px)/.95 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.drx .drx-lq-stat-value.is-loss { color: var(--loss); }
.drx .drx-lq-stat-detail {
  color: var(--mut);
  font-size: .58em;
  letter-spacing: -.015em;
}
.drx .drx-lq-stat-label {
  color: var(--mut);
  font: 500 clamp(11.5px, .68vw, 12.5px)/1.55 'IBM Plex Mono', monospace;
  letter-spacing: .085em;
  overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
  .drx .drx-lq-summary { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .drx .drx-lq-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .drx .drx-lq-stats { grid-template-columns: 1fr; }
  .drx .drx-lq-stat {
    min-height: 138px;
    gap: 14px;
  }
  .drx .drx-lq-stat-value { font-size: clamp(40px, 12vw, 48px); }
}

/* ---- Hover states (prototype style-hover="" attributes) ----
   The prototype's own header/footer are gone - the site's nav and footer wrap this report - so the
   header toggle/buy-pill hovers went with them. */
.drx .drx-ledgerrow:hover{ background:var(--bg3); }                               /* receipts rows */
.drx .drx-price-ghost:hover{ border-color:var(--text); }                         /* snapshot ghost button */
.drx .drx-price-cta:hover{ background:var(--text); color:var(--bg); }            /* deep report CTA */

/* ---- Responsive ----
   The prototype was desktop-only: every grid is an INLINE style with hardcoded columns, so a phone
   clipped them rather than reflowing (measured at a 375 viewport: body.scrollWidth 747, with the
   receipts rows holding 830px of content in a 325px box). The page-level scrollbar was hidden by
   the global `*{max-width:100vw}` in mobile-fixes.min.css, which masked the spill without fixing it.

   Inline styles can only be beaten with !important, and there is no class on most of these blocks,
   so the column values are matched by their literal inline text. That is a real coupling: if a
   grid-template-columns value changes in DeepReportV2.razor, its selector here must change too.
   Substring matching also means e.g. "1fr 1fr" matches "1fr 1fr 1fr" - harmless, both collapse. */
/* ---- Allowed-glow list (3-pre) ----
   The storefront stops a scroll; the report is read for several minutes and converts by feeling
   like a lab result. So neon is rationed to small STRUCTURAL elements only, and never touches a
   reading surface. Anything not in this block stays flat: paragraph text, stat tiles, tables, the
   receipts ledger and the plan all render on flat backgrounds with high contrast.
   No backdrop-filter anywhere - glass on this page has caused a blackout once already. */
.drx [data-screen-label] > div:first-child span:first-child {
  /* The section number. The one repeating mark down the whole page, so it carries the accent. */
  text-shadow: 0 0 14px color-mix(in oklab, var(--gold) 45%, transparent);
}
/* Status pills: the @Head pill already colours itself from the section verdict; the glow picks up
   that same colour via currentColor so a CLEAR pill glows green and a CRIT pill glows red. */
.drx [data-screen-label] > div:first-child > span:last-child {
  box-shadow: 0 0 18px -4px currentColor;
}
/* The loser's queue gauge: the report's single most recognisable object. */
.drx [data-screen-label*="Loser"] svg { filter: drop-shadow(0 0 10px color-mix(in oklab, var(--gold) 28%, transparent)); }
/* Section dividers pick up a hairline of accent where they meet the page edge. */
.drx section[data-screen-label] { position: relative; }
.drx section[data-screen-label]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 96px;
  height: 1px;
  background: var(--sf-grad);
  opacity: .7;
}
.drx section[data-screen-label="Hero"]::before { display: none; }

/* Cleared checks: the sections the report measured and found fine, collapsed to one tick each.
   Native <details>, no JavaScript - injected scripts are inert after an enhanced-nav swap, and
   this block has to work on the very first paint of a purchased report. The default disclosure
   triangle is removed in favour of a chevron drawn on ::after, which is the summary's last grid
   item. */
.drx .drx-cleared { border-bottom: 1px solid var(--line); }
.drx .drx-cleared:last-child { border-bottom: 0; }
.drx .drx-cleared > summary {
  display: grid;
  grid-template-columns: 22px 210px 1fr 18px;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
}
.drx .drx-cleared > summary::-webkit-details-marker { display: none; }
.drx .drx-cleared > summary:hover { background: var(--bg3); }
.drx .drx-cleared > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--mut);
  border-bottom: 1.5px solid var(--mut);
  transform: rotate(45deg) translate(-2px, -2px);
  justify-self: end;
}
.drx .drx-cleared[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.drx .drx-tick { color: var(--win); display: inline-flex; }
.drx .drx-cleared-t { font: 600 15px/1.35 'Space Grotesk', sans-serif; color: var(--text); }
.drx .drx-cleared-s { font: 400 15px/1.6 'IBM Plex Sans', sans-serif; color: var(--text2); }
.drx .drx-cleared-body { padding: 22px 20px 26px; border-top: 1px solid var(--line); background: var(--bg); }

/* The demoted tldr under the verdict card: same disclosure affordance as a cleared row, but it is
   a standalone block rather than a row in a bordered list, so it carries no rules of its own. */
.drx .drx-tldr { padding: 14px 0 4px; }
.drx .drx-tldr > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0 14px;
  cursor: pointer;
  list-style: none;
}
.drx .drx-tldr > summary::-webkit-details-marker { display: none; }
.drx .drx-tldr > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--mut);
  border-bottom: 1.5px solid var(--mut);
  transform: rotate(45deg) translate(-2px, -2px);
}
.drx .drx-tldr[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* Sticky export dock. Sample-only (the razor gates it on ShowSales), with full-report PDF,
   purpose-built share art and the product CTA. A soft top glow makes it feel attached to the
   report without using backdrop-filter (a large filtered surface has blacked out this page). */
.drx .drx-stickycta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background:
    radial-gradient(ellipse 42% 180% at 74% 120%, color-mix(in oklab, var(--gold) 14%, transparent), transparent 72%),
    linear-gradient(90deg, color-mix(in oklab, var(--bg2) 96%, var(--teal)), var(--bg2) 46%, color-mix(in oklab, var(--bg2) 96%, var(--gold)));
  border-top: 1px solid var(--line2);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .46), 0 -1px 0 color-mix(in oklab, var(--teal) 18%, transparent);
}
.drx .drx-stickycta::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 36%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: .75;
  pointer-events: none;
}
.drx .drx-stickycta-in {
  position: relative;
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.drx .drx-stickycta-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 190px;
}
.drx .drx-stickycta-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  color: var(--teal);
  background: color-mix(in oklab, var(--teal) 11%, var(--bg3));
  border: 1px solid color-mix(in oklab, var(--teal) 46%, var(--line));
  border-radius: 11px;
  box-shadow: inset 0 0 18px color-mix(in oklab, var(--teal) 7%, transparent);
}
.drx .drx-stickycta-mark svg { width: 22px; height: 22px; }
.drx .drx-stickycta-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.drx .drx-stickycta-kicker {
  font: 500 9px/1 'IBM Plex Mono', monospace;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mut);
}
.drx .drx-stickycta-name {
  font: 650 14px/1.15 'Space Grotesk', sans-serif;
  color: var(--text);
  white-space: nowrap;
}
.drx .drx-stickycta-price {
  margin-left: 7px;
  font: 600 12px/1 'IBM Plex Mono', monospace;
  letter-spacing: .06em;
  color: var(--gold);
}
.drx .drx-stickycta-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: var(--gold-fill);
  color: var(--gold-ink) !important;
  font: 700 14px/1 'Space Grotesk', sans-serif;
  padding: 0 20px;
  border-radius: 12px;
  white-space: nowrap;
  box-shadow: 0 8px 24px color-mix(in oklab, var(--gold) 20%, transparent);
  transition: transform .18s ease, box-shadow .18s ease;
}
.drx .drx-stickycta-btn svg { width: 18px; height: 18px; transition: transform .18s ease; }
.drx .drx-stickycta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 30px color-mix(in oklab, var(--gold) 28%, transparent);
}
.drx .drx-stickycta-btn:hover svg { transform: translateX(2px); }

/* Export controls are secondary to Run mine, but each has a clear visual identity. */
.drx .drx-actions-toggle {
  display: none;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 12px;
  appearance: none;
  font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text2);
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 10px;
  cursor: pointer;
}
.drx .drx-actions-toggle:hover,
.drx .drx-actions-toggle[aria-expanded="true"] { color: var(--teal); border-color: color-mix(in oklab, var(--teal) 42%, var(--line)); }
.drx .drx-actions-toggle svg { width: 18px; height: 18px; }
.drx .drx-stickycta-share {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.drx .drx-share {
  appearance: none;
  height: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: color-mix(in oklab, var(--bg3) 74%, transparent);
  border: 1px solid var(--line2);
  border-radius: 11px;
  padding: 0 12px;
  font: 600 10.5px/1 'IBM Plex Mono', monospace;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text2);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.drx .drx-share svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}
.drx .drx-share:hover {
  color: var(--text);
  border-color: var(--text2);
  background: var(--bg3);
  transform: translateY(-1px);
}
.drx .drx-share--pdf {
  color: var(--teal);
  border-color: color-mix(in oklab, var(--teal) 42%, var(--line));
  background: color-mix(in oklab, var(--teal) 8%, var(--bg3));
}
.drx .drx-share--pdf:hover {
  color: var(--teal);
  border-color: var(--teal);
  background: color-mix(in oklab, var(--teal) 13%, var(--bg3));
}
.drx .drx-share--roast {
  color: var(--loss);
  border-color: color-mix(in oklab, var(--loss) 38%, var(--line));
  background: color-mix(in oklab, var(--loss) 7%, var(--bg3));
}
.drx .drx-share--roast:hover {
  color: var(--loss);
  border-color: var(--loss);
  background: color-mix(in oklab, var(--loss) 12%, var(--bg3));
}
.drx .drx-share.is-copied { color: var(--win); border-color: var(--win); }
/* Inline copy control, sat under a roast line. NOT --roast: that modifier belongs to the
   export dock's Roast PNG button, and reusing it dropped that button out of the dock row. */
.drx .drx-share--inline { margin-top: 14px; padding: 6px 12px; font-size: 10.5px; }

/* Only the sample reserves the space, and only when the bar is actually rendered. */
.drx:has(.drx-stickycta) > main { padding-bottom: 92px; }

.drx.drx-reader-active .drx-stickycta-in { min-height: 62px; }
.drx.drx-reader-active .drx-stickycta-kicker { display: none; }

@media (max-width: 900px) {
  .drx .drx-stickycta-brand { min-width: 0; }
  .drx .drx-stickycta-kicker { display: none; }
  .drx .drx-share--link { display: none; }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-mark { display: none; }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-copy { display: none; }
  .drx.drx-reader-ready.drx-reader-active .drx-actions-toggle { display: inline-flex; margin-left: auto; }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-share {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    max-width: min(430px, calc(100vw - 24px));
    padding: 9px;
    margin: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    opacity: 0;
    visibility: hidden;
    transform: translateY(7px);
    background: var(--bg2);
    border: 1px solid var(--line2);
    border-radius: 13px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .42);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
  }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-share.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-share .drx-share--link {
    display: inline-flex;
  }
}
@media (max-width: 650px) {
  .drx .drx-stickycta-in {
    width: calc(100% - 20px);
    min-height: 64px;
    gap: 8px;
  }
  .drx .drx-stickycta-mark { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
  .drx .drx-stickycta-copy { display: none; }
  .drx .drx-stickycta-share { gap: 6px; }
  .drx .drx-share {
    width: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 10px;
  }
  .drx .drx-share span { display: none; }
  .drx .drx-stickycta-btn { min-height: 42px; padding: 0 14px; }
  .drx:has(.drx-stickycta) > main { padding-bottom: 78px; }
  .drx.drx-reader-ready.drx-reader-active .drx-actions-toggle { width: 40px; padding: 0; }
  .drx.drx-reader-ready.drx-reader-active .drx-actions-toggle span { display: none; }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-share .drx-share {
    width: auto;
    min-width: 0;
    padding: 0 11px;
  }
  .drx.drx-reader-ready.drx-reader-active .drx-stickycta-share .drx-share span { display: inline; }
}
@media (max-width: 380px) {
  .drx .drx-stickycta-mark { display: none; }
  .drx .drx-stickycta-btn { padding: 0 12px; }
}

@media (max-width: 900px) {
  /* Cleared rows: the one-line verdict drops under the title rather than squeezing beside it. */
  .drx .drx-cleared > summary { grid-template-columns: 22px 1fr 18px; row-gap: 6px; }
  .drx .drx-cleared > summary::after { grid-row: 1; grid-column: 3; }
  .drx .drx-cleared-s { grid-row: 2; grid-column: 2 / span 2; }

  /* Two-pane content splits (prose beside a chart, etc.) stack. */
  .drx [style*="grid-template-columns:1.35fr 1fr"],
  .drx [style*="grid-template-columns:1.3fr 1fr"],
  .drx [style*="grid-template-columns:1.2fr 1fr"],
  .drx [style*="grid-template-columns:1.1fr 1fr"],
  .drx [style*="grid-template-columns:2fr 1fr"],
  .drx [style*="grid-template-columns:1fr 1fr"],
  .drx [style*="grid-template-columns:340px 400px"] {
    grid-template-columns: 1fr !important;
  }
  /* Stat tile rows: two across instead of three-to-seven. */
  .drx [style*="grid-template-columns:repeat(3,1fr)"],
  .drx [style*="grid-template-columns:repeat(4,1fr)"],
  .drx [style*="grid-template-columns:repeat(5,1fr)"],
  .drx [style*="grid-template-columns:repeat(6,1fr)"],
  .drx [style*="grid-template-columns:repeat(7,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* The graded window: 10 tiles at 41px is unreadable; 5 across, two rows. */
  .drx [style*="grid-template-columns:repeat(10,1fr)"] {
    grid-template-columns: repeat(5, 1fr) !important;
  }
  /* The pricing pair is fixed-width (340px 400px) and must not force the page wide. */
  .drx [style*="grid-template-columns:340px 400px"] { justify-content: stretch !important; }

  /* Receipts: keep the table honest and let it scroll instead of clipping. */
  .drx .drx-ledger { overflow-x: auto !important; overflow-y: hidden; }
  .drx .drx-ledger > div { min-width: 860px; }
  /* The season-receipts champion table has 6 columns, not 11; 860px would force a
     needless scroll on tablets. */
  .drx .drx-ledger--mini > div { min-width: 620px; }

  /* The hero card and prose blocks read better full-width once stacked. */
  .drx [style*="max-width:68ch"] { max-width: 100% !important; }
}

@media (max-width: 560px) {
  /* A long Riot ID at the hero's 40px floor is wider than the viewport and dragged <main> out
     with it (the h1's clamp() floor never shrinks below 40px). Scale with the viewport and let a
     very long name break rather than push the page. */
  .drx h1 { font-size: clamp(28px, 8vw, 40px) !important; overflow-wrap: anywhere; }

  /* Cards laid out as [big number | label] cannot fit two-up: the number alone eats the column.
     One per row (the clock's three-up is the case that overflowed). */
  .drx [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }

  /* Role-discipline row: 70px + 180px of fixed columns exceed the card's inner width. Let the
     meta column shrink and wrap. (Both widths are unique to that row.) */
  .drx [style*="width:180px"] { width: auto !important; min-width: 0; }
  .drx [style*="width:70px"] { flex: none; }

  /* Signature picks / window champs are flex rows of cards - let them wrap. */
  .drx [style*="display:flex;gap:12px"] { flex-wrap: wrap; }
}


/* ===========================================================================
   DOSSIER NAV CHROME (moved here from deep-report.css, 2026-07-17)
   Lives with the design SYSTEM rather than the League report's stylesheet: every dossier surface
   links this file, so any route that carries .ly-nav--storefront / .ly-nav--report gets the paint.
   /rivals proved the point - it took the modifier class but rendered the old blue-black nav
   because deep-report.css is only linked on /mmr-checker and /deep-report*.

   The nav is a SIBLING of .drx, so the tokens above are not in scope: values are literals that
   mirror them and must move together. Light keys off html[data-theme="light"] here (not the
   :not([data-theme=dark]) the .drx block uses) to match the nav's own rules in
   wwwroot/css/site/24-layout-ly.css.
=========================================================================== */
/* ===========================================================================
   Report nav chrome (NavMenu IsReport)
   A rendered report carries no header of its own, so the nav becomes its header: product pill +
   buy CTA, no link list. These style the NAV, which is a sibling of the report and therefore
   outside .drx - the drx tokens are not in scope, so the values are spelled out here and mirror
   the storefront palette (gold accent, --bp-gold / its light counterpart).
   Light uses html[data-theme="light"] to match the rest of the nav's rules in
   wwwroot/css/site/24-layout-ly.css, NOT the blueprint's html:not([data-theme=dark]).
=========================================================================== */
.ly-nav--report .ly-nav__left { gap: 12px; min-width: 0; }

.ly-nav__report-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 36px;
  padding: 4px 11px 4px 5px;
  font: 600 13px/1 'Space Grotesk', sans-serif;
  white-space: nowrap;
  color: #00e7c2 !important;
  background: rgba(0, 231, 194, .055);
  border: 1px solid rgba(0, 231, 194, .2);
  border-radius: 10px;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, border-color .18s ease, transform .18s ease;
}
.ly-nav__report-back svg {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 7px;
  background: rgba(0, 231, 194, .1);
  transition: transform .18s ease, background .18s ease;
}
.ly-nav__report-back:hover {
  color: #ffffff !important;
  background: rgba(0, 231, 194, .11);
  border-color: rgba(0, 231, 194, .48);
  transform: translateY(-1px);
}
.ly-nav__report-back:hover svg { transform: translateX(-2px); background: rgba(0, 231, 194, .16); }
html[data-theme="light"] .ly-nav__report-back {
  color: #0b7580 !important;
  background: rgba(11, 117, 128, .055);
  border-color: rgba(11, 117, 128, .2);
}
html[data-theme="light"] .ly-nav__report-back svg { background: rgba(11, 117, 128, .09); }
html[data-theme="light"] .ly-nav__report-back:hover {
  color: #07545d !important;
  background: rgba(11, 117, 128, .1);
  border-color: rgba(11, 117, 128, .42);
}

.ly-nav__report-pill {
  display: inline-flex;
  align-items: center;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  padding: 5px 9px;
}
html[data-theme="light"] .ly-nav__report-pill {
  color: #6b7280;
  border-color: rgba(0, 0, 0, 0.13);
}

.ly-nav__report-cta {
  display: inline-flex;
  align-items: center;
  font-family: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  /* Dark theme: #141414 on #ffd700 = 8.4:1. This pill sits in the nav, outside .drx, so it cannot
     read the tokens and restates them; the light override below keeps it on the same single gold
     as every other light button rather than staying the one bright pill on a cream page. */
  color: #141414 !important;
  background: #ffd700 !important;
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.ly-nav__report-cta:hover { background: #ffffff !important; color: #141414 !important; }
/* Same single light gold as --gold-fill, and white ink for the same reason: #fff on #87640d is
   5.4:1 where the base rule's #141414 would be 3.4:1. */
html[data-theme="light"] .ly-nav__report-cta { background: #87640d !important; color: #ffffff !important; }
html[data-theme="light"] .ly-nav__report-cta:hover { background: #1f2937 !important; color: #ffffff !important; }

@media (max-width: 560px) {
  /* Not enough width for logo + back + pill + CTA. The pill goes first (it only restates the page
     you are on), then the back link drops to its arrow - the CTA is the point of this nav, and the
     back link keeps an aria-label so the icon is still named. */
  .ly-nav__report-pill { display: none; }
  .ly-nav__report-back-txt { display: none; }
  .ly-nav__report-cta { font-size: 13px; padding: 9px 14px; }
}

/* ===========================================================================
   Dossier nav surface (NavMenu IsStorefront + IsReport)
   /mmr-checker and the report are one design and link to each other constantly, so the nav that
   sits above both is painted from the dossier palette instead of the site's default chrome.

   The clash this fixes is temperature, not brightness: the site nav is cool (#0a0d12 blue-black,
   #fafafa grey-white, #00d4ff cyan) while the dossier is warm (#121215 neutral, #fafafa cream,
   gold). The light theme was the tell - a grey bar sitting on a cream page.

   Values are literals and light keys off html[data-theme="light"], per the report-nav block
   above: the nav is a sibling of .drx, so the drx tokens are not in scope here. They mirror
   deep-report-v2.css exactly and must move with it. !important only where the base rule in
   wwwroot/css/site/24-layout-ly.css uses it.
=========================================================================== */
.ly-nav--storefront,
.ly-nav--report {
  /* --bg at 88%, the prototype header's own recipe. */
  background: rgba(10, 14, 26, .88) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.ly-nav--storefront .ly-nav__link,
.ly-nav--report .ly-nav__link { color: rgba(255, 255, 255, .72) !important; }
.ly-nav--storefront .ly-nav__link:hover,
.ly-nav--report .ly-nav__link:hover { color: #ffffff !important; background: rgba(255, 255, 255, .04) !important; }
.ly-nav--storefront .ly-nav__link--active,
.ly-nav--report .ly-nav__link--active { color: #ffd700 !important; background: rgba(255, 215, 0, .08) !important; }
/* The design has no glows - depth is background steps and 1px borders. */
.ly-nav--storefront .ly-nav__link--active::after,
.ly-nav--report .ly-nav__link--active::after { background: #ffd700; box-shadow: none; }
/* Sample Report keeps its gold here because the .ly-nav--storefront rule above outranks the
   --highlight class in 24-layout-ly.css (0,2,0 vs 0,1,0, both !important) and would otherwise
   flatten it back to rgba(255, 255, 255, .72). Restated, not re-invented: same values as that file. The ring is
   what separates it from --active directly above, which is gold on this nav too. */
.ly-nav--storefront .ly-nav__link--highlight,
.ly-nav--report .ly-nav__link--highlight { color: #ffd700 !important; background: rgba(255, 215, 0, .09) !important; }
.ly-nav--storefront .ly-nav__link--highlight:hover,
.ly-nav--report .ly-nav__link--highlight:hover { color: #ffe14d !important; background: rgba(255, 215, 0, .16) !important; transform: translateY(-1px); }

/* Full Sample Report attention cue. A soft gold glow that plays three times on load then
   rests - deliberately NOT an infinite loop, which would nag on every page and cheapen the
   nav. Suppressed entirely for anyone who asked for reduced motion. The base highlight ring
   returns once the animation ends (no fill-mode), so nothing is permanently changed. */
.ly-nav__link--pulse { transition: transform .15s ease; }
@keyframes ly-nav-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .34), 0 0 0 0 rgba(255, 215, 0, 0); }
  50%      { box-shadow: inset 0 0 0 1px rgba(255, 215, 0, .62), 0 0 11px 1px rgba(255, 215, 0, .28); }
}
@media (prefers-reduced-motion: no-preference) {
  .ly-nav--storefront .ly-nav__link--pulse,
  .ly-nav--report .ly-nav__link--pulse { animation: ly-nav-pulse 1.7s ease-in-out .5s 3; }
}
.ly-nav--storefront.ly-nav--scrolled,
.ly-nav--report.ly-nav--scrolled { box-shadow: none; }

html[data-theme="light"] .ly-nav--storefront,
html[data-theme="light"] .ly-nav--report {
  background: rgba(250, 250, 250, .88) !important;
  border-bottom-color: rgba(0, 0, 0, .08);
}
html[data-theme="light"] .ly-nav--storefront .ly-nav__link,
html[data-theme="light"] .ly-nav--report .ly-nav__link { color: #4b5563 !important; }
html[data-theme="light"] .ly-nav--storefront .ly-nav__link:hover,
html[data-theme="light"] .ly-nav--report .ly-nav__link:hover { color: #1f2937 !important; background: rgba(0, 0, 0, .03) !important; }
/* Must sit AFTER the generic light .ly-nav__link above, not with the dark --highlight block:
   both selectors carry !important and land on identical specificity (0,3,1), so source order is
   the only tiebreak and the generic rule would otherwise flatten the gold back to #4b5563.
   Same accent gold as --active below, for the reason its comment gives. */
html[data-theme="light"] .ly-nav--storefront .ly-nav__link--highlight,
html[data-theme="light"] .ly-nav--report .ly-nav__link--highlight { color: #87640d !important; background: rgba(135, 100, 13, .07) !important; }
html[data-theme="light"] .ly-nav--storefront .ly-nav__link--highlight:hover,
html[data-theme="light"] .ly-nav--report .ly-nav__link--highlight:hover { color: #7a5c0c !important; background: rgba(135, 100, 13, .12) !important; }
/* The light gold FILL (#d97706) fails contrast as small text on cream, so an active link takes
   the dossier's darker accent gold - same split deep-report-v2.css makes for --gold vs --gold-fill. */
html[data-theme="light"] .ly-nav--storefront .ly-nav__link--active,
html[data-theme="light"] .ly-nav--report .ly-nav__link--active { color: #87640d !important; background: rgba(135, 100, 13, .06) !important; }
html[data-theme="light"] .ly-nav--storefront .ly-nav__link--active::after,
html[data-theme="light"] .ly-nav--report .ly-nav__link--active::after { background: #87640d; }
html[data-theme="light"] .ly-nav--storefront.ly-nav--scrolled,
html[data-theme="light"] .ly-nav--report.ly-nav--scrolled { box-shadow: none; }

/* The theme toggle sits INSIDE the nav restyled above, so leaving it on the old blueprint's
   purple (#a855f7) made it the only purple element on a gold page. The prototype's header specs
   this control as muted chrome, not an accent: --bg2 fill, --line2 hairline, --text2 label.

   The base rule is `html[data-theme="dark"] .ly-theme-toggle` (0,2,1) with `background` marked
   !important, so a plain `.ly-nav--storefront .ly-theme-toggle` (0,2,0) loses on both counts.
   Carrying the same data-theme prefix takes this to (0,3,1); background needs !important to
   answer !important. */
html[data-theme="dark"] .ly-nav--storefront .ly-theme-toggle,
html[data-theme="dark"] .ly-nav--report .ly-theme-toggle {
  color: rgba(255, 255, 255, .72) !important;
  background: #18181c !important;
  border-color: #34343e !important;
}
html[data-theme="dark"] .ly-nav--storefront .ly-theme-toggle:hover,
html[data-theme="dark"] .ly-nav--report .ly-theme-toggle:hover {
  color: #ffffff !important;
  border-color: #8f8d95 !important;
}
html[data-theme="light"] .ly-nav--storefront .ly-theme-toggle,
html[data-theme="light"] .ly-nav--report .ly-theme-toggle {
  color: #4b5563 !important;
  background: #fdfcf8 !important;
  border-color: #d3cebf !important;
}
html[data-theme="light"] .ly-nav--storefront .ly-theme-toggle:hover,
html[data-theme="light"] .ly-nav--report .ly-theme-toggle:hover {
  color: #1f2937 !important;
  border-color: #787468 !important;
}

/* ============================================================================
   THE DUO  (added 2026-07-30)
   Detection shipped in the first build but nothing rendered it. Named classes
   rather than inline styles because this section has four separate responsive
   collapses; typography still goes inline, like the rest of the report, since
   the site's global [data-theme] element rules leak past .drx.
   ============================================================================ */
/* Flex, not a 3-column grid: the champion portrait only exists on reports generated after
   this section shipped, and with a grid the missing first child shifted every remaining
   item one column left - the headline landed in the 1fr track and the third column
   collapsed to 0px on every legacy report. Flex places items by presence, not by index. */
.drx .drx-duo-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(18px, 2vw, 30px);
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 2vw, 28px);
}
.drx .drx-duo-portrait {
  position: relative;
  width: clamp(64px, 6vw, 84px);
  height: clamp(64px, 6vw, 84px);
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--bg3);
  overflow: hidden;
  flex: none;
}
.drx .drx-duo-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.drx .drx-duo-id {
  flex: 1 1 240px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.drx .drx-duo-name {
  color: var(--text);
  font: 700 clamp(21px, 2vw, 27px)/1.15 'Space Grotesk', sans-serif;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.drx .drx-duo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  color: var(--mut);
  font: 500 clamp(11.5px, .7vw, 12.5px)/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .085em;
}
.drx .drx-duo-meta strong {
  color: var(--text2);
  font-weight: 600;
}
.drx .drx-duo-headline {
  flex: none;
  margin-left: auto;
  text-align: right;
}
.drx .drx-duo-headline-value {
  color: var(--teal);
  font: 700 clamp(34px, 3.6vw, 50px)/.95 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.drx .drx-duo-headline-label {
  margin-top: 7px;
  color: var(--mut);
  font: 500 11px/1.45 'IBM Plex Mono', monospace;
  letter-spacing: .11em;
}

/* Share bar: how much of the window was actually played as a pair. */
.drx .drx-duo-share {
  margin-top: 14px;
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg3);
  border: 1px solid var(--line);
}
.drx .drx-duo-share-with {
  background: linear-gradient(90deg, color-mix(in oklab, var(--teal) 55%, transparent), var(--teal));
}
.drx .drx-duo-share-solo { background: var(--bg3); }
.drx .drx-duo-share-key {
  margin-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  color: var(--mut);
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
}
.drx .drx-duo-share-key span::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: baseline;
}
.drx .drx-duo-share-key .is-with::before { background: var(--teal); }
.drx .drx-duo-share-key .is-solo::before {
  background: var(--bg3);
  border: 1px solid var(--line2);
}

/* With / without split, or the single saturation callout when there is no solo sample. */
.drx .drx-duo-split {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.drx .drx-duo-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 1.5vw, 24px);
  min-width: 0;
}
.drx .drx-duo-card--accent {
  border-color: color-mix(in oklab, var(--teal) 32%, var(--line));
  background: color-mix(in oklab, var(--teal) 7%, var(--bg2));
}
.drx .drx-duo-card--warn {
  border-left: 3px solid var(--gold);
  border-color: color-mix(in oklab, var(--gold) 30%, var(--line));
  background: color-mix(in oklab, var(--gold) 7%, var(--bg2));
  grid-column: 1 / -1;
}
.drx .drx-duo-card-label {
  color: var(--mut);
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
  /* One of these labels embeds the teammate's Riot ID, which can be long and has no spaces. */
  overflow-wrap: anywhere;
}
.drx .drx-duo-card--accent .drx-duo-card-label { color: var(--teal); }
.drx .drx-duo-card--warn .drx-duo-card-label { color: var(--gold); }
.drx .drx-duo-card-value {
  margin-top: 12px;
  color: var(--text);
  font: 700 clamp(30px, 2.7vw, 40px)/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.drx .drx-duo-card-sub {
  margin-top: 9px;
  color: var(--text2);
  font: 400 15px/1.65 'IBM Plex Sans', sans-serif;
}
.drx .drx-duo-card-note {
  margin: 11px 0 0;
  color: var(--text2);
  font: 400 16px/1.72 'IBM Plex Sans', sans-serif;
  text-wrap: pretty;
  max-width: 72ch;
}

/* Head-to-head rows: two comparable numbers, one bar each. */
.drx .drx-duo-vs {
  margin-top: 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 1.5vw, 24px);
}
.drx .drx-duo-vs-row {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr) 62px;
  gap: 16px;
  align-items: center;
  padding: 11px 0;
}
.drx .drx-duo-vs-row + .drx-duo-vs-row { border-top: 1px solid var(--line); }
.drx .drx-duo-vs-who {
  color: var(--text2);
  font: 600 14px/1.35 'Space Grotesk', sans-serif;
  overflow-wrap: anywhere;
}
.drx .drx-duo-vs-track {
  height: 10px;
  border-radius: 99px;
  background: var(--bg3);
  overflow: hidden;
}
.drx .drx-duo-vs-fill {
  height: 100%;
  border-radius: 99px;
  background: var(--text2);
}
.drx .drx-duo-vs-fill.is-you { background: var(--teal); }
.drx .drx-duo-vs-fill.is-them { background: var(--gold); }
.drx .drx-duo-vs-value {
  text-align: right;
  color: var(--text);
  font: 600 15px/1 'IBM Plex Mono', monospace;
  font-variant-numeric: tabular-nums;
}

/* Fun/informational tiles. */
/* Each tile is individually sample-gated, so the count varies from 1 (a legacy report that
   only carries a pair win rate) to 5. auto-fit alone stretched a lone tile to the full
   1180px content width, which read as a bug rather than a stat, so the view stamps the
   count on data-tiles and the column track is chosen from it. Keep the attribute in the
   media-query selectors below or they lose on specificity. */
.drx .drx-duo-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}
.drx .drx-duo-stats[data-tiles="1"] { grid-template-columns: minmax(0, 420px); }
.drx .drx-duo-stats[data-tiles="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drx .drx-duo-stats[data-tiles="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drx .drx-duo-stats[data-tiles="5"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drx .drx-duo-stat {
  min-width: 0;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(16px, 1.35vw, 22px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 1.3vw, 20px);
}
.drx .drx-duo-stat-value {
  max-width: 100%;
  color: var(--text);
  font: 700 clamp(30px, 2.2vw, 40px)/.98 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
}
.drx .drx-duo-stat-value.is-win { color: var(--win); }
.drx .drx-duo-stat-value.is-loss { color: var(--loss); }
.drx .drx-duo-stat-value.is-teal { color: var(--teal); }
.drx .drx-duo-stat-detail {
  color: var(--mut);
  font-size: .55em;
  letter-spacing: -.01em;
}
.drx .drx-duo-stat-label {
  color: var(--mut);
  font: 500 clamp(11px, .66vw, 12px)/1.55 'IBM Plex Mono', monospace;
  letter-spacing: .085em;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .drx .drx-duo-stats[data-tiles],
  .drx .drx-duo-stats[data-tiles="3"],
  .drx .drx-duo-stats[data-tiles="5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drx .drx-duo-stats[data-tiles="1"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .drx .drx-duo-headline {
    flex: 1 1 100%;
    margin-left: 0;
    text-align: left;
  }
  .drx .drx-duo-split { grid-template-columns: 1fr; }
  .drx .drx-duo-vs-row {
    grid-template-columns: minmax(0, 1fr) 62px;
    row-gap: 9px;
  }
  .drx .drx-duo-vs-track { grid-column: 1 / -1; }
}
@media (max-width: 460px) {
  .drx .drx-duo-stats[data-tiles] { grid-template-columns: minmax(0, 1fr); }
  .drx .drx-duo-stat { min-height: 122px; }
}

/* ============================================================================
   THE PROJECTION  (added 2026-07-30)
   The forward half of the report: this window recounted with the proven leaks
   fixed, priced in LP and rank. Four modes (levers / already climbing / no
   levers / low sample) share these blocks, so nothing here assumes a contrast
   exists - an account with nothing to fix renders the pace panel alone.
   ============================================================================ */
.drx .drx-proj-flip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  align-items: stretch;
}
.drx .drx-proj-card {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 1.9vw, 28px);
  min-width: 0;
}
.drx .drx-proj-card--now { opacity: .82; }
.drx .drx-proj-card--fixed {
  border-color: color-mix(in oklab, var(--teal) 34%, var(--line));
  background: color-mix(in oklab, var(--teal) 8%, var(--bg2));
}
.drx .drx-proj-card-label {
  color: var(--mut);
  font: 500 11px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .12em;
}
.drx .drx-proj-card--fixed .drx-proj-card-label { color: var(--teal); }
.drx .drx-proj-record {
  margin-top: 14px;
  color: var(--text);
  font: 700 clamp(34px, 3.6vw, 50px)/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  white-space: nowrap;
}
.drx .drx-proj-record-w { color: var(--win); }
.drx .drx-proj-record-l { color: var(--loss); }
.drx .drx-proj-record-sep { color: var(--mut); font-size: .6em; padding: 0 .12em; }
.drx .drx-proj-wr {
  margin-top: 12px;
  color: var(--text2);
  font: 600 17px/1.4 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
}
.drx .drx-proj-sub {
  margin-top: 9px;
  color: var(--mut);
  font: 400 14.5px/1.65 'IBM Plex Sans', sans-serif;
}
.drx .drx-proj-arrow {
  align-self: center;
  color: var(--gold);
  font: 700 30px/1 'Space Grotesk', sans-serif;
}

/* Lever list: one row per fixable leak, ranked by what it is worth. */
.drx .drx-proj-levers {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.drx .drx-proj-lever {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 1.5vw, 24px);
  align-items: start;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  padding: 18px 22px;
}
.drx .drx-proj-lever-n {
  color: var(--gold);
  font: 600 15px/1.6 'IBM Plex Mono', monospace;
}
.drx .drx-proj-lever-title {
  color: var(--text);
  font: 700 18px/1.35 'Space Grotesk', sans-serif;
  letter-spacing: -.01em;
}
.drx .drx-proj-lever-body {
  margin: 8px 0 0;
  color: var(--text2);
  font: 400 15.5px/1.7 'IBM Plex Sans', sans-serif;
  text-wrap: pretty;
}
.drx .drx-proj-lever-do {
  margin: 8px 0 0;
  color: var(--teal);
  font: 500 15px/1.6 'IBM Plex Sans', sans-serif;
}
.drx .drx-proj-lever-worth {
  text-align: right;
  white-space: nowrap;
}
.drx .drx-proj-lever-worth-v {
  color: var(--text);
  font: 700 26px/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.drx .drx-proj-lever-worth-l {
  margin-top: 7px;
  color: var(--mut);
  font: 500 10.5px/1.45 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
}

/* The rank consequence: games to the ceiling at each rate. */
.drx .drx-proj-pace {
  margin-top: 14px;
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 1.9vw, 28px);
}
.drx .drx-proj-pace-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.drx .drx-proj-pace-cell {
  min-width: 0;
  background: var(--bg3);
  border: 1px solid var(--line2);
  border-radius: 12px;
  padding: 18px 20px;
}
.drx .drx-proj-pace-cell.is-fixed {
  border-color: color-mix(in oklab, var(--teal) 34%, var(--line2));
  background: color-mix(in oklab, var(--teal) 8%, var(--bg3));
}
.drx .drx-proj-pace-v {
  color: var(--text);
  font: 700 clamp(26px, 2.3vw, 34px)/1 'Space Grotesk', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
.drx .drx-proj-pace-cell.is-fixed .drx-proj-pace-v { color: var(--teal); }
.drx .drx-proj-pace-v.is-never { color: var(--loss); font-size: clamp(22px, 1.9vw, 28px); }
.drx .drx-proj-pace-l {
  margin-top: 9px;
  color: var(--mut);
  font: 500 10.5px/1.5 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
}
.drx .drx-proj-note {
  margin: 18px 0 0;
  color: var(--text2);
  font: 400 16px/1.72 'IBM Plex Sans', sans-serif;
  max-width: 74ch;
  text-wrap: pretty;
}
.drx .drx-proj-caveat {
  margin: 14px 0 0;
  color: var(--mut);
  font: 400 14px/1.7 'IBM Plex Sans', sans-serif;
  max-width: 78ch;
  text-wrap: pretty;
}

@media (max-width: 860px) {
  .drx .drx-proj-flip { grid-template-columns: minmax(0, 1fr); }
  .drx .drx-proj-arrow { transform: rotate(90deg); justify-self: center; }
  .drx .drx-proj-lever { grid-template-columns: auto minmax(0, 1fr); }
  .drx .drx-proj-lever-worth {
    grid-column: 2;
    text-align: left;
  }
}