/* Report-specific styles, building on Superscript design system */

:root {
  --report-max: 1280px;
  --content-max: 760px;
  --sidebar-w: 240px;
  --good: #01CE91;
  --bad:  #FF426F;
  --warn: #FF8B4A;
}

html { scroll-behavior: smooth; }
body { background: var(--ss-paper); }

/* Anchor offsets for sticky-aware scroll */
section[id] { scroll-margin-top: 0; }

/* ---------- Layout ---------- */
.report-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}
@media (max-width: 960px) {
  .report-shell { grid-template-columns: 1fr; }
}

/* ---------- Sidebar nav ---------- */
.sidenav {
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--ss-grey-5);
  padding: 24px 20px 24px 24px;
  background: var(--ss-paper);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
}
.sidenav__brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.03em;
  color: var(--ss-black);
  text-decoration: none;
  margin-bottom: 8px;
}
.sidenav__brand img { height: 16px; }
.sidenav__title {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 18px;
  line-height: 1.07;
  letter-spacing: -0.02em;
  color: var(--ss-black);
  margin: 0 0 8px;
}
.sidenav__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.sidenav__link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: var(--ss-grey-2);
  text-decoration: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease;
}
.sidenav__link span:first-child { color: var(--ss-grey-3); }
.sidenav__link:hover { color: var(--ss-black); }
.sidenav__link.is-active { color: var(--ss-blue); }
.sidenav__link.is-active span:first-child { color: var(--ss-blue); }
.sidenav__foot {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ss-grey-4);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: -0.02em;
  color: var(--ss-grey-3);
  line-height: 1.5;
}
@media (max-width: 960px) {
  .sidenav { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--ss-black); }
}

/* ---------- Main column ---------- */
.report-main { min-width: 0; }
.section {
  padding: 24px 64px 48px;
  border-bottom: 1px solid var(--ss-black);
  position: relative;
  max-width: var(--dbg-section-w, none);
}
.section:last-child { border-bottom: none; }
@media (max-width: 720px) {
  .section { padding: 48px 24px; }
}

.section__chrome {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: var(--ss-blue);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ss-black);
  padding-bottom: 12px;
}
.section__chrome .right { color: var(--ss-grey-3); }

.section__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--dbg-section-title, clamp(36px, 4.5vw, 56px));
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 16px;
  max-width: 1000px;
}
.section__title em { font-style: italic; color: var(--ss-blue); }
.section__lede {
  font-family: var(--font-display);
  font-weight: 350;
  font-size: var(--dbg-body-size, 15px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  max-width: 720px;
  color: var(--ss-grey-1);
  margin: 0 0 24px;
}
.section__body {
  max-width: 720px;
  font-size: var(--dbg-body-size, 17px);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ss-grey-1);
}
.section__body p { margin: 0 0 16px; }
.section__body p:last-child { margin-bottom: 0; }
.section__body strong { color: var(--ss-black); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 40px 64px 96px;
  overflow: hidden;
  border-bottom: 1px solid var(--ss-black);
  background: var(--ss-paper);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  rgba(0,163,255,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,163,255,0.10) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero__inner { position: relative; }
.hero__chyron {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: var(--ss-blue);
  margin-bottom: 32px;
  border-bottom: 1px dashed var(--ss-blue);
  padding-bottom: 12px;
}
.hero__chyron .right { color: var(--ss-grey-2); display: flex; gap: 24px; }
.hero__eyebrow {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
  color: var(--ss-blue);
  margin-bottom: 16px;
}
.hero__title {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(44px, 7vw, 110px);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 1500px;
}
.hero__title em { font-style: italic; color: var(--ss-blue); }
.hero__sub {
  margin-top: 32px;
  font-family: var(--font-display);
  font-weight: 350;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--ss-grey-1);
  max-width: 760px;
}
.hero__counter {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hero__counter-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: -0.02em;
  color: var(--ss-grey-2);
  margin-bottom: 12px;
}
.hero__counter-value {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(72px, 14vw, 200px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--ss-blue);
  font-variant-numeric: tabular-nums;
  margin-bottom: 12px;
}
.hero__counter-note {
  font-family: var(--font-display);
  font-weight: 350;
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--ss-grey-1);
  max-width: 560px;
  margin-top: 16px;
}
.hero__meta {
  margin-top: 32px;
  border-top: 1px solid var(--ss-black);
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hero__meta-cell .k {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: -0.02em;
  color: var(--ss-grey-2);
  margin-bottom: 8px;
}
.hero__meta-cell .v {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 720px) {
  .hero { padding: 48px 24px 64px; }
  .hero__meta { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Stats / pull quotes ---------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ss-black);
  margin: 32px 0;
}
.stat-strip__cell {
  padding: 20px;
  border-right: 1px solid var(--ss-black);
}
.stat-strip__cell:last-child { border-right: none; }
.stat-strip__k {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-grey-2); margin-bottom: 12px;
  text-transform: uppercase;
}
.stat-strip__v {
  font-family: var(--font-display); font-weight: 350; font-size: var(--dbg-stat-value, 36px);
  line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}
