/* OBEINSON FREQUENCY X — the bottom of the app clears the browser's bar.
 *
 * viewport-fit.js publishes two variables from `visualViewport`:
 *
 *   --obnBarH   how much of the bottom the phone browser's bar is covering now
 *   --obnVVH    the height the person can genuinely see
 *
 * Only --obnBarH is used here, deliberately. --obnVVH is still published because
 * it is the honest measurement and worth having, but the one thing it was used
 * for — capping the full-screen player — was a bug, and the note further down
 * explains why sizing anything to it needs care.
 *
 * Everything here hangs off --obnBarH, which is `0px` whenever there is no bar
 * (and on any browser without `visualViewport`). At 0px every rule below
 * computes to exactly what the app does today, so this file costs nothing when
 * it has nothing to do — and when the bar slides in, the furniture rises with
 * it instead of hiding underneath.
 *
 * Phone-scoped throughout. A desktop browser's chrome is outside the window
 * and never covers the page, so none of this applies there.
 */

/* The bottom tab bar. It is `position:sticky; bottom:0`, which sticks it to
   the bottom of a window the browser has not admitted is shorter. */
html.obn-phone .mobtabs {
  bottom: var(--obnBarH, 0px) !important;
}

/* THE FULL-SCREEN PLAYER: IT STAYS FULL SCREEN, AND THAT IS THE FIX
 *
 * This card is `position:fixed; inset:0`, so it is exactly as tall as the
 * window. It used to be capped here with `max-height: var(--obnVVH)` — "never
 * taller than what the person can actually see" — which sounds right and is
 * not, because capping a fixed, inset:0 box does not move it anywhere. It just
 * makes it SHORTER than the screen, and the catalog behind it shows through the
 * strip that is left. That is the "overlapping at the bottom" the player was
 * reported for: the player stopping partway down with the page visible beneath.
 *
 * THE PART THAT MADE THIS HARD TO SEE, WRITTEN DOWN SO IT IS NOT REPEATED
 *
 * setFull() calls `c.requestFullscreen()`. Where that exists — Android Chrome,
 * every desktop browser, and headless Chromium — the browser hides its own bars
 * and the UA stylesheet's `:not(:root):fullscreen { max-height:none !important }`
 * takes over. A user-agent important declaration outranks every author rule
 * there is, so on those platforms the cap never applied and removing it changes
 * nothing. iOS Safari has no element fullscreen at all (video only), so there
 * the cap was the only rule standing and the card really did come up short.
 *
 * So the bug existed on exactly the platform the tests could not see, and a
 * before/after run in this sandbox showed no difference while being completely
 * wrong. A probe has to delete `Element.prototype.requestFullscreen` before the
 * page loads to stand in for an iPhone; check `document.fullscreenElement`
 * first, and you know which of the two browsers you are looking at. With that
 * in place: capped, the card measured 752px in an 852px window with a 100px
 * bar; uncapped it measures 852 and the page can no longer appear below it.
 *
 * WHAT KEEPS THE CONTROLS CLEAR OF THE BAR INSTEAD
 *
 * The padding below, which is what --obnBarH was always for. The content that
 * ends up under the bar is reachable by scrolling, and the padding guarantees
 * the last of it clears the bar at the end of that scroll. That is how every
 * other scrolling page on a phone behaves, and it is a far smaller cost than a
 * full-screen surface that is visibly not full screen.
 */

/* The full-screen player is `position:fixed; inset:0` — on a phone that is the
   taller, pretend window, so its transport controls are the first thing the
   bar swallows. The padding already reserves room for the tab bar; this adds
   the bar's own height to it. */
html.obn-phone .nowFab.full {
  padding-bottom: calc(
    var(--obnTabsH, 64px) + var(--obnBarH, 0px) + 16px + env(safe-area-inset-bottom, 0px)
  ) !important;
}

/* The now-playing dock, and the spinning mark that sits clear of it. Both are
   already measured off --obnTabsH; they need the same extra lift. */
html.obn-phone .obnNpDock.on {
  bottom: calc(
    var(--obnTabsH, 0px) + var(--obnBarH, 0px) + env(safe-area-inset-bottom, 0px)
  ) !important;
}

html.obn-phone .obnBrandBadge {
  bottom: calc(
    var(--obnTabsH, 0px) + var(--obnBarH, 0px) + 12px + env(safe-area-inset-bottom, 0px)
  ) !important;
}

html.obn-phone body.obnNpDocked .obnBrandBadge {
  bottom: calc(
    var(--obnTabsH, 0px) + var(--obnBarH, 0px) + 70px + env(safe-area-inset-bottom, 0px)
  ) !important;
}

/* The floating Donate and Share buttons, which hang off --obnDockH. */
html.obn-phone #obnShareLaunch,
html.obn-phone #obnDonateDock {
  bottom: calc(
    var(--obnDockH, 56px) + var(--obnBarH, 0px) + 12px + env(safe-area-inset-bottom, 0px)
  ) !important;
}

/* The entry gates centre their card inside a fixed, full-window overlay, so
   with the bar up the card centres against a bottom the person cannot see and
   the buttons drift under the chrome. Padding the overlay re-centres the card
   in the part of the screen that is actually visible. pin-screen.css sizes
   these cards against `100% - 16px` of this same box, so they shrink to match
   rather than overflow. */
html.obn-phone .eulaOv,
html.obn-phone #pinOv,
html.obn-phone #regOv,
html.obn-phone #tvConsent,
html.obn-phone #obnVolWarn {
  padding-bottom: calc(var(--obnBarH, 0px) + env(safe-area-inset-bottom, 0px)) !important;
}

/* A note on testing any of this, because it cost a long detour:
 *
 * headless Chromium DOES support element fullscreen, so the player it renders
 * is not the player an iPhone renders, and the bug is invisible in it. A probe
 * has to delete Element.prototype.requestFullscreen before the page loads to
 * stand in for iOS Safari. Checking `document.fullscreenElement` first tells
 * you which of the two you are actually looking at. */