/* responsive.css — Cadence mobile/tablet layer.
 * Loaded AFTER app.css (see index.html), so equal-specificity rules here win
 * over app.css. NOTE: several view modules (rangebar, import, login, timemachine,
 * settings, compare, wrapped, gallery, cards) inject their own <style> at runtime,
 * which lands in <head> AFTER this link — so to beat those we either bump
 * specificity (compound selectors like `.modal.imp-modal`) or use !important
 * (only for inline `style=""` grids that nothing else can override).
 *
 * Everything is scoped to @media so the desktop design system is untouched.
 * Colors/sizes use the existing CSS vars + theme system — no hardcoded chrome.
 *
 * Breakpoints:
 *   <= 900px  tablet — app.css already collapses .grid to 1col here; we trim gaps
 *   <= 640px  phone  — single column, compact spacing, scaled type, sheet modals
 *   <= 400px  small  — drop non-essential brand bits
 *   (hover:none)+(pointer:coarse)  touch — bigger hit targets, reveal hover-only UI
 */

/* ======================================================================
 * Touch niceties (always on — harmless with a mouse)
 * ==================================================================== */

/* The 14-tab nav is overflow-x:auto already; give it momentum + edge fade feel. */
.tabs {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

/* ======================================================================
 * Touch pointers — size hit targets, reveal hover-only affordances
 * ==================================================================== */
@media (hover: none) and (pointer: coarse) {
  /* Tabs: comfortable >=44px tall thumb targets */
  .tabs button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: var(--s2) var(--s4);
  }

  /* Segmented controls + chips + buttons: >=40px touch height */
  .seg button { min-height: 40px; display: inline-flex; align-items: center; }
  .chip { min-height: 38px; }
  .btn, .share-btn { min-height: 44px; }

  /* The row "hide" button is opacity:0 until :hover — touch has no hover,
   * so it'd be unreachable. Reveal it (dimmed) on touch devices. */
  .row .row-hide { opacity: .9; }

  /* Range scrubber handles: widen the grab zone (beats injected `.rb-handle`
   * via the extra `.rb-scrubber` class). Visual 4px bar stays centered. */
  .rb-scrubber .rb-handle { width: 30px; }
  .rb-scrubber .rb-handle.l { left: -16px; }
  .rb-scrubber .rb-handle.r { right: -16px; }

  /* Native range sliders (chart zoom, settings): taller hit area */
  input[type="range"] { height: 26px; }

  /* Bigger, comfortable modal close target */
  .modal-head .x { padding: 8px; margin: -6px -6px -6px auto; }
}

/* ======================================================================
 * Tablet — <= 900px (app.css already makes .grid single column here)
 * ==================================================================== */
@media (max-width: 900px) {
  :root { --gap: 18px; }
  .wrap { padding: 0 var(--s5); }
  .panel { padding: var(--s4); }
}

/* ======================================================================
 * Phone — <= 640px : single column, compact, scaled type, sheet modals
 * ==================================================================== */
