/* Montserrat: weights 300 (Light), 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap");

:root {
  /* Colors from Figma */
  --hbc-primary: #002060;
  --hbc-aging-accent: #e5a9d3; /* Used as accent in aging reports */
  --text-main: #002060; /* Primary text color */
  --text-secondary: #3478f7; /* Secondary text color */
  --text-tertiary: #e54d8d; /* Pink for slogan */
  --text-inverse: #f7f7f7; /* Light text on dark backgrounds (flips in dark mode) */
  --text-on-primary: #f7f7f7; /* Always light text for brand backgrounds */
  --background-light: #ffffff;
  --background-dark: #edeef1;

  /* Neutrals */
  --ink: var(--text-main);
  --paper: var(--background-light);
  --canvas: var(--background-dark);

  /* Typography - only Montserrat is used, in different weights and styles */
  --font-family-sans: "Montserrat", sans-serif;

  /* Type scale (adjust to match Figma later) */
  --font-size-1: 12px;
  --font-size-2: 14px;
  --font-size-3: 16px;
  --font-size-4: 20px;
  --line-height: 1.3;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Surfaces */
  --radius-1: 8px;
  --shadow-page: 0 12px 35px rgba(0, 0, 0, 0.18);

  /* Print Dimensions for A4 */
  --page-width: 210mm;
  --page-height: 297mm;
  --page-margin: 20mm;

  /* Screen preview scaling (JS updates this on resize) */
  --page-scale: 1;

  /* Cover page layout tokens */
  --page-gutter: 17.6mm; /* Left/right content inset on all pages */
  --logo-inset: 18mm; /* Logo left position (51px) */

  /* Accent bar gradient (shared by cover, section, back pages) */
  --accent-gradient: linear-gradient(
    90deg,
    var(--cover-accent, var(--hbc-aging-accent)) 0%,
    color-mix(in srgb, var(--cover-accent, var(--hbc-aging-accent)) 50%, white)
      100%
  );

  /* Section page layout tokens (semantic positioning) */
  --section-header-height: 60.7mm; /* Blue header bar height (172px) */
  --content-area-top: 83.6mm; /* Standard content start position (237px) */
  --footer-text-top: 283.1mm; /* Footer website/slogan vertical position */
  --footer-slogan-left: 142mm; /* Slogan horizontal position */

  /* Info box dimensions */
  --info-box-width: 174.7mm; /* Standard info box width (495px) */
  --info-box-height-lg: 195mm; /* Large info box (TOC, markers) */
  --info-box-padding: 10.6mm; /* Inner padding (30px) */
  --info-box-radius: 4.6mm; /* Border radius (13px) */

  /* Print typography scale (mm-based for WeasyPrint) */
  --font-print-xs: 3.5mm; /* 10px - footer text, labels */
  --font-print-sm: 4.2mm; /* 12px - body text, TOC links */
  --font-print-md: 4.9mm; /* 14px - subsection titles */
  --font-print-lg: 8.5mm; /* 24px - section titles */
  --font-print-xl: 15.9mm; /* 45px - cover title */
}

/* WeasyPrint uses @page; define it explicitly for consistent A4 output. */
@page {
  size: A4;
  margin: 0;
}

/* Baseline / reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-3);
  line-height: var(--line-height);
  color: var(--ink);
  background: var(--canvas);
}

.document {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6);
  place-content: start center;
}

.page {
  width: var(--page-width);
  min-height: var(--page-height);
  padding: var(--page-margin);
  background: var(--paper);
  page-break-after: always; /* Essential for WeasyPrint */
  position: relative;
}

/* ==========================================================================
   COVER PAGE
   ========================================================================== */

/**
 * Cover page uses absolute positioning for precise Figma alignment.
 * Coordinates converted from 595×842px (72 DPI) → 210×297mm.
 * Report-type variants controlled via [data-report-type] attribute.
 */

/* Report-type accent colors */
[data-report-type="aging"] {
  --cover-accent: var(--hbc-aging-accent);
}

