/* The report zone's header (pipeline/templates/partials/nav.html), its phone price bar and the sample
   report's closing call (partials/sample-cta.html), on the report tokens. Every report-zone page links it,
   so the zone has one header and one way to the price on a phone. Values: data/design-tokens.yml. */
/* design-tokens:start zone=report: generated from data/design-tokens.yml by verify-design-tokens.js --write; edit the data, not this block */
:root {
  --colour-night: #0F1A16;
  --colour-night-2: #16241F;
  --colour-bone: #EDE7DC;
  --colour-mist: #A9B3AC;
  --colour-forest: #2A4A3E;
  --colour-forest-lit: #6F8C80;
  --colour-ink: #1C1C1C;
  --colour-white: #FFFFFF;
  --font-text: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-wordmark: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --fs-caption: 0.8125rem;
  --fs-small: 0.9375rem;
  --fs-text: 1.0625rem;
  --fs-wordmark: 1.375rem;
  --weight-text: 400;
  --weight-label: 500;
  --weight-strong: 600;
  --radius-chip: 999px;
  --space-4: 0.25rem;
  --space-8: 0.5rem;
  --space-12: 0.75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-48: 3rem;
  --space-64: 4rem;
  --space-96: 6rem;
  --space-128: 8rem;
  --space-160: 10rem;
  --space-gutter-phone: 1.25rem;
  --space-gutter-desktop: 3rem;
  --leading-heading: 1.15;
  --leading-text: 1.62;
  --leading-data: 1.4;
  --measure-text: 64ch;
  --measure-lead: 38ch;
  --colour-paper: #F7F5F0;
  --colour-ink-2: #5A554E;
  --colour-rule: #DCD6CB;
  --colour-amber: #D4A256;
  --colour-amber-ink: #7D5B22;
  --colour-stone-mark: #857868;
  --colour-verdict-severe: #8B2E2E;
  --colour-verdict-severe-bg: #F7EBEB;
  --colour-verdict-caution: #7A5A12;
  --colour-verdict-caution-bg: #F8F0DC;
  --colour-verdict-clear: #1F6B3F;
  --colour-verdict-clear-bg: #E3F3E8;
  --colour-verdict-unknown: #4A5560;
  --colour-verdict-unknown-bg: #ECEFF2;
  --colour-verdict-severe-lit: #C2524A;
  --colour-verdict-clear-lit: #3F9A63;
  --colour-tier-foundation: #2A4A3E;
  --colour-tier-foundation-tint: #EDF2EF;
  --colour-tier-targeted: #6B3A52;
  --colour-tier-targeted-tint: #F7EEF3;
  --colour-tier-optimise: #6E6256;
  --colour-tier-optimise-tint: #F4F0EB;
  --colour-notice-gp-review: #6B3A52;
  --colour-notice-gp-review-bg: #F7EEF3;
  --colour-notice-blood-work: #7D5B22;
  --colour-notice-blood-work-bg: #F8F0DC;
  --colour-notice-stop: #8B2E2E;
  --colour-notice-stop-bg: #F7EBEB;
  --font-display: 'Cormorant Garamond', 'Cormorant Garamond Fallback', Georgia, serif;
  --fs-lead: 1.25rem;
  --fs-h4: 1.375rem;
  --fs-h3: 1.75rem;
  --fs-h2: 2.25rem;
  --fs-h1: 3rem;
  --fs-display: 4.5rem;
  --fs-display-xl: 6rem;
  --fs-h1-fluid: clamp(2.5rem, 6vw + 1rem, 6rem);
  --fs-h2-fluid: clamp(1.875rem, 3vw + 1.125rem, 3.25rem);
  --weight-display: 500;
  --radius-image: 0;
  --radius-object: 18px;
  --radius-control: 6px;
  --space-section-phone: 4rem;
  --space-section-desktop: 8rem;
  --space-width-reading: 42.5rem;
  --space-width-page: 77.5rem;
  --leading-display: 1.04;
  --shadow-object: 0 30px 80px -20px rgba(0, 0, 0, 0.55);
}
/* design-tokens:end */

