/* =============================================================
   FANATIK Site Phase 0+1 Hybrid v2.1
   DEV-6 · Chyron language picker
   -------------------------------------------------------------
   Surfaces:
     .chyron-tile         → top-right floating tile (desktop + mobile)
     .chyron-footer-link  → footer text-link variant (dual entry)
     .chyron-surface      → expanded sheet (panel on desktop, drawer on mobile)
       .chyron-backdrop   → mobile-only dimmer (dismissal path #1)
       .chyron-sheet      → list container
         .chyron-list     → ul of locale rows
           .chyron-row    → single locale (active or queued)
         .chyron-close    → mobile × button (dismissal path #4)

   WCAG AA contrast:
     lime #D3FE4C on #0A0A0A = 16.3:1  (AAA)
     white #FFFFFF on #0A0A0A = 19.2:1 (AAA)
     mute  rgba(255,255,255,0.55) on #0A0A0A ≈ 6.25:1 (AA)
     mute  on tile bg #111111 ≈ 5.5:1 (AA — passes for body but
            queued helper uses lime-on-dark / brighter mute to stay AA).

   Mobile-first. No external deps. JBM 700 16-18px lime.
   ============================================================= */

/* ---------- Component-local tokens ---------- */
.chyron-tile,
.chyron-footer-link,
.chyron-surface {
  --ch-black: #000000;
  --ch-off-black: #0A0A0A;
  --ch-tile-bg: #0A0A0A;
  --ch-sheet-bg: #0E0E0E;
  --ch-lime: #D3FE4C;
  --ch-white: #FFFFFF;
  --ch-mute: rgba(255, 255, 255, 0.62);     /* helper text on dark → AA 7.0:1 */
  --ch-mute-deep: rgba(255, 255, 255, 0.18);
  --ch-disabled: rgba(255, 255, 255, 0.50); /* queued rows — WCAG AA: 4.78:1 on #0E0E0E */

  /* P2 hex hygiene: tokenized near-blacks (hover/focus surfaces) */
  --ch-tile-hover-bg: #121212; /* tile hover + focus background */
  --ch-row-hover-bg: #141414;  /* active locale row hover + focus background */

  --ch-jbm: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type — JBM 700 16-18px (PLAN.md §4 v2.1 fix) */
  --ch-tile-size: 18px;     /* desktop preferred */
  --ch-tile-size-sm: 16px;  /* mobile fallback minimum */
  --ch-row-size: 14px;      /* v2.12.3 — CEO directive: shrunk from 18px so the open picker is more compact (was covering half the screen). Tile keeps its 18px broadcast register; rows can be smaller. */
  --ch-helper-size: 13px;   /* JBM 700 still legible at 13 */

  --ch-tile-inset: 24px;     /* mobile inset from edges */
  --ch-tile-inset-md: 80px;  /* desktop inset (PLAN.md §4 "80px+") */

  --ch-radius: 0;            /* brand uses square corners */
  --ch-border: 1px solid var(--ch-lime);
  --ch-border-mute: 1px solid var(--ch-mute-deep);

  --ch-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ch-dur: 200ms;
  --ch-drawer-dur: 240ms;
  --ch-z-tile: 60;
  --ch-z-surface: 70;       /* surface above tile so panel can overlap */
}

/* =============================================================
   1 · SKIP LINK (screen-reader only until focused)
   ============================================================= */
.visually-hidden-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.visually-hidden-focusable:focus,
.visually-hidden-focusable:focus-visible {
  position: fixed;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 12px;
  clip: auto;
  overflow: visible;
  background: var(--ch-off-black);
  color: var(--ch-lime);
  border: var(--ch-border);
  font-family: var(--ch-jbm);
  font-weight: 700;
  font-size: 14px;
  z-index: 9999;
  text-decoration: none;
}

/* =============================================================
   2 · TILE — TOP-RIGHT FLOATING
   ============================================================= */
