/**
 * @file
 * 🔒 The indication bar. CHR-8 / DONI-721. REGULATED SURFACE.
 *
 * Canonical Figma `PMOumVEsuQEHJFYkbGBD84`, canvas `24410:65586`
 * 🟢 `🖥️ Layouts (For PHASE 2) 7-29-2026`.
 *
 *   desktop  `24581:39137`  1440×59  padding 120 / 8   text node 1076×43
 *   mobile   `24581:30087`   375×135 padding  24 / 8   text node  327×119
 *   text     `24581:30089`   #515861 / Steel
 *
 * ── THERE IS NO BREAKPOINT IN THIS FILE, AND THAT IS THE POINT ─────────────
 *
 * Both heights fall out of the copy. 59 is 8 + 43 + 8; 135 is 8 + 119 + 8.
 * The only thing that changes between the two frames is the gutter, and
 * `.l-band` already switches that at 768 for the whole theme (FND-4). A
 * `@media` block here would be a second place to disagree about one number.
 *
 * The mobile text node is 327 wide — exactly `375 - 24 - 24`, the container at
 * mobile. It is not a fixed measure, so nothing is capped here. See the note
 * on 1076 below.
 *
 * ── 🔴 #eb6f56, NOT #f16b50 ────────────────────────────────────────────────
 *
 * `--color-coral-band`, not `--color-coral`. This is the single easiest thing
 * to get wrong here, and frame `24410:65589` settles it — it draws the bar and
 * the `Stay updated` button in ONE image, at two different corals:
 *
 * | In `24410:65589`      | Node          | Codegen fill              | `Coral` |
 * |-----------------------|---------------|---------------------------|---------|
 * | `Stay updated` button | `24581:30078` | `var(--coral,#f16b50)`    | #f16b50 |
 * | this bar              | `24581:30087` | `#eb6f56` (bare literal)  | #eb6f56 |
 *
 * 🔴 READ THE VALUE, NEVER THE NAME. The last column is `get_variable_defs` on
 * each node — the SAME variable name resolves to two different colours inside
 * one frame. Two things in that file answer to `Coral`. That is why this theme
 * carries `--color-coral` AND `--color-coral-band` as separate tokens, and why
 * aliasing one to the other would be a brand change, not a tidy-up.
 *
 * ── 🔴 TEXT IS WHITE, AND IT FAILS AA ON PURPOSE ───────────────────────────
 *
 * Figma draws `White` `#ffffff` on both frames — `text-[color:var(--white,…)]`
 * on `I24410:65587;24231:88341` (desktop) and `I24410:65589;24231:88668`
 * (mobile), and an eyedropper over the rendered bar returns `#ffffff` glyph
 * cores over `#eb6f56` with no other ink present.
 *
 * White on `--color-coral-band` measures 3.03:1, under the 4.5:1 AA bar for
 * 16px body text. That is REPORTED on DONI-866, never repaired here. Darkening
 * this to Navy is what DONI-721 failed QA for the first time — it measured a
 * comfortable 4.66:1 and was the wrong colour.
 *
 * ── THE DROP SHADOW ────────────────────────────────────────────────────────
 *
 * Effect metadata on `24581:39137`: DROP_SHADOW, `#51586129`, offset (0, 8),
 * radius 24, spread -4. So `0 8px 24px -4px` at `--color-steel` 16%.
 *
 * ⚠️ The generated code says `drop-shadow-[0px_8px_12px_…]` — 12px, half.
 * That is Tailwind's own scale, not the design. The effect metadata is the
 * value; the class name is a label.
 *
 * `box-shadow`, not `filter: drop-shadow()`, because only box-shadow has a
 * spread and the spread here is negative.
 *
 * `position: relative` + `z-index` because a shadow cast DOWN by 8px lands on
 * whatever follows the bar, and on Home that is an opaque hero image. Without
 * a stacking context the hero paints over it and the shadow silently does not
 * exist. That is an inference from the design drawing a downward shadow, not
 * a measured value — but the alternative is shipping an effect that never
 * renders.
 *
 * ── WHAT THIS FILE DELIBERATELY DOES NOT DEFINE ───────────────────────────
 *
 * - ⛔ A `max-inline-size` of 1076px on the copy. The desktop text node
 *   measures 1076 inside a 1200 column, but each paragraph is ONE line at
 *   both widths — measured in Chrome at innerWidth 1440 — so the cap changes
 *   no rendered pixel. It is a Figma fixed-frame leftover, and re-imposing it
 *   would add a measure no artboard between 375 and 1440 validates.
 *   (Contrast CHR-7, where the mobile 227px title box IS load-bearing: it is
 *   what wraps one page's title to two lines and makes that band 96 not 70.)
 *
 * - ⛔ Anything for the three hidden `Icons` slots. Not a rule, not a
 *   modifier, not a placeholder. See indication-bar.twig.
 *
 * - ⛔ A link or button state. The mobile text sits in a node NAMED `Button`
 *   (`24581:30089`) with no href and no interaction drawn. Names are not
 *   behaviour.
 *
 * ── ISI ───────────────────────────────────────────────────────────────────
 *
 * This bar sits at the TOP of the page, directly under the nav — `y=146` on
 * `24410:65587`, `y=104` on mobile. The ISI tray is bottom-fixed. They do not
 * meet, and nothing here can occlude the tray.
 */

.indication-bar {
  position: relative;
  z-index: 1;
  padding-block: 8px;
  background-color: var(--color-coral-band);
  color: var(--color-white);
  box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--color-steel) 16%, transparent);
}

.indication-bar__body {
  margin: 0;
  color: var(--color-white);
  font-family: var(--font-agenda);

  /* `Size/Footnote` = 16, the same variable css/base/type.css reads. Weight
     700 — the style on the node is `Agenda:Bold`, so `.t-footnote` (400) is
     the wrong class here. `normal` is correct on agenda; it resolves to 1.16.
     It is banned on tilt-neon only, where it resolves to 1.57. */
  font-size: var(--size-footnote);
  font-weight: 700;
  line-height: normal;
}

/* 5px, from the gap Figma draws between the two paragraphs. Adjacent-sibling
   so a one-paragraph indication carries no stray space. */
.indication-bar__body + .indication-bar__body {
  margin-block-start: 5px;
}