/* The header: the wordmark, the zone's pages, the way to the checker at the edge, and the one action. */
.site-header { position: relative; z-index: 50; background: var(--colour-night); color: var(--colour-bone); font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--weight-text); line-height: var(--leading-data); }
.site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header-inner { max-width: var(--space-width-page); min-height: 4rem; margin: 0 auto; padding: var(--space-8) var(--space-gutter-phone); display: flex; align-items: center; gap: var(--space-16); }
/* The wordmark is the logo in tracked capitals (docs/brand-guide.md §5.1), the one place capitals are set. */
.wordmark { text-transform: uppercase; }
.site-header .wordmark { font-family: var(--font-wordmark); font-weight: var(--weight-display); font-size: var(--fs-wordmark); letter-spacing: 0.18em; line-height: 1; color: var(--colour-bone); text-decoration: none; margin-right: auto; }
.site-header a { color: var(--colour-mist); text-decoration: none; }
.site-header a:hover, .site-header a[aria-current="page"] { color: var(--colour-bone); }
.site-header a[aria-current="page"] { text-decoration: underline; text-underline-offset: 0.35em; }
.site-header a:focus-visible, .site-header summary:focus-visible { outline: 2px solid var(--colour-bone); outline-offset: 2px; }
.site-header-links { display: none; align-items: center; gap: var(--space-24); }
.site-header-bridge { padding-left: var(--space-24); border-left: 1px solid var(--colour-night-2); }
.site-header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 var(--space-16); border-radius: var(--radius-control); background: var(--colour-forest); color: var(--colour-white); font-weight: var(--weight-label); white-space: nowrap; }
.site-header .site-header-cta { color: var(--colour-white); }
.site-header .site-header-cta:hover { color: var(--colour-white); text-decoration: underline; text-underline-offset: 0.2em; }
/* A page a customer reaches after paying (<body class="after-order">, report-pending.html) drops the
   action, so nobody waiting on a report is asked to buy one. */
body.after-order .site-header-cta { display: none; }

/* Under the desktop width the zone's pages sit in a drawer; it needs no script. */
.site-menu summary { list-style: none; cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; color: var(--colour-bone); }
.site-menu summary::-webkit-details-marker { display: none; }
.site-menu-drawer { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--space-8) var(--space-gutter-phone) var(--space-24); background: var(--colour-night-2); color: var(--colour-bone); }
.site-menu[open] .site-menu-drawer { display: grid; }
.site-menu-drawer a { display: block; padding: var(--space-12) 0; border-bottom: 1px solid var(--colour-night); }

/* A 320px phone: the wordmark, the menu and the action fit one row only with a tighter gap. */
@media (max-width: 359px) {
  .site-header-inner { gap: var(--space-8); padding-left: var(--space-16); padding-right: var(--space-16); }
  .site-header-cta { padding: 0 var(--space-12); }
}

@media (min-width: 1000px) {
  .site-header-inner { padding: var(--space-12) var(--space-gutter-desktop); gap: var(--space-32); }
  .site-header-links { display: flex; }
  .site-menu { display: none; }
}

/* The phone price bar: a page opts in with <body class="has-price-bar">, and it shows under 769px. */
.price-bar { display: none; }
.price-bar-cta { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--space-12); border-radius: var(--radius-control); background: var(--colour-forest); color: var(--colour-white); font-family: var(--font-text); font-size: var(--fs-small); font-weight: var(--weight-label); text-decoration: none; }
@media (max-width: 768px) {
  body.has-price-bar .price-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; padding: var(--space-8) var(--space-12); background: var(--colour-white); border-top: 1px solid var(--colour-rule); }
  body.has-price-bar { padding-bottom: 4rem; }
}

/* The sample report's closing call, shown when the sample is the top-level page (sample-cta.html). */
.sample-cta { display: none; padding: var(--space-64) var(--space-24); background: var(--colour-white); color: var(--colour-ink); border-top: 1px solid var(--colour-rule); text-align: center; font-family: var(--font-text); }
body.standalone .sample-cta { display: block; }
.sample-cta-label { margin: 0 0 var(--space-12); font-size: var(--fs-small); font-weight: var(--weight-label); color: var(--colour-ink-2); }
.sample-cta-title { margin: 0 0 var(--space-12); font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h3); line-height: var(--leading-heading); color: var(--colour-ink); }
.sample-cta-text { max-width: 35rem; margin: 0 auto var(--space-24); font-size: var(--fs-small); line-height: var(--leading-text); color: var(--colour-ink-2); }
.sample-cta-button { display: inline-flex; align-items: center; min-height: 3rem; padding: 0 var(--space-32); border-radius: var(--radius-control); background: var(--colour-forest); color: var(--colour-white); font-size: var(--fs-text); font-weight: var(--weight-label); text-decoration: none; }
.sample-cta-price { display: block; margin-top: var(--space-16); font-size: var(--fs-caption); color: var(--colour-ink-2); }

@media print { .site-header, .price-bar, .sample-cta { display: none !important; } }

/* The home page and /report (<body class="rp">): built from the served sample (build-sample-showcase.js
   stamps the day, the shelf and the filter's last step), photographs beside text, one price block. */
