/* app.css — PWA app-shell layer shared by index.php and detail.php.
   Loaded AFTER each page's own styles (index.php inline / detail.php hr.css),
   so it only adds the mobile-app chrome: bottom tab bar, safe-area insets,
   sticky compact header. Uses the same --token names both pages already define. */

:root{ --nav-h:58px; }

/* room for the fixed bottom bar (+ iOS home-indicator inset) */
body{
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px) !important;
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
}

/* the old floating toggle is replaced by the Theme tab in the bottom bar */
#themeToggle{ display:none !important; }

/* ---- bottom tab bar (injected by hr.js) ---- */
.app-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:9998;
  display:flex; align-items:stretch;
  min-height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -2px 14px var(--shadow);
}
.app-nav__item{
  flex:1 1 0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px;
  border:0; background:none; cursor:pointer;
  color:var(--dim); font:600 10.5px/1 "Segoe UI",system-ui,sans-serif;
  letter-spacing:.3px; text-transform:uppercase; text-decoration:none;
  padding:8px 4px; -webkit-tap-highlight-color:transparent;
  transition:color .12s ease, transform .08s ease;
}
.app-nav__item:hover{ color:var(--tx); text-decoration:none; }
.app-nav__item:active{ transform:scale(.94); }
.app-nav__item.is-active{ color:var(--acc); }
.app-nav__item svg{ width:23px; height:23px; display:block; }
.app-nav__item.is-active svg{ filter:drop-shadow(0 1px 4px color-mix(in srgb, var(--acc) 55%, transparent)); }

/* install pill lives in the bar too, only when the browser offers it */
.app-nav__item[hidden]{ display:none; }

/* native-feeling sideways scroll with a visible thumb so it's clearly swipeable */
.hscroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain; scrollbar-width:thin;
  scrollbar-color:var(--dim) transparent; scroll-snap-type:none; }
.hscroll::-webkit-scrollbar{ height:9px; }
.hscroll::-webkit-scrollbar-thumb{ background:var(--dim); border-radius:5px;
  border:2px solid var(--panel); }
.hscroll::-webkit-scrollbar-track{ background:transparent; }

/* dashboard schedule: on phones drop Dist + Rnrs so nothing overflows sideways */
@media (max-width:560px){
  #sched td, #sched th{ padding:6px 5px; }
  #sched th:nth-child(4), #sched td:nth-child(4),   /* Dist */
  #sched th:nth-child(5), #sched td:nth-child(5){ display:none; }
  #sched .badge{ margin-left:3px; }
  html, body{ overflow-x:hidden; }
}

@media (min-width:900px){
  /* on wide screens the bar centres and floats like a dock */
  .app-nav{ left:50%; right:auto; transform:translateX(-50%);
    bottom:16px; min-width:420px; border-radius:16px; border:1px solid var(--line); }
  body{ padding-bottom:calc(var(--nav-h) + 40px) !important; }
}

/* landscape phones (short height): squeeze the top chrome so the comparison
   table is visible without scrolling — rotate to see many columns at once */
@media (orientation:landscape) and (max-height:560px){
  body{ padding-top:6px; }
  h1{ font-size:16px; margin-bottom:6px; }
  #raceHeader{ font-size:0.92em; margin:4px 0 6px; }
  .button-row{ margin-bottom:6px !important; }
  .button-group{ margin-bottom:8px; gap:6px; }
  .button-group button{ padding:5px 10px; font-size:12px; }
  .watchline{ flex-direction:row; flex-wrap:wrap; gap:4px 16px; padding:5px 10px;
    margin:6px 0; font-size:12px; }
  .race-watch{ margin:8px 0; }
  .cmp-controls{ margin-top:6px; }
  /* keep the bar slim so it doesn't hog the short viewport */
  :root{ --nav-h:48px; }
  .app-nav__item{ font-size:9.5px; gap:2px; }
  .app-nav__item svg{ width:19px; height:19px; }
}