.stat-strip__sub {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-grey-2); margin-top: 8px;
}
@media (max-width: 720px) {
  .stat-strip { grid-template-columns: repeat(2, 1fr); }
  .stat-strip__cell:nth-child(2) { border-right: none; }
  .stat-strip__cell:nth-child(1), .stat-strip__cell:nth-child(2) { border-bottom: 1px solid var(--ss-black); }
}

.pullquote {
  margin: 16px 0;
  padding: 20px 24px;
  border-left: 3px solid var(--ss-blue);
  background: var(--ss-white);
  font-family: var(--font-display);
  font-weight: 350;
  font-size: 22px;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--ss-black);
  max-width: 880px;
}
.pullquote em { color: var(--ss-blue); font-style: italic; }

/* ---------- Tables ---------- */
.tbl-wrap {
  border: 1px solid var(--ss-black);
  margin: 24px 0;
  overflow-x: auto;
  background: var(--ss-white);
}
table.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.tbl th, .tbl td {
  text-align: right;
  padding: 10px 12px;
  border-bottom: 1px solid var(--ss-grey-5);
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl thead th {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: -0.02em;
  color: var(--ss-grey-2);
  border-bottom: 1px solid var(--ss-black);
  background: var(--ss-paper);
  position: sticky;
  top: 0;
}
.tbl tbody tr:nth-child(even) { background: var(--ss-paper); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { font-feature-settings: "tnum"; }
.tbl .em { font-weight: 600; color: var(--ss-black); }
.tbl .em-blue { color: var(--ss-blue); font-weight: 600; }

/* ---------- Chart frame ---------- */
.chart {
  margin: 16px 0;
  border: 1px solid var(--ss-black);
  background: var(--ss-white);
}
.chart__head {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--ss-black);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.chart__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--dbg-chart-title, 18px);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.chart__id {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-blue);
}
.chart__sub {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-grey-2);
}
.chart__body { padding: var(--dbg-chart-pad, 20px); min-height: 120px; }
.chart__legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-grey-1);
  padding: 0 20px 16px;
}
.chart__legend .swatch {
  display: inline-block; width: 14px; height: 8px; margin-right: 6px; vertical-align: middle;
}
.chart__note {
  border-top: 1px solid var(--ss-grey-5);
  padding: 12px 18px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; color: var(--ss-grey-2);
}

/* ---------- Two-column blocks ---------- */
.cols-2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0;
}
@media (max-width: 720px) { .cols-2 { grid-template-columns: 1fr; } }

/* ---------- Takeaway cards ---------- */
.takeaways {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px;
}
@media (max-width: 720px) { .takeaways { grid-template-columns: 1fr; } }
.takeaway-col__head {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: -0.02em; color: var(--ss-blue);
  padding-bottom: 12px; border-bottom: 1px solid var(--ss-black); margin-bottom: 12px;
}
.takeaway {
  padding: 20px;
  border: 1px solid var(--ss-black);
  background: var(--ss-white);
  margin-bottom: 8px;
}
.takeaway__index {
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: -0.02em; color: var(--ss-blue); margin-bottom: 12px;
}
.takeaway__title {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 12px;
}
.takeaway__body {
  font-size: 14px; line-height: 1.45; color: var(--ss-grey-1);
}

/* ---------- Footer chyron ---------- */
.footer-tape {
  background: var(--ss-black);
  color: var(--ss-white);
  padding: 24px 64px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px;
  letter-spacing: -0.02em;
}
.footer-tape__logo img { height: 18px; filter: invert(1); }
.footer-tape a { color: var(--ss-blue-light); text-decoration: none; }
@media (max-width: 720px) { .footer-tape { padding: 24px; } }

