/*
 * Efficacy page. Loaded after components.css, before print.css.
 *
 * Mobile-first, with the desktop arrangement added at 68rem — the breakpoint
 * the shell already uses.
 *
 * Only genuinely page-specific rules belong here: the jump nav, the
 * comparator table, the chart-tab control and this page's section rhythm.
 * Anything a second page would want goes to components.css instead.
 */

/*
 * Mobile gutter. This page's content sits at 32px against the shared 24px
 * token, while its header stays at 24px. Scoped to <main> so the shared
 * header, ISI and footer keep the shell's own gutter.
 */
@media (width < 48rem) {
  main {
    --container-margin: var(--space-xl); /* 32px */
  }
}

/* ===============================================================
 * Page hero
 *
 * Not the home page's hero: there is no photograph and no navy band. The
 * header above it is the DEFAULT solid-navy variant (#1f2b51) and this band
 * is --color-card-surface (#eef0f2). That is why this page must not wrap the
 * header in .hero-band — that class selects the transparent-over-photo
 * treatment.
 *
 * `.page-hero`, `.page-hero__title` and `.page-hero__rule` live in
 * components.css, shared with Affordability. This page's own arrangement (a
 * single centred column, no photo) stays here, in `.page-hero__inner` /
 * `.page-hero__intro` / `_note`.
 * ============================================================= */

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-block: var(--space-2xl);
}

.page-hero__intro {
  display: flex;
  flex-direction: column;

  /* Title, rule and lede are gapped evenly at 16px. */
  gap: var(--space-m);
}

/* 12px, and it carries the asterisk the lede opens. Not `.footnote`, which is
   the ISI's 10.32px Inter treatment — a different component. */
.page-hero__note {
  margin: 0;
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body-lg);
}

/*
 * Mobile hero type: 28px title / 16px lede / 10.32px note, the same step
 * every other page's hero takes at this breakpoint. Scoped to
 * `.page-hero__intro > .prose`, not a blanket `.prose` override: the
 * affordability band lower on this page reuses `.prose` and keeps its own
 * mobile value.
 */
@media (width < 68rem) {
  .page-hero__title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
  }

  .page-hero__intro > .prose {
    font-size: var(--font-size-body);
  }

  .page-hero__note {
    font-size: var(--font-size-footnote);
  }
}

/* ---------------------------------------------------------------
 * Jump nav — four plain anchors, no scripting
 * ------------------------------------------------------------- */

.jump-nav__list {
  display: grid;
  gap: var(--space-m);
  padding: 0;
  margin: 0;
  grid-template-columns: 1fr;
  list-style: none;
}

.jump-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-l);
  block-size: 100%;
  padding-block: var(--space-m);
  padding-inline: var(--space-l);
  border-radius: var(--radius-sm);
  background-color: var(--color-white);
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body-lg);
  text-decoration: none;
}

.jump-nav__icon {
  flex-shrink: 0;
  inline-size: 1rem;
  block-size: 1rem;
}

/* ===============================================================
 * Clinical Efficacy
 * ============================================================= */

/*
 * This page's lede is BLACK at 1.6, not .prose's #3a3a3a at 1.45 — the home
 * page renders the same opening sentence in .prose.
 */
.efficacy__lede {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-loose);
  letter-spacing: var(--tracking-body-lg);
}

/*
 * 56px, not a token: these two paragraphs are separated by a 12px margin, an
 * empty 32px line and another 12px margin. The empty line is a spacer, so it
 * becomes margin here rather than an empty <p>.
 */
.efficacy__lede > p + p {
  margin-block-start: 3.5rem;
}

/* The Bronchodilation block runs three consecutive paragraphs 12px apart —
   no spacer line, unlike the Clinical Efficacy intro above. */
.efficacy__lede--tight > p + p {
  margin-block-start: 0.75rem;
}

.efficacy__lede ul {
  padding-inline-start: 1.875rem; /* 30px */
  margin-block-start: 0.75rem; /* 12px */
  list-style: disc;
}

