/*
  DEMO TOOL · Status Bar Kit v1
  First earned on Automax Texoma (Oct 2026). Pair with status-bar.js.
  Requires <meta name="viewport" content="..., viewport-fit=cover">.
*/

html {
  background-color: var(--sb-page-bg, #000);
}

[data-sb-header] {
  padding-top: env(safe-area-inset-top, 0px);
  transition: none !important;
}

/* A clear hero must start at y=0 under the header, so the header floats instead of taking space (sticky/static push the hero down). */
html[data-sb-overlay] [data-sb-header] {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
}

.sb-cap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: max(env(safe-area-inset-top, 0px), 6px);
  z-index: 250;
  pointer-events: none;
  transition: none !important;
}

/* Over a clear hero nothing opaque may touch y=0, or Safari tints the status bar instead of showing the hero. */
html[data-sb-state="clear"] .sb-cap {
  display: none;
}

/* Safari tints from the page under an open menu too, so light content must not sit behind it. */
html[data-sb-state="menu"] [data-sb-under] {
  visibility: hidden;
}

/*
  Safari only draws page content behind the clock once the page is scrolled, so a clear hero is taller
  by the bleed and status-bar.js rests the page at that offset. Use var(--sb-bleed-active) in the hero height.
*/
:root {
  --sb-bleed-active: 0px;
}
@media (hover: none) and (pointer: coarse) {
  html[data-sb-bleed] {
    --sb-bleed-active: var(--sb-bleed, 56px);
  }
}
html[data-sb-bleed] [data-sb-hero] {
  min-height: calc(100svh + var(--sb-bleed-active));
}