/* responsive.css — breakpoints. Must stay last in the cascade. */

@media (max-width: 1020px) {
  .tiles { grid-template-columns: repeat(3, 1fr); }
  .tile--hero { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .predict-grid, .report-grid { grid-template-columns: 1fr; }
  .result-card { position: static; }
}

@media (max-width: 720px) {
  .page { padding: 22px 16px 48px; }
  .nav { padding: 0 12px; gap: 8px; }
  .nav-tabs { margin-left: 4px; }
  .nav-tab { padding: 5px 10px; }
  .nav-tab span { display: none; }
  .nav-user-name { display: none; }
  .nav-user-trigger { padding: 3px; }

  .opp-hero { gap: 14px; margin-bottom: 20px; }
  .opp-hero .team-logo { --sz: 46px !important; }
  .opp-hero-title { font-size: 30px; }
  .sit-card, .result-card, .rpt-card { padding: 20px; }
  .card { border-radius: var(--r-lg); }
  .call-num { font-size: 68px; }

  .report-title { font-size: 32px; }
  .tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile-value { font-size: 28px; }
  .tile-hero { font-size: 48px; }
  .dir-row { grid-template-columns: repeat(4, 1fr); row-gap: 10px; }
  .dir-name { grid-column: 1 / -1; }
  .dir-cell--r2 { align-items: center; }
  .bar-row { grid-template-columns: 90px 1fr 44px; gap: 10px; }
}

@media (max-width: 440px) {
  .nav-title { font-size: 16px; }
  .sit-grid { grid-template-columns: 1fr; }
  .fld--wide { grid-column: auto; }
  .field-foot .stepper { width: 150px; }
}