/* ---------------------------------------------------------------------------
   LEGACY TV FALLBACKS — smart-TV browsers, not old desktops.

   The target that forced this file: LG webOS 6.0 (2021 NanoCell panels, e.g.
   55NANO75), whose browser is Chromium 79. Everything here is gated behind a
   class that only a browser missing the feature ever gets, so no modern
   browser is touched by a single declaration below.

   Flexbox `gap` is Chromium 84. It cannot be feature-queried: `@supports
   (gap: 1px)` returns TRUE on Chromium 79 because GRID gap has existed since
   66 — the query cannot tell the two apart. So main.js measures a real
   two-child flex column instead and sets `html.no-flex-gap` when the gap does
   not take. Without this the CTA buttons stack flush against each other, the
   button icons touch their labels, and the footer columns run together.

   Directions below mirror each rule's own flex-direction. Nothing in the
   sheet uses flex-wrap, so `> * + *` margins are exactly equivalent to gap.
--------------------------------------------------------------------------- */

/* --- column stacks --- */
.no-flex-gap #scroll-cue            > * + * { margin-top: 6px; }
.no-flex-gap .cta-actions           > * + * { margin-top: 1.1rem; }
/* .cta-actions flips to flex-direction:row at 640px (cinematic.css), so the
   column fallback above is the wrong axis there and the two store buttons
   touch. A TV is always past this breakpoint. */
@media (min-width: 640px) {
  .no-flex-gap .cta-actions > * + * { margin-top: 0; margin-left: 1.1rem; }
}
.no-flex-gap .widgets               > * + * { margin-top: 0.75rem; }
.no-flex-gap #blueprint .bp-promo-verdicts > * + * { margin-top: 10px; }
.no-flex-gap .site-footer-group     > * + * { margin-top: 2px; }

/* --- rows --- */
.no-flex-gap .btn-modern-light      > * + * { margin-left: 0.75rem; }
.no-flex-gap .btn-modern-dark       > * + * { margin-left: 0.75rem; }
.no-flex-gap .floating-ui-badge     > * + * { margin-left: 0.9rem; }
/* .v-row is `<i></i>` followed by a BARE TEXT NODE ("Ready"). Flex wraps that
   text in an anonymous item that gap spaces but `> * + *` can never select,
   so push off the swatch itself. */
.no-flex-gap #blueprint .bp-promo .v-row   > i       { margin-right: 11px; }
.no-flex-gap #blueprint .bp-her-standard   > * + * { margin-left: 18px; }
.no-flex-gap #blueprint .bp-leg     > * + * { margin-left: .5em; }
.no-flex-gap .site-footer-inner     > * + * { margin-left: 34px; }
.no-flex-gap .site-footer-cols      > * + * { margin-left: clamp(34px, 6vw, 96px); }
.no-flex-gap .site-footer-meta      > * + * { margin-left: 20px; }

/* The footer turns into a column stack under 620px — swap the axis with it.
   A 1080p TV never reaches this, but a phone on an old WebView can. */
@media (max-width: 620px) {
  .no-flex-gap .site-footer-inner > * + * { margin-left: 0; margin-top: 25px; }
  .no-flex-gap .site-footer-cols  > * + * { margin-left: 0; margin-top: 30px; }
  .no-flex-gap .site-footer-meta  > * + * { margin-left: 0; margin-top: 20px; }
}

/* --- the nav (src/nav.css) and /faq + /about (src/pages.css) ---
   The landing page gets `no-flex-gap` from src/main.js and the content pages
   from src/pages.js, so the nav is covered on all three. Only flex containers
   need listing; every grid gap in pages.css is fine on 79 (grid gap shipped in
   Chromium 66). Without these the nav mark sits flush against the wordmark,
   the four nav labels run into one word, and every FAQ number touches the
   question it belongs to. The nav pill is shrink-to-fit, so a missing gap here
   does not just look wrong — it changes the pill's width. */
.no-flex-gap .nav-inner       > * + * { margin-left: 22px; }
.no-flex-gap .nav-brand       > * + * { margin-left: 9px; }
.no-flex-gap .nav-links       > * + * { margin-left: 4px; }
.no-flex-gap .faq summary     > * + * { margin-left: 16px; }
.no-flex-gap .tl-head         > * + * { margin-left: 20px; }
.no-flex-gap .tl-numbered li  > * + * { margin-left: 16px; }

/* pages.css tightens these below 720/620px. A 1080p TV never gets here, but a
   phone on an old WebView does. */
@media (max-width: 720px) {
  .no-flex-gap .nav-inner > * + * { margin-left: 8px; }
  .no-flex-gap .nav-links > * + * { margin-left: 1px; }
}
@media (max-width: 620px) {
  .no-flex-gap .faq summary > * + * { margin-left: 12px; }
  .no-flex-gap .tl-head     > * + * { margin-left: 14px; }
}

/* aspect-ratio is Chromium 88. The footer monogram sets only a height and
   leans on the ratio for its width, so without it the SVG collapses to zero
   width and the mark disappears. 433/487 is the viewBox ratio. */
@supports not (aspect-ratio: 1 / 1) {
  .site-footer-mark { width: calc(clamp(34px, 3.3vw, 46px) * (433 / 487)); }
}