/* Shared HVB page field, observed on the live HVB site. Keep the field anchored
   to the viewport so the header and pinned tabs continue the page background. */
:root {
  --volt-page-background:
    radial-gradient(ellipse 38% 55% at 0% 0%, rgba(255,63,164,.14), transparent 100%),
    radial-gradient(ellipse 38% 55% at 100% 0%, rgba(8,216,209,.18), transparent 100%),
    linear-gradient(180deg, #0b0f18, #080b12 52%, #090d16);
  --volt-background-height: 100vh;
}
@supports (height: 100lvh) { :root { --volt-background-height: 100lvh; } }
html { background: #080b12; }
body, body.vm-shell { background: transparent; isolation: isolate; min-height: 100vh; }
body::before {
  content: ""; position: fixed; top: 0; left: 0; width: 100vw;
  height: var(--volt-background-height); z-index: -1; pointer-events: none;
  background: var(--volt-page-background);
}
body .branded-header,
body.vm-shell .branded-header,
body.vm-shell.vm-has-header-toggle .branded-header {
  background: var(--volt-page-background) !important;
  background-attachment: scroll !important;
  background-size: 100vw var(--volt-background-height) !important;
  background-position: var(--volt-surface-x, 0px) var(--volt-surface-y, 0px) !important;
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important;
}
body .branded-header::after { display: none !important; }
body.vm-shell:not(.vm-has-header-toggle) .branded-header {
  border-bottom: 1px solid rgba(48,214,202,.5) !important;
}
.vm-hvb-link { display: flex; width: 44px; height: 44px; align-items: center; justify-content: center; }
.vm-hvb-link img { width: 36px; height: 36px; object-fit: contain; }
.vm-hvb-link:focus-visible { outline: 2px solid #08d8d1; border-radius: 50%; }
body .tracker-account-button {
  position: relative;
  justify-content: center;
  padding-inline: 16px;
}
body #accountButtonLabel {
  display: block;
  flex: 1;
  min-width: 0;
  text-align: center;
  line-height: 1.25;
}
body .tracker-account-caret { position: absolute; right: 5px; }

@media (min-width: 901px) {
  body.vm-shell .branded-header { display: none !important; }
  body.vm-shell .shell { margin-left: 196px; padding-top: 0; }
  body.vm-shell .vm-nav {
    width: 196px;
    background: transparent;
    border-right: 0;
    display: flex; flex-direction: column;
  }
  body.vm-shell .vm-nav-brand { display: block; }
  body.vm-shell .vm-nav-logo { content: normal; }
  body.vm-shell .vm-nav-label { display: inline; }
  body.vm-shell .vm-hvb-link { margin-top: auto; flex-shrink: 0; order: 10; }
  body.vm-shell #homeView, body.vm-shell #trackingShowsView { padding-top: 28px; }
  body.vm-shell #marketplaceView { padding-top: 28px; }
  body.vm-shell .vm-nav > .account-bar {
    display: block;
    margin: 24px 0 10px !important;
    width: 100%;
  }
  body.vm-shell .vm-nav .tracker-account-shell { margin: 0; width: 100%; }
  body.vm-shell .vm-nav .tracker-account-button { width: 100%; max-width: none; min-height: 44px; }
  body.vm-shell .vm-nav .tracker-account-menu { left: 0; right: auto; max-width: calc(100vw - 32px); }
  body.vm-shell .vm-nav .vm-nav-links { margin-top: 0; }
  body.vm-shell .vm-sidebar-back { margin-top: 14px; max-width: 100%; }
}

@media (max-width: 900px) {
  body.vm-shell .shell, body.vm-shell.vm-nav-collapsed .shell {
    width: 100%; margin: 0;
    padding: 0 max(12px, env(safe-area-inset-right)) calc(80px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  body.vm-shell .branded-header {
    grid-template-columns: minmax(0, 1fr) min(40vw, 180px) minmax(0, 1fr);
    column-gap: 4px;
  }
  body.vm-shell .tracker-brand {
    visibility: visible; grid-column: 2; grid-row: 1;
    justify-self: center; width: 100%; min-width: 0;
  }
  body.vm-shell .tracker-brand-lockup { width: 100% !important; height: 48px; max-height: 48px; object-fit: contain; transform: translateY(-5px) scale(.9); }
  body.vm-shell .vm-header-mark { grid-column: 2; justify-self: center; }
  body.vm-shell .account-bar { grid-column: 3; justify-self: end; margin: 0; min-width: 0; }
  body.vm-shell .tracker-account-shell { width: clamp(66px, 23vw, 116px); max-width: 100%; }
  body.vm-shell .tracker-account-button { width: 100%; max-width: 100%; min-height: 40px; }
  body.vm-shell .vm-hvb-link { grid-column: 1; grid-row: 1; justify-self: start; }
  body.vm-shell .branded-header:has(.vm-header-back:not([hidden])) .vm-hvb-link { display: none; }
  body.vm-shell .vm-header-back { grid-column: 1; grid-row: 1; padding: 4px 6px; font-size: 11px; }
  body.vm-shell .vm-nav, body.vm-shell.vm-nav-collapsed .vm-nav {
    top: auto; bottom: 0; width: 100%; height: auto;
    padding: 6px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
    border-right: 0; border-top: 1px solid var(--vm-border);
    background: rgba(8,21,34,.96); backdrop-filter: blur(14px);
  }
  body.vm-shell .vm-nav-brand, body.vm-shell .vm-nav-toggle { display: none; }
  body.vm-shell .vm-nav-label { display: inline; }
  body.vm-shell .vm-nav-links { display: flex; margin: 0; gap: 4px !important; justify-content: space-between; background: transparent !important; }
  body.vm-shell .vm-nav-link, body.vm-shell.vm-nav-collapsed .vm-nav-link {
    flex: 1; min-width: 0; flex-direction: column; gap: 3px; padding: 5px 3px; font-size: 10px;
  }
}

/* Keep document scrolling (and sticky-header scroll events) on the viewport.
   overflow-x:hidden implicitly makes body an extra vertical scroll container,
   which is unreliable for fixed chrome during iOS standalone overscroll. */
@media (max-width: 900px) {
  html, body, body.vm-shell {
    overflow-x: clip;
    overscroll-behavior-y: none;
    scrollbar-width: none;
  }
  body * { scrollbar-width: none; }
  html::-webkit-scrollbar,
  body::-webkit-scrollbar,
  body *::-webkit-scrollbar { display: none; width: 0; height: 0; }

  body.vm-shell .vm-nav,
  body.vm-shell.vm-nav-collapsed .vm-nav {
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    /* Keep the safe-area-padded footer on its own composited viewport layer. */
    transform: translateZ(0);
    backface-visibility: hidden;
  }
}