/* Add more report types here:
[data-report-type="wellness"] { --cover-accent: var(--hbc-wellness-accent); }
[data-report-type="nutrition"] { --cover-accent: var(--hbc-nutrition-accent); }
*/

.page--cover {
  padding: 0; /* Full-bleed layout */
  overflow: hidden;
}

/* ==========================================================================
   SECTION PAGE
   ========================================================================== */

.page--section {
  padding: 0;
  overflow: hidden;
  background: var(--background-dark);
}

.section__top-bar {
  position: absolute;
  width: 100%;
  height: var(--section-header-height);
  left: 0;
  top: 0;
  background: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Shared Logo Tokens (used by cover, section, and back pages)
   -------------------------------------------------------------------------- */

.section__logo,
.cover__logo,
.back__logo {
  position: absolute;
  display: block;
}

.section__logo--hbc,
.cover__logo--hbc,
.back__logo--hbc {
  width: 53.6mm;
  height: auto;
  left: var(--logo-inset);
  top: 10.6mm;
}

.section__logo--report,
.cover__logo--report,
.back__logo--report {
  width: 9.5mm;
  height: auto;
  right: 9.5mm;
  top: 9.9mm;
}

.section__title {
  position: absolute;
  width: 150mm; /* 321px → mm */
  height: 20mm; /* 54px → mm */
  left: var(--logo-inset);
  top: 34.9mm; /* 99px → mm */
  margin: 0;
  color: var(--text-on-primary);
  font-weight: 300;
  font-size: var(--font-print-lg);
  line-height: 1.1;
}

/* --------------------------------------------------------------------------
   Per-page layout overrides
   -------------------------------------------------------------------------- */

/* Raise content area for marker/telomere pages without affecting Intro page */
.page--section[data-page-id="telomeres"],
.page--section[data-page-id="geneometry"],
.page--section[data-page-id="aspa"],
.page--section[data-page-id="line-1"],
.page--section[data-page-id="il-6"] {
  --content-area-top: 75mm;
}

.section__accent-bar {
  position: absolute;
  width: 100%;
  height: 2.5mm; /* 7px → mm */
  left: 0;
  top: var(--section-header-height);
  background: var(--accent-gradient);
}

/* --------------------------------------------------------------------------
   Subsection Headers
   -------------------------------------------------------------------------- */

.section__subsection {
  position: absolute;
  left: var(--page-gutter); /* 50px grid alignment */
  display: flex;
  align-items: center;
  gap: 2.5mm; /* 7px */
}

/* Modifiers for vertical positioning */
.section__subsection--personal {
  top: 74.8mm; /* ~212px (Box Top - 25px) */
}

.section__subsection--params {
  top: 158.5mm; /* 449px */
}

.section__subsection-icon {
  width: 5.3mm; /* 15px */
  height: 5.3mm;
  object-fit: contain;
}

.section__subsection-title {
  margin: 0;
  font-weight: 500;
  font-size: var(--font-print-md);
  line-height: 1.05;
  color: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Info Box
   -------------------------------------------------------------------------- */

.section__info-box {
  position: absolute;
  width: var(--info-box-width);
  left: var(--page-gutter);
  padding: var(--info-box-padding);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.5mm; /* 10px */
  background: var(--background-light);
  border-radius: var(--info-box-radius);
}

.section__info-box--personal {
  top: var(--content-area-top);
  height: var(--section-header-height); /* Same as header height */
}

.section__info-box--params {
  top: 167.3mm; /* 474px */
  height: 90mm; /* 213px */
}

/* TOC page */
.section__info-box--toc {
  top: var(--content-area-top);
  height: var(--info-box-height-lg);
}

/* Standard marker pages (empty placeholder box for layout consistency) */
.section__info-box--marker {
  top: var(--content-area-top);
  height: var(--info-box-height-lg);
}

.toc {
  width: 100%;
}

.toc__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3.2mm;
}

.toc__link {
  color: var(--text-main);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--font-print-sm);
  line-height: 1.25;
}

.toc__link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Chart Containers
   -------------------------------------------------------------------------- */

