/* css/nav.css — Bottom nav (44 Shots / NOMOS).
   Owned by js/nav.js. Scoped to nav.bottom-nav (DOM id="tabs" preserved
   for backward compat with existing handlers in index.html). Styles for
   the MORE panel and stub-panel placeholders also live here. */

nav.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 50;
  /* HIG floor — prevents nav from collapsing below visible footprint
     in finger mode if computed button height drops unexpectedly
     (font fallback, dynamic viewport, PWA scroll behavior). Landscape
     `height: 40px !important` below still wins, so this is portrait-only
     in practice. */
  min-height: 44px;
}
/* Defensive floor for finger mode (no input-mode-pen class). Anchors
   nav at the natural button stack height (8 + 22 svg + 3 + ~11 label
   + 10 = 54) in case computed height differs from expected. Pen mode
   already has min-height:60 on buttons cascading to nav children. */
body:not(.input-mode-pen) nav.bottom-nav {
  min-height: 54px;
}
/* Finger-mode icon + label floors. Pen mode gets visual size via the
   body.input-mode-pen min-height:60 cascade on buttons; finger mode
   had no equivalent and was rendering icons at ~18-20 px + labels
   invisible on Tim's iPad (game-day 2026-05-10). Bump svg to 24 and
   labels to 11 so finger mode reads cleanly without forcing pen-mode
   60×60 buttons. Landscape rules below have !important on font-size:0
   + svg:22, so labels stay hidden + svg stays 22 in landscape. */
body:not(.input-mode-pen) nav.bottom-nav button {
  font-size: 11px;
  min-height: 54px;
}
body:not(.input-mode-pen) nav.bottom-nav button svg {
  width: 24px;
  height: 24px;
}
nav.bottom-nav button {
  flex: 1;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  padding: 8px 4px 10px;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  transition: color .15s;
}
nav.bottom-nav button svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
nav.bottom-nav button.active { color: var(--accent); }

/* Landscape no-scroll override (matches the rule that lived inline in
   index.html before the extraction). 40px nav, no labels. */
@media (orientation: landscape) and (max-height: 1024px) {
  nav.bottom-nav {
    height: 40px !important;
    min-height: 40px !important;
    padding-top: 0 !important;
    padding-bottom: env(safe-area-inset-bottom) !important;
  }
  nav.bottom-nav button {
    padding: 4px 4px !important;
    font-size: 0 !important;
    gap: 0 !important;
  }
  nav.bottom-nav button svg {
    width: 22px !important;
    height: 22px !important;
  }
}

/* MORE panel — list of secondary destinations. */
#panel-more .more-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
#panel-more .more-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  min-height: 44px;
  font-weight: 500;
  width: 100%;
}
#panel-more .more-item:hover { border-color: var(--accent); }
#panel-more .more-item .more-icon {
  width: 22px; height: 22px;
  color: var(--accent);
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#panel-more .more-item .more-arrow {
  margin-left: auto;
  color: var(--text-muted);
  font-size: 18px;
}

/* Stub modules — "Coming soon" placeholder used by Whiteboard / Feed
   (and Lineup until the full build lands). */
.stub-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 50vh;
  text-align: center;
  font-family: var(--sans);
  color: var(--text-muted);
  padding: 24px;
}
.stub-panel h2 {
  margin: 0 0 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 32px;
  font-weight: 300;
  color: var(--stat);
  letter-spacing: .02em;
}
.stub-panel p {
  margin: 0;
  font-size: 13px;
  letter-spacing: .04em;
  line-height: 1.6;
  max-width: 320px;
}