/* ---------------------------------------------------------------
 * Cohort cards — the 85% / 82% donuts
 *
 * Deliberately NOT .stat-card. That class carries the home page's mobile
 * treatment (display: block, no background, text-align: start) so its metric
 * rows can become a list below 68rem. These cards keep their card at every
 * width — grey panel, centred, donut visible — so reusing .stat-card would
 * have to be undone rule by rule under the breakpoint. .donut and
 * .stat-card__note ARE reused: both match this page's 116px and 278px.
 * ------------------------------------------------------------- */

.cohort-cards {
  display: grid;
  gap: var(--space-m);
  padding: 0;

  /* 24px above the cards, against the bullets they follow. */
  margin: 0;
  margin-block-start: var(--space-l);
  grid-template-columns: 1fr;
  list-style: none;
}

.cohort-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-m);
  padding-block: 2.5rem; /* 40px */
  padding-inline: var(--space-l);
  overflow: hidden;
  border-radius: var(--radius-sm);
  background-color: var(--color-card-surface);
  text-align: center;
}

.cohort-card__title {
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
}

/* The donut gets a fixed 151px band inside the card so both cards align
   whether or not their headings wrap. */
.cohort-card__figure {
  display: grid;
  place-items: center;
  block-size: 9.4375rem; /* 151px */
  inline-size: 100%;
}

/*
 * Identical to .stat-card__note's DESKTOP values, and deliberately not that
 * class: below 68rem .stat-card__note becomes the home page's 16px black
 * full-width treatment, while this note holds 278px / 12px / brand at both
 * breakpoints.
 */
.cohort-card__note {
  max-inline-size: 17.375rem; /* 278px */
  margin: 0;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--tracking-isi-text);
}

.cohort-card__note b {
  font-weight: var(--font-weight-semibold);
}

/* ===============================================================
 * Rapid Onset
 *
 * Reuses .stat-card wholesale, in BOTH of its personalities: the desktop
 * chart card and — below 68rem — the icon/label + value metric rows. Only
 * this page's own numbers are set here.
 * ============================================================= */

.stat-grid--eff {
  /* Three cards per cohort at 437px, against the home page's four at 324px.
     The shared class reads this custom property. */
  --stat-card-chart-max: 27.3125rem; /* 437px */
}

/*
 * The label is Medium here and Regular on the home page, and the tracking
 * flips sign (-0.01em vs +0.015em) for the same component.
 */
@media (width < 68rem) {
  .stat-grid--eff .stat-card__label {
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-tight);
    letter-spacing: var(--tracking-tight);
  }

  /*
   * The cohort heading sits OUTSIDE the grey metric card at this width,
   * flush with the content edge, where home's mobile card (the shared
   * .cohort-block) wraps heading and rows together — so here the card moves
   * from the block to the list. Rhythm, top to bottom: 56 above each
   * heading, 24 heading to card, 24 inside the card either side of the rows.
   */
  .cohort-block {
    padding-block: 0;
    background: none;
  }

  .cohort-block + .cohort-block {
    margin-block-start: 0;
  }

  .cohort {
    margin-block: 3.5rem var(--space-l); /* 56px / 24px */
    padding-inline: 0;
  }

  .stat-grid--eff {
    padding-block: var(--space-l);
    border-radius: var(--radius-sm);
    background-color: var(--color-card-surface);
  }
}

/* ===============================================================
 * Continue to Respond — the comparator table
 * ============================================================= */

/*
 * The value lives in tokens.css as --color-card-rule, shared with Contact
 * Us; the local name stays so the table's own rules read as table rules.
 */
.data-table__panel {
  --color-table-border: var(--color-card-rule);

  /* 56px from the lede above to the caption; desktop uses 64. */
  margin-block-start: 3.5rem;
}

/*
 * An <h3> outside the table rather than its <caption>: the layout stacks
 * caption, tab strip and table, and a caption cannot leave its table.
 * Medium at -0.01em, not the column headers' SemiBold.
 */
.data-table__caption {
  margin: 0 0 var(--space-l);
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  letter-spacing: var(--tracking-display);
  text-align: start;
}

/*
 * The scroll container. `overflow-x: auto` is what makes a five-column
 * clinical table usable on a phone, and it is also what makes it unreachable
 * by keyboard in browsers that do not focus scrollable regions — hence the
 * tabindex and accessible name on the element in the markup.
 */