/* Chart info box - wraps charts with consistent styling */
.section__info-box--chart {
  top: 72mm;
  height: 105mm;
  padding: 0; /* Chart fills the entire box */
  overflow: hidden;
}

.section__chart {
  width: 100%;
  height: 100%;
}

.section__chart--radar {
  /* Positioned within info-box--chart, fills container */
  border-radius: var(--info-box-radius);
  overflow: hidden;
}

/* Lifestyle overview notes under radar */
.section__info-box--lifestyle-notes {
  top: 183mm;
  height: 86mm;
}

.report-text-block {
  width: 100%;
}

.report-text {
  margin: 0 0 3.2mm 0;
  color: var(--text-main);
  font-size: 3.6mm; /* ~10-11px */
  line-height: 1.35;
}

.report-text:last-child {
  margin-bottom: 0;
}

.report-text--emphasis {
  font-size: 70%;
  font-weight: 600;
}

.report-text--light {
  font-size: 70%;
  font-weight: 300;
}

/* --------------------------------------------------------------------------
   Info Table (key-value rows inside info boxes)
   -------------------------------------------------------------------------- */

.info-table {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.info-table__row {
  display: flex;
  align-items: center;
  padding: 2.8mm 0; /* ~8px vertical */
  border-bottom: 1px solid var(--text-inverse);
}

.info-table__row:last-child {
  border-bottom: none;
}

.info-table__label {
  flex: 0 0 45%; /* Fixed width for labels */
  margin: 0;
  font-weight: 500;
  font-size: var(--font-print-xs);
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}

.info-table__value {
  flex: 1;
  margin: 0;
  font-weight: 500;
  font-size: var(--font-print-sm);
  line-height: 1.2;
  color: var(--text-main);
}

/* --------------------------------------------------------------------------
   Param List (bullet list inside info boxes)
   -------------------------------------------------------------------------- */

.param-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.1mm; /* ~6px */
}

.param-list__item {
  position: relative;
  padding-left: 4.2mm; /* Space for bullet */
  font-weight: 500;
  font-size: var(--font-print-sm);
  line-height: 1.35;
  color: var(--text-main);
}

.param-list__item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
  font-weight: 700;
}

/* Nested sub-items (dashes) */
.param-list__sublist {
  margin: 1.4mm 0 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.4mm; /* ~4px */
}

.param-list__subitem {
  position: relative;
  padding-left: 4.2mm;
  font-weight: 400;
  font-size: var(--font-print-sm);
  line-height: 1.35;
  color: var(--text-main);
}

.param-list__subitem::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Section Footer Text (same placement as cover)
   -------------------------------------------------------------------------- */

.section__website,
.section__slogan {
  position: absolute;
  top: var(--footer-text-top);
  font-weight: 600;
  font-size: var(--font-print-xs);
  line-height: 1.2;
  text-decoration: none;
}

.section__website {
  left: var(--page-gutter);
  color: var(--hbc-primary);
}

.section__slogan {
  left: var(--footer-slogan-left);
  color: var(--text-tertiary);
}

/* Note: Logo rules consolidated in "Shared Logo Tokens" section above */

/* --------------------------------------------------------------------------
   Hero Image
   -------------------------------------------------------------------------- */

