/* NVFS v26 - fixed navigation and workflow spacing */
:root {
  --nvfs-nav-height: 70px;
  --nvfs-nav-safe: max(env(safe-area-inset-bottom, 0px), 8px);
  --nvfs-nav-total: calc(var(--nvfs-nav-height) + var(--nvfs-nav-safe));
}

.bn-root {
  position: fixed !important;
  z-index: 80 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  width: min(100%, 760px) !important;
  height: var(--nvfs-nav-total) !important;
  min-height: var(--nvfs-nav-total) !important;
  padding: 5px 6px var(--nvfs-nav-safe) !important;
  transform: translateX(-50%) !important;
  align-items: stretch !important;
  background: rgba(12, 14, 17, .98) !important;
  border: 1px solid #30363d !important;
  border-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .32) !important;
  backdrop-filter: blur(16px) !important;
}

.bn-item {
  min-width: 0 !important;
  min-height: 58px !important;
  padding: 6px 2px 5px !important;
  gap: 4px !important;
  justify-content: center !important;
  border-radius: 6px !important;
  color: #89939e !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

.bn-item.active {
  color: #ffe000 !important;
  background: #251f05 !important;
  box-shadow: inset 0 2px 0 #ffe000 !important;
}

.bn-ic {
  width: 24px !important;
  height: 24px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

.bn-admin-backdrop {
  z-index: 81 !important;
  background: rgba(0, 0, 0, .22) !important;
}

.bn-admin-popup {
  z-index: 82 !important;
  right: max(10px, calc((100vw - 760px) / 2 + 10px)) !important;
  bottom: calc(var(--nvfs-nav-total) + 8px) !important;
  width: min(280px, calc(100vw - 20px)) !important;
  max-height: min(420px, calc(100svh - var(--nvfs-nav-total) - 28px)) !important;
  overflow-y: auto !important;
  border-radius: 8px !important;
}

.bn-admin-item {
  min-height: 46px !important;
  border-radius: 6px !important;
}

.bn-admin-badge {
  top: 7px !important;
  background: #e32626 !important;
}

/* Pages with the bottom bar always reserve its exact footprint. */
body:has(.bn-root) [class$="-root"] {
  padding-bottom: calc(var(--nvfs-nav-total) + 14px) !important;
}

body:has(.bn-root) .h-wrap,
body:has(.bn-root) .sp-wrap,
body:has(.bn-root) .mp-wrap,
body:has(.bn-root) .rq-wrap,
body:has(.bn-root) .rp-wrap,
body:has(.bn-root) .fp-wrap,
body:has(.bn-root) .gp-body,
body:has(.bn-root) .cp-wrap,
body:has(.bn-root) .dp-wrap {
  padding-bottom: calc(var(--nvfs-nav-total) + 18px) !important;
}

body:has(.bn-root) .toast {
  bottom: calc(var(--nvfs-nav-total) + 12px) !important;
}

/* Back controls are consistent across every workflow page. */
[class$="-back"], [class$="-back-link"] {
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Keep scoring and match setup focused; their bottom menu is intentionally hidden. */
.nm-root, .att-root, .sq-root, .toss-root, .st-root,
.sp-portrait-root, .sp-land-root, .fb-root {
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

@media (max-width: 360px) {
  .bn-item {
    font-size: 9px !important;
  }

  .bn-ic {
    font-size: 17px !important;
  }
}

@media (orientation: landscape) and (max-height: 520px) {
  :root {
    --nvfs-nav-height: 56px;
  }

  .bn-root {
    padding-top: 3px !important;
  }

  .bn-item {
    min-height: 46px !important;
    flex-direction: row !important;
    gap: 5px !important;
  }

  .bn-ic {
    width: 20px !important;
    height: 20px !important;
    font-size: 16px !important;
  }
}