/* ─────────────────────────────────────────────────────────────────────────────────────────────
   src/assets/css/v2.css — Task E1 (20 September 2026), wired into production by Task E2.

   The stylesheet for the NEW condition, rare-disease and trial templates.

   THIS IS THE SERVED COPY AND IT IS THE ONLY ONE A BROWSER EVER SEES. Task E1 kept the
   stylesheet under src/_includes/v2/ so the previews could not publish. Task E2 wired the
   templates into the real site, so the stylesheet moved here, where the src/assets passthrough
   copies it and base.njk references it through the cacheBust filter like every other asset.

   THE COPY UNDER src/_includes/v2/ IS STILL THERE AND IS STILL READ - by the preview renderer
   and by the accessibility guard, which parses the palette straight out of it. The two must not
   drift: a guard in the test suite compares them ignoring only this header block, and fails if a
   rule differs. Edit this copy and re-sync the other.

   IT NAMES NO INTERNAL REPOSITORY FILE, ON PURPOSE. This stylesheet is passthrough-copied byte
   for byte, so its comments are the served bytes; a repo path written here is published. The
   fuller version of every note below is in the copy under src/_includes/, which is never served.

   ── PALETTE ───────────────────────────────────────────────────────────────────────────────
   Navy #0D1D34, teal #3AC0A8, white. MEASURED, not assumed. The ratios are asserted by the
   accessibility guard, which recomputes every one of them from these hex values rather than
   trusting this comment:

     teal   #3AC0A8 on white            2.26:1   FAILS. Never text on white. Fill only.
     navy   #0D1D34 on teal  #3AC0A8    7.47:1   pass  <- teal is a FILL with navy text
     tealInk#12705F on white            5.99:1   pass  <- text links on white
     tealInk#12705F on bg     #F4F6F8   5.52:1   pass
     white          on navy  #0D1D34   16.90:1   pass
     navy           on bg    #F4F6F8   15.60:1   pass
     muted  #3F4A5A on white            8.98:1   pass
     ctlBdr #7D8896 on white            3.60:1   pass  <- WCAG 2.2 SC 1.4.11, control boundaries

   THE BORDER COLOUR #D6DEE6 IS 1.36:1 AND IS DECORATIVE ONLY (panel edges, table rules). It is
   never the visible edge of a form control; --v2-control-border is. That distinction is the one
   `main.css` already records for --input-border, and it is the one most easily lost.

   ── TYPE ──────────────────────────────────────────────────────────────────────────────────
   TWO FAMILIES, ONE FOR EACH JOB, RESTORED 21 September 2026. Source Serif 4 for headings and
   Inter for body, which is the pair this site used before the v2 shell and the pair the rest
   of the site never stopped using: the legacy stylesheet has imported both since the first
   build and sets headings in the serif through its own class rules. Setting the whole page in
   one grotesque overrode that on the pages v2 reaches and left the site in two typographic
   systems at once, which is the visible half of what was rejected.

   ATKINSON HYPERLEGIBLE IS GONE, AND IT WAS A REAL TRADE. It is a legibility-optimised face
   and dropping it is a cost. What is kept instead is every accessibility floor it was chosen
   alongside: 18px minimum body text, the AA ratios below, the 44px targets and the text-size
   control. Inter is a high-legibility interface face at the same size, and the heading and
   body faces now differ from each other, which is a hierarchy cue the single-family setting
   did not have.

   Body text 18px minimum. The logo is an image and is unchanged. A real fallback stack is
   given for both families because a webfont can fail to load.
   ───────────────────────────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --v2-navy:           #0D1D34;
  --v2-teal:           #3AC0A8;
  --v2-teal-ink:       #12705F;
  --v2-white:          #FFFFFF;
  --v2-bg:             #F4F6F8;
  --v2-panel:          #FFFFFF;
  --v2-border:         #D6DEE6;
  --v2-control-border: #7D8896;
  --v2-muted:          #3F4A5A;

  --v2-open-ink:    #1B5E20;
  --v2-open-tint:   #E6F4EA;
  --v2-soon-ink:    #8A4B00;
  --v2-soon-tint:   #FFF3E0;
  --v2-invite-ink:  #0D1D34;
  --v2-invite-tint: #E7EDF3;
  --v2-alert-ink:   #9A3412;
  --v2-alert-tint:  #FEF3E7;

  --v2-font: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --v2-font-display: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;

  --v2-radius:  10px;
  --v2-radius-lg: 14px;
  --v2-gap:     1.25rem;
  --v2-gap-lg:  2rem;

  /* 44px tap targets (WCAG 2.2 SC 2.5.8 needs 24px; the brief asks for 44px, which is the
     stricter iOS/Android figure and the one used here). Every interactive element below
     inherits this, so raising or lowering it is one edit rather than thirty. */
  --v2-tap: 44px;

  /* The "A+" control multiplies this. 100 / 112 / 125 are the steps in
     V2_CONFIG.textScaleSteps, in the settings module the build reads. */
  --v2-text-scale: 1;
}

