/**
 * @file
 * Styles for ISI Tray module.
 */

.isi-tray {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0px -4px 24px -4px #51586129;
  transition: all 0.3s ease;
  opacity: 1;
  visibility: visible;
}

.isi-tray.fade-out {
  opacity: 0;
  visibility: hidden;
}

.info-item {
  h2,
  h3 {
    color: var(--color--coral-dark);
  }
}

@media screen and (max-width: 1280px) {
  .info-content {
    padding-bottom: 5ch;
  }
}

.isi-tray__content {
  margin: 0 auto;
  position: relative;
  max-width: 1235px;
}

.isi-tray__body {
  transition: opacity 0.3s ease;
  color: #515861;

  /* 16px above, 4px below. Measured from BOTH initial-state frames, which agree
   * with each other: desktop 29513:82323 is 129 = 16 + 109 + 4, mobile
   * 29513:82834 is 202 = 16 + 182 + 4. The asymmetry is as drawn, and was
   * confirmed as intended rather than an authoring slip (2026-08-04). This was
   * 24px on both edges, which fitted neither frame. */
  margin-block: 16px 4px;

  overflow-y: auto;

  /* Scroll chaining must not leak to the page. Reaching the end of the ISI
   * should stop, not hand the gesture to the document and slide the tray's
   * own content away mid-sentence. `contain` also stops pull-to-refresh
   * firing from inside regulated content.
   *
   * NB this is not part of a page-scroll lock — there isn't one. Figma
   * annotation 2 asked for one and it was rejected (DONI-574). This property
   * stands on its own and should stay either way. */
  overscroll-behavior: contain;

  max-height: calc(100% - 20px);
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  scrollbar-color: #515861 #eeeeee;
  /* 🔑 NO HORIZONTAL PADDING HERE. It was `0 2.5rem 0 1rem`, and it was being
   * applied ON TOP OF the 24px that the theme's `.section__container` already
   * gives this content — so the copy was inset twice. Measured at 375px: the
   * title had 254px of text width where Figma's frame gives it 308, which is
   * exactly why the heading wrapped to three lines instead of two and made the
   * collapsed bar unbuildable at 76px.
   *
   * The horizontal rhythm belongs to `.section__container` (24px at mobile) and
   * to `.isi-tray__content` (max-width 1200, which is what produces Figma's
   * 120px desktop gutters inside 1440). Vertical padding is set per state
   * above, because that IS this module's business.
   *
   * ⚠️ The declaration is in its own rule below, not here: the THEME also sets
   * `.isi-tray__body { padding-left/right: 24px }`
   * (hcp_nxt/css/base/isi-tray.css:129) at the same 0,1,0 specificity, and
   * loads after this file — so an equal-specificity `padding-inline: 0` here
   * silently loses. It was written that way first and measured as having no
   * effect. */

  h2,
  h3 {
    color: var(--color--coral-dark);
  }

  /* 🔴 THE `font-size: 18px` / `@media (max-width: 768px) { 16px }` THAT USED
   * TO BE HERE IS REMOVED — and it should not come back as a "responsive"
   * improvement, because Figma does not ask for one.
   *
   * Both ISI frames resolve the SAME variables — `Size/Body: 20`,
   * `Font/Body: Agenda`, `Weight/Body: Regular` — at 1440 (29513:82323) and at
   * 375 (29513:82834). The rendered line boxes agree: title 25px, section
   * heading 24px and body 24px on BOTH. The ISI does not step its type down at
   * mobile; it re-wraps at the same size.
   *
   * The rules were also INERT. The theme sets 20px at higher specificity
   * (hcp_nxt/css/base/isi-tray.css), so the browser computed 20px at both
   * widths — which is the correct value — and these never applied. Removing
   * them changes no pixel today; it removes a trap that would have introduced a
   * desktop/mobile split the design does not have, the first time someone
   * raised this file's specificity. */
  p {
    margin: 0;
  }

  h3 {
    margin: 0 0 10px 0;
    font-weight: bold;
  }

  a {
    color: var(--color--coral-dark);
  }
}
/* Webkit scrollbar styling */
.isi-tray__body::-webkit-scrollbar {
  width: 8px;
}