.data-table__scroll {
  overflow-x: auto;

  /* The table's rounded 1px frame lives here because a collapsed-border
     table ignores its own border-radius; the cells drop their outer borders
     below so the edge stays 1px. */
  border: var(--border-width) solid var(--color-table-border);
  border-radius: var(--radius-sm);
}

.data-table__scroll:focus-visible {
  outline: 2px solid var(--color-brand-primary);
  outline-offset: 2px;
}

.data-table {
  /*
   * The min-width is what makes the scroll container earn its keep. With
   * scripting off, all five arms are shown at every width, and without a
   * floor `table-layout: fixed` would crush four data columns into a phone
   * rather than let them scroll.
   */
  inline-size: 100%;
  min-inline-size: 39rem; /* 624px */
  border-collapse: collapse;
  table-layout: fixed;
}

/* The first column is fixed — 107px on mobile, 219px on desktop — and the
   data columns share what is left. */
.data-table .data-table__corner,
.data-table .data-table__row-head {
  inline-size: 6.6875rem; /* 107px */
}

.data-table th,
.data-table td {
  padding-block: var(--space-m);
  padding-inline: var(--space-s);
  border: var(--border-width) solid var(--color-table-border);
  font-family: var(--font-heading);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  letter-spacing: var(--tracking-body-lg);
  text-align: center;
  vertical-align: middle;
}

.data-table td {
  background-color: var(--color-white);
  color: var(--color-text-body);
}

.data-table thead th,
.data-table .data-table__corner,
.data-table .data-table__row-head {
  background-color: var(--color-card-surface);
  color: var(--color-brand-primary);
  font-weight: var(--font-weight-semibold);
}

/* The row headers are the only left-aligned cells. They are SemiBold like
   the column headers; in the last row only the leading word "Decrease" keeps
   that weight and the rest drops to Regular.
   Qualified with .data-table so it outranks the `.data-table th` base rule —
   unqualified it loses on specificity and every row header renders centred. */
.data-table .data-table__row-head {
  padding: var(--space-m);
  font-weight: var(--font-weight-semibold);
  text-align: start;
}

.data-table__row-head-rest {
  font-weight: var(--font-weight-regular);
}

/* Outer cell borders off — the scroll container's frame is the edge. */
.data-table thead th,
.data-table .data-table__corner {
  border-block-start: 0;
}

.data-table tr > :first-child {
  border-inline-start: 0;
}

.data-table tr > :last-child {
  border-inline-end: 0;
}

.data-table tbody tr:last-child > * {
  border-block-end: 0;
}

/* 109px header row at both breakpoints — taller than its three lines need;
   the height is fixed by design. */
.data-table thead th {
  block-size: 6.8125rem;
}

.data-table__notes {
  padding: 0;
  margin-block-start: var(--space-l);
  color: var(--color-text-body);
  font-family: var(--font-heading);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-caption);
  letter-spacing: var(--tracking-body-lg);
  list-style: none;
}

/* ---------------------------------------------------------------
 * Tab control — only exists below the breakpoint
 * ------------------------------------------------------------- */

/*
 * `display: flex` on the element outranks the UA stylesheet's `[hidden] {
 * display: none }`, so without this the control renders anyway when
 * scripting is off — three buttons that cannot act.
 */
.data-table__tabs[hidden] {
  display: none;
}

.data-table__tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  margin-block-end: var(--space-l);
  border: var(--border-width) solid var(--color-table-border);
  border-radius: var(--radius-full);
  background-color: var(--color-card-surface);
}

.data-table__tab {
  flex: 1 0 0;
  min-inline-size: 0;
  padding-block: 0.75rem;
  padding-inline: var(--space-m);
  border: 0;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-brand-primary);
  font-family: var(--font-heading);
  font-size: var(--font-size-ui);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-heading);
  white-space: nowrap; /* one line per tab */
  cursor: pointer;
}

.data-table__tab[aria-pressed="true"] {
  background-color: var(--color-brand-primary);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}

/*
 * Forced colors overrides both backgrounds to the system canvas, leaving the
 * pressed tab distinguishable only by weight — on a control that selects which
 * arm of a four-arm comparison is shown. Give it a non-colour affordance.
 */
@media (forced-colors: active) {
  .data-table__tab[aria-pressed="true"] {
    border: 2px solid ButtonText;
  }
}