html[data-v2-text-scale="112"] { --v2-text-scale: 1.12; }
html[data-v2-text-scale="125"] { --v2-text-scale: 1.25; }

/* ─── RESET AND BASE (mobile first) ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--v2-font);
  /* 18px MINIMUM body text (brief). The scale multiplier only ever goes up. */
  font-size: calc(18px * var(--v2-text-scale));
  line-height: 1.6;
  color: var(--v2-navy);
  background: var(--v2-bg);
  /* NO HORIZONTAL SCROLL is a requirement, and the honest way to get it is for every wide
     child to scroll inside its own container (see .v2-scroll-x below) rather than for the body
     to clip. `overflow-x: hidden` on body hides the symptom and breaks position: sticky. */
}

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { font-family: var(--v2-font-display); line-height: 1.25; margin: 0 0 0.5em; font-weight: 600; }
h1 { font-size: 1.85rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }
p  { margin: 0 0 1em; }

a { color: var(--v2-teal-ink); }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--v2-teal-ink);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Skip link: visible the moment it takes focus, which is the only time it matters. */
.v2-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--v2-navy);
  color: var(--v2-white);
  padding: 0.75rem 1rem;
  z-index: 100;
}
.v2-skip:focus { left: 0; }

.v2-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 1rem; }

/* A wide child (a table, a compare grid, a long code string) scrolls inside itself. */
.v2-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.v2-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── HEADER ──────────────────────────────────────────────────────────────────────────────── */
.v2-header { background: var(--v2-navy); color: var(--v2-white); }
.v2-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 64px; padding-top: 0.5rem; padding-bottom: 0.5rem;
}
/* -- THE LOGO ---------------------------------------------------------------------------
   THE IMAGE FILE IS THE COMMITTED ONE, BYTE FOR BYTE:
   public/brand/voxsanity-logo-wordmark-560x140.png. Not retyped as text, not re-exported,
   not recoloured, not redrawn. It is the same artwork as voxsanity-logo-square-640.png,
   cropped to its wordmark by Samuel and supplied on 20 September 2026 (Task M step 2f).

   THE CROP FRAME IS GONE, AND THAT IS THE POINT OF THE NEW FILE. Until this file existed,
   the square one had to be shown through an overflow-hidden span with negative offsets
   computed off a pixel measurement of where the lettering sat: 640 * (40/134) = 191px, at
   left -12px and top -75px. It worked, and it meant every horizontal surface that ever
   wanted this logo had to repeat that arithmetic and would land on slightly different
   numbers. A 4:1 file needs no arithmetic at all.

   THE INTRINSIC SIZE IS IN THE MARKUP (width=560 height=140) SO THE BOX IS RESERVED BEFORE
   THE IMAGE ARRIVES. Height is set here and width follows the ratio, so a future re-export
   at a different pixel size needs no CSS change. */
.v2-logo { display: inline-flex; align-items: center; min-height: var(--v2-tap); }
.v2-logo img { display: block; height: 40px; width: auto; max-width: 100%; border-radius: 4px; }

/* ─── BUTTONS AND CONTROLS ────────────────────────────────────────────────────────────────── */
.v2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: var(--v2-tap); min-width: var(--v2-tap);
  padding: 0.6rem 1.15rem;
  font: inherit; font-weight: 700;
  border-radius: var(--v2-radius);
  border: 1px solid var(--v2-control-border);
  background: var(--v2-panel);
  color: var(--v2-navy);
  text-decoration: none;
  cursor: pointer;
}
/* Teal FILL with navy text: 7.47:1. This is the only place teal touches text and the text is
   navy, never white. */