.isi-tray__body::-webkit-scrollbar-track {
  background: #f0f0f0;
  border-radius: 4px;
}

.isi-tray__body::-webkit-scrollbar-thumb {
  background: #007cba;
  border-radius: 4px;
}

.isi-tray__body::-webkit-scrollbar-thumb:hover {
  background: #005a8a;
}

/* CHR-3 (DONI-564) — Ofer's ruling 2026-08-08: the minimize/expand toggle
 * must stay fixed in place, never drifting with the text as the tray's
 * content area resizes (state change or content-height change).
 *
 * `position: absolute` anchors the button to `.isi-tray__content`
 * (`position: relative`, below) rather than sitting in normal flow after
 * `.isi-tray__body`, so it never shifts with sibling content. Verified live
 * across all three states (minimized/medium/maximized) at both sign-off
 * widths (C-023): the button holds a constant 16px (`top: 1rem`) from the
 * tray's own top edge and a constant 20px from `.isi-tray__content`'s own
 * right edge in every state — it moves in the VIEWPORT only because the
 * bottom-anchored tray box itself grows upward, never relative to the box.
 * No override exists in the theme for this selector (`C-041` does not apply
 * here) — grepped clean. Do not move this rule off `.isi-tray__content`
 * without re-verifying the same way. */
