/*
 * Legacy webOS compatibility.
 *
 * - webOS 4 / Chromium 53: no Grid, flex gap, backdrop-filter, or inset.
 * - webOS 5 / Chromium 68: Grid, but no flex gap, backdrop-filter, or inset.
 * - webOS 6 / Chromium 79: Grid and backdrop-filter, but no flex gap or inset.
 * - webOS 22 / Chromium 87+: supports all four features.
 *
 * The build generates a margin fallback for every top-level flex container
 * with `gap` and writes it to the companion legacy-webos-base.css under
 * `@supports not (inset: 0)`. `inset` is a proxy for the targeted webOS
 * versions, not an exact flex-gap test: Chromium 84-86 would receive both gap
 * and margins, but no targeted webOS release uses that engine range.
 * Generating the margin rules keeps them synchronized with source `gap`
 * declarations; Grid and backdrop-filter fallbacks remain hand-written because
 * their layout and contrast behavior is context-specific.
 *
 * Load order carries meaning. This file is linked LAST because every rule in it
 * must beat component CSS. The generated margins are the opposite — defaults a
 * component may override — so they are linked FIRST; see the header of
 * legacy-webos-base.css.
 *
 * Without backdrop-filter, translucent player panels lose contrast over video;
 * the fallback below makes them fully opaque.
 */

/*
 * A child's own `margin` is *extra* spacing on top of its container's `gap`,
 * but the generated fallback puts that gap in a margin too, and the child's
 * rule is both more specific and linked later — so on a gap-less engine it
 * replaces the gap instead of adding to it. Restate the sums.
 */
@supports not (inset: 0) {
  .tab-bar-inner > .tab-bar-account { margin-left: 52px; }
  .tab-bar-inner > .settings-icon { margin-left: 36px; }
  .epg-prog-title > .epg-bell-glyph { margin-left: 18px; }
  .settings-field > .settings-item-hint { margin-top: 14px; }
}

@supports not (backdrop-filter: blur(1px)) {
  .player-sidebar { background: rgb(20, 20, 35); }
  .player-menu,
  .player-osd,
  .number-entry { background: rgb(10, 10, 15); }
  /* Glass panels without the blur would be see-through: solid instead. */
  :root,
  html[data-theme] {
    --glass-tint: var(--glass-tint-solid);
    --glass-accent: var(--glass-accent-solid);
  }
}

/*
 * webOS 4.x (Chromium 53) — CSS Grid fallback.
 *
 * Chromium 53 has no CSS Grid, so `display: grid` collapses to block and grid
 * children stack vertically. This makes the settings menu render above the
 * settings content (instead of beside it) and the theme swatches stack in a
 * single column. `@supports not (display: grid)` targets exactly those engines,
 * so webOS 5+ (which has Grid) is unaffected.
 */
@supports not (display: grid) {
  /* Settings: nav sidebar beside content, not stacked on top. */
  .settings-view {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-flex-direction: row;
    flex-direction: row;
  }
  /* `flex: 0 0 auto` stands in for the `max-content` grid track: the sidebar
     sizes to its longest label, clamped by its own min/max-width. A fixed
     basis would clip the widest localized labels. */
  .settings-view > .settings-sidebar {
    -webkit-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 32px;
  }
  .settings-view > .settings-main {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Theme picker: swatch tiles wrap into a grid instead of a vertical stack.
     Grid puts the 18px gap only *between* tiles, so carry it on one side and
     pull the trailing row's back off. */
  .theme-swatch-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: -18px;
  }
  .theme-swatch-grid > .theme-swatch {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-flex: 0 0 calc((100% - 72px) / 5);
    flex: 0 0 calc((100% - 72px) / 5);
    margin: 0 18px 18px 0;
  }
  .theme-swatch-grid > .theme-swatch:nth-child(5n) {
    margin-right: 0;
  }

  .reminder-day-heading,
  .reminder-manager-row,
  .channel-epg-offset-controls {
    display: flex;
  }

  .reminder-day-line,
  .reminder-manager-details {
    flex: 1;
    min-width: 0;
  }

  .dropdown {
    display: inline-block;
  }

  .dropdown-sizer {
    display: none;
  }

  .reminder-day-label {
    flex: 0 0 112px;
  }

  .reminder-manager-time {
    flex: 0 0 150px;
  }

  .reminder-manager-remove {
    flex: 0 0 164px;
  }

  .channel-epg-offset-controls {
    margin-right: auto;
    margin-left: auto;
  }

  .channel-epg-offset-controls button {
    flex: 0 0 54px;
  }

  /* Fallback for engines without :focus-within, which the wrapper uses to
     highlight this field. Safe inside the Grid guard: Grid (Chrome 57)
     predates :focus-within (60), and unguarded it would stack a second
     glow ring. */
  .epg-mapping-search:focus {
    box-shadow: 0 0 0 3px var(--accent-glow);
  }
}