/* ---------- Counter animation root ---------- */
.tnum { font-variant-numeric: tabular-nums; }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Annotations on charts ---------- */
.annot {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; fill: var(--ss-grey-1);
}
.annot--blue { fill: var(--ss-blue); }
.annot--alert { fill: var(--ss-red); }
.axis-label, text.axis {
  font-family: var(--font-mono); font-weight: 700; font-size: 10px;
  letter-spacing: -0.02em; fill: var(--ss-grey-2);
}

/* ---------- Highlight inline ---------- */
.hl-blue { color: var(--ss-blue); font-weight: 600; }
.hl-red  { color: var(--ss-red);  font-weight: 600; }
.hl-green { color: var(--ss-green); font-weight: 600; }

/* ============================================================
   MOBILE PHONE RULES (<=480px)
   The 720px breakpoint covers tablets; phones need tighter
   table behavior and a visible scroll affordance so wide
   content-heavy tables don't disappear off-screen.
   ============================================================ */
@media (max-width: 480px) {
  /* Allow table cells to wrap so the methodology + comparison
     tables fit without forcing a 600px scroll region. */
  .tbl th, .tbl td {
    white-space: normal;
    padding: 8px 10px;
    font-size: 12px;
    word-break: break-word;
  }
  .tbl thead th {
    font-size: 9px;
    padding: 8px 10px;
  }
  table.tbl { font-size: 12px; }

  /* For tables that still overflow (long code refs, dense
     numeric columns), provide a visible scroll-hint gradient
     on the right edge of the wrapper. */
  .tbl-wrap {
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .tbl-wrap::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--ss-white));
    pointer-events: none;
    opacity: 0.85;
  }

  /* Inline code refs in tables (e.g., prod_core.base_athena)
     are the main width offender; let them wrap on word boundaries. */
  .tbl code {
    word-break: break-all;
    font-size: 11px;
  }

  /* Section body code refs too. */
  .section__body code {
    word-break: break-all;
  }
}

/* ========== EMAIL GATE ========== */





/* Side-by-side charts get half a column, which puts their labels at
   3-5px on screen anywhere below about 1300px. Stacking them one-up
   below 1100px gives each chart the full column, which is the same
   remedy the <=720px block applies, just without needing a swipe. */
@media (max-width: 1100px) {
  .cols-2 { grid-template-columns: 1fr; }
}

/* ============================================================
   MOBILE (<=720px)
   ============================================================ */

/* iOS Safari inflates text in landscape without this. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Charts are drawn in a fixed 720px coordinate space, and every label
   position is computed against it. Scaling that into a 375px column puts
   the axis and series labels at roughly 3px on screen, which is not
   readable. Rather than shrink them, give each chart its own horizontal
   scroll viewport at native width so type renders at its designed size.
   The scroll is contained in .chart__body, so the page itself never
   scrolls sideways. */
@media (max-width: 720px) {
  /* .chart sits in a grid track. A grid item defaults to min-width:auto,
     which lets it expand to its content and drag the page sideways with
     it, so the scroll has to be pinned to zero here for the overflow to
     stay inside .chart__body. */
  .chart, .cols-2 > *, .charts-row > * { min-width: 0; }
  .chart__body {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding: 16px 0;
  }
  .chart__body > svg {
    width: 720px;
    max-width: none;
    display: block;
    margin: 0 16px;
  }
  /* Scroll affordance: a fading edge that disappears once the reader
     reaches the end of the chart. */
  .chart { position: relative; }
  .chart__body::after {
    content: "";
    position: sticky;
    right: 0;
    float: right;
    width: 24px;
    height: 100%;
    margin-left: -24px;
    background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.92));
    pointer-events: none;
  }
  .chart__head { padding-right: 20px; }
}

/* Below the phone-landscape breakpoint the section gutters get tight. */
@media (max-width: 480px) {
  .section { padding: 40px 16px; }
  .hero { padding: 40px 16px 56px; }
  .chart__body > svg { margin: 0 12px; }
  /* "Patient&nbsp;Collections." is deliberately non-breaking, so it cannot
     wrap out of an overflow. At the 44px floor it measures 343px, which
     runs past the text column on a 320px screen. Scale it with the
     viewport instead and keep 44px as the ceiling so nothing above this
     breakpoint changes. */
  .hero__title { font-size: clamp(30px, 10vw, 44px); }
}