body.rp { margin: 0; background: var(--colour-paper); color: var(--colour-ink); font-family: var(--font-text); font-size: var(--fs-text); font-weight: var(--weight-text); line-height: var(--leading-text); }
.rp *, .rp *::before, .rp *::after { box-sizing: border-box; }
.rp main a { color: var(--colour-forest); text-underline-offset: 0.2em; }
.rp-wrap { max-width: var(--space-width-page); margin: 0 auto; padding: 0 var(--space-gutter-phone); }
.rp-band { padding: var(--space-section-phone) 0; }
.rp-band-night { background: var(--colour-night); color: var(--colour-bone); }
.rp main .rp-band-night a { color: var(--colour-bone); }
.rp-band-white { background: var(--colour-white); color: var(--colour-ink); }
.rp h1, .rp h2, .rp h3 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); line-height: var(--leading-heading); font-variant-numeric: lining-nums; }
.rp h1 { font-size: var(--fs-h1-fluid); line-height: var(--leading-display); margin-bottom: var(--space-24); }
.rp h2 { font-size: var(--fs-h2-fluid); margin-bottom: var(--space-16); }
.rp h3 { font-size: var(--fs-h4); margin-bottom: var(--space-12); }
.rp main p { margin: 0 0 var(--space-16); }
.rp-lead { font-size: var(--fs-lead); max-width: var(--measure-lead); color: var(--colour-ink-2); }
.rp-band-night .rp-lead, .rp-band-night .rp-muted { color: var(--colour-mist); }
.rp-body { max-width: var(--measure-text); }
.rp-muted { color: var(--colour-ink-2); font-size: var(--fs-small); }
.rp-src { font-size: var(--fs-caption); color: var(--colour-mist); }

/* The way in: one action, the full price beside it. */
.rp-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-16); margin: var(--space-24) 0 var(--space-12); }
.rp main a.rp-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 var(--space-32); border-radius: var(--radius-control); background: var(--colour-forest); color: var(--colour-white); font-weight: var(--weight-label); text-decoration: none; }
.rp main a.rp-btn:hover { text-decoration: underline; }
.rp-price-line { font-size: var(--fs-small); color: var(--colour-ink-2); }
.rp-price-line strong { color: var(--colour-ink); font-weight: var(--weight-strong); }

/* The hero: the promise beside the report itself, held as an object, with its photograph. */
.rp-hero { padding: var(--space-48) 0 var(--space-section-phone); }
.rp-hero-grid { display: grid; gap: var(--space-48); }
.rp-stage { display: grid; gap: var(--space-16); }
.rp-photo { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: var(--radius-image); object-fit: cover; }
.rp-object { background: var(--colour-white); color: var(--colour-ink); border-radius: var(--radius-object); box-shadow: var(--shadow-object); padding: var(--space-24); }
.rp-object-head { display: flex; justify-content: space-between; gap: var(--space-12); align-items: baseline; border-bottom: 1px solid var(--colour-rule); padding-bottom: var(--space-12); margin-bottom: var(--space-12); }
.rp-object-name { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h4); font-variant-numeric: lining-nums; }
.rp-object-date, .rp main .rp-object-meta { font-size: var(--fs-caption); color: var(--colour-ink-2); margin: 0; }
.rp-slot { margin-top: var(--space-12); }
.rp main .rp-slot-name { margin: 0 0 var(--space-4); font-size: var(--fs-caption); font-weight: var(--weight-strong); color: var(--colour-forest); }
.rp-slot ul, .rp-added ul { list-style: none; margin: 0; padding: 0; }
.rp-slot li { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--colour-rule); font-size: var(--fs-small); line-height: var(--leading-data); }
.rp-row-name { font-weight: var(--weight-label); }
.rp-row-dose { color: var(--colour-ink-2); text-align: right; }
.rp-slot .rp-tier { grid-column: 1 / -1; }
.rp-tier { font-size: var(--fs-caption); color: var(--colour-ink-2); }
.rp-tier-foundation { color: var(--colour-tier-foundation); }
.rp-tier-targeted { color: var(--colour-tier-targeted); }
.rp-tier-optimise { color: var(--colour-tier-optimise); }
.rp main .rp-caption { font-size: var(--fs-small); color: var(--colour-ink-2); margin: 0; }

/* The filter: how many were graded, how many cleared the bar, how many were chosen for one person. */
.rp-steps { list-style: none; margin: var(--space-32) 0 0; padding: 0; display: grid; gap: var(--space-16); }
.rp-steps li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-16); align-items: baseline; border-top: 1px solid var(--colour-night-2); padding-top: var(--space-16); }
.rp-n { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-h1); line-height: 1; color: var(--colour-amber); font-variant-numeric: lining-nums; }

