/**
 * @file
 * The 2026 DTC ISI — static block (CHR-3 / DONI-706) and safety tray
 * (CHR-4 / DONI-710).
 *
 * 🔒 EVERY NUMBER HERE IS MEASURED FROM THE CANONICAL DTC FIGMA FILE
 * (PMOumVEsuQEHJFYkbGBD84), component set `ISI 4341:5964` on page `1:5`.
 * Do not re-derive them and do not round them.
 *
 * Sign-off widths are 1440 desktop and 375 mobile. There are NO tablet comps.
 *
 * This file replaces the theme's `css/base/isi-tray.css` for `dtc_nxt` —
 * 332 lines that carry none of the 2026 values and style the legacy
 * `.isi-container` / `.isi-copy` / `.isi-heading` naming. That file is slated
 * for retirement by CHR-3; it is left in place until the retirement map
 * (FND-9 / DONI-719) says which surfaces still need it.
 */

/* ══════════════════════════════════════════════════════════════════════════
   Fallback heights.

   js/isi-tray.js overwrites these from config on attach. They exist so the
   tray is not zero-height in the window between first paint and JS running,
   and so it degrades to something usable if JS never runs at all — on a
   compliance surface a tray that collapses to nothing is worse than one at a
   slightly wrong height.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* DEV-008 — must match `heights.desktop.peek` in `dtc_nxt_isi.settings`.
     192px, not the measured 210px: at 210 the peek clipped 9px into the top of
     the third paragraph, showing a band of half-height letters. Same defect
     DEV-007 fixed at 375. A stale value here is what a visitor sees until JS
     attaches, so it is not a harmless fallback — see the DEV-007 note below. */
  --isi-tray-peek-height: 192px;
  --isi-tray-collapsed-height: 72px;
  /* `min(714px, 80vh)`, matching `heights.desktop.expanded` — capped by
     viewport height, not just a flat 714px, so a short browser window still
     leaves `.isi-tray__content` room to scroll instead of pushing the box's
     top off-screen with a fully-fit, non-scrollable interior. Same pattern
     already used for mobile below. Must match the config value — see the
     DEV-007 note on `--isi-tray-peek-height-mobile` just below for why a
     stale fallback here is not harmless. */
  --isi-tray-expanded-height: min(714px, 80vh);

  --isi-tray-peek-height-tablet: 214px;
  --isi-tray-collapsed-height-tablet: 72px;
  --isi-tray-expanded-height-tablet: 60%;

  /* DEV-007 (design-deviations.yml) — must match `heights.mobile.peek` in
     `dtc_nxt_isi.settings`. `js/isi-tray.js`'s `applyHeights()` overwrites
     this only AFTER Drupal behaviors attach, so a stale value here is not
     just a fallback — it is what a visitor sees for that gap, and what they
     keep permanently if JS never runs at all. */
  --isi-tray-peek-height-mobile: 203px;
  --isi-tray-collapsed-height-mobile: 76px;
  --isi-tray-expanded-height-mobile: min(1606px, 80vh);

  /* Not in the theme's variables.css — the only place it exists in this repo
     is figma-to-html/_shared/tokens.css:85. Declared here so the tray does not
     depend on a file the theme does not load. */
  --shadow-isi: 0 -4px 24px -4px rgba(81, 88, 97, 0.08);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE SAFETY TRAY
   ══════════════════════════════════════════════════════════════════════════ */