.v2-btn--primary { background: var(--v2-teal); border-color: var(--v2-teal-ink); color: var(--v2-navy); }
.v2-btn--primary:hover { background: #2FB49B; }
.v2-btn--ghost { background: transparent; color: var(--v2-white); border-color: var(--v2-white); }

.v2-controls { display: flex; align-items: center; gap: 0.5rem; }
.v2-textsize {
  min-height: var(--v2-tap); min-width: var(--v2-tap);
  padding: 0 0.85rem;
  font: inherit; font-weight: 700;
  color: var(--v2-white); background: transparent;
  border: 1px solid var(--v2-white); border-radius: var(--v2-radius);
  cursor: pointer;
}
.v2-textsize[aria-pressed="true"] { background: var(--v2-teal); color: var(--v2-navy); border-color: var(--v2-teal); }

/* ─── FAIL-SAFE BANNER ────────────────────────────────────────────────────────────────────── */
/* Hidden until the script decides the page is older than V2_CONFIG.staleAfterDays. It is hidden
   with an attribute AND a matching rule, because `[hidden]` alone loses to `display: flex`
   further down the cascade. */
.v2-stale { display: block; background: var(--v2-alert-tint); border-bottom: 2px solid var(--v2-alert-ink); color: var(--v2-alert-ink); }
.v2-stale[hidden] { display: none; }
.v2-stale__inner { padding: 0.75rem 1rem; font-weight: 700; }

/* ─── TRUST STRIP ─────────────────────────────────────────────────────────────────────────── */
.v2-trust {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  padding: 0.75rem 1rem;
  background: var(--v2-panel);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius);
  font-size: 0.95rem;
  color: var(--v2-muted);
}
.v2-trust__item { display: inline-flex; align-items: center; gap: 0.4rem; }

/* Thin line icons. `currentColor` and a fixed 1.5 stroke, so an icon inherits the contrast of
   the text it sits beside and can never fail independently of its own label. Every one is
   aria-hidden in the markup and every one sits beside a word: nothing here is identified by an
   icon alone. Sized in em so the A+ control scales them with the text. */
.v2-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ─── PANELS ──────────────────────────────────────────────────────────────────────────────── */
.v2-panel {
  background: var(--v2-panel);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-gap);
  margin-bottom: var(--v2-gap);
}
.v2-panel--navy { background: var(--v2-navy); color: var(--v2-white); border-color: var(--v2-navy); }
/* `:not(.v2-btn)` IS LOAD-BEARING AND WAS ADDED AFTER axe-core CAUGHT IT. Without it this rule
   out-specifies `.v2-btn` (0,2,0 against 0,1,0) and repaints a button's text teal while leaving
   its background white: 2.26:1, a serious contrast failure, on the one panel that turns navy
   only in the no-Australian-trials arm of the rare page. The button keeps its own navy-on-white
   16.90:1. A plain link inside the panel sits on navy, where teal is 7.47:1. */
.v2-panel--navy a:not(.v2-btn) { color: var(--v2-teal); }
.v2-panel--navy .v2-stat__label { color: #C7D2DE; }

/* "At a glance" statistics. Numbers are large; every one carries a word label. */
.v2-stats { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.v2-stat__value { font-size: 1.75rem; font-weight: 700; line-height: 1.1; display: block; }
.v2-stat__label { font-size: 0.95rem; display: block; }

/* ─── BREADCRUMB ──────────────────────────────────────────────────────────────────────────── */
.v2-breadcrumb { font-size: 0.95rem; margin: 1rem 0 0.5rem; }
.v2-breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; }
.v2-breadcrumb li::after { content: '/'; margin-left: 0.35rem; color: var(--v2-muted); }
.v2-breadcrumb li:last-child::after { content: ''; }
.v2-breadcrumb a { display: inline-block; padding: 0.35rem 0; }

/* ─── CHIPS ───────────────────────────────────────────────────────────────────────────────── */
/* COLOUR IS NEVER THE ONLY CARRIER: every chip states its meaning in words, and the symbol is
   redundant encoding on top of that (WCAG 1.4.1). The symbol is aria-hidden in the markup. */
.v2-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.9rem; font-weight: 700;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.v2-chip--open   { color: var(--v2-open-ink);   background: var(--v2-open-tint); }
.v2-chip--soon   { color: var(--v2-soon-ink);   background: var(--v2-soon-tint); }
.v2-chip--invite { color: var(--v2-invite-ink); background: var(--v2-invite-tint); }
.v2-chip--phase  { color: var(--v2-navy);       background: var(--v2-bg); }
.v2-chip--rare   { color: var(--v2-navy);       background: var(--v2-teal); border-color: var(--v2-teal-ink); }

/* ─── STATE TILES ─────────────────────────────────────────────────────────────────────────── */
.v2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.75rem; list-style: none; margin: 0; padding: 0; }
.v2-tile {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.15rem;
  width: 100%; min-height: var(--v2-tap);
  padding: 0.7rem 0.85rem;
  font: inherit; text-align: left;
  color: var(--v2-navy); background: var(--v2-panel);
  border: 1px solid var(--v2-control-border);
  border-radius: var(--v2-radius);
  cursor: pointer;
}
.v2-tile[aria-pressed="true"] { background: var(--v2-teal); border-color: var(--v2-teal-ink); }
.v2-tile__code { font-weight: 700; font-size: 1.1rem; }
.v2-tile__count { font-size: 0.9rem; }

