/*
 * Print styles. This sheet must load LAST on every page, and stay media-gated,
 * so its rules win over the page stylesheets for paged media.
 *
 * US Letter is 816 CSS px and A4 is 794 — both below the 68rem breakpoint, so
 * paper takes the mobile-drawer branch: the ISI pinned with a short scrolling
 * body. Paper cannot scroll, so without the rules here most of the safety copy
 * never reaches the page.
 *
 * Browsers also default to "Background graphics: off", which drops the colored
 * backgrounds behind white text.
 */

.isi {
  box-shadow: none;
}

/*
 * The peek is a duplicate presentation of copy that prints in full directly
 * below it, so on paper it is noise. Dropping it also removes the sticky box
 * from the paged-media flow entirely.
 */
.isi-peek {
  display: none;
}

/* Controls that cannot be operated on paper. */
.nav-toggle,
.nav-backdrop,
.skip-link {
  display: none;
}

/* White text whose background will not print. */
.hero-band,
.site-header,
.site-footer {
  background: none;
}

.hero__title,
.isi__title,
.site-footer,
.site-footer__links a,
.site-footer__copy {
  color: #000;
}

.isi__bar-wrap {
  border-block-end: 1px solid #000;
  background: none;
}

/* Keep safety sections from splitting across sheets where avoidable. */
.isi__section {
  break-inside: avoid;
}

/* ---------------------------------------------------------------
 * Comparator table (Efficacy)
 *
 * A page box is 816px, below the 68rem breakpoint — so paper takes the MOBILE
 * branch, which is exactly where the arm filters live. Left alone, a printout
 * made while a tab was active would carry one or two arms of a four-arm
 * comparison with nothing on the page saying so.
 *
 * These win on specificity, not on `!important`: the hiding rules are
 * (0,2,0), these are (0,3,0) and (0,2,1). The script's `beforeprint` handler
 * is a second belt, not the mechanism.
 * ------------------------------------------------------------- */

.data-table__panel .data-table [data-arm] {
  display: table-cell;
}

.data-table__panel .data-table__notes li {
  display: list-item;
}

/* An overflow container is a crop on paper, and the 624px floor exists only so
   a phone can scroll — neither belongs in a printout. */
.data-table__scroll {
  overflow: visible;
}

.data-table__panel .data-table {
  min-inline-size: 0;
}

/* Five arms of 20px type do not fit an 816px page box. */
.data-table__panel .data-table th,
.data-table__panel .data-table td {
  padding-inline: 0.25rem;
  font-size: 0.75rem;
}

/* A control that cannot be operated on paper. */
.data-table__tabs {
  display: none;
}

.data-table tr,
.cohort-card,
.stat-card {
  break-inside: avoid;
}

/* ---------------------------------------------------------------
 * FAQ accordion
 *
 * A belt, not the mechanism. The page ships every <details> open and a module
 * closes them, so the no-JS printout is already complete and the scripted one
 * is restored by faq.js's `beforeprint` handler. This covers the third case:
 * a modern engine printing while the items are collapsed and, for whatever
 * reason, the handler has not run.
 *
 * `content-visibility`, not `display`. A closed <details> hides its content
 * via an inline style on a slot in its own shadow tree, which no author
 * selector on the light-DOM children can reach — `details > *:not(summary)
 * { display: block }` reveals nothing in ANY engine. ::details-content is the
 * only hook that works, and it is absent from Firefox ESR, which is exactly
 * why it cannot be the mechanism.
 * ------------------------------------------------------------- */

.faq-item::details-content {
  content-visibility: visible !important;
}

/* A pointer affordance that cannot be operated on paper. */
.faq-item__icon {
  display: none;
}

.faq-item {
  break-inside: avoid;
}

/* ---------------------------------------------------------------
 * Savings card — the Terms & Conditions scroller
 *
 * On screen the terms live in a fixed 690px box (369px on mobile) holding
 * roughly three and a half times that in content, because the overflow IS the
 * consent gate. On paper that same box is a crop: the printout would carry the
 * first third of the co-pay offer and stop mid-sentence.
 *
 * Same treatment, and the same reasoning, as `.data-table__scroll` above.
 * ------------------------------------------------------------- */

/*
 * A PLAIN BLOCK on paper, and all three declarations are load-bearing.
 *
 * On screen this is a fixed-height flex column that clips — that IS the scroll
 * gate. Paper has no gate, so the whole terms must print, which needs the box
 * to FRAGMENT across pages. Flex and grid containers fragment far less
 * reliably than block ones and silently drop content past the first fragment,
 * and a clipping box cannot fragment at all — hence `overflow: visible`.
 */
.tc-panel {
  display: block;
  block-size: auto;
  overflow: visible;
}

.tc-panel__scroll {
  block-size: auto;
  overflow: visible;

  /* The grey bar sits above this box in flow and its own height reserves the
     room, so the top padding that used to clear an overlay comes off. */
  padding-block: 0;
}

/* The 220px measure lives on the SENTENCE, not on the bar (see the note in
   patient-affordability.css), so releasing it here means naming the span —
   the same declaration on `.tc-panel__header` cancels nothing, and the
   printed header wraps to two lines inside a 718px page column. */
.tc-panel__header-text {
  max-inline-size: none;
}

/* Scoped to the panel purely for specificity: a bare `.tc-panel__list > li`
   sits below the comparator table's own `li` rule above and reads as a
   descending-specificity ordering error. */
.tc-panel .tc-panel__list > li {
  break-inside: avoid;
}

/*
 * THE GATED PALETTE MUST NOT REACH PAPER.
 *
 * On screen the pre-scroll state greys the three attestations to #d4d4d4 and
 * the button to #b5b5b5, which means something: the reader has not yet read
 * the terms. On PAPER it means nothing — paper cannot scroll, so there is no
 * gate to be on the wrong side of — and #d4d4d4 on white is about 1.35:1,
 * which costs the reader the copy. Anyone who prints before scrolling is in
 * that state.
 */
.savings-form[data-gate="closed"] .attestation__label {
  color: #3a3a3a;
}

.savings-form[data-gate="closed"] .attestation,
.savings-form[data-gate="closed"] .attestation__input {
  border-color: #ccc;
}

/*
 * INK ONLY on the button, deliberately. Its #ececec ground is left alone:
 * black on #ececec is ~17:1 and still reads as a button, whereas clearing it
 * would print the label as floating text. A background declaration from this
 * sheet has no effect here at equal specificity, while `color` from the same
 * rule does — so do not add one back expecting it to work; measure first.
 */
.savings-form[data-gate="closed"] .savings-form__submit {
  color: #000;
}

/*
 * Without this the card artwork prints as an EMPTY ROUNDED BOX for anyone
 * using the browser default, "Background graphics: off".
 *
 * Not a background-image problem — the card is a real <img>. The figure is an
 * `overflow: hidden` + `border-radius` box containing an absolutely-positioned
 * oversized crop, and when THAT combination straddles a page break Chromium
 * drops the image entirely with backgrounds off. Unfragmented it prints
 * correctly either way, which is what makes this the fix.
 */
.savings-card-figure {
  break-inside: avoid;
}