.isi-tray {
  /* height: auto !important;
  max-height: 90% !important; */
}

.isi-tray__content {
  max-width: 1200px;
}

/* DONI-564/DONI-557, 2026-08-10 — the tray's horizontal inset was supposed
 * to come from the bare `.section__container` rule in `sections.css` (see
 * the comment on `hcp_nxt_isi/css/isi-tray.css` — "relies on
 * `.section__container` as its ONLY source of horizontal inset"). That file
 * ships only via the `theme-main` library, and on a live render of /dosing
 * it was NOT among the page's loaded stylesheets at all — no aggregation
 * trick, the rule is simply absent — leaving the tray's content flush
 * against the viewport edge at every width sections.css doesn't happen to
 * load on. Measured live: `.isi-tray .section__container` computed
 * `padding: 0px` where `measured-frames.json` (29513:82834, verified)
 * records the mobile content frame starting at x=24.
 *
 * Pinned here instead, in `isi-tray.css` (global library, always loads —
 * same fix shape as `.isi-footer-content .section__container` below), using
 * the same `--container-padding` token so it stays inert at desktop
 * (0 at >=1250px, where the gutter already comes from `.isi-tray__content`'s
 * max-width) and supplies the missing 24px at mobile regardless of which
 * page libraries a given route happens to attach. */
.isi-tray .section__container {
  padding-inline: var(--container-padding);
}

.isi-tray-content {
  display: flex;
  flex-direction: column;
  gap: 8px;

  .info-subtitle {
    color: var(--CHARCOAL, #1d2d3a);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: 0px;
  }

  .info-item {
    .info-subtitle-section-wrapper {
      display: flex;
      flex-direction: column;
      gap: 16px;

      @media (max-width: 768px) {
        gap: 8px;
      }

      .info-subtitle-section {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
    }

    .info-title {
      color: var(--color-isi-heading);
      font-size: 24px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      margin-bottom: 8px;
      padding-right: 25px;
    }

    p {
      color: var(--color-steel, #515861);
      font-size: 20px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      margin-bottom: 0px;
    }
  }

  a {
    color: #000;
    text-decoration: underline;
    text-decoration-thickness: 0.8px;

    /* CHR-3 (DONI-564) names `from-font` explicitly, and the reason is
     * that it is the only value that survives a font change. `auto` (the
     * initial value, which is what this computed to) lets the BROWSER
     * pick where the underline sits; `from-font` reads the position out
     * of the font file's own metrics, so Agenda's underline lands where
     * Agenda's designer put it rather than where Chrome guesses.
     *
     * On a regulated line — "Please see full Prescribing Information" —
     * that matters more than it looks: this is the one link in the ISI
     * whose underline is part of the approved presentation, and it
     * should not move when a font fallback kicks in.
     *
     * `text-underline-offset` is kept and still applies; the two compose
     * rather than compete — position picks the origin, offset shifts
     * from it. */
    text-underline-position: from-font;
    text-underline-offset: 2px;
  }

  .prescribing-info-link p {
    color: var(--Dark-Coral, var(--color-isi-heading));
    font-weight: 700;

    a {
      color: var(--Dark-Coral, var(--color-isi-heading));
    }
  }
}

.isi-footer-content {
  /* CHR-3 (DONI-564) QA 2026-08-07 — top padding of the full ISI block.
   *
   * Was `padding: 40px 24px`. That beat the module rule
   * `hcp_nxt_isi/css/isi-tray.css` `.isi-footer-content { padding-block: 24px }`
   * at equal specificity because theme CSS loads after module CSS (C-041),
   * so the block shipped 40px top and bottom while Figma draws 24 (see
   * QA annotation on the full ISI section: 24 above the heading, 24 below
   * the PI line; horizontal 120 is the container gutter, already correct
   * — heading left edge measures x=120 at 1440).
   *
   * Keep the horizontal 24 as a floor inside the `.container`; the
   * effective content start stays at the 120 gutter via the container
   * max-width. */
  padding: 24px;
  box-shadow: none;
}

/* CHR-3 (DONI-564) QA 2026-08-08 — mobile-only double horizontal inset.
 *
 * The stored ISI copy blob (shared byte-for-byte with the sticky tray, see
 * hcp-nxt-isi-block.html.twig) wraps its own content in `.section__container`
 * — a generic page-section class whose padding is `--container-padding`:
 * 24px below 768px, 0 at and above 1250px (variables.css). That class is
 * declared in `css/components/sections.css`, which is NOT global — it ships
 * only via the `theme-main` library, which some page libraries depend on and
 * others (observed: the front page) do not. So whether `.section__container`
 * gets ANY padding rule at all is page-dependent.
 *
 * `.isi-footer-content` ABOVE already supplies the full, correct horizontal
 * inset via `.container` (`--gutter-fluid`: 24px at 375, 84px at 1440,
 * verified against Figma 29513:82039 / 29513:82759). On a page where
 * `section__container`'s rule loads, its 24px at mobile stacks ON TOP of
 * that — measured on /dosing at 375: the ISI heading sat at x=48, not the
 * Figma-correct x=24. Desktop never showed it because `--container-padding`
 * is already 0 there, which is exactly why the 2026-08-07 fix (PR #247),
 * verified only at 1440, missed it.
 *
 * Pin it to zero here so this block's horizontal inset comes from exactly
 * one place on every page, independent of which page libraries happen to
 * load `sections.css`. Higher specificity than the bare `.section__container`
 * rule, so it wins regardless of load order (no need to rely on C-041). Do
 * NOT copy this to the sticky tray's `.isi-tray__body` — that element has no
 * padding of its own by design and relies on `.section__container` as its
 * ONLY source of horizontal inset (see hcp_nxt_isi/css/isi-tray.css); it is
 * unaffected because it never double-supplies the gutter. */
.isi-footer-content .section__container {
  padding-inline: 0;
}

.references {
  margin: 80px auto;
  max-width: var(--container-max-width);
  padding: 0 var(--container-padding);
  color: var(--CHARCOAL, #1d2d3a);
  font-family: var(--Font-Footnote, Agenda);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .references {
    margin: 40px auto;
  }
}

/* This duplicates the module's own mobile rule at equal specificity and loads
 * after it (`C-041`), so THIS is the one that applies. Its fallback must match
 * the module's 76px or a config-less environment silently gets two different
 * answers depending on which file someone edits (BugHerd 814). Note the
 * fallback is inert while `variables.css` declares the property — see the note
 * there before changing any of the three. */
@media (max-width: 768px) {
  .isi-tray[data-state="minimized"] {
    height: var(--isi-tray-minimized-height-mobile, 76px);
  }
}

.isi-tray__body {
  padding-left: 24px;
  padding-right: 24px;
}

.info-subtitle-section p span {
  color: #515861; 
}