.chyron-tile {
  /* v2.6 Agent-B FIX-3: root-cause investigation found the tile invisibility
     at 320/360/375w was a combination of:
       (1) `top: max(var(--ch-tile-inset), env(safe-area-inset-top) + 4px)` —
           on iOS Safari the safe-area-inset-top can read 47-59px during
           orientation transitions, pushing the tile lower than expected.
           Not invisibility, but visual mis-placement.
       (2) NO explicit `display` / `visibility` — relying on browser default
           for an unset attribute on a fixed element worked everywhere except
           certain Android Chrome 102-107 builds where a parent's display:none
           cascade-bug could affect fixed children.
       (3) The defensive `display: inline-flex !important` block at the
           bottom (line 559) WAS doing real work; without it the issue
           returned in QA. Root cause now fixed inline above — defensive
           block downgraded to non-!important guard.
     */
  position: fixed;
  /* Mobile: respect iOS notch / Dynamic Island via env(safe-area-inset-top).
     Clamp to a 12-28px range so a misread safe-area-inset-top can't push
     the tile below the visible fold. */
  top: clamp(12px, env(safe-area-inset-top, 0px) + 8px, 28px);
  right: var(--ch-tile-inset);
  z-index: var(--ch-z-tile);

  /* v2.6 Agent-B FIX-3: explicit display so engines never inherit a
     parent `display: none` cascade artifact. */
  display: inline-flex;
  visibility: visible;
  align-items: center;
  gap: 6px;

  margin: 0;
  padding: 8px 12px;          /* PLAN.md §4 "padding ~8-12px" */
  min-height: 44px;            /* iOS HIG tap-target */
  min-width: 44px;

  background: var(--ch-tile-bg);
  color: var(--ch-lime);
  border: var(--ch-border);
  border-radius: var(--ch-radius);
  cursor: pointer;

  font-family: var(--ch-jbm);
  font-weight: 700;
  font-size: var(--ch-tile-size-sm);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;

  /* 2026-05-22 audit fix: shorthand replaces (doesn't extend). Combined
     declaration here so hover color fade isn't wiped by the scroll-hide
     opacity/transform transition added later in the file. */
  transition:
    background-color var(--ch-dur) var(--ch-ease),
    border-color var(--ch-dur) var(--ch-ease),
    color var(--ch-dur) var(--ch-ease),
    opacity 240ms ease,
    transform 240ms ease;
}

@media (min-width: 768px) {
  .chyron-tile {
    top: var(--ch-tile-inset-md);
    right: var(--ch-tile-inset-md);
    font-size: var(--ch-tile-size);
    padding: 10px 14px;
  }
}

.chyron-tile__code {
  display: inline-block;
  color: var(--ch-lime);
}

.chyron-tile:hover {
  background: var(--ch-tile-hover-bg);
  color: var(--ch-white);
}
.chyron-tile:hover .chyron-tile__code {
  color: var(--ch-lime);
}

/* Keyboard parity — PLAN.md §4 mandatory.
   2px lime outline, offset 2px so it never collides with the lime border. */
.chyron-tile:focus-visible {
  outline: 2px solid var(--ch-lime);
  outline-offset: 2px;
  background: var(--ch-tile-hover-bg);
}

/* When tile is the open trigger, push lime fill onto the code to signal state. */
.chyron-tile[aria-expanded="true"] {
  background: var(--ch-lime);
  color: var(--ch-off-black);
}
.chyron-tile[aria-expanded="true"] .chyron-tile__code {
  color: var(--ch-off-black);
}

/* =============================================================
   3 · FOOTER DUAL ENTRY POINT
   ============================================================= */
.chyron-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin: 0;
  padding: 6px 0;
  background: transparent;
  border: 0;
  cursor: pointer;

  font-family: var(--ch-jbm);
  font-weight: 700;
  font-size: var(--ch-row-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ch-white);

  /* Underline indicates link-affordance; lime on hover/focus */
  text-decoration: underline;
  text-decoration-color: var(--ch-mute-deep);
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  /* BUG-039 · prevent "EN — Switch" wrap to 2 lines at 414w.
     The footer__lang-trigger sibling (in sections-tail.css, not
     owned by F2) is the primary footer entry — this chyron-footer-link
     is the secondary inline variant. Both should stay on one line. */
  white-space: nowrap;
}

.chyron-footer-link__divider {
  color: var(--ch-mute);
}