@media (width < 68rem) {
  /*
   * Column hiding. Scoped to this media query on purpose: desktop and a
   * resize past the breakpoint fall outside it, so both revert to the
   * complete four-arm table without any script running. PRINT DOES NOT — an
   * 816px page box is below this breakpoint, so paper matches this very
   * query and needs the explicit rules in print.css. Keyed to data-arm so a
   * column's header and its cells can never be hidden separately.
   */
  .data-table__panel--tab-xopenex [data-arm="albuterol"],
  .data-table__panel--tab-xopenex [data-arm="placebo"],
  .data-table__panel--tab-albuterol [data-arm="a"],
  .data-table__panel--tab-albuterol [data-arm="b"],
  .data-table__panel--tab-albuterol [data-arm="placebo"],
  .data-table__panel--tab-placebo [data-arm="a"],
  .data-table__panel--tab-placebo [data-arm="b"],
  .data-table__panel--tab-placebo [data-arm="albuterol"] {
    display: none;
  }

  /*
   * The narrow layout sets the table two steps smaller than the wide one —
   * 16px cells and 14px column headers against 20px for both. At 20px the
   * row header wraps to eight lines in a 107px column.
   */
  .data-table th,
  .data-table td {
    font-size: var(--font-size-body); /* 16px */
    letter-spacing: var(--tracking-isi-text);
  }

  .data-table thead th {
    font-size: var(--font-size-ui); /* 14px */
  }

  /* With columns hidden, the last VISIBLE cell is not :last-child, so the
     shown arm drops its own end border against the frame. */
  .data-table__panel--tab-xopenex [data-arm="b"],
  .data-table__panel--tab-albuterol [data-arm="albuterol"],
  .data-table__panel--tab-placebo [data-arm="placebo"] {
    border-inline-end: 0;
  }

  /*
   * A FILTERED table fits the phone exactly: 107 + 2 x 129.5 = 366, this
   * page's mobile content width. The 624px floor exists only so the
   * UNFILTERED four-arm no-JS table can scroll — left applied to a filtered
   * state it doubles every data column and pushes the last one off-screen
   * with no scroll cue. The row-header column becomes proportional for the
   * same reason: a fixed 107px does not fit a 256px content box at 320.
   */
  .data-table__panel--filtered .data-table {
    min-inline-size: 0;
  }

  .data-table__panel--filtered .data-table .data-table__corner,
  .data-table__panel--filtered .data-table .data-table__row-head {
    inline-size: 29.2%; /* 107/366 */
  }

  /* The last row's header is smaller than the others — 11px at 1.24 — which
     is what keeps that row at 101px; at 16px it wraps to seven lines. */
  .data-table tbody tr:last-child .data-table__row-head {
    font-size: 0.6875rem; /* 11px */
    line-height: 1.24;
  }

  /* § and ¶ describe the two Xopenex arms only, so the other tabs drop them.
     Scoped from the panel, not the table: the notes list sits outside the
     scroll container, so a class on the table cannot reach it. */
  .data-table__panel--tab-albuterol [data-note="section"],
  .data-table__panel--tab-albuterol [data-note="pilcrow"],
  .data-table__panel--tab-placebo [data-note="section"],
  .data-table__panel--tab-placebo [data-note="pilcrow"] {
    display: none;
  }

  /* The shared Affordability band centers its text column on mobile;
     components.css carries no alignment rule for it. */
  .affordability__body {
    text-align: center;
  }

  /*
   * The section heading is 24px/1.1 here where home's instances of the same
   * shared class take 28px/1.4 — one shared class, two values, so each page
   * opts in with its own number rather than components.css carrying a
   * general mobile rule.
   */
  .section__title {
    font-size: var(--font-size-h4); /* 24px */
    line-height: var(--line-height-tight); /* 1.1 */
  }

  .efficacy__lede {
    font-size: var(--font-size-body); /* 16px */
  }

  /* 8px between the --tight ledes' paragraphs here; desktop uses 12. */
  .efficacy__lede--tight > p + p {
    margin-block-start: var(--space-s);
  }

  /* The Clinical Efficacy lede's spacer is one empty line, so it follows the
     font: 16px at 1.6 here, not the 56px the 20px desktop lede needs.
     `:not()` keeps the --tight ledes on the 8px above. */
  .efficacy__lede:not(.efficacy__lede--tight) > p + p {
    margin-block-start: 1.6rem; /* 25.6px */
  }

  /* 24px / 12px, the same mobile step FAQ's references take. */
  .references__title {
    font-size: var(--font-size-h4);
  }

  .references__list {
    font-size: var(--font-size-caption);
  }

  /* 16px from every section heading to its lede, and the same under the
     References heading. The two-column grid that puts them side by side
     only exists from 68rem; below it the heading needs its own margin. */
  .section-intro .section__title,
  .references__title {
    margin-block-end: var(--space-m);
  }

  /* The Affordability band's heading is the exception to the 24px above:
     28px/1.4, the same step as `.page-hero--plain .page-hero__title` and
     home's own instances of it. The id outranks the class, so order here
     does not matter. */
  #affordability-title {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-snug);
  }

  /*
   * The band's lede takes 16px on mobile against `.prose`'s shared 20px
   * default. Scoped to `.affordability__lede` rather than a blanket `.prose`
   * override: this page's OWN hero lede also uses `.prose`
   * (`.page-hero__intro > .prose`) and keeps its own value.
   */
  .affordability__lede {
    font-size: var(--font-size-body);
  }
}