/* ─── FILTERS ─────────────────────────────────────────────────────────────────────────────── */
.v2-filters { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.v2-filters label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.25rem; }
.v2-filters select {
  width: 100%; min-height: var(--v2-tap);
  padding: 0.5rem 0.7rem;
  font: inherit; color: var(--v2-navy); background: var(--v2-panel);
  border: 1px solid var(--v2-control-border);
  border-radius: var(--v2-radius);
}

/* ─── TRIAL CARDS ─────────────────────────────────────────────────────────────────────────── */
.v2-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--v2-gap); }
.v2-card {
  background: var(--v2-panel);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-gap);
}
.v2-card__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.65rem; }
.v2-card__label { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; }
.v2-card__rows { margin: 0 0 0.85rem; }
.v2-card__row { display: grid; grid-template-columns: 1fr; gap: 0.1rem; padding: 0.45rem 0; border-top: 1px solid var(--v2-border); }
.v2-card__row:first-child { border-top: 0; }
.v2-card__key { font-weight: 700; font-size: 0.9rem; color: var(--v2-muted); }
.v2-card__val { }
.v2-card__ids { font-size: 0.9rem; color: var(--v2-muted); }
.v2-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.v2-card__links .v2-btn { font-size: 0.95rem; padding: 0.5rem 0.9rem; }

/* Compare checkbox: the whole label is the target and it clears 44px. */
.v2-compare-toggle {
  display: inline-flex; align-items: center; gap: 0.6rem;
  min-height: var(--v2-tap); padding: 0.35rem 0.6rem;
  border: 1px solid var(--v2-control-border); border-radius: var(--v2-radius);
  font-weight: 700; font-size: 0.95rem; cursor: pointer;
}
.v2-compare-toggle input { width: 22px; height: 22px; accent-color: var(--v2-teal-ink); }

/* ─── TIMELINE BAR ────────────────────────────────────────────────────────────────────────── */
/* The bar is decoration on top of a list of dates that is readable on its own. A reader who
   cannot see the bar loses nothing, which is why the dates are text and not labels on the bar. */
.v2-timeline { margin: 0.5rem 0 0.25rem; }
.v2-timeline__track {
  position: relative; height: 10px; border-radius: 999px;
  background: var(--v2-bg); border: 1px solid var(--v2-control-border);
}
.v2-timeline__fill { position: absolute; top: 0; bottom: 0; left: 0; background: var(--v2-teal); border-radius: 999px; }
.v2-timeline__marker { position: absolute; top: -5px; width: 3px; height: 20px; background: var(--v2-navy); }
.v2-timeline__dates { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; color: var(--v2-muted); margin-top: 0.4rem; }
.v2-timeline__past { color: var(--v2-alert-ink); background: var(--v2-alert-tint); border: 1px solid var(--v2-alert-ink); border-radius: var(--v2-radius); padding: 0.4rem 0.6rem; font-weight: 700; font-size: 0.9rem; margin-top: 0.5rem; }

/* ─── FREQUENCY BARS (rare page signs) ────────────────────────────────────────────────────── */
.v2-freq { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.v2-freq__row { display: grid; grid-template-columns: 1fr; gap: 0.25rem; }
.v2-freq__head { display: flex; justify-content: space-between; gap: 0.75rem; font-size: 0.95rem; }
/* `display: block` IS LOAD-BEARING ON BOTH OF THESE. They are <span> elements, and height does
   not apply to an inline box: without it the track collapsed and every frequency bar rendered
   as an empty outline, on the one page where the bars are the point. Found by looking at the
   rendered page, not by reading the CSS, which is exactly the class of defect a screenshot
   catches and a review does not. */
.v2-freq__track { display: block; height: 12px; border-radius: 999px; background: var(--v2-bg); border: 1px solid var(--v2-control-border); overflow: hidden; }
.v2-freq__fill { display: block; height: 100%; background: var(--v2-teal); }

/* ─── SIDEBAR / LAYOUT ────────────────────────────────────────────────────────────────────── */
/* "minmax(0, 1fr)" RATHER THAN "1fr", AND IT IS LOAD-BEARING. A grid item defaults to
   "min-width: auto", so it refuses to shrink below its widest child: the 640px-minimum sites
   table then pushed the whole DOCUMENT sideways at phone width, straight past the
   "overflow-x: auto" container that was supposed to absorb it. Caught by the horizontal-scroll
   measurement in the preview accessibility audit, not by reading the stylesheet. */
.v2-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--v2-gap-lg); margin: var(--v2-gap) 0 var(--v2-gap-lg); }