@media (max-width: 640px) {
  /* Scale the big numerals down so heroes/stats don't overflow narrow widths.
   * These are vars, so every consumer (.hero h1, .metric .big, .stat .n …) scales. */
  :root {
    --fs-display: 34px;
    --fs-hero: 27px;
    --fs-stat: 22px;
    --fs-h: 18px;
    --gap: 16px;
  }

  .wrap { padding: 0 var(--s4); }
  body { padding-bottom: 48px; }

  /* ---- Topbar: stack brand over a full-bleed scrollable tab strip ---- */
  .topbar .wrap {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: var(--s2);
    padding-bottom: var(--s2);
  }
  .brand { padding: 2px 0; }
  .tabs {
    margin: var(--s1) calc(-1 * var(--s4)) 0;   /* bleed to screen edges */
    padding: 0 var(--s4);
    width: auto;
  }
  .tabs button { min-height: 44px; display: inline-flex; align-items: center; }

  /* ---- Sections / spacing ---- */
  .page { padding-top: var(--s4); }
  .panel { padding: var(--s4); }
  .panel .sub { margin: calc(-1 * var(--s2)) 0 var(--s3); }

  /* ---- Hero ---- */
  .hero { gap: var(--s4); padding: var(--s3) 0 var(--s2); }
  .hero .avatar { width: 64px; height: 64px; }

  /* ---- Stat strip: fixed 2-up so a 3rd column can't spill off-screen.
   * minmax(0,1fr) lets cards shrink below content width → never overflows. */
  .strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s3);
    margin: var(--s2) 0 var(--s4);
  }
  .stat { padding: var(--s3); min-width: 0; }

  /* ---- Force single column for grids that DON'T collapse on their own ----
   * Most .grid variants already go 1col at <=900 (app.css); reassert here so
   * cols-2 and any later-injected grids also stack on phones.
   * #ch-grid uses an inline style="grid-template-columns:…" → needs !important.
   * .wr-finalgrid is an injected 2-col → handled at <=480 below. */
  /* minmax(0,1fr) — NOT plain 1fr — so a wide/nowrap child can't blow the track
   * past the container (1fr == minmax(auto,1fr); the auto min = min-content, which
   * stretched panels to ~425px inside a 366px column and overflowed the page). */
  .grid, .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  #ch-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* ---- Control rows: wrap so .seg + preset/range buttons never run off-screen.
   * The overview "snapshot of … / origin·streaks" header (.flex#ov-controls) and
   * any panel-head right-side control cluster must wrap instead of overflowing.
   * (.seg / .rb-presets already wrap + cap at max-width:100% in their own CSS.) */
  #ov-controls { flex-wrap: wrap; }
  #ov-controls .right { margin-left: 0; }
  .panel-head .right { flex-wrap: wrap; }
  .seg, .rb-presets { max-width: 100%; }

  /* ---- Discoveries "sample size" + Taste "weighting" header segs ----
   * These live in a nowrap flex header (.page-title) / a tight inline row, so on
   * narrow phones the segmented control got squeezed into a clipped vertical
   * stack (Discoveries Top-100/500/1000) or run flush to the edge (Taste
   * Weighted/Equal/By-plays). Let the header wrap, then drop each seg onto its
   * OWN full-width line so its buttons read as one clean horizontal pill that
   * always stays inside the viewport (buttons still wrap as a last resort). */
  .page-title { flex-wrap: wrap; }
  #d-sample,
  #taste-weight {
    flex: 1 1 100%;
    max-width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }

  /* ---- Chart zoom/brush row (Trends/Charts): drop the 'Dec 2018 – Jun 2026'
   * date label onto its own line above the dual range sliders so a slider thumb
   * can never sit on top of the label text in the cramped phone width. */
  .chart-zoom { flex-wrap: wrap; }
  .chart-zoom .rng { flex: 1 0 100%; }

  .cards { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: var(--s3); }

  /* ---- Charts: viewBox-scaled (preserveAspectRatio meet) so they never force
   * an overflow. Add a horizontal-scroll safety valve for genuinely wide ones
   * (heatmap / calendar) instead of letting anything blow out the page width. */
  .chart, .detail-chart, .gal-mount, .gal-svg {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }
  /* viewBox SVGs: cap to host width so a fixed `width=` attr can't force overflow */
  .chart svg, .detail-chart svg, .gal-mount svg, .rb-spark { max-width: 100%; }

  /* ---- Modals → near-fullscreen sheets ----
   * Generic overlay covers detail / export / (future) playlist modals.
   * `.modal.imp-modal` / `.modal.detail` are compound (0,2,0) so they beat the
   * single-class injected/app.css definitions regardless of source order. */
  .modal-overlay {
    padding: 0;
    align-items: stretch;
    backdrop-filter: blur(4px);
  }
  .modal,
  .modal.detail,
  .modal.imp-modal {
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: var(--s5) var(--s4) calc(var(--s8) + env(safe-area-inset-bottom, 0px));
  }
  .modal-head { position: sticky; top: 0; z-index: 1; background: var(--surface-1); padding-bottom: var(--s2); }

  /* Stacked, full-width actions in sheets */
  .modal .actions, .detail-actions, .imp-actions { flex-wrap: wrap; }
  .modal .actions .btn,
  .detail-actions .btn,
  .imp-actions .btn { flex: 1 1 auto; }

  /* ---- Login onboarding card goes full-bleed too ---- */
  .lg-card { width: 100%; max-width: 100%; }

  /* ---- Prevent iOS auto-zoom on focus: text inputs >= 16px ---- */
  input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  textarea,
  select { font-size: 16px; }

  /* Range scrubber: a touch shorter to save vertical space on phones */
  .rb-track { height: 64px; }
  .rb-top { gap: var(--s2); }
}

/* ======================================================================
 * Small phones — <= 480px : collapse the last stubborn 2-col grid
 * ==================================================================== */
@media (max-width: 480px) {
  /* Wrapped "final card" stats grid (injected 2-col, max-width:440px) */
  .wr-finalgrid { grid-template-columns: 1fr !important; max-width: 100%; }
}

/* ======================================================================
 * Tiny — <= 400px : drop the non-essential brand username
 * ==================================================================== */
@media (max-width: 400px) {
  .brand .who { display: none; }

  /* Tighter horizontal gutter + a notch smaller heroes so nothing clips. */
  .wrap { padding: 0 var(--s3); }
  :root { --fs-display: 30px; --fs-hero: 24px; }

  /* Stat cards go full-width single column on the narrowest phones. */
  .strip { grid-template-columns: 1fr; }
}