.chyron-footer-link__code {
  color: var(--ch-lime);
}

.chyron-footer-link:hover {
  text-decoration-color: var(--ch-lime);
}

.chyron-footer-link:focus-visible {
  outline: 2px solid var(--ch-lime);
  outline-offset: 4px;
}

/* =============================================================
   4 · EXPANDED SURFACE
   Desktop  → panel anchored below tile
   Mobile   → bottom-sheet drawer rising from base of viewport
   ============================================================= */
.chyron-surface[hidden] {
  display: none;
}

/* When JS toggles open, we also remove the hidden attr.
   Use [data-open="true"] for the animated entrance. */
.chyron-surface {
  /* Default mobile drawer presentation */
  position: fixed;
  inset: 0;
  z-index: var(--ch-z-surface);
  display: flex;
  align-items: flex-end;
  justify-content: stretch;
}

/* Backdrop — mobile only by default; CSS below scopes it OFF on desktop. */
.chyron-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity var(--ch-drawer-dur) var(--ch-ease);
}

.chyron-surface[data-open="true"] .chyron-backdrop {
  opacity: 1;
}

/* Sheet base (mobile drawer) */
.chyron-sheet {
  position: relative;
  width: 100%;
  max-height: 84vh;
  background: var(--ch-sheet-bg);
  border-top: var(--ch-border);
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform var(--ch-drawer-dur) var(--ch-ease);
}

.chyron-surface[data-open="true"] .chyron-sheet {
  transform: translateY(0);
}

/* Drawer drag-handle + close button */
.chyron-sheet__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -16px 8px;
  padding: 12px 16px 8px;
  background: var(--ch-sheet-bg);
  border-bottom: var(--ch-border-mute);
}

.chyron-sheet__grabber {
  display: block;
  width: 40px;
  height: 4px;
  background: var(--ch-mute-deep);
  border-radius: 2px;
  margin: 0 auto;
}

.chyron-close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 44px;          /* tap-target */
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--ch-white);
  cursor: pointer;
  transition: color var(--ch-dur) var(--ch-ease);
}

.chyron-close:hover {
  color: var(--ch-lime);
}

.chyron-close:focus-visible {
  outline: 2px solid var(--ch-lime);
  outline-offset: 2px;
}

/* =============================================================
   5 · LOCALE LIST + ROWS
   ============================================================= */
.chyron-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chyron-row {
  display: grid;
  /* v2.11.3 luxury · 4-column grid matching the V2.11.2 markup
     (flag SVG + code + divider + name — room/helper stripped).
     Was: 7-col grid leaving rows visually stretched with orphan
     tracks for non-existent room/helper cells.
     Now: flag  code  d1  name */
  grid-template-columns: auto minmax(2.5ch, auto) auto minmax(0, 1fr);
  grid-template-areas: "flag code d1 name";
  align-items: center;          /* v2.11.3 luxury: flag (15px) + code/name (~18px) share centre axis */
  /* v2.12.3 — column-gap tightened from 14px to 10px to match compact rows. */
  column-gap: 10px;

  padding: 10px 16px;            /* v2.12.3 — CEO directive: shrunk from 16px 20px so panel doesn't cover half the screen */
  min-height: 44px;             /* tap-target ≥ 44px (WCAG) — was 48px */
  border-bottom: var(--ch-border-mute);

  font-family: var(--ch-jbm);
  font-weight: 700;
  font-size: var(--ch-row-size);
  letter-spacing: 0.06em;        /* v2.11.3 luxury: was 0.04em — matches tile 0.06em */
  text-transform: uppercase;

  cursor: pointer;
  color: var(--ch-white);
  background: transparent;
  transition:
    background-color var(--ch-dur) var(--ch-ease),
    color var(--ch-dur) var(--ch-ease);
}

.chyron-row:last-child {
  border-bottom: 0;
}

/* v2.11.3 luxury: explicit flag rule (previously relied on auto-placement
   inside the now-removed 7-col grid). Width keeps the flag SVG at the
   broadcast-correct 4:3 ratio. */
.chyron-row__flag {
  grid-area: flag;
  /* v2.12.3 — shrunk from 20×15 to 16×12 to match the compact row */
  width: 16px;
  height: 12px;
  align-self: center;
}

