/* Hannah Runs — mobile + cross-browser polish
   Loaded AFTER each page's inline <style>, so it wins the cascade.
   Applies fixes that aren't covered by each page's existing media queries. */

/* Prevent accidental horizontal page scroll (common on iOS with 100vw elements) */
html, body { max-width: 100%; overflow-x: hidden; }

/* iOS Safari: don't auto-resize text when rotating */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Better tap targets on iOS */
button, .btn, .chip, a.chip, input, select, textarea {
  -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  touch-action: manipulation;
}

/* Prevent iOS from zooming on form inputs (requires 16px+ font) */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
  .field.time input { font-size: 18px !important; }  /* keep time field prominent */
}

/* ============ NAV BARS — wrap gracefully on mobile ============ */
@media (max-width: 760px) {
  /* Dashboard top bar: stack brand + nav */
  .topbar {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 14px;
  }
  .topbar .status {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 5px !important;
    justify-content: flex-start !important;
  }
  .topbar .status a {
    font-size: 9.5px !important;
    padding: 6px 10px !important;
    letter-spacing: 0.12em !important;
  }
  .topbar .brand .title { font-size: 15px !important; }
  .topbar .brand .sub { font-size: 10px !important; }

  /* Progress + Log nav pills: stack */
  .nav {
    flex-direction: column;
    gap: 12px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
  }
  .nav .links {
    width: 100%;
    flex-wrap: wrap !important;
    gap: 4px !important;
    justify-content: flex-start !important;
  }
  .nav .links a {
    font-size: 9.5px !important;
    padding: 5px 10px !important;
    letter-spacing: 0.12em !important;
  }
}

/* ============ TABLES — horizontal scroll on mobile ============ */
@media (max-width: 760px) {
  /* Wrap table parents in scrollable containers */
  #table-wrap,
  .season .panel > table,
  .bq-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  /* Inner tables keep min-width so columns stay readable */
  .log-table, .races, table.races {
    min-width: 560px;
    font-size: 12px !important;
  }
  .bq-table {
    min-width: 560px;
    font-size: 11px !important;
  }
  .log-table th, .log-table td,
  .races th, .races td,
  .bq-table th, .bq-table td {
    padding: 8px 10px !important;
  }

  /* Subtle scroll hint */
  #table-wrap::-webkit-scrollbar,
  .bq-table::-webkit-scrollbar { height: 6px; }
  #table-wrap::-webkit-scrollbar-thumb,
  .bq-table::-webkit-scrollbar-thumb { background: rgba(128,128,128,0.3); border-radius: 3px; }
}

/* ============ DASHBOARD CHART — readable on phone ============ */
@media (max-width: 720px) {
  .chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: 360px !important;
  }
  .chart-wrap svg {
    min-width: 680px; /* preserves axis readability */
  }
  .chart-wrap::-webkit-scrollbar { height: 6px; }
  .chart-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
}

/* ============ DISPLAY TYPE — clamp on tiny screens ============ */
@media (max-width: 420px) {
  h1 { word-break: break-word; overflow-wrap: anywhere; }

  /* Huge poster/progress numbers — keep them from overflowing */
  .gap-card .you .time { font-size: 56px !important; }
  .riegel-in .val { font-size: 52px !important; }
  .rung .time-big { font-size: 34px !important; }
}

/* ============ INDEX TILES — better stacking on tablet ============ */
@media (max-width: 900px) and (min-width: 601px) {
  /* Force single column of full-width tiles on tablet for readability */
  .tiles .tile { grid-column: span 12 !important; min-height: 200px; }
}

/* ============ LOG FORM — stack distance picker on tiny phones ============ */
@media (max-width: 380px) {
  .dist-picker {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .dist-option { font-size: 10px !important; padding: 10px 6px !important; }
}

/* ============ SAFE AREA INSETS — iPhone notch/home-bar ============ */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .wrap {
    padding-bottom: max(env(safe-area-inset-bottom), 60px);
  }
}

/* ============ FLASH TOAST — don't hide behind iOS status bar ============ */
@media (max-width: 760px) {
  .flash {
    top: max(20px, env(safe-area-inset-top)) !important;
    font-size: 10.5px !important;
    padding: 10px 16px !important;
    max-width: calc(100% - 40px);
  }
}

/* ============ PWA STANDALONE — extra room for iOS status bar ============ */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
  }
}

/* ============ REDUCED MOTION — respect user preference ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ FIREFOX / SAFARI quirks ============ */
/* Safari: backdrop-filter needs -webkit prefix (already in place most files but belt-and-suspenders) */
.nav, .topbar, .tooltip {
  -webkit-backdrop-filter: inherit;
}
/* Firefox: no backdrop-filter — fall back to slightly less transparent */
@supports not (backdrop-filter: blur(10px)) {
  .topbar, .nav { background-color: rgba(27,30,37,0.9) !important; }
}