/* HYPER RED — responsive
   Mobile-first overrides. Base styles in other files already target
   ~390px comfortably; this file handles the exceptions, plus the new
   race-brief / entry-docket / roster-grid elements added in this pass. */

/* ---- Mobile (≤ 640px) ---- */
@media (max-width: 640px) {
  .hr-main { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
  .hr-panel { padding: var(--sp-4); }
  .hr-brand-sub { display: none; }

  /* Race brief: the giant round number moves above the title and
     shrinks instead of sharing a baseline with it, so nothing forces
     horizontal scroll or crowds the copy on narrow screens. */
  .race-brief { min-height: 0; padding-top: var(--sp-6); }
  .race-brief-main {
    grid-template-columns: 1fr;
    margin: var(--sp-6) 0;
  }
  .race-brief-bignum { font-size: 64px; transform: none; }
  .race-brief-title { max-width: 100%; font-size: clamp(38px, 12vw, 56px); padding-left: 0; }
  .race-brief-title::before { display: none; }
  .race-brief-grid { grid-template-columns: repeat(2, 1fr); }
  .race-brief-footer { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .race-brief-countdown { gap: var(--sp-4); }
  .race-brief-countdown-seg { font-size: 26px; }
  .hr-cta { width: 100%; justify-content: center; }

  .roster-toolbar { flex-direction: column; align-items: stretch; }
  .roster-search { max-width: none; }
  .roster-week-nav { justify-content: space-between; }

  .entry-summary { position: static; border-top-width: 1px; }
  .cal-result-editor-row { grid-template-columns: 48px 1fr 32px; }
  .next-event-actions { flex-direction: column; }
  .next-event-actions .btn { width: 100%; }

  .signup-form-panel form { counter-reset: hr-field-group; }

  /* Background: simplify to one light + grain on mobile rather than
     the full plane/dual-light/grid composition — keeps the hero
     premium without ever competing with text on a small screen. */
  .hr-atm-plane,
  .hr-atm-light-white,
  .hr-atmosphere-grid,
  .hr-atmosphere-horizon { display: none; }
  .hr-atm-light-red {
    width: 160vw;
    height: 160vw;
    top: -35%;
    right: -35%;
  }
}

/* ---- Tablet (768px) ---- */
@media (min-width: 600px) and (max-width: 959px) {
  .hr-main { padding-left: var(--sp-6); padding-right: var(--sp-6); }
}

/* ---- Laptop / desktop ---- */
@media (min-width: 1024px) {
  .hr-main { padding-left: var(--sp-8); padding-right: var(--sp-8); }
}

@media (min-width: 1440px) {
  .hr-main { padding-left: var(--sp-10); padding-right: var(--sp-10); }
}

/* Ensure roster/calendar controls never force horizontal scroll on very
   narrow screens. */
@media (max-width: 380px) {
  .hr-choice-group[data-cols="4"] { grid-template-columns: repeat(2, 1fr); }
  .race-brief-bignum { font-size: 48px; }
}

/* ---- Header: collapse the status/admin group gracefully before the
   hamburger breakpoint takes over entirely ---- */
@media (max-width: 380px) {
  .hr-header-right { padding-left: var(--sp-3); gap: var(--sp-2); }
}

@media (max-width: 900px) {
  .admin-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .admin-command-grid { grid-template-columns:1fr; }
  .admin-command-toolbar { grid-template-columns:1fr 1fr; }
  .admin-roster-row { grid-template-columns:1fr 1fr; }
  .admin-row-actions { justify-content:flex-start; }
  .admin-inline-edit { grid-template-columns:1fr 1fr; }
  .cal-result-editor-row.class-aware { grid-template-columns:1fr 1fr; }
  .race-brief-track { width:58%; opacity:.25; }
}
@media (max-width: 600px) {
  .my-entry-grid { grid-template-columns:1fr; }
  .admin-stat-grid, .admin-command-toolbar, .admin-roster-row, .admin-inline-edit { grid-template-columns:1fr; }
  .cal-event-track { width:54px; flex-basis:54px; }
  .result-row { grid-template-columns:36px 42px 1fr; }
  .result-class { display:none; }
  .race-brief-track { width:74%; height:52%; top:8%; right:-20%; opacity:.18; }
}