/* ---------------------------------------------------------------
 * Access & Affordability band — its own breathing room
 *
 * The band is set tighter than the design draws it: on the design nothing
 * follows the band, while on the real page the ISI bar does, immediately, and
 * supplies its own visual weight beneath it.
 *
 * SYMMETRIC, top and bottom — the band stays evenly set rather than trading
 * one uneven gap for another. Mobile's 48px is the shared `.section` default
 * (components.css `--space-2xl`), so this is a page-scoped override rather
 * than a token change.
 * ------------------------------------------------------------- */

.section:has(.affordability) {
  padding-block: var(--space-xl); /* 32px, from the shared 48 */
}

@media (width >= 68rem) {
  /* No tabs above the breakpoint — the full table is always shown. */
  .data-table__tabs {
    display: none;
  }

  /* 64px lede-to-caption, and the caption's own 28px step. */
  .data-table__panel {
    margin-block-start: 4rem;
  }

  .data-table__caption {
    font-size: var(--font-size-h3);
  }

  .data-table .data-table__corner,
  .data-table .data-table__row-head {
    inline-size: 13.6875rem; /* 219px */
  }

  .data-table__narrow-only {
    display: none;
  }

  .cohort-cards {
    grid-template-columns: 1fr 1fr;
  }

  /* Qualified so it beats .stat-grid on specificity rather than on
     efficacy.css happening to load after components.css. */
  .stat-grid.stat-grid--eff {
    grid-template-columns: repeat(3, 1fr);
  }

  /*
   * Label, chart and value stack with no gap and 56px of block padding, and
   * the label row carries the inline padding rather than the card. The home
   * card's 24px gap and 48/24 padding would push the 183px chart out of its
   * 348px card.
   */
  .stat-grid--eff .stat-card {
    gap: 0;
    padding-block: 3.5rem; /* 56px */
    padding-inline: 0;
  }

  .stat-grid--eff .stat-card__head {
    padding-inline: var(--space-l);
  }

  .page-hero__inner {
    gap: 2.5rem; /* 40px between the intro block and the jump nav */

    /* 104 / 64 */
    padding-block: 6.5rem 4rem;
  }

  /*
   * The 670px measure is the LEDE's, not the whole block's: the H1
   * deliberately overhangs it and sets on one line. Capping the block
   * instead wraps the H1 to two lines.
   */
  .page-hero__intro > .prose,
  .page-hero__note {
    max-inline-size: 41.875rem; /* 670px */
  }

  .jump-nav__list {
    grid-template-columns: repeat(4, 1fr);
  }

  /*
   * This page's own instance of the shared Affordability band
   * (components.css `.affordability`) needs padding the shared default does
   * not carry.
   */
  .section:has(.affordability) {
    padding-block: 4.5rem; /* 72px — see above */
  }

  /*
   * On desktop the photo sits on the LEFT, same as home's. The DOM order
   * stays body-then-media because mobile wants text above image, so `order`
   * re-places media first visually without touching the DOM or mobile's
   * reading order.
   */
  .affordability__media {
    order: -1;
  }
}