.chyron-row__code   { grid-area: code;   color: var(--ch-lime); }
.chyron-row__name   { grid-area: name;   color: var(--ch-white); }
/* v2.11.3 luxury · V2.11.2 stripped room+helper from markup; rules kept
   for any latent re-introduction but no longer claim grid areas. */
.chyron-row__room   { color: var(--ch-mute); font-size: var(--ch-helper-size); }
.chyron-row__helper { color: var(--ch-mute); font-size: var(--ch-helper-size); }

.chyron-row__divider {
  color: var(--ch-mute-deep);
}

.chyron-row__divider:nth-of-type(1) { grid-area: d1; }
/* v2.11.3 luxury · :nth-of-type(2)/(3) dividers gone post-V2.11.2; rules
   removed (orphan, referenced non-existent d2/d3 areas). */

/* Active state — clickable, full opacity */
.chyron-row--active:hover {
  background: var(--ch-row-hover-bg);
}

.chyron-row--active:focus-visible {
  outline: 2px solid var(--ch-lime);
  outline-offset: -2px;
  background: var(--ch-row-hover-bg);
}

.chyron-row--active:hover .chyron-row__name,
.chyron-row--active:focus-visible .chyron-row__name {
  color: var(--ch-lime);
}

/* Current locale — v2.11.3 luxury: 3px lime inset edge-bar replaces
   the 4×4 lime square. Reads as broadcast-formal "now playing" rail
   instead of utilitarian bullet. Queued-row dimming is unaffected
   because this rule only fires on .chyron-row--current. */
.chyron-row--current {
  background: rgba(211, 254, 76, 0.06);
  box-shadow: inset 3px 0 0 var(--ch-lime);
}

/* Queued state — disabled, ARIA-disabled true.
   v2 fix: NOT just colour change — also cursor + click suppression handled in JS. */
.chyron-row--queued,
.chyron-row[aria-disabled="true"] {
  cursor: not-allowed;
  color: var(--ch-disabled);
}

.chyron-row--queued .chyron-row__code {
  color: var(--ch-disabled);
}

.chyron-row--queued .chyron-row__name,
.chyron-row--queued .chyron-row__room,
.chyron-row--queued .chyron-row__helper {
  color: var(--ch-disabled);
}

.chyron-row--queued:hover {
  background: transparent;
}

/* =============================================================
   6 · DESKTOP PANEL MODE
   Anchors below the tile (top-right). No backdrop. Click-outside
   dismiss is handled by chyron.js. Hover/focus-within keeps open.
   ============================================================= */
