/* ============================================================================
   site.css — the chrome that is the same on every page.
   Linked as /site.css (absolute) from every HTML entry point, before the page's
   own stylesheet.

   It exists because the nav used to be different on every route: the darts
   solver had a "← all tools" corner link, the tracker had "← solver", the stud
   solver had no way home at all, and /shits/, /tv/ and privacy.html were dead
   ends you could only leave with the back button. Two rules now:

     tier 1  .sitenav    where in the SITE you are   — identical on every page
     tier 2  .mode-tabs  where in the TOOL you are   — per page, same styling

   The tier-2 rules used to be copy-pasted (identically) into darts/styles.css,
   stud/styles.css and uth/styles.css; they live here once now so a tab looks
   the same whether it switches a panel or navigates to another page. That is
   deliberate: tabs are grouped by intent, not by implementation, so the reader
   should not be able to tell which is which.

   Colours are written as var(--x, literal). The app stylesheets define the
   palette on :root, but the hub, /tv/, /shits/ and privacy.html don't — the
   fallbacks are what those pages actually render.
   ========================================================================== */

/* ---------- tier 1: the site bar ---------- */

/* Not sticky, on purpose. It scrolls away with the page header: the Match
   scoreboard and the tracker's live view need every vertical pixel on a phone,
   and a pinned bar is 44px of permanent cost for a control you use twice a
   session. */
.sitenav {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  width: 100%;
  flex: 0 0 auto;   /* the hub, /shits/ and /tv/ are column flex bodies — don't let it squash */
  padding: 0 12px;
  background: #0b0f14;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: .85rem;
  font-weight: 650;
  line-height: 1;
  /* narrow phones scroll the row rather than wrapping it — a wrapped nav
     changes the page's height and shoves the content below it down */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sitenav::-webkit-scrollbar { display: none; }
.sitenav a { text-decoration: none; white-space: nowrap; }

.sitenav-home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 6px 8px;
  border-radius: 9px;
  color: var(--ink, #e8edf2);
}
.sitenav-home:hover { background: rgba(255, 255, 255, .06); }

.sitenav-sep { flex: 0 0 auto; width: 1px; height: 20px; background: rgba(255, 255, 255, .12); }

.sitenav-links { display: flex; align-items: center; gap: 4px; }
.sitenav-links a {
  padding: 6px 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted, #93a1b0);
}
.sitenav-links a:hover { color: var(--ink, #e8edf2); background: rgba(255, 255, 255, .06); }
/* current page: tinted, not filled — the filled gold pill is tier 2's active
   state, and the two rows must not compete for the eye */
.sitenav-links a[aria-current="page"] {
  color: var(--gold, #f0c419);
  background: rgba(240, 196, 25, .10);
  border-color: rgba(240, 196, 25, .35);
}

/* Tighten up on narrow phones — the wordmark plus three tool pills still fit
   at 390px, so nothing has to be hidden or scrolled to. */
@media (max-width: 430px) {
  .sitenav { gap: 8px; padding: 0 8px; }
  .sitenav-links a { padding: 6px 9px; }
}

/* ---------- tier 2: in-tool tabs ---------- */

.mode-tabs {
  max-width: 1180px;
  margin: 16px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* a <button> switches a panel, an <a class="tab-link"> navigates to a sibling
   page — same pill either way */
.mode-tabs button,
.mode-tabs a.tab-link {
  background: var(--panel, #171c24);
  border: 1px solid var(--line, #2a323d);
  color: var(--muted, #93a1b0);
  border-radius: 999px;
  padding: 7px 18px;
  font-weight: 650;
  text-decoration: none;
}
.mode-tabs button.active,
.mode-tabs a.tab-link.active {
  background: var(--gold, #f0c419);
  border-color: var(--gold, #f0c419);
  color: #241c02;
}
.mode-tabs button:not(.active):hover,
.mode-tabs a.tab-link:not(.active):hover {
  border-color: var(--gold, #f0c419);
  color: var(--gold, #f0c419);
}

/* second-level nav inside a tab (stud's Practice / Strategy groups) */
.sub-tabs {
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 0 16px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.sub-tabs::before { content: '↳'; color: var(--muted, #93a1b0); font-size: .9rem; }
.sub-tabs button {
  background: transparent;
  border: 1px solid var(--line, #2a323d);
  color: var(--muted, #93a1b0);
  border-radius: 999px;
  padding: 4px 14px;
  font-size: .85rem;
  font-weight: 600;
}
.sub-tabs button.active { border-color: var(--gold, #f0c419); color: var(--gold, #f0c419); background: rgba(240, 196, 25, .08); }
.sub-tabs button:not(.active):hover { border-color: var(--muted, #93a1b0); color: var(--ink, #e8edf2); }

@media (max-width: 900px) {
  .mode-tabs, .sub-tabs { justify-content: center; gap: 6px; margin-top: 12px; padding: 0 10px; }
  /* fat-finger targets: these are tapped between throws */
  .mode-tabs button, .mode-tabs a.tab-link { padding: 9px 14px; font-size: .85rem; }
}

/* Phones: one row that scrolls sideways instead of wrapping to two. A wrapped
   tab row changes the page's height per tab count and costs ~44px of fold —
   the same reasoning as the sitenav's overflow-x above. */
@media (max-width: 640px) {
  .mode-tabs, .sub-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-top: 10px;
  }
  .mode-tabs::-webkit-scrollbar, .sub-tabs::-webkit-scrollbar { display: none; }
  .mode-tabs button, .mode-tabs a.tab-link, .sub-tabs button {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

/* Touch polish, everywhere the shared chrome loads: kill the grey iOS tap
   flash (each app paints its own pressed state) and the 300ms double-tap
   wait on the controls that get hammered mid-game. */
.sitenav a, .mode-tabs button, .mode-tabs a.tab-link, .sub-tabs button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mode-tabs button:active, .mode-tabs a.tab-link:active, .sub-tabs button:active {
  transform: scale(.96);
}
.mode-tabs button, .mode-tabs a.tab-link, .sub-tabs button { transition: transform .06s ease, background .15s ease, color .15s ease, border-color .15s ease; }
@media (prefers-reduced-motion: reduce) {
  .mode-tabs button:active, .mode-tabs a.tab-link:active, .sub-tabs button:active { transform: none; }
}