/* Text beside a photograph, never under it. */
.rp-split { display: grid; gap: var(--space-32); align-items: center; }
.rp-weigh { display: grid; gap: var(--space-24); margin-top: var(--space-32); }
.rp .rp-weigh h3 { font-family: var(--font-text); font-size: var(--fs-text); font-weight: var(--weight-strong); margin-bottom: var(--space-4); }
.rp main .rp-weigh p { font-size: var(--fs-small); color: var(--colour-ink-2); margin: 0; }

/* The shelf before and after. */
.rp-shelf { display: grid; gap: var(--space-32); margin-top: var(--space-32); }
.rp-shelf-photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); align-content: start; }
.rp-shelf-photos figure { margin: 0; }
.rp-shelf-photos figcaption { font-size: var(--fs-caption); color: var(--colour-ink-2); margin-top: var(--space-8); }
.rp-verdict { border-top: 1px solid var(--colour-rule); padding-top: var(--space-12); margin-bottom: var(--space-12); }
.rp main .rp-verdict p { font-size: var(--fs-small); color: var(--colour-ink-2); margin: 0; }
.rp main .rp-verdict .rp-verdict-head { display: flex; justify-content: space-between; gap: var(--space-12); color: var(--colour-ink); margin-bottom: var(--space-4); }
.rp-tag { font-size: var(--fs-caption); font-weight: var(--weight-strong); }
.rp-tag-keep { color: var(--colour-tier-foundation); }
.rp-tag-adjust { color: var(--colour-amber-ink); }
.rp-tag-drop { color: var(--colour-tier-targeted); }
.rp-added li { border-top: 1px solid var(--colour-rule); padding: var(--space-12) 0; display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-12); }
.rp main .rp-added li p { grid-column: 1 / -1; font-size: var(--fs-small); color: var(--colour-ink-2); margin: var(--space-4) 0 0; }
.rp main .rp-more, .rp main .rp-out { font-size: var(--fs-small); color: var(--colour-ink-2); }
.rp-out b { color: var(--colour-ink); font-weight: var(--weight-label); }

/* Tap a name, open its page: the live sample at its day and at one recommendation, side by side. */
.rp-live { display: grid; gap: var(--space-24); margin-top: var(--space-32); }
.rp-live figure { margin: 0; }
.rp-frame { display: block; width: 100%; height: 40rem; border: 1px solid var(--colour-rule); border-radius: var(--radius-object); background: var(--colour-white); }
.rp-live figcaption { font-size: var(--fs-small); color: var(--colour-ink-2); margin-top: var(--space-8); }

/* The safety net and what we do not do. */
.rp-list { list-style: none; margin: 0; padding: 0; }
.rp-list li { border-top: 1px solid var(--colour-rule); padding: var(--space-16) 0; }
.rp-list strong { display: block; font-weight: var(--weight-strong); margin-bottom: var(--space-4); }

/* The one price block. */
.rp-price { display: grid; gap: var(--space-32); }
.rp main .rp-amount { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-display); line-height: 1; color: var(--colour-bone); font-variant-numeric: lining-nums; margin: 0 0 var(--space-12); }
.rp main .rp-price-terms { font-size: var(--fs-small); color: var(--colour-mist); }
.rp-includes { list-style: none; margin: 0; padding: 0; }
.rp-includes li { border-top: 1px solid var(--colour-night-2); padding: var(--space-12) 0; font-size: var(--fs-small); }

/* The report's sections, in the report's own order. */
.rp-sections { list-style: decimal; margin: var(--space-24) 0 0; padding-left: var(--space-24); display: grid; gap: var(--space-8); }
.rp-sections li { padding-left: var(--space-4); }
.rp-sections b { font-weight: var(--weight-strong); }

@media (min-width: 900px) {
  .rp-wrap { padding: 0 var(--space-gutter-desktop); }
  .rp-band { padding: var(--space-section-desktop) 0; }
  .rp-hero { padding: var(--space-96) 0 var(--space-section-desktop); }
  .rp-hero-grid { grid-template-columns: 1fr 1fr; align-items: start; }
  .rp-split { grid-template-columns: 1fr 1fr; }
  .rp-split-flip > :first-child { order: 2; }
  .rp-weigh { grid-template-columns: repeat(3, 1fr); }
  .rp-shelf { grid-template-columns: 1fr 1fr 1fr; align-items: start; }
  .rp-live { grid-template-columns: 1fr 1fr; }
  .rp-price { grid-template-columns: 1fr 1fr; align-items: start; }
  .rp-filter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-64); }
}
@media print { .rp-live { display: none; } }