@media (min-width: 768px) {
  /* The surface stops being a full-viewport overlay on desktop. */
  .chyron-surface {
    position: fixed;
    inset: auto;
    /* Anchor below the tile: top = tile inset + tile height (~44) + gap (~10) */
    top: calc(var(--ch-tile-inset-md) + 52px);
    right: var(--ch-tile-inset-md);
    bottom: auto;
    left: auto;
    /* v2.12.4 — CEO directive: still too big at 420px. Shrunk to 320px so
       the desktop dropdown reads as a compact tile-anchored menu, not a
       half-screen sheet. */
    width: min(320px, calc(100vw - var(--ch-tile-inset-md) * 2));
    display: block;
    align-items: initial;
  }

  /* Backdrop is unused on desktop */
  .chyron-backdrop {
    display: none;
  }

  .chyron-sheet {
    /* v2.12.4 — was min(70vh, 560px); tightened to min(50vh, 420px) so the
       panel doesn't dominate the viewport. With 8 rows at 14px / 12px-padding
       (~44px each), 8 × 44 = 352px of row content + header/padding = ~420px
       max — comfortable single-screen dropdown. */
    max-height: min(50vh, 420px);
    background: var(--ch-sheet-bg);
    border: var(--ch-border);
    padding: 6px 12px 12px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition:
      transform var(--ch-dur) var(--ch-ease),
      opacity var(--ch-dur) var(--ch-ease);
  }

  .chyron-surface[data-open="true"] .chyron-sheet {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* Drag-handle + × button hidden on desktop */
  .chyron-sheet__header {
    display: none;
  }

  /* Row hover area gets a bit more breathing room on desktop */
  .chyron-row {
    padding: 12px 8px;
  }
}

/* =============================================================
   7 · REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .chyron-tile,
  .chyron-footer-link,
  .chyron-backdrop,
  .chyron-sheet,
  .chyron-row,
  .chyron-close {
    transition: none !important;
  }
  .chyron-sheet {
    transform: none !important;
  }
}

/* =============================================================
   8 · FORCED COLORS (Windows High Contrast)
   ============================================================= */
@media (forced-colors: active) {
  .chyron-tile,
  .chyron-sheet,
  .chyron-row {
    border-color: CanvasText;
  }
  .chyron-tile,
  .chyron-row__code,
  .chyron-row__helper,
  .chyron-row__room,
  .chyron-row__name,
  .chyron-footer-link__code {
    color: LinkText;
  }
  .chyron-tile:focus-visible,
  .chyron-row--active:focus-visible,
  .chyron-close:focus-visible,
  .chyron-footer-link:focus-visible {
    outline-color: Highlight;
  }
  .chyron-row--queued,
  .chyron-row[aria-disabled="true"] {
    color: GrayText;
  }
}

/* =============================================================
   9 · INERT (paired with chyron.js setting inert on background)
   Browsers without inert support get pointer-events fallback in JS.
   ============================================================= */
[inert] {
  pointer-events: none;
  user-select: none;
}

/* =============================================================
   10 · MOBILE GUARD (Wave 2 FIX-E · v2.6 Agent-B FIX-3 downgrade)
   -------------------------------------------------------------
   Root cause (safe-area-inset-top inflated reads + inheriting
   parent display:none in Android Chrome 102-107) is now fixed
   inline in §2 (top: clamp + explicit display + visibility).
   The mobile-narrow rule keeps the 16px insets for sub-480w
   viewports, but no longer needs !important — there is no
   higher-specificity rule competing with it.
   ============================================================= */
@media (max-width: 480px) {
  .chyron-tile {
    right: 16px;
    top: clamp(12px, env(safe-area-inset-top, 0px) + 8px, 24px);
  }
}

/* =============================================================
   11 · v2.6 Agent-B FIX-2: TABLET breakpoint · 768-959w
   -------------------------------------------------------------
   Desktop-panel mode already activates at ≥768w (§6 above).
   Tablet drawer width per audit: 480px right-aligned panel
   that anchors below the tile. The §6 rule pinned width to
   `min(420px, calc(100vw - var(--ch-tile-inset-md) * 2))` which
   at 768w viewport gives min(420, 608) = 420px — fine.
   At 800w viewport gives min(420, 640) = 420px — still fine.
   Bump to 480 in the explicit tablet range so the locale rows
   have more breathing room without colliding with the page edge.
   ============================================================= */
@media (min-width: 768px) and (max-width: 959px) {
  .chyron-surface {
    width: min(480px, calc(100vw - var(--ch-tile-inset-md) * 2));
  }
}

/* =============================================================
   12 · v2.6 Agent-B FIX-6: REDUCED MOTION SAFETY NET
   -------------------------------------------------------------
   §7 already disables transitions + drawer translate. Belt-and-
   braces here for the lime-fill state toggles + close-button.
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .chyron-tile,
  .chyron-tile[aria-expanded="true"],
  .chyron-row,
  .chyron-row--active:hover,
  .chyron-row--current,
  .chyron-close,
  .chyron-footer-link {
    transition: none !important;
    animation: none !important;
  }
}

/* =============================================================
   13 · v2.8 BROADCAST AUDIT FIXES · F2 (2026-05-14)
   -------------------------------------------------------------
   - BUG-015 · close-on-scroll: surface hides cleanly when closed
   - BUG-032 · queued-row staggered intro animation
   ============================================================= */

/* BUG-015 · Picker surface visual state when closed.
   The bug surfaced because `aria-expanded="true"` was set on the
   tile but JS forgot to clear `data-open` on the surface during
   scroll-dismiss. The surface kept its open transform and
   intercepted pointer events even though `hidden` was added.

   This block adds a CSS belt-and-braces: when the surface is NOT
   `[data-open="true"]`, force pointer-events off and opacity to
   zero. F3 handles the JS close-on-scroll wire-up; this rule
   ensures the surface visually vanishes the moment JS toggles
   the attribute, with no flash. */
.chyron-surface:not([data-open="true"]) {
  pointer-events: none;
}

.chyron-surface:not([data-open="true"]) .chyron-sheet {
  /* On desktop the sheet already fades via the §6 rules; on mobile
     the §4 transform: translateY(100%) does the work. Belt-and-braces
     opacity: 0 below catches any state where neither rule fired
     (e.g. JS-only attribute toggling without the data-open swap). */
  opacity: 0;
  pointer-events: none;
}

/* BUG-032 · Queued-row staggered intro keyframes.
   The chyron.js dispatcher mounts rows with `.chyron-row--queued`
   and is supposed to flip them to `.chyron-row--active` after a
   stagger delay. F3 will fix the JS so the swap actually fires;
   this CSS ensures both keyframes exist and the transition between
   them is visually smooth so a partial-load doesn't strand rows. */
@keyframes chyron-row-queued-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 0.5; /* matches --ch-disabled when in queued state */
    transform: translateY(0);
  }
}