/* A <details> used as a disclosure control. The summary IS the control, so it carries the tap
   target; unstyled it renders 29px tall and fails the 44px rule. */
details.v2-panel > summary { display: flex; align-items: center; min-height: var(--v2-tap); cursor: pointer; }
.v2-side { display: grid; gap: var(--v2-gap); align-content: start; }
.v2-side ul { margin: 0; padding-left: 1.1rem; }
.v2-side li { margin-bottom: 0.4rem; }
/* `display: block`, NOT `inline-block`. An inline-block anchor cannot break across lines, so a
   long support-organisation name pushed itself onto its own line and left the list bullet
   stranded above it. Block anchors wrap normally and the 0.5rem padding takes the row to 44px
   at the 18px base size. */
.v2-side a { display: block; padding: 0.5rem 0; }

/* ─── SOURCES BLOCK ───────────────────────────────────────────────────────────────────────── */
.v2-sources { font-size: 0.95rem; color: var(--v2-muted); }
.v2-sources ul { padding-left: 1.1rem; }
.v2-sources li { margin-bottom: 0.5rem; }

/* ─── SOURCE TEXT (exact, unedited) ───────────────────────────────────────────────────────── */
.v2-source-text {
  border-left: 4px solid var(--v2-teal);
  padding-left: 1rem;
  margin: 0 0 1rem;
}
.v2-source-note { font-size: 0.95rem; color: var(--v2-alert-ink); background: var(--v2-alert-tint); border: 1px solid var(--v2-alert-ink); border-radius: var(--v2-radius); padding: 0.5rem 0.75rem; font-weight: 700; }

/* ─── COMPARE VIEW ────────────────────────────────────────────────────────────────────────── */
.v2-compare { width: 100%; border-collapse: collapse; min-width: 640px; }
.v2-compare th, .v2-compare td { border: 1px solid var(--v2-border); padding: 0.7rem 0.85rem; text-align: left; vertical-align: top; }
.v2-compare thead th { background: var(--v2-navy); color: var(--v2-white); }
.v2-compare tbody th { background: var(--v2-bg); width: 12rem; }

/* ─── FOOTER ──────────────────────────────────────────────────────────────────────────────── */
.v2-footer { background: var(--v2-navy); color: var(--v2-white); margin-top: var(--v2-gap-lg); }
.v2-footer a { color: var(--v2-teal); }
.v2-footer__inner { padding: 1.5rem 1rem; font-size: 0.95rem; }

/* ─── WIDER SCREENS ───────────────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  h1 { font-size: 2.25rem; }
  .v2-stats { grid-template-columns: repeat(2, 1fr); }
  .v2-filters { grid-template-columns: repeat(3, 1fr); }
  .v2-card__row { grid-template-columns: 11rem 1fr; gap: 0.75rem; }
}

@media (min-width: 1000px) {
  .v2-stats { grid-template-columns: repeat(3, 1fr); }
  .v2-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .v2-layout--reverse { grid-template-columns: 20rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ─── PRINT ───────────────────────────────────────────────────────────────────────────────── */
/* "Print summary" is a first-class button on the condition page, so the printed page has to be
   a usable summary and not a screenshot of a website. Controls, filters and compare checkboxes
   carry no meaning on paper and are removed; every link's destination is printed after it so a
   printed sheet can be acted on without the screen. */
@media print {
  :root { --v2-text-scale: 1; }
  body { background: #FFFFFF; color: #000000; font-size: 11pt; }
  .v2-header, .v2-footer, .v2-controls, .v2-filters, .v2-tiles,
  .v2-compare-toggle, .v2-skip, .v2-card__links, .v2-stale, .v2-no-print { display: none !important; }
  .v2-panel, .v2-card, .v2-trust { border: 1px solid #666666; break-inside: avoid; page-break-inside: avoid; }
  .v2-panel--navy { background: #FFFFFF !important; color: #000000 !important; }
  .v2-panel--navy .v2-stat__label { color: #000000; }
  a { color: #000000; text-decoration: underline; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  .v2-layout { display: block; }
}