/* ═══════════════════════════════════════════════════════════════
   sticky-pill.css — solid backdrop behind the sticky caption pill
   ───────────────────────────────────────────────────────────────
   Luke flag (2026-05-13): the
   "Universal Auxiliary Communication System / Tap a tile to speak"
   pill was translucent — scrolling tiles bled through behind it.
   This module overrides the styles.css base so the WRAP region
   (the sticky strip below the tt-nav) is solid black, and the
   pill itself is fully opaque too. No more see-through.

   Loaded AFTER styles.css and bottom-rail.css so these rules win
   the cascade without !important. Keeps styles.css off the growth
   path (3,700-line HARD STOP).
   ═══════════════════════════════════════════════════════════════ */

.sentence-bar-wrap {
  /* 2026-05-13 v3: switched from sticky → fixed. Sticky kept the
     wrap inside .app-layout's 600px width and forced an awkward
     54px padding-top to clear the nav at scroll engagement, which
     left a black bar floating mid-page at scroll-0. Fixed pins
     the pill always-at-top under the nav, full viewport width,
     no natural-flow gap. Mirrors the West Hartford kiosk surface. */
  position: fixed;
  top: 44px;                       /* 2026-05-13: was 49 px, Luke saw a 5 px seam — moved up to flush against nav */
  left: 0;
  right: 0;
  width: auto;                     /* escapes the 600px parent */
  max-width: none;
  z-index: 50;                     /* below tt-nav (10001) + Settings (200) */
  background: #000;
  padding: 8px 12px;
  margin: 0;
}

/* Hide the wrap when the pill is empty (no content yet) so we don't
   leave a thin black strip pinned under the nav. */
.sentence-bar-wrap:has(> .sentence-bar:empty:not(.transcript)) {
  display: none;
}

.sentence-bar {
  /* Pill stays centered + constrained to match .app-layout content
     width (600px). Fully opaque so the pill itself never reveals
     content underneath either. */
  max-width: 576px;                /* 600px app-layout - 2×12px wrap pad */
  margin: 0 auto;
  background: #1a1820;
  border: 1px solid rgba(255, 255, 255, 0.10);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Make room for the fixed pill so the TinkySpeak header + lang
   pickers don't sit hidden behind it at scroll 0. ~80 px clears
   the pill bar (8 + 64 + 8) below the nav. */
.app-header {
  margin-top: 80px;
}