.isi-tray {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  /* Caps the tray at its 1440 sign-off width and centres it. Without this,
     `.isi-tray__inner`'s content column stays capped at 1200 but the
     toggle/cookie controls — positioned via inset from THIS element's edges —
     keep tracking the full viewport width and drift away from the content on
     any screen wider than 1440. */
  max-width: 1440px;
  margin-inline: auto;
  background: var(--color-white, #fff);
  box-shadow: var(--shadow-isi);
  transition: height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;

  /* 🔴 OVERFLOW IS VISIBLE ON PURPOSE. The clipping belongs on
     `.isi-tray__inner`, one level down.

     `D - Collapsed` sets `clipsContent: false` so the cookie control hangs
     25px ABOVE the 72px bar. Clipping here cuts it off. Clipping nowhere leaks
     tray content out below the bar. The boundary has to sit between the two,
     which is why there is an extra wrapper compared with hcp_nxt_isi. */
  overflow: visible;

  /* Measured 2026-08-04: `.navbar__toggle` is 1030 (navbar.css:333) and the
     site header is 999 (header.css:4). 1000 clears the header and stays
     under the toggle.

     🔴 DONI-702, Ofer Shaal, 2026-08-11 — the note that used to live here
     ("WHEN CHR-2 LANDS: its drawer must be above 1000") was written against
     `FS-3.34` ("the open mobile menu paints in front of the ISI/Indication
     trays"), before CHR-2's drawer existed. CHR-2 has now landed on the
     OPPOSITE model, ported from HCP's `hcp_nxt`: the drawer stays BELOW this
     tray (`--topnav-z: 100` at every width, `topnav.css`) and is instead
     height-capped in `.topnav__right` / `js/topnav.js` to stop above
     wherever this tray currently ends, so the tray is always reachable while
     the drawer is open. `FS-3.34` is superseded for `dtc_nxt`. Do not raise
     this above 1000 to "fix" a menu/tray overlap — that would be reverting
     the decision; the drawer's own height cap is what has to be fixed. */
  z-index: 1000;

  height: var(--isi-tray-peek-height);
}

/* `FS-2.4` — hidden while the static in-page ISI is on screen.

   `visibility` as well as `opacity`, so the hidden tray is out of the tab
   order and out of the accessibility tree rather than merely transparent. A
   focusable-but-invisible scroll region is a keyboard trap. */
.isi-tray--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.isi-tray[data-state='peek'] { height: var(--isi-tray-peek-height); }
.isi-tray[data-state='collapsed'] { height: var(--isi-tray-collapsed-height); }
.isi-tray[data-state='expanded'] { height: var(--isi-tray-expanded-height); }

/* 🔴 DEV-005 (docs/design-deviations.yml) — Ofer Shaal, 2026-08-10.
   Collapsed shows the heading ONLY and does not scroll, on both mobile and
   desktop. Overrides FS-2.2 / the Functional Annotations' "ISI tray will be
   scrollable when in the collapsed state" — a deliberate divergence, not an
   oversight. `js/isi-tray.js` drops `#isi-tray-content`'s `tabindex` to `-1`
   in this state for the same reason: nothing here is scrollable, so it is
   not a meaningful tab stop. */
.isi-tray[data-state='collapsed'] #isi-tray-content {
  overflow: hidden;
}
/* `.isi__section` is `display: contents` (see the note on that rule below) —
   its children render as `#isi-tray-content`'s flex items, but the DOM child
   combinator below still sees `.isi__section` itself, not the heading. Target
   the section's own children directly, or `display: none` on the section
   hides the heading nested inside it too. */
.isi-tray[data-state='collapsed'] #isi-tray-content .isi__section > :not(.isi__heading) {
  display: none;
}

/* The clipping boundary. See the note on `.isi-tray` above for why this is a
   separate element and not the tray itself. */
.isi-tray__inner {
  /* Anchors `.isi-tray__scrollbar` (prototype), which needs to sit outside
     `.isi-tray__content`'s own box rather than being pinned to the fixed
     `.isi-tray` ancestor. */
  position: relative;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  /* 🔴 SYMMETRIC 120/120 — and the previous comment here asserted the
     opposite, at length, and was wrong.

     CHR-4's AC says "padding-inline is asymmetric — 120px left desktop,
     59px left mobile, against 24px right. That gutter reserves the cookie
     control." That came from chrome.md. Measured against Figma directly on
     2026-08-05, it does not hold:

       `D - Collapsed` `14361:72772`, 1440 wide
         Section  x=120  width=1200  → right edge 1320 → right padding 120
         Icon     x=1176 INSIDE the Section → right-aligned in the column
         Cookie   `23549:57856` x=40 y=-25 → LEFT, and ABOVE the bar

     The cookie control overhangs the top-left of the bar; it never needed a
     right gutter. The asymmetric padding pulled the ISI column 96px out of
     line with every other container on the page.

     🔴 CONSUMES THE LAYOUT TOKEN, does not restate the number. FND-4 owns it
     (themes/dtc_nxt/css/base/layout.css). This module having its own 120 is
     how the drift started. */
  padding-inline: var(--layout-gutter, 24px);
}