.isi-tray__toggle {
  position: absolute;
  top: 1rem;
  right: 20px;
  background: none;
  color: #F16B50;
  border: none;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.isi-tray__icon {
  position: absolute;
  transition: opacity 0.3s ease;
  width: 24px;
  height: 24px;
}

.isi-tray__icon--plus {
  opacity: 1;
}

.isi-tray__icon--minus {
  opacity: 0;
}

.isi-tray[data-state="maximized"] .isi-tray__icon--plus {
  opacity: 0;
}

.isi-tray[data-state="maximized"] .isi-tray__icon--minus {
  opacity: 1;
}

.isi-tray__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

/* State-specific styles */

/* 🔴 THE FALLBACK IS LOAD-BEARING, AND IT WAS WRONG (BugHerd 814).
 *
 * `--isi-tray-minimized-height` is set from `hcp_nxt_isi.settings` by
 * `setHeights()` in isi-tray.js. That config key is `config_ignore`d
 * (`C-045`), so it is authored per environment and is NOT guaranteed to hold
 * the values in `config/install/hcp_nxt_isi.settings.yml`. Measured on
 * dev-nxt 2026-08-27 every `heights.*` value came through as `null`, so
 * `setHeights()` set nothing and EVERY viewport fell back to the number in
 * this file. The fallback is therefore the operative height in practice, not
 * a safety net — it has to be the Figma number, not a round one.
 *
 * It was 60px. The collapsed rule below reserves 24px of margin above and
 * below, leaving the body 60 - 48 = 12px for a title line box that is 22px
 * tall. `overflow: hidden` then sliced the heading through the middle of the
 * glyphs — "the text seems cut horizontally". Measured at 1440: body height
 * 12px, title height 22px, 10px clipped.
 *
 * 72px is the Figma collapsed frame (29513:53713, 1440x72 = 24 + 24 + 24) and
 * is the value `config/install/hcp_nxt_isi.settings.yml` already authors, so
 * this now agrees with the config rather than contradicting it. */
.isi-tray[data-state="minimized"] {
  height: var(--isi-tray-minimized-height, 72px);
}

/* Collapsed offers no way to read on from there — the user expands for the
 * rest. Without this the scroller is still live at a fraction of a 440px
 * document, so a scrollbar appears against a title and the whole ISI is
 * reachable by dragging a tiny viewport. Decided 2026-08-04.
 *
 * `medium` deliberately keeps its scrollbar: it is the state that shows part of
 * the text and is meant to be read in place. `maximized` keeps `auto`, which
 * renders nothing while the content fits — it does at 1440, and the bar is
 * there for the narrower widths where it reflows taller. */
.isi-tray[data-state="minimized"] .isi-tray__body {
  overflow: hidden;

  /* 🔑 COLLAPSED SHOWS THE TITLE AND NOTHING ELSE, and the numbers are what
   * enforce it — there is no "hide the paragraphs" rule to get out of step
   * with the markup.
   *
   * Desktop (29513:53713, 1440x72): the title row sits at y=24 and is 24 tall,
   * so 24 + 24 + 24 = 72. A 24px box fits exactly ONE 22px line; a second line
   * would need 44 and is clipped. Everything below the title in that frame —
   * every body paragraph, the pregnancy and drug-interaction copy, the FDA
   * MedWatch line, the Prescribing Information line — is marked
   * `hidden="true"`, so title-only is the specification, not a preference.
   *
   * 🔴 This matters more than it looks. The previous 16/16 left 40px, which
   * showed the title AND an 18px slice of the sentence beneath it. A clipped
   * regulated sentence reads as a complete one — the reader has no way to know
   * the clause continues. Showing nothing is safer than showing a fragment.
   *
   * Mobile keeps 16/16 for two lines — see the media query below. */
  margin-block: 24px;
  max-height: calc(100% - 48px);
}

/* THE TRAY'S TITLE, and the reason the collapsed frame's height works.
 *
 * Figma draws this heading as a 25px line box: one line at 1440 (455x25,
 * 29513:82323) and two at 375 (308x50, 29513:82834). Ours was 24px at the
 * browser's `normal` leading — roughly 28px — which wrapped to THREE lines at
 * 375px and made a 2-line collapsed bar impossible at any sane height.
 *
 * Scoped to the tray on purpose: the on-page ISI block above the footer is a
 * different surface with its own type scale, and is not in this ticket. There
 * is exactly one h2 in the ISI copy — the title — so this cannot reach a
 * section heading.
 *
 * ⚠️ SPECIFICITY IS LOAD-BEARING HERE. The title is styled by the THEME, at
 * `hcp_nxt/css/base/isi-tray.css:41` — `.isi-tray-content .info-item
 * .info-title`, 24px/normal, specificity 0,3,0. A plain `.isi-tray__body h2`
 * (0,1,1) matches and still loses; it was written that way first and measured
 * as having no effect at all. This selector is 0,4,0 and is anchored on
 * `.isi-tray`, which exists ONLY on the tray — the on-page ISI block above the
 * footer shares `.isi-tray-content` but not `.isi-tray`, so its heading keeps
 * the theme's 24px, as decided. */
/* Beats the theme's `.isi-tray__body` padding (0,1,0, loaded later). See the
 * long note on `.isi-tray__body` above for why the inset must be zero here. */
.isi-tray .isi-tray__body {
  padding-inline: 0;
}

.isi-tray .isi-tray-content .info-item .info-title {
  font-size: 20px;
  line-height: 25px;
}

/* The collapsed bar draws it tighter still: 265x44 over two lines is 22px per
 * line, and 16 + 44 + 16 is exactly the 76px the frame specifies. At the 25px
 * leading above it would come to 82px. */
/* The collapsed bar draws the title BIGGER than the initial state does, which
 * is the opposite of the intuition and is why it was missed on the first pass.
 * It is a glanceable label there, not a reading surface.
 *
 * 24px/22px, measured in both collapsed frames: desktop 29513:53713 puts the
 * string in a 520x22 box on one line inside 1200, and mobile 29513:53725 puts
 * the same string in 265x44 — two lines of 22. One size, one leading, both
 * breakpoints. `Line Height/Body LG Bold: 22` is the variable behind it.
 *
 * The initial state stays at 20px/25px (box 455x25 at 1440): at 24px the
 * string measures ~520 and would not fit that frame on one line. */
.isi-tray[data-state="minimized"] .isi-tray-content .info-item .info-title {
  font-size: 24px;
  line-height: 22px;
}

/* 🔴 129px, NOT 120px — the same class of defect as the collapsed fallbacks
 * above (BugHerd 814), and the reason the LAST VISIBLE LINE was sliced through
 * the middle of its glyphs in the default state.
 *
 * The initial state is a scrolling window, so the height decides where the clip
 * lands, and a clip that lands mid-line reads as a truncated safety sentence.
 * Measured on dev-nxt at 1440, where `hcp_nxt_isi.settings` carries no heights
 * and this fallback is therefore the operative value:
 *
 *   line box                       top     bottom
 *   IMPORTANT SAFETY INFORMATION…    0.5      24
 *   CONTRAINDICATIONS               33       56.5
 *   body line 1                     60.5     83.5
 *   body line 2                     83.5    106.5   <- clipped at 100, -6.5px
 *   WARNINGS AND PRECAUTIONS       122.5    146
 *
 * At 120px the body box is 120 - 20 = 100 and cut `body line 2` 6.5px short of
 * its descenders. 129px gives 109, which clears 106.5 and still stops well
 * before the next line begins at 122.5 — so the window ends on a real line
 * boundary rather than through one.
 *
 * 129 is Figma 29513:82323, recorded verified in
 * docs/hcp-nxt/measured-frames.json: "1440x129. Section x=120 y=16 w=1200
 * h=109 -> padding 16 top / 4 bottom" — the same 16/4 this file already sets —
 * with the title, CONTRAINDICATIONS and exactly TWO body lines drawn. It is
 * also what config/install/hcp_nxt_isi.settings.yml authors, so the fallback
 * now agrees with the config instead of contradicting it.
 *
 * Verified clean at 1025, 1100, 1200, 1280, 1366, 1440, 1600 and 1920: the
 * copy does not rewrap across that range, because `.isi-tray__content` is
 * capped at max-width, so one height is right for all of them.
 *
 * ⚠️ The mobile and tablet siblings below are NOT fixed and still slice — see
 * the note on each. They need a decision, not a copied number. */
.isi-tray[data-state="medium"] {
  height: var(--isi-tray-medium-height, 129px);
}

.isi-tray[data-state="maximized"] {
  height: var(--isi-tray-maximized-height, 40%);
}

/* Mobile styles */
@media (max-width: 768px) {
  /* The `.isi-container` clamp that used to be nested here is GONE. That class
   * does not exist anywhere in this module's markup — verified in the browser,
   * 0 matches — so the rule had never once applied. It came across with the
   * copy from isi_tray, whose template does emit it. It also hardcoded the
   * 50px fallback rather than reading the configured height, so had the markup
   * ever matched it would have clipped to the wrong size. Collapsed clipping is
   * handled by the state rule above, which is markup this module actually has. */
  /* 76px, not 50px — same defect as the desktop rule above (BugHerd 814).
   * 29513:53725 is 76 = 16 + 44 + 16, and the collapsed rule below reserves
   * 16px top and bottom for a title that wraps to TWO 22px lines here. At
   * 50px the body got 50 - 32 = 18px: the second line was gone entirely and
   * the first was sliced. Measured at 375 on dev-nxt 2026-08-27 — title 44px
   * in an 18px box, 26px clipped. */
  .isi-tray[data-state="minimized"] {
    height: var(--isi-tray-minimized-height-mobile, 76px);
  }

  /* Mobile collapsed keeps 16/16 and shows TWO title lines, where desktop
   * keeps 24/24 and shows one: 29513:53725 is 76 = 16 + 44 + 16, against
   * desktop's 72 = 24 + 24 + 24. */
  .isi-tray[data-state="minimized"] .isi-tray__body {
    margin-block: 16px;
    max-height: calc(100% - 32px);
  }

  /* 🔑 AND THE TITLE IS 20px HERE, NOT THE 24px DESKTOP COLLAPSED USES. This
   * is the one place in the ISI where the type really does step down at
   * mobile, and it is derived rather than read off a variable — so here is the
   * arithmetic, because it is the only evidence for it.
   *
   * The string measures ~520px at 24px in Agenda Bold, which is exactly the
   * width Figma gives it on desktop collapsed (520x22, one line). The mobile
   * collapsed box is 265x44 — two lines, so every line must be <= 265. At 24px
   * no break does that: "IMPORTANT SAFETY INFORMATION" is ~366 and
   * "INFORMATION & INDICATION" is ~300, both over. At 20px the string is ~433
   * and it splits "IMPORTANT SAFETY" (~183) / "INFORMATION & INDICATION"
   * (~250), which fits 265 on both lines. 20px is the only size that produces
   * the frame as drawn.
   *
   * Measured consequence of getting this wrong: at 24px the title wraps to
   * THREE lines in the tray's 302px, and the 44px clip then cuts the third —
   * so the bar reads "IMPORTANT SAFETY / INFORMATION &" with the word
   * INDICATION sliced off. */
  .isi-tray[data-state="minimized"] .isi-tray-content .info-item .info-title {
    font-size: 20px;
  }



  /* ⚠️ STILL WRONG, and deliberately left alone (BugHerd 814 follow-up scoped
   * to desktop). At 100px the body box is 80 and the clip lands inside the
   * CONTRAINDICATIONS heading (58 -> 81.5), so the state shows a sliced
   * heading and NO body copy at all. Figma 29513:82834 draws 202px with four
   * body lines.
   *
   * 202px is not a drop-in fix: measured at 375, four body lines end at 177.5
   * and the fifth runs 177.5 -> 200.5, so a 182px box leaves a 4.5px sliver of
   * the fifth showing. Unlike desktop, the mobile frame's height does not land
   * on a rendered line boundary, so this needs a ruling on which line the
   * window should end after — not a copied number. */
  .isi-tray[data-state="medium"] {
    height: var(--isi-tray-medium-height-mobile, 202px);
  }

  .isi-tray[data-state="maximized"] {
    height: var(--isi-tray-maximized-height-mobile, 50%);
  }

  .isi-tray__toggle {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 72px for the same reason as desktop. There is no tablet comp — 1440 and
   * 375 are the only widths drawn (`C-023`) — but the collapsed body here
   * uses the DESKTOP 24/24 margins, so it needs the desktop height or it
   * clips identically. `config/install/hcp_nxt_isi.settings.yml` also carries
   * 72px for tablet. */
  .isi-tray[data-state="minimized"] {
    height: var(--isi-tray-minimized-height-tablet, 72px);
  }

  /* ⚠️ STILL WRONG, and deliberately left alone, for the same reason as
   * mobile. Measured at 900 the lines fall exactly where they do at 1440, so
   * 120px slices `body line 2` by the same 6.5px. The config's 160px does NOT
   * fix it: 160 - 20 = 140 lands inside WARNINGS AND PRECAUTIONS
   * (122.5 -> 146). No tablet comp exists (`C-023`), so there is no measured
   * number to reach for — this needs a ruling. */
  .isi-tray[data-state="medium"] {
    height: var(--isi-tray-medium-height-tablet, 120px);
  }

  .isi-tray[data-state="maximized"] {
    height: var(--isi-tray-maximized-height-tablet, 45%);
  }

  .isi-tray__toggle {
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .isi-tray,
  .isi-tray__body,
  .isi-tray__toggle,
  .isi-tray__icon {
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .isi-tray {
    border-top: 3px solid;
  }

  .isi-tray__toggle {
    border: 2px solid;
  }
}

/* ISI Footer Content styles */
.isi-footer-content {
  background: #fff;
  box-shadow: 0px -4px 24px -4px #51586129;
  padding-block: 24px;
  position: relative;
}

.isi-footer-content h2,
.isi-footer-content h3 {
  margin-top: 0;
}

.isi-footer-content p {
  margin-bottom: 10px;
  line-height: 20px;
  color: #515861;
}

.isi-subsection p strong {
  color: #1D2D3A;
}

.isi-tray__body p a strong {
  color: #C94808;
  text-decoration: underline;
}

/* Print styles */
@media print {
  .isi-tray {
    position: static;
    border: 1px solid #000;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .isi-tray__toggle {
    display: none;
  }

  .isi-footer-content {
    background: none;
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

.references-section {
  background-color: #fff;
  padding: 40px 0 56px;

  @media (max-width: 991px) {
    padding: 24px 0 40px;
  }
}

.references-description {
  font-size: 16px;
  line-height: 20px;
  color: #515861;
}

.isi-subsection {
  line-height: 20px;
}

.isi-subsection p {
  color: #515861;
}