@keyframes chyron-row-active-in {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 1;
  }
}

.chyron-row--queued {
  animation: chyron-row-queued-in 320ms var(--ch-ease) both;
  /* Per-row stagger applied via inline --i set by JS (mirrors the
     pattern used in founding-preview.css). Defaults to 0 so a row
     that mounts without a stagger token still fades in cleanly. */
  animation-delay: calc(var(--i, 0) * 48ms);
}

.chyron-row--active {
  animation: chyron-row-active-in 280ms var(--ch-ease) both;
  /* Active rows mount with a short delay-after-queued sequence so
     the visual flow reads as queued → active, not a hard swap. */
  animation-delay: calc(var(--i, 0) * 48ms + 200ms);
}

@media (prefers-reduced-motion: reduce) {
  .chyron-row--queued,
  .chyron-row--active {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .chyron-row--queued {
    opacity: 0.5 !important; /* preserve the disabled-look at rest */
  }
}

@media (forced-colors: active) {
  .chyron-row--queued,
  .chyron-row--active {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* F3 cross-dep — BUG-032 row stagger reveal classes.
   F3 added new JS classes (revealing → revealed) separate from the
   locale-status flags --queued / --active. These two classes carry
   the opacity stagger on picker open. */
.chyron-row--revealing {
  opacity: 0;
}
.chyron-row--revealed {
  opacity: 1;
  transition: opacity 240ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .chyron-row--revealing,
  .chyron-row--revealed {
    opacity: 1 !important;
    transition: none !important;
  }
}

/* ============================================================
   FW2 fix #9 — ROOMS chyron rotator (v2.11 PRUNE: removed)
   ------------------------------------------------------------
   The rotating hero rooms chyron + its 5-market flag tile
   aliases (.flag-{rs|it|fr|de|es}) were stripped with the
   rooms-rotator subsystem. The chyron picker rows continue to
   use the SVG flag sprites (#flag-{gb|rs|it|fr|de|es}) in
   index.html — those are separate and remain.
   ============================================================ */

/* ============================================================
   2026-05-22 CEO request: scroll-hide on chyron-tile
   ------------------------------------------------------------
   The EN language picker (.chyron-tile, top-right floating) was
   overlapping the app-tour step nav at mobile widths — same
   problem the .site-header (top-left FANATIK logo) had. Same
   fix: IntersectionObserver in index.html watches #appTourStage
   and toggles .is-scrolled-past-hero on both elements. Smooth
   240ms fade + lift; reduced-motion users get the state change
   without animation.
   ============================================================ */
/* 2026-05-22 audit fix: transition declaration removed — it was a shorthand
   that silently replaced the earlier hover transition (background-color,
   border-color, color). Opacity + transform timings now live in the
   combined declaration at ~line 149. */
.chyron-tile.is-scrolled-past-hero {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

@media (prefers-reduced-motion: reduce) {
  .chyron-tile {
    transition: none;
  }
}