/* The tray's heading is the copy's own `<h2>`, styled here rather than
   duplicated in the template. See the note in dtc-nxt-isi-tray.html.twig. */
.isi-tray .isi__heading {
  margin: 0;
  font-size: 24px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-isi-heading, #c94808);
}

/* The cookie control overhangs the collapsed bar by 25px. It sits outside
   `.isi-tray__inner`, so the inner clipping never cuts it off. */
.isi-tray__cookie {
  --cookie-control-width: 79.963px;
  --cookie-control-height: 83px;

  position: absolute;
  bottom: calc(var(--isi-tray-collapsed-height) + 25px - var(--cookie-control-height));
  inset-inline-start: 40px;
  z-index: 2;
}

.cookie-control {
  inline-size: var(--cookie-control-width, 79.963px);
  block-size: var(--cookie-control-height, 83px);
  min-inline-size: 44px;
  min-block-size: 44px;
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cookie-control__image {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

/* ── The toggle ─────────────────────────────────────────────────────────── */

/* Overlaid at the top right of the content column rather than sitting in a
   flex row with the heading. Figma floats the icon to the right of the heading
   inside the same Section; absolute positioning is how that survives the
   heading wrapping to two lines at narrow widths.

   `top` matches `.isi-tray__content`'s `padding-block-start`, so the button
   lines up with the heading's cap height in every state. */
.isi-tray__toggle {
  position: absolute;
  inset-block-start: 40px;
  /* Right-aligned inside the content column (Figma puts it at x=1176 of
     1200), not against the viewport edge. Follows the gutter token so it
     cannot drift away from the column it belongs to. */
  inset-inline-end: var(--layout-gutter, 24px);
  z-index: 1;
  /* 🔴 NO inline-size/block-size (removed 2026-08-10, Ofer Shaal). The button
     now shrink-wraps its 18×18 icon instead of holding the project's 44×44
     minimum target size — see the CLAUDE.md 44×44 policy note if this needs
     revisiting. */
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* PLUS when the tray can open, MINUS when it can close.

   🔴 THE FUNCTIONAL ANNOTATIONS SETTLE THIS, and two earlier sources were
   wrong about it. Frame `24137:69810` names the control by state:

     annotation 1  "+ Icon"  Initial   — "Selecting the + icon expands the tray"
     annotation 3  "− Icon"  Expanded  — "Selecting the − icon sets the ISI
                                          tray to the collapsed state"
     annotation 4  "+ Icon"  Collapsed — "Selecting the + icon expands the tray"

   So the toggle is a plus/minus pair. It is NOT a chevron. Two dead ends
   worth recording so nobody re-walks them:

     ✗ `chrome.md` §5.3.2 says the chevron is the plus "rotated -135deg". A
       plus rotated by any multiple of 45deg is a plus or an ×, never a
       chevron. The first build followed it and drew an ×.
     ✗ CHR-4's own AC says "the expanded toggle is `Icon type=Chevron Up`",
       taken from the component-set variant NAME. The annotations describe the
       behaviour, and they say minus. Ofer confirmed minus on 2026-08-05.

   `mask-image` rather than `background-image` so one colour declaration
   drives the fill and forced-colours mode can override it. */
.isi-tray__icon {
  inline-size: 18px;
  block-size: 18px;
  display: block;
  background-color: var(--color-dark-coral, #c94808);
  -webkit-mask: url('../icons/isi-toggle-union.svg') no-repeat center / contain;
  mask: url('../icons/isi-toggle-union.svg') no-repeat center / contain;
}

.isi-tray[data-state='expanded'] .isi-tray__icon {
  -webkit-mask-image: url('../icons/isi-toggle-minus.svg');
  mask-image: url('../icons/isi-toggle-minus.svg');
}

/* ── The scrolling region ───────────────────────────────────────────────── */

.isi-tray__content {
  /* `FS-2.2`: scrollable in EVERY visible state, collapsed included. There is
     deliberately no state selector on this rule. */
  overflow-y: auto;
  flex: 1 1 auto;
  padding-block: 40px 24px;
  padding-right: 20px;

  /* 🔴 COLUMN, EXPLICITLY, AND THIS IS LOAD-BEARING.
     The retired theme file set `.isi-tray__content { display: flex }` with no
     direction — a ROW — which laid the desktop peek lead-in out BESIDE the
     safety copy. That file no longer loads on dtc_nxt (CHR-3), but the
     declaration stays here so the layout does not depend on the absence of
     something. `dawnzera_full` still ships its copy for the legacy site. */
  display: flex;
  flex-direction: column;
  gap: 16px;

  /* 🔴 THIS is the capped content column inside the tray, not `.isi__section`
     — that element is `display: contents` here so the heading and the lead-in
     can be ordered against each other, which means it has no box to cap. */
  inline-size: min(100%, var(--layout-content, 1200px));
  /* Left-aligned, NOT centred. At 1440 the column fills the gutter box so it
     makes no difference; at 375 the ISI's narrower 293 column would centre
     itself and sit at x=48.5, where Figma `24581:36575` draws it at x=24
     flush with every other mobile block. */
  margin-inline: 0;

  scrollbar-width: thin;
  scrollbar-color: #c94808 #ffffff;

  /* Scroll CONTAINMENT, not a page lock. A scroll gesture that reaches the end
     of this region stops here instead of chaining to the page underneath.

     🔴 This is NOT a partial implementation of `FS-2.3`'s page scroll lock.
     That was rejected — see js/isi-tray.js and docs/design-deviations.yml. */
  overscroll-behavior: contain;
}

.isi-tray__content::-webkit-scrollbar { inline-size: 8px; }
.isi-tray__content::-webkit-scrollbar-track {
  background: #fff;
  border: 1px solid #c94808;
  border-radius: 24px;
}
.isi-tray__content::-webkit-scrollbar-thumb {
  background: #c94808;
  border-radius: 24px;
}

/* 🔴 POSITION IS A KNOWN, ACCEPTED GAP FROM FIGMA — colour/width/radius above
   already match it exactly.

   Figma (`14361:69926` desktop, `24137:70234` mobile) draws this scrollbar
   sitting OUTSIDE the content column — ~56px into the right gutter on
   desktop, offset ~37px below the heading on mobile. A native scrollbar is
   always flush with its own scrolling box's edge; it structurally cannot sit
   outside that box or be inset from the top with a gap above it.

   Considered and rejected 2026-08-10 (Ofer Shaal): a JS-driven fake
   scrollbar (hide native, sync a decorative track/thumb pair to scrollTop)
   would hit the position, but on a compliance surface a `pointer-events:none`
   thumb that LOOKS draggable reads as a broken control, and hiding the native
   scrollbar drops OS accessibility modes (forced-colors, overlay scrollbars)
   for a cosmetic offset. Same call as `DEV-003` on this tray: simpler and
   safer wins over exact fidelity to a Figma frame. Not registered in
   `docs/design-deviations.yml` — it deviates from a frame's illustrative
   position, not from a Functional Spec requirement.

   🧪 THE RULES BELOW BUILD THAT REJECTED OPTION ANYWAY, as a visual
   PROTOTYPE, 2026-08-10 — Ofer Shaal asked to see it rendered before ruling
   it out for good. Not a reversal of the decision above. If this stays
   removed after review, delete this block, `#isi-tray-scrollbar` in the
   twig template, and the sync code in js/isi-tray.js; the native rules
   above already carry the shipped fallback. */

/* Hides the native scrollbar the prototype below replaces — but ONLY once
   `js/isi-tray.js` has confirmed the decorative one is actually initialized
   (`.isi-tray--scrollbar-ready`, set after `syncScrollbar()`'s first
   successful run). The decorative scrollbar is `pointer-events: none` and
   purely visual; unconditionally hiding the real one would leave a visitor
   with NEITHER — no scroll affordance at all — the moment JS fails to load,
   throws, or is blocked, which is the one failure mode a compliance surface
   cannot silently absorb. Firefox/IE legacy property first, then the WebKit
   pseudo-element. */
.isi-tray--scrollbar-ready .isi-tray__content {
  scrollbar-width: none;
}
.isi-tray--scrollbar-ready .isi-tray__content::-webkit-scrollbar {
  display: none;
}

.isi-tray__scrollbar {
  position: absolute;
  inline-size: 8px;
  pointer-events: none;
  /* top/inset-inline-start/block-size are all set by js/isi-tray.js,
     centred under `.isi-tray__toggle` with a gap below it (Ofer Shaal,
     2026-08-10) — no static per-breakpoint value here would track the
     toggle's own position, which itself moves between the desktop/mobile
     gutter values. */
}

.isi-tray__scrollbar-track {
  position: absolute;
  inset: 0;
  background: var(--color-white, #fff);
  border: 1px solid var(--color-dark-coral, #c94808);
  border-radius: 24px;
}

.isi-tray__scrollbar-thumb {
  position: absolute;
  inset-inline-start: 0;
  inline-size: 8px;
  background: var(--color-dark-coral, #c94808);
  border-radius: 24px;
  /* top/block-size set by JS per scroll position — see isi-tray.js. */
}

/* ── The desktop peek lead-in ───────────────────────────────────────────── */

/* ── Visual order inside the tray: heading → lead-in → body ────────────────

   Figma `14361:69926` orders the Section's children heading, then lead-in,
   then body. The lead-in is a template-level element and the heading lives
   inside the shared copy, so they are at different nesting depths and cannot
   be ordered against each other as siblings.

   `display: contents` on `.isi__section` dissolves that wrapper so its
   children become flex items of `.isi-tray__content` alongside the lead-in,
   and `order` then puts them in the drawn sequence.

   ⚠️ KNOWN TRADE, recorded rather than hidden. `order` changes VISUAL order
   only — the accessibility tree keeps DOM order, so a screen reader reads the
   lead-in before the heading. WCAG 1.3.2. It is one element out of place and
   the lead-in reads as an introduction either way, so the sequence is still
   meaningful.

   The alternative was worse both ways: a second `<h2>` in the template would
   hardcode regulated copy into a Twig file, which is the exact defect HCP
   fixed in DONI-566, and splitting the copy around the heading would break
   the single-source guarantee CMP-1 exists for. */
.isi-tray .isi__section {
  display: contents;
}

.isi-tray .isi__section > * { order: 3; }
.isi-tray .isi__heading { order: 1; }
.isi-tray .isi-tray__lead-in { order: 2; }

/* 🔴 DESKTOP PEEK ONLY. Two sentences that appear in no other ISI surface
   (Figma `14361:69930`, `14361:69931`). The mobile peek draws neither.

   `display: none` by default and shown only by the rule below, so any state or
   width that is not desktop-peek gets nothing. Failing closed matters here:
   showing regulated copy in a surface the design does not draw it in is the
   error that costs more.

   ⚠️ OPEN MLR QUESTION — DONI-710, chrome.md §5.3.3. */
.isi-tray__lead-in { display: none; }

.isi-tray__lead-in p {
  margin: 0;
  font-size: 20px;
  line-height: 22px;
  color: var(--color-steel, #515861);
}

.isi-tray__lead-in .isi-tray__lead--bold {
  font-weight: 700;
  color: var(--color-charcol, #1d2d3a);
}

.isi-tray__sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   THE STATIC ON-PAGE BLOCK — CHR-3 / DONI-706

   Desktop 1440 × 702: padding-inline 120 around an inner 1200, padding-block
   40. Mobile 375 × 1572: 24 all round.

   Only the widths and padding are set here. The heights are whatever the copy
   comes to — this block has no height property, unlike the tray, whose 714 /
   1606 DO come from config. Do not chase a drifting height by padding the
   copy (Ofer Shaal, 2026-08-11).
   ══════════════════════════════════════════════════════════════════════════ */

/* 🔴 NOT `display: flex`, and that mattered.

   It was a flex row containing the 1200px content column AND the 24px icon
   slot, so flex shrank the column to 1176 to fit the slot beside it. Measured
   on the live page: `.isi .isi__section` was 1176 wide with 144px of right
   padding, against every `.section__container` on the same page at 1200 wide
   and 120/120. A 24px misalignment on the one block that has to look like it
   belongs to the page.

   🔴 CONSUMES THE LAYOUT TOKEN — see FND-4 / DONI-705. */
.isi {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  background: var(--color-white, #fff);
  box-shadow: var(--shadow-isi);
  padding-inline: var(--layout-gutter, 24px);
}

/* ── The copy's own styles, SHARED BY BOTH SURFACES ─────────────────────────
   These were scoped to `.isi` in the first build, so the identical copy was
   styled in the static block and completely unstyled inside the tray. One body
   of copy should carry one set of styles; only the WRAPPER geometry differs.
   `.isi__*` is already namespaced, so no ancestor selector is needed. */

.isi__section {
  inline-size: min(100%, var(--layout-content, 1200px));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Only the static block pads its own column; in the tray that padding belongs
   to `.isi-tray__content`, which has to keep it while scrolling. */
.isi .isi__section {
  gap: 14.34px;
  padding-block: 40px;
}

.isi__heading {
  margin: 0;
  font-size: 24px;
  line-height: 22px;
  font-weight: 700;
  color: var(--color-isi-heading, #c94808);
}

/* 🔴 h3, NOT h4 — and this is a fix, not a style choice.

   The legacy markup in templates/twigify/ ranks an <h4> section title ABOVE
   its subsections, so children outrank their parent on the most
   safety-critical block on the site. Same defect HCP fixed as DONI-873.
   Here the fixture is simply authored with the correct levels. */
.isi__subheading,
.isi__indication-heading {
  margin: 0;
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
}

.isi__subheading { color: var(--color-charcol, #1d2d3a); }
.isi__indication-heading { color: var(--color-isi-heading, #c94808); }

.isi__body {
  margin: 0;
  font-size: 20px;
  line-height: 22px;
  color: var(--color-steel, #515861);
}

.isi__body strong { color: var(--color-charcol, #1d2d3a); }

.isi__group,
.isi__indication {
  display: flex;
  flex-direction: column;
}

/* 🔴 THE TWO GROUPS DO NOT SHARE A GAP, and one rule for both was the bug.
   The side-effects group is drawn with its heading and body GLUED — the
   wrapper carries no itemSpacing (desktop `14361:37476` h3 y=0 h=22, body
   y=22; mobile `14361:73778` h3 y=0 h=44, body y=44), while its siblings sit
   16px apart. INDICATION really is 12px (`14361:73785`). Ofer Shaal ruled for
   Figma here, 2026-08-11, over a QA report that read the difference backwards.
   A gap of 0 looks like an omission and is not one. */
.isi__group { gap: 0; }
.isi__indication { gap: 12px; }

/* `text-underline-position: from-font` and the 0.8px thickness are measured,
   not defaults — same treatment CHR-3 specified on HCP (DONI-564). */
.isi__link {
  color: var(--color-dark-coral, #c94808);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.8px;
  text-underline-offset: 2px;
  text-underline-position: from-font;
}

/* The 24×24 icon slot Figma reserves on the static master `4341:5965`.
   Space only — NO GLYPH.

   CHR-3's AC says this "draws a visible `Icon type=Chevron Up` … it is not
   empty". That came from chrome.md, which has now been wrong about this icon
   twice. Figma's own codegen for `4341:5965` disagrees: the icon instance
   `14361:37481` is `<div data-name="Icon" />` with no child — an empty 24×24
   box. The peek variant `14361:69926` is where a glyph IS drawn
   (`14361:69950`), because that state is interactive.

   Which makes sense: the static block does not collapse, so a toggle glyph on
   it is a control that does nothing. The slot is kept so the 1200px content
   column and its right-hand gutter stay as measured. */
/* Positioned, not a flex sibling — see the note on `.isi` above. Figma puts
   this icon INSIDE the 1200px column at x=1176, i.e. right-aligned within the
   content, not against the viewport edge. */
.isi .isi__toggle-slot {
  position: absolute;
  inset-block-start: 40px;
  inset-inline-end: var(--layout-gutter, 24px);
  inline-size: 24px;
  block-size: 24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Breakpoints
   ══════════════════════════════════════════════════════════════════════════ */

/* Desktop is the only width where the peek lead-in is drawn. */
@media (min-width: 1025px) {
  .isi-tray[data-state='peek'] .isi-tray__lead-in {
    display: flex;
    flex-direction: column;
    padding-block-end: 16px;
  }
}

/* Collapsed bar (`24137:70229`, 1440 frame): the heading + toggle row is
   vertically CENTRED in the 72px bar, not top-padded like peek/expanded —
   Figma draws it with `justify-center`, not the shared 40px top padding.
   `.isi-tray__content` stays a top-aligned scroller in every other state
   (FS-2.2 requires scrolling from the top, and centring an OVERFLOWING flex
   column makes browsers start its scroll position negative/mid-content) —
   only the COLLAPSED padding is overridden, not the scroll architecture.
   Scoped above the mobile breakpoint; mobile collapsed keeps its own
   already-centred-enough 76px-bar values untouched. */
@media (min-width: 769px) {
  .isi-tray[data-state='collapsed'] #isi-tray-content {
    /* (72px bar − 22px heading line-height) / 2 */
    padding-block-start: 25px;
  }
  .isi-tray[data-state='collapsed'] .isi-tray__toggle {
    /* Centres the 18px icon against the heading's line-height the same way. */
    inset-block-start: 27px;
  }
}

/* ⚠️ NO TABLET COMPS EXIST. These interpolate between the two drawn widths and
   are the one block in this file a Figma read cannot confirm. Same honesty as
   the config's tablet heights, which this must stay in step with. */
@media (min-width: 769px) and (max-width: 1024px) {
  .isi-tray[data-state='peek'] { height: var(--isi-tray-peek-height-tablet); }
  .isi-tray[data-state='collapsed'] { height: var(--isi-tray-collapsed-height-tablet); }
  .isi-tray[data-state='expanded'] { height: var(--isi-tray-expanded-height-tablet); }

  .isi-tray__inner { padding-inline: var(--layout-gutter, 24px); }
  .isi { padding-inline: var(--layout-gutter, 24px); }
}

@media (max-width: 768px) {
  .isi-tray[data-state='peek'] { height: var(--isi-tray-peek-height-mobile); }
  .isi-tray[data-state='collapsed'] { height: var(--isi-tray-collapsed-height-mobile); }
  .isi-tray[data-state='expanded'] { height: var(--isi-tray-expanded-height-mobile); }

  /* 🔴 RESOLVED 2026-08-05, and the earlier value here was read from the
     WRONG FIGMA FILE.

     The superseded `r53…` file draws the mobile ISI Section at x=59 w=265.
     The CANONICAL `PMOumVEsuQEHJFYkbGBD84` draws it at x=24 w=293, in page
     context — `1.0 ABOUT HAE - M` `24410:65704`, ISI instance `24581:36554`,
     Section `24581:36575`. The two files genuinely disagree, and this module
     was built against the wrong one.

     Canonical wins: the ISI left-aligns with every other mobile block at the
     24px gutter, and its content column is 293 rather than the page-standard
     327. That 34px is CHR-3 §7.3's "unexplained" narrowing — now confirmed as
     real rather than a transcription error, and reproduced as a cap so it
     cannot overflow a narrower viewport. */
  /* 🔴 DEVIATES FROM THE 24px FLUSH-LEFT ALIGNMENT ABOVE — approved by Ofer
     Shaal in session, 2026-08-10. The cookie control below now sits at the
     tray's literal bottom-left corner instead of overhanging above it, so
     the copy needs room not to render under it. Right stays on the shared
     gutter token; only the left inset widens. */
  .isi-tray__inner { padding-inline: 55px var(--layout-gutter, 24px); }

  /* Anchored at the tray's bottom-left corner (Ofer Shaal, 2026-08-10) —
     supersedes the "fully above the top edge" placement below; the 55px
     `.isi-tray__inner` padding above exists so this does not sit over the
     copy. */
  .isi-tray__cookie {
    --cookie-control-width: 49.13px;
    --cookie-control-height: 51px;

    inset-inline-start: 0;
    bottom: 0;
  }

  /* Real selectors — `.isi-tray__bar` and `.isi-tray__heading` never existed
     in the markup (see dtc-nxt-isi-tray.html.twig: the copy's own `.isi__heading`
     IS the tray heading, and `.isi-tray__content` is the scrolling region with
     the top padding). These two rules were dead code. */
  .isi-tray__content { padding-block-start: 16px; }
  /* 🔴 BOTH SURFACES, AND THE SECOND SELECTOR IS NOT REDUNDANT. Scoped to
     `.isi-tray` alone this left the STATIC block at the desktop 24px, three
     lines deep in a 293px column; the mobile static master draws 20px
     (`14361:73771`). But dropping the scope is not enough either — the tray
     heading carries its own `.isi-tray .isi__heading` rule above, and at
     (0,2,0) that outranks a bare `.isi__heading` here and silently puts the
     tray back to 24px. Keep both selectors. */
  .isi__heading,
  .isi-tray .isi__heading { font-size: 20px; }
  /* 300px per Ofer Shaal, 2026-08-10 — capped to the tray column's own width
     below it so a narrow phone (e.g. 320px) clips the column, not the text
     underneath `.isi-tray__inner`'s padding. Tray-only, unlike the size above. */
  .isi-tray .isi__heading { inline-size: min(300px, 100%); }
  .isi-tray__toggle { inset-block-start: 24px; }

  .isi {
    padding-inline: 24px;
  }
  .isi .isi__section {
    gap: 10.79px;
    padding-block: 24px;
  }

  /* A LOCAL OVERRIDE OF THE CONTENT TOKEN, measured and intentional — for
     the STATIC block only.

     The page standard at 375 is a 327px column (375 − 24 − 24). The ISI draws
     293 — Figma `24581:36575`, Section x=24 w=293. The 34px difference is not
     explained by anything in the design and Area23 own that question
     (`DONI-673`), but it IS what the canonical file draws, twice.

     Expressed as an override of `--layout-content` rather than a hardcoded
     `max-width`, so the ISI stays inside the layout system and inside the
     alignment check instead of escaping both. */

  /* 🔴 `.isi-tray__inner` DELIBERATELY DOES NOT GET THE 293px CAP (Ofer
     Shaal, 2026-08-10) — it was pinning the tray's scrollable column to 293
     across the ENTIRE below-768px range, not just at the 375 width the 293
     figure was measured at (there are no comps between 375 and 1440 — see
     the note above this media query). At any wider "mobile" width that left
     a growing dead gap between the text and the scrollbar/toggle. Without a
     local override, `.isi-tray__content`'s `min(100%, var(--layout-content))`
     inherits the global 1200px default and just fills the available width. */
}

/* ══════════════════════════════════════════════════════════════════════════
   Preferences
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .isi-tray,
  .isi-tray__icon {
    transition: none;
  }
}

@media (prefers-contrast: more) {
  .isi-tray { border-block-start: 3px solid var(--color-charcol, #1d2d3a); }
}

/* Forced-colours mode drops `background-color`, which is what paints the
   masked icon — so it would vanish. Fall back to a system colour. */
@media (forced-colors: active) {
  .isi-tray__icon,
  .isi .isi__toggle-slot {
    background-color: ButtonText;
  }

  /* The decorative scrollbar prototype paints its own colours
     (`--color-dark-coral`/`--color-white`), which forced-colours mode does
     not touch — it would render as an off-palette, possibly invisible
     control. Prefer the OS's own forced-colours-aware native scrollbar. */
  .isi-tray--scrollbar-ready .isi-tray__content {
    scrollbar-width: auto;
  }
  .isi-tray--scrollbar-ready .isi-tray__content::-webkit-scrollbar {
    display: block;
  }
  .isi-tray__scrollbar {
    display: none !important;
  }
}