/* ============================================================
   GIANTS — MOBILE READABILITY LAYER
   Loaded after theme.css on every page. Theme-independent:
   bigger type, larger tap targets, and stacked layouts so the
   site is comfortable to read on a phone.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }

/* Inputs at 16px stop iOS from auto-zooming when they're focused */
input, select, textarea, button { font-size: 16px; }

/* ── Phones & small tablets ────────────────────────────────── */
@media (max-width: 768px) {

  .container { padding-left: 16px !important; padding-right: 16px !important; }

  /* Headings & titles */
  .page-title        { font-size: 27px !important; }
  .page-subtitle     { font-size: 15px !important; }
  .player-name       { font-size: 20px !important; }
  .player-card__name { font-size: 18px !important; }
  .player-identity   { font-size: 26px !important; }
  .empty-state h2,
  .state-card h2     { font-size: 22px !important; }

  /* Section header bands */
  .chart-card-header h2,
  .radar-card__header h2,
  .stat-section__header h3,
  .card-header h2    { font-size: 15px !important; }

  /* Body text, labels & meta */
  .player-college,
  .player-card__college,
  .meta-strip,
  .results-bar .label,
  .empty-state p,
  .state-card p      { font-size: 15px !important; }

  .filter-group label,
  .field-group label,
  .stat-label,
  .rating-box__label,
  .stat-leader__label { font-size: 12px !important; }

  .player-number,
  .player-position,
  .season-pill,
  .results-bar .count-badge { font-size: 13px !important; }

  /* Form controls — bigger and easier to tap */
  .filter-group input,
  .filter-group select,
  .season-picker select,
  .field-group select,
  .season-select,
  .chart-select      { font-size: 16px !important; padding: 12px 14px !important; }

  /* Buttons & links — bigger tap targets */
  .btn-search,
  .btn-clear,
  .btn-compare,
  .details-link,
  .edit-btn,
  .back-btn          { font-size: 15px !important; padding: 13px 18px !important; }

  /* Stat numbers */
  .stat-value,
  .rating-box__value { font-size: 22px !important; }
  .stat-leader__value,
  .team-total__value { font-size: 30px !important; }
  .stat-table td     { font-size: 16px !important; }
  .stat-table th     { font-size: 12px !important; }

  /* ── Layout reflow: stack multi-column sections ──────────── */

  /* Dashboard: one chart per row, panel below the chart */
  .charts-grid       { grid-template-columns: 1fr !important; }
  .chart-card        { min-width: 0 !important; }
  .chart-card-body   { padding: 14px !important; }
  .chart-inner       { flex-direction: column !important; gap: 12px !important; }
  .chart-canvas-wrap { width: 100% !important; height: 220px !important; }
  .trend-wrap        { height: 240px !important; }
  /* Leader card + team total sit side-by-side to cut card height */
  .right-panel       { width: 100% !important; flex-direction: row !important; gap: 10px !important; }
  .right-panel > *   { flex: 1 1 0 !important; min-width: 0 !important; }
  .stat-leader__img,
  .stat-leader__initials { width: 56px !important; height: 56px !important; }
  /* Never let a chart canvas spill past the viewport */
  .chart-card canvas { max-width: 100% !important; }

  /* Compare: stack the selector sides and the results columns */
  .players-row       { grid-template-columns: 1fr !important; }
  .vs-badge          { padding: 6px 0 !important; }
  .comparison-layout { grid-template-columns: 1fr !important; }

  /* Player detail: full-width stat grid breathing room */
  .stats-grid        { gap: 12px !important; }
}

/* ── Extra-small phones ────────────────────────────────────── */
@media (max-width: 430px) {
  .player-grid       { grid-template-columns: 1fr !important; }
  .player-pair       { grid-template-columns: 1fr !important; }
  .stat-table td,
  .stat-table th     { padding-left: 10px !important; padding-right: 10px !important; }
}