.cover__hero {
  position: absolute;
  width: 159.2mm;
  height: 119.7mm;
  left: 50%;
  top: calc(50% - 23.1mm);
  transform: translate(-50%, -50%);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cover__hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --------------------------------------------------------------------------
   Title
   -------------------------------------------------------------------------- */

.cover__title {
  position: absolute;
  width: 130mm;
  left: 50%;
  top: 193.5mm;
  transform: translateX(-50%);
  margin: 0;

  font-weight: 300;
  font-size: var(--font-print-xl);
  line-height: 1.15;
  text-align: center;
  color: var(--hbc-primary);
}
/* --------------------------------------------------------------------------
   Decorative Bars
   -------------------------------------------------------------------------- */

.cover__accent-bar {
  position: absolute;
  width: 100%;
  height: 2.5mm;
  left: 0;
  top: 244.7mm;
  background: var(--accent-gradient);
}

.cover__footer-bar {
  position: absolute;
  width: 100%;
  --cover-footer-height: 50.1mm;
  --cover-footer-row-top: 35.9mm;
  --cover-footer-row-font-size: 3.5mm;
  --cover-footer-row-line-height: 4.2mm; /* 10px/12px */
  --cover-footer-row-bottom: calc(
    var(--cover-footer-height) - var(--cover-footer-row-top) -
      var(--cover-footer-row-line-height)
  );

  height: var(--cover-footer-height);
  left: 0;
  top: 247.2mm;
  background: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Client Info
   -------------------------------------------------------------------------- */

.cover__client {
  position: absolute;
  left: var(--page-gutter);
  top: 8.1mm; /* Relative to footer-bar */
  display: flex;
  flex-direction: column;

  font-style: normal; /* Override <address> default italic */
  font-size: var(--font-print-md);
  line-height: 1.21;
  color: var(--text-on-primary);
}

/* --------------------------------------------------------------------------
   QR Code (links to interactive online report)
   -------------------------------------------------------------------------- */

.cover__qr {
  position: absolute;
  left: 70mm; /* Centered between client info and slogan */
  top: 5mm;
  width: 14mm;
  height: 14mm;
  border-radius: 1mm;
  overflow: hidden;
}

.cover__client-name,
.cover__client-dob {
  display: block;
}

.cover__client-name {
  font-weight: 600; /* Montserrat SemiBold */
}

.cover__client-dob {
  font-weight: 400; /* Montserrat Regular */
}

/* --------------------------------------------------------------------------
   Footer Text Row
   -------------------------------------------------------------------------- */

.cover__website,
.cover__slogan {
  position: absolute;
  /* Figma: top=802px => within footer top=700px => 35.9mm */
  top: var(--cover-footer-row-top);

  font-weight: 600;
  font-size: var(--cover-footer-row-font-size);
  line-height: 1.2;
  text-decoration: none;
}

.cover__website {
  left: var(--page-gutter);
  color: var(--text-on-primary);
}

.cover__slogan {
  left: var(--footer-slogan-left);
  color: var(--text-tertiary);
}

/* --------------------------------------------------------------------------
   Cell Key Icon
   -------------------------------------------------------------------------- */

.cover__cell-key {
  position: absolute;
  right: 9mm;
  bottom: var(--cover-footer-row-bottom);
  width: 10mm;
  height: 18mm;
  display: block;
}

/* ==========================================================================
   METHYLATION MARKER PAGE
   ========================================================================== */

/**
 * Marker pages display methylation-based biomarker results.
 * Reusable structure for ASPA, LINE-1, IL-6, and similar markers.
 *
 * Layout (top to bottom):
 * 1. Description text block (below header)
 * 2. Result row: Gauge box (left) + Interpretation (right)
 * 3. Recommendations box (full width, green border)
 */

/* --------------------------------------------------------------------------
   Marker Content Wrapper (main info box)
   -------------------------------------------------------------------------- */

.marker__content {
  position: absolute;
  width: var(--info-box-width);
  left: var(--page-gutter);
  top: var(--content-area-top);
  height: var(--info-box-height-lg); /* Same as other marker pages */
  padding: 0; /* Inner elements handle their own spacing */
  background: var(--background-light);
  border-radius: var(--info-box-radius);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Marker Description Block
   -------------------------------------------------------------------------- */

.marker__description {
  position: absolute;
  width: calc(100% - 14mm); /* Full width minus padding */
  left: 7mm;
  top: 7mm; /* Inside the content box */
}

.marker__text {
  margin: 0 0 2.5mm 0; /* Space between paragraphs */
  font-weight: 400; /* Regular weight for body text */
  font-size: 2.7mm; /* Balanced size for marker pages */
  line-height: 1.4;
  color: var(--hbc-primary);
}

.marker__text:last-of-type {
  margin-bottom: 0; /* No margin after last paragraph */
}

/* First paragraph is emphasized */
.marker__text:first-of-type {
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Marker Result Row (Gauge + Interpretation)
   -------------------------------------------------------------------------- */

.marker__result-row {
  position: absolute;
  width: calc(100% - 14mm); /* Full width minus padding */
  left: 7mm;
  top: 68mm; /* Below description within content box */
  display: flex;
  gap: 3.5mm; /* ~10px */
}

/* Gauge Box (left side) - standalone styling, not inheriting info-box positioning */
.marker__gauge-box {
  position: relative;
  width: 94.5mm; /* ~268px */
  height: 57.2mm; /* ~162px */
  padding: 7mm; /* ~20px */
  display: flex;
  flex-direction: column;
  gap: 2mm;
  background: var(--background-light);
  border-radius: var(--info-box-radius);
  /* Reset any inherited info-box styles */
  top: auto;
  left: auto;
}

.marker__gauge-title {
  margin: 0;
  font-weight: 500;
  font-size: var(--font-print-md); /* 14px */
  line-height: 1.05;
  color: var(--hbc-primary);
}

.marker__gauge-subtitle {
  margin: 0;
  font-weight: 400;
  font-size: 2.8mm; /* 8px */
  line-height: 1.25;
  color: rgba(0, 32, 96, 0.5);
}

.marker__gauge {
  width: 100%;
  height: 35mm; /* Explicit height for Plotly to render */
  min-height: 35mm;
  flex-shrink: 0; /* Prevent collapse in flex container */
}

/* Interpretation Box (right side) */
.marker__interpretation {
  position: relative;
  width: 76.5mm; /* ~217px */
  height: 57.2mm; /* ~162px */
  padding: 7mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent; /* No background, just text */
  border-radius: var(--info-box-radius);
}

.marker__interpretation-text {
  margin: 0;
  font-weight: 500;
  font-size: 3.9mm; /* ~11px */
  line-height: 1.2;
  color: var(--text-secondary); /* Blue text */
}

/* --------------------------------------------------------------------------
   Marker Recommendations Box
   -------------------------------------------------------------------------- */

.marker__recommendations {
  position: absolute;
  width: calc(100% - 14mm); /* Full width minus padding */
  left: 7mm;
  top: 140mm; /* Below gauge within content box */
  padding: 7mm 10.6mm;
  background: var(--background-light);
  border: 1px solid #75e3b5; /* Green border */
  border-radius: var(--info-box-radius);
}

.marker__reco-title {
  margin: 0 0 3.5mm 0;
  font-weight: 500;
  font-size: var(--font-print-md); /* 14px */
  line-height: 1.05;
  color: var(--hbc-primary);
}

.marker__reco-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.marker__reco-item {
  font-weight: 400; /* Regular weight for description text */
  font-size: var(--font-print-xs); /* 10px */
  line-height: 1.67; /* 17px line height */
  color: var(--hbc-primary); /* Brand color for all text */
}

.marker__reco-label {
  color: var(--hbc-primary); /* Brand color for labels */
  font-weight: 600; /* Bold labels stand out */
}

/* ==========================================================================
   TELOMERE PAGE (Variant Layout)
   ========================================================================== */

/**
 * Telomere page uses a full-width scatter chart instead of the split
 * gauge + interpretation row used by methylation markers.
 *
 * Layout (top to bottom within marker__content):
 * 1. Description text block (same as other markers)
 * 2. Full-width chart box (scatter plot)
 * 3. Interpretation text (full width, below chart)
 * 4. Recommendations box (same green border style)
 */

/* --------------------------------------------------------------------------
   Full-Width Chart Box (replaces gauge-box + interpretation side-by-side)
   -------------------------------------------------------------------------- */

.marker__chart-box--telomere {
  position: absolute;
  width: calc(100% - 14mm); /* Full width minus padding */
  left: 7mm;
  top: 18mm; /* Below description within content box */
  height: 85mm; /* Taller than gauge to fit scatter plot */
  padding: 5mm 5mm 2mm 5mm;
  display: flex;
  flex-direction: column;
  gap: 1.5mm;
  background: var(--background-light);
  border-radius: var(--info-box-radius);
}

.marker__chart-telomere {
  width: 100%;
  height: 100%;
  min-height: 60mm;
  flex: 1;
}

/* --------------------------------------------------------------------------
   Interpretation Below Chart (full width)
   -------------------------------------------------------------------------- */

.marker__interpretation--below {
  position: absolute;
  width: calc(100% - 14mm);
  left: 7mm;
  top: 103mm; /* Below chart box */
  height: auto;
  padding: 3.5mm 0;
}

/* --------------------------------------------------------------------------
   Telomere Recommendations (adjusted vertical position)
   -------------------------------------------------------------------------- */

.marker__recommendations--telomere {
  top: 133mm; /* Adjusted for larger chart and shorter body text */
}

/* ==========================================================================
   GENEOMETRY PAGE (Variant Layout)
   ========================================================================== */

/**
 * GENEOMETRY page uses a full-width semicircular odometer gauge showing
 * miRNA-based aging acceleration/deceleration (-30% to +30%).
 *
 * Layout (top to bottom within marker__content):
 * 1. Description text block (2 paragraphs about miRNAs)
 * 2. Full-width chart box (semicircular odometer)
 * 3. Interpretation text (full width, below chart)
 * 4. Recommendations box (same green border style)
 */

/* --------------------------------------------------------------------------
   Full-Width Odometer Chart Box
   -------------------------------------------------------------------------- */

.marker__chart-box--geneometry {
  position: absolute;
  width: calc(100% - 14mm);
  left: 7mm;
  top: 24mm; /* Below compact description */
  height: 75mm; /* Taller semicircular gauge to prevent clipping */
  padding: 3mm 5mm 2mm 5mm;
  display: flex;
  flex-direction: column;
  gap: 1mm;
  background: var(--background-light);
  border-radius: var(--info-box-radius);
}

.marker__chart-geneometry {
  width: 65%;
  height: 65%;
  min-height: 30mm;
  flex: 1;
  align-self: center;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Interpretation Below Odometer (full width)
   -------------------------------------------------------------------------- */

.marker__interpretation--geneometry {
  position: absolute;
  width: calc(100% - 14mm);
  left: 7mm;
  top: 103mm; /* Below chart box */
  height: auto;
  padding: 3.5mm 0;
}

/* --------------------------------------------------------------------------
   GENEOMETRY Recommendations (adjusted vertical position)
   -------------------------------------------------------------------------- */

.marker__recommendations--geneometry {
  top: 133mm; /* Below interpretation text */
}

/* ==========================================================================
   BACK PAGE (Closing)
   ========================================================================== */

/**
 * Back page layout with closing message and promotional footer.
 * Coordinates converted from Figma 595×842px (72 DPI) → 210×297mm.
 */

.page--back {
  padding: 0;
  overflow: hidden;
  background: var(--paper);
}

/* Back page logos use shared .back__logo--hbc / .back__logo--report rules
   defined in "Shared Logo Tokens" section above */

/* --------------------------------------------------------------------------
   Closing Title
   -------------------------------------------------------------------------- */

.back__title {
  position: absolute;
  width: 110mm;
  left: var(--page-gutter);
  top: 160mm; /* Figma: 453px → ~160mm */
  margin: 0;

  font-weight: 300;
  font-size: 12.4mm; /* Figma: 35px → ~12.4mm */
  line-height: 1.1;
  color: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Literature Reference
   -------------------------------------------------------------------------- */

.back__literature {
  position: absolute;
  right: var(--page-gutter);
  top: 178.5mm; /* Figma: 506px → ~178.5mm */
  text-align: right;
}

.back__literature-label,
.back__literature-link {
  display: block;
  font-weight: 600;
  font-size: 2.5mm; /* Figma: 7px → ~2.5mm */
  line-height: 1.3;
  color: var(--hbc-primary);
}

.back__literature-link {
  text-decoration: none;
}

.back__literature-link:hover {
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Accent Bar and Footer
   -------------------------------------------------------------------------- */

.back__accent-bar {
  position: absolute;
  width: 100%;
  height: 2.5mm; /* 7px */
  left: 0;
  top: 200.5mm; /* Figma: 568px → ~200.5mm */
  background: var(--cover-accent, var(--hbc-aging-accent));
}

.back__footer-bar {
  position: absolute;
  width: 100%;
  height: 94.2mm; /* Figma: 267px → ~94.2mm */
  left: 0;
  top: 203mm; /* Figma: 575px → ~203mm */
  background: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Ad Placeholder Box
   -------------------------------------------------------------------------- */

.back__ad-box {
  position: absolute;
  width: var(--info-box-width); /* ~174.7mm, same as info boxes */
  height: 40mm; /* Figma: 113px → ~40mm */
  left: var(--page-gutter);
  top: 14mm; /* Figma: 615-575=40px → ~14mm from footer top */
  background: var(--background-light);
  border-radius: var(--info-box-radius);
  display: flex;
  align-items: center;
  justify-content: center;
}

.back__ad-label {
  font-weight: 600;
  font-size: var(--font-print-xs);
  line-height: 1.2;
  color: var(--hbc-primary);
}

/* --------------------------------------------------------------------------
   Promotional Text
   -------------------------------------------------------------------------- */

.back__promo-text {
  position: absolute;
  left: var(--page-gutter);
  top: 67mm; /* Figma: 765-575=190px → ~67mm from footer top */
  margin: 0;

  font-weight: 400;
  font-size: var(--font-print-xs);
  line-height: 1.2;
  color: var(--text-on-primary);
}

/* --------------------------------------------------------------------------
   Footer Row (reuses cover footer positioning logic)
   -------------------------------------------------------------------------- */

.back__website,
.back__slogan {
  position: absolute;
  top: 80mm; /* Figma: 802-575=227px → ~80mm from footer top */

  font-weight: 600;
  font-size: var(--font-print-xs);
  line-height: 1.2;
  text-decoration: none;
}

.back__website {
  left: var(--page-gutter);
  color: var(--text-on-primary);
}

.back__slogan {
  left: var(--footer-slogan-left);
  color: var(--text-tertiary);
}

.back__cell-key {
  position: absolute;
  right: 9mm;
  bottom: 5mm;
  width: 10mm;
  height: 18mm;
  display: block;
}

@media screen {
  /*
    On narrow viewports, we keep the A4 geometry but scale the whole page down
    so it behaves like a PDF viewer preview. This preserves pixel-perfect print
    styling while improving usability on mobile.
  */
  @media (max-width: 900px) {
    .page {
      transform: scale(var(--page-scale));
      transform-origin: top center;
    }
  }

  .page {
    box-shadow: var(--shadow-page);
    border-radius: var(--radius-1);
    overflow: hidden;
  }

  /* Subtle depth on info boxes (not supported in WeasyPrint) */
  .section__info-box {
    box-shadow: 0 2mm 8mm rgba(0, 32, 96, 0.08);
  }

  /* Gauge box shadow (not using section__info-box class) */
  .marker__gauge-box {
    box-shadow: 0 2mm 8mm rgba(0, 32, 96, 0.08);
  }

  /* Telomere chart box shadow */
  .marker__chart-box--telomere {
    box-shadow: 0 2mm 8mm rgba(0, 32, 96, 0.08);
  }

  /* GENEOMETRY chart box shadow */
  .marker__chart-box--geneometry {
    box-shadow: 0 2mm 8mm rgba(0, 32, 96, 0.08);
  }

  /* Smooth hover transitions for interactive elements */
  .toc__link,
  .cover__website,
  .section__website,
  .back__website,
  .back__literature-link {
    transition:
      color 0.15s ease,
      opacity 0.15s ease;
  }

  .toc__link:hover {
    color: var(--text-secondary);
  }

  .cover__website:hover,
  .section__website:hover,
  .back__website:hover {
    opacity: 0.75;
  }

  .back__literature-link:hover {
    color: var(--text-secondary);
  }
}

/* ==========================================================================
   DARK MODE (Screen Only)
   Respects user's system preference. Brand colors preserved for recognition.
   ========================================================================== */

@media screen and (prefers-color-scheme: dark) {
  /* Normalize font rendering in dark mode.
     Dark backgrounds trigger different anti-aliasing profiles that make
     TrueType fonts (like Montserrat) appear thicker, causing layout overflow.
     These properties enforce consistent, lighter font smoothing. */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: geometricPrecision;
  }

  :root {
    /* Surface colors for dark theme */
    --canvas: #0f1419;
    --paper: #1a1f26;
    --background-dark: #1a1f26;
    --background-light: #242b33;

    /* Text colors for dark theme */
    --text-main: #e8ecf0; /* Light text on dark backgrounds */
    --text-inverse: #1a1f26; /* Dark text on light elements (header) */
    --ink: #e8ecf0; /* Body text */

    /* Adjust secondary text for better contrast on dark */
    --text-secondary: #6ba3ff; /* Lighter blue for labels */

    /* Deeper page shadow for dark background */
    --shadow-page: 0 12px 35px rgba(0, 0, 0, 0.5);

    /* Brand colors remain unchanged for consistency:
       --hbc-primary, --hbc-aging-accent, --text-tertiary (pink slogan) */
  }

  /* Footer website link - light on dark page background */
  .section__website {
    color: var(--text-main);
  }

  /* Subsection titles - use lighter blue for contrast */
  .section__subsection-title {
    color: var(--text-secondary);
  }

  /* Subtle border for info boxes to maintain definition */
  .section__info-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Info table row borders - more visible in dark mode */
  .info-table__row {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }

  /* --------------------------------------------------------------------------
     Cover Page - Dark Mode Overrides
     -------------------------------------------------------------------------- */

  /* Cover title uses brand color but needs contrast on dark background */
  .cover__title {
    color: var(--text-main);
  }

  /* HBC logo on cover & back page - invert for visibility on dark */
  .cover__logo--hbc,
  .back__logo--hbc {
    filter: brightness(0) invert(1);
  }

  /* --------------------------------------------------------------------------
     Back Page - Dark Mode Overrides
     -------------------------------------------------------------------------- */

  /* Back page title uses brand color but needs contrast on dark background */
  .back__title {
    color: var(--text-main);
  }

  /* Literature reference - use lighter color for contrast */
  .back__literature-label,
  .back__literature-link {
    color: var(--text-secondary);
  }

  /* Ad box - subtle border and light text in dark mode */
  .back__ad-box {
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .back__ad-label {
    color: var(--text-secondary);
  }

  /* --------------------------------------------------------------------------
     Marker Page - Dark Mode Overrides
     -------------------------------------------------------------------------- */

  /* Description text - use light color for contrast.
     Font size micro-adjusted (2.7mm → 2.69mm, ~0.4%) to compensate for
     subpixel anti-aliasing differences in dark mode rendering. */
  .marker__text {
    color: var(--text-main);
    font-size: 2.69mm;
  }

  /* Gauge box title - use light color */
  .marker__gauge-title {
    color: var(--text-main);
  }

  /* Gauge subtitle - adjust opacity for dark */
  .marker__gauge-subtitle {
    color: rgba(232, 236, 240, 0.5);
  }

  /* Recommendations box - adjust border and text */
  .marker__recommendations {
    border-color: #75e3b5; /* Keep green border */
  }

  .marker__reco-title {
    color: var(--text-main);
  }

  .marker__reco-item {
    color: var(--text-secondary); /* Keep blue for descriptions */
  }

  .marker__reco-label {
    color: var(--text-main); /* Light color for labels */
  }
}

@media print {
  body {
    background: var(--paper);
  }

  .document {
    padding: 0;
    gap: 0;
  }

  .page {
    border-radius: 0;
    box-shadow: none;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}