/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MASTER — Comprehensive mobile & multi-screen polish
   Loaded LAST to provide final overrides for all pages.
   Breakpoints: 1024px · 768px · 640px · 480px · 360px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Global overflow guard ─────────────────────────────────────────────── */
html {
  overflow-x: hidden;
}

.main,
.content {
  overflow-x: hidden;
  max-width: 100vw;
}

/* ── Sidebar backdrop (mobile) ─────────────────────────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  transition: opacity .25s ease;
  cursor: pointer;
}

.sidebar-backdrop.active {
  display: block;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. TABLET — max-width: 1024px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  /* Data export: recap stats row goes 2-col on tablet */
  .recap-stats {
    flex-wrap: wrap;
  }
  .recap-stat {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  /* Whats-new modal safe width */
  .whats-new-modal-home {
    max-width: 92vw;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. SMALL TABLET / LARGE PHONE — max-width: 768px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Data Export — missing 768px query ────────────────────────────────── */
  .import-modal {
    width: 95%;
    max-width: none;
    border-radius: 14px;
  }

  .import-modal-header {
    padding: 16px 18px;
  }

  .import-modal-body {
    padding: 18px;
  }

  .import-option {
    padding: 16px;
  }

  .data-actions-bar {
    flex-direction: column;
    gap: 8px;
  }

  .data-action-btn {
    justify-content: center;
    width: 100%;
  }

  .recap-header h3 {
    font-size: 1.25rem;
  }

  .weekly-recap {
    padding: 18px;
  }

  /* ── Enhanced UI — missing 480px items at 768px ──────────────────────── */
  .career-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .dashboard-grid {
    grid-template-columns: 1fr;
  }

  .scout-attributes {
    grid-template-columns: 1fr;
  }

  /* ── Community — flex-wrap for header actions ─────────────────────────── */
  .cv4-header-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .cv4-composer-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* ── Home bento — ensure stat cards fit ───────────────────────────────── */
  .hp7-bento {
    gap: 12px;
  }

  .hp7-c-3 {
    grid-column: span 6;
  }

  /* ── Quicklinks adjustments ──────────────────────────────────────────── */
  .hp7-quicklinks-grid {
    gap: 6px;
  }

  .hp7-quicklink {
    min-width: 100px;
    padding: 8px 12px;
    font-size: .62rem;
  }

  /* ── Week snapshot 2×2 stays compact ─────────────────────────────────── */
  .hp7-week-snap {
    gap: 8px;
  }

  /* ── Fitness testing card ────────────────────────────────────────────── */
  .hp7-fitness-stats {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hp7-fitness-stat {
    min-width: 0;
    flex: 1 1 calc(33% - 8px);
  }

  /* ── Coach note compact on smaller ───────────────────────────────────── */
  .hp7-coach-note {
    gap: 10px;
  }

  .hp7-coach-avatar {
    width: 34px;
    height: 34px;
    font-size: .95rem;
  }

  /* ── Calendar day modal ──────────────────────────────────────────────── */
  .modal-content {
    width: 95% !important;
    max-width: none !important;
    margin: auto 10px;
  }

  /* ── What's New modal — safe ─────────────────────────────────────────── */
  .whats-new-modal-home {
    max-width: 96vw;
    width: 96vw;
  }

  .whats-new-header-home {
    padding: 18px 16px;
  }

  .whats-new-title-home {
    font-size: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. MOBILE — max-width: 640px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {

  /* ── Main layout breathing room ──────────────────────────────────────── */
  .content {
    padding: 12px !important;
  }

  /* ── Home bento single column — ensure no card is wider than viewport ─ */
  .hp7-bento {
    gap: 10px;
  }

  .hp7-card {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* ── Stat cards — 2×2 grid on mobile instead of 4-across ─────────────── */
  .hp7-c-3 {
    grid-column: span 1;
  }

  /* ── Hero adjustments ────────────────────────────────────────────────── */
  .hp7-hero {
    padding: 20px 16px 20px !important;
    border-radius: 20px !important;
  }

  .hp7-title {
    font-size: 1.6rem !important;
  }

  .hp7-subtitle {
    font-size: .74rem !important;
    max-width: 100%;
  }

  /* ── Onboarding card — stack fully ───────────────────────────────────── */
  .hp7-onboarding {
    padding: 16px;
  }

  .hp7-onboarding-steps {
    gap: 6px;
  }

  /* ── Week snapshot — single column on phones ─────────────────────────── */
  .hp7-week-snap {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .hp7-week-snap-val {
    font-size: .95rem;
  }

  /* ── AI Insight card — vertical layout ───────────────────────────────── */
  .hp7-ai-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  /* ── Nav/explore cards — smaller on mobile ───────────────────────────── */
  .hp7-nav-link {
    min-height: 80px !important;
    padding: 12px !important;
    gap: 10px !important;
  }

  .hp7-nav-ic {
    width: 28px !important;
    height: 28px !important;
    border-radius: 9px !important;
  }

  .hp7-nav-name {
    font-size: .82rem;
  }

  .hp7-nav-desc {
    font-size: .64rem;
    max-width: none;
  }

  /* ── Quicklinks — tight compact strip ────────────────────────────────── */
  .hp7-quicklinks-grid {
    gap: 5px;
  }

  .hp7-quicklink {
    min-width: 0 !important;
    flex: 1 1 calc(33.33% - 5px);
    padding: 8px 10px;
    font-size: .58rem;
    gap: 5px;
    justify-content: center;
  }

  /* ── Heatmap compact ─────────────────────────────────────────────────── */
  .hp7-heatmap {
    gap: 4px !important;
  }

  .hp7-heatmap-day {
    width: 10px !important;
    height: 10px !important;
    border-radius: 2px !important;
  }

  /* ── NBA card — stack vertically ─────────────────────────────────────── */
  .hp7-nba {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .hp7-nba-btn {
    width: 100%;
    justify-content: center;
  }

  /* ── Form ring — smaller ─────────────────────────────────────────────── */
  .hp7-form-ring {
    width: 70px !important;
    height: 70px !important;
  }

  .hp7-ring-num {
    font-size: 1.1rem !important;
  }

  /* ── Achievement ring compact ────────────────────────────────────────── */
  .hp7-ach {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
  }

  .hp7-ach-ring {
    width: 56px;
    height: 56px;
  }

  /* ── Activity feed rows ──────────────────────────────────────────────── */
  .hp7-feed-row {
    padding: 10px 0 !important;
    gap: 8px;
  }

  /* ── Season targets compact ──────────────────────────────────────────── */
  .hp7-season-item {
    padding: 8px 0;
  }

  .hp7-season-top {
    font-size: .72rem;
  }

  /* ── Fitness testing card compact ────────────────────────────────────── */
  .hp7-fitness-stats {
    flex-wrap: wrap;
  }

  .hp7-fitness-stat {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .hp7-fitness-meta {
    flex-direction: column;
    gap: 6px;
  }

  /* ── Unified week card ───────────────────────────────────────────────── */
  .hp7-uw-kpis {
    flex-wrap: wrap;
    gap: 8px;
  }

  .hp7-uw-kpi {
    flex: 1 1 calc(50% - 8px);
    min-width: 0;
  }

  .hp7-uw-volume {
    flex-direction: column;
    gap: 4px;
  }

  .hp7-uw-cta-row {
    flex-direction: column;
    gap: 6px;
  }

  /* ── Coach note smaller ──────────────────────────────────────────────── */
  .hp7-coach-avatar {
    width: 30px;
    height: 30px;
    font-size: .85rem;
  }

  .hp7-coach-label {
    font-size: .5rem;
  }

  .hp7-coach-note p,
  .hp7-coach-text {
    font-size: .66rem;
  }

  /* ── Fixture card compact ────────────────────────────────────────────── */
  .hp7-fixture-opponent {
    font-size: .78rem;
  }

  .hp7-fixture-meta {
    font-size: .58rem;
  }

  /* ── Data Export — stack recap stats vertically ──────────────────────── */
  .recap-stats {
    flex-direction: column;
  }

  .recap-stat {
    flex: none;
    width: 100%;
  }

  /* ── Community page — additions for 640px ────────────────────────────── */
  .cv4-container {
    padding: 12px;
  }

  .cv4-header {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  .cv4-post {
    padding: 16px;
  }

  .cv4-post-content {
    font-size: .85rem;
  }

  .cv4-modal {
    margin: 12px;
    max-height: calc(100vh - 24px);
  }

  /* ── Enhanced UI additions at 640px ──────────────────────────────────── */
  .career-metrics {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .toast-container {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }

  .toast {
    max-width: none;
    font-size: .82rem;
  }

  /* ── What's New modal bottom-sheet mobile ────────────────────────────── */
  .whats-new-backdrop-home {
    align-items: flex-end;
    padding: 0;
  }

  .whats-new-modal-home {
    max-width: 100%;
    width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 90vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. SMALL PHONE — max-width: 480px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

  /* ── Main padding tighter ────────────────────────────────────────────── */
  .content {
    padding: 10px !important;
  }

  .topbar {
    padding: 0 10px !important;
    gap: 6px;
  }

  /* ── Home hero extra tight ───────────────────────────────────────────── */
  .hp7-hero {
    padding: 16px 14px 16px !important;
  }

  .hp7-title {
    font-size: 1.35rem !important;
  }

  .hp7-subtitle {
    font-size: .68rem !important;
  }

  /* ── Bento gap ───────────────────────────────────────────────────────── */
  .hp7-bento {
    gap: 8px;
  }

  .hp7-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* ── Card heads — smaller ────────────────────────────────────────────── */
  .hp7-card-label h3 {
    font-size: .82rem;
  }

  .hp7-card-label .hp7-ic {
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: .75rem;
  }

  .hp7-tag {
    font-size: .5rem;
    padding: 3px 8px;
  }

  /* ── Stats row — 2×2 grid ────────────────────────────────────────────── */
  .hp7-stat-val {
    font-size: 1.1rem;
  }

  .hp7-stat-label {
    font-size: .52rem;
  }

  /* ── Week snapshot tiles smaller ─────────────────────────────────────── */
  .hp7-week-snap-val {
    font-size: .88rem;
  }

  .hp7-week-snap-label {
    font-size: .5rem;
  }

  /* ── Quicklinks — 2-per-row ──────────────────────────────────────────── */
  .hp7-quicklink {
    flex: 1 1 calc(50% - 5px);
    padding: 7px 8px;
    font-size: .55rem;
    gap: 4px;
  }

  .hp7-quicklink-ic {
    width: 18px !important;
    height: 18px !important;
    border-radius: 5px !important;
  }

  /* ── Nav/explore cards extra compact ─────────────────────────────────── */
  .hp7-nav-link {
    padding: 10px !important;
    min-height: 72px !important;
    border-radius: 14px !important;
  }

  .hp7-nav-ic {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
  }

  .hp7-nav-name {
    font-size: .76rem;
  }

  .hp7-nav-desc {
    font-size: .58rem;
  }

  .hp7-nav-meta {
    font-size: .5rem;
    padding: 4px 8px;
  }

  /* ── NBA card tighter ────────────────────────────────────────────────── */
  .hp7-nba-title {
    font-size: .78rem;
  }

  .hp7-nba-reason {
    font-size: .62rem;
  }

  .hp7-nba-btn {
    font-size: .64rem;
    padding: 8px 14px;
  }

  /* ── Mission card ────────────────────────────────────────────────────── */
  .hp7-mission-title {
    font-size: .74rem;
  }

  .hp7-mission-desc {
    font-size: .6rem;
  }

  /* ── Community page 480px — missing entirely ─────────────────────────── */
  .cv4-container {
    padding: 10px;
  }

  .cv4-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }

  .cv4-logo-text {
    font-size: 1.15rem;
  }

  .cv4-logo-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .cv4-tabs {
    gap: 2px;
  }

  .cv4-tab {
    padding: 8px 10px;
    font-size: .72rem;
  }

  .cv4-post {
    padding: 14px;
    border-radius: 12px;
  }

  .cv4-post-author-name {
    font-size: .78rem;
  }

  .cv4-post-content {
    font-size: .8rem;
    line-height: 1.5;
  }

  .cv4-post-actions {
    gap: 4px;
  }

  .cv4-post-action {
    padding: 6px 10px;
    font-size: .68rem;
  }

  .cv4-modal {
    margin: 8px;
    border-radius: 14px;
  }

  .cv4-clubs-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cv4-conversations {
    max-height: 220px;
  }

  .cv4-messages-layout {
    grid-template-columns: 1fr;
  }

  .cv4-composer-header {
    flex-direction: column;
  }

  .cv4-composer-avatar {
    display: none;
  }

  /* ── Enhanced UI — missing 480px ─────────────────────────────────────── */
  .career-intel-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }

  .career-metrics {
    grid-template-columns: 1fr;
  }

  .scout-attributes {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* ── Data export — extra compact ─────────────────────────────────────── */
  .import-modal {
    width: 97%;
    border-radius: 12px;
  }

  .import-modal-header {
    padding: 14px 16px;
  }

  .import-modal-header h2 {
    font-size: 1.05rem;
  }

  .import-modal-body {
    padding: 14px;
  }

  .import-option {
    padding: 14px;
    margin-bottom: 10px;
  }

  .weekly-recap {
    padding: 14px;
    border-radius: 12px;
  }

  .recap-header h3 {
    font-size: 1.1rem;
  }

  /* ── Form rows — single column ───────────────────────────────────────── */
  .form-row-4 {
    grid-template-columns: 1fr;
  }

  /* ── Actions / buttons — smaller font everywhere ─────────────────────── */
  .hp7-act {
    font-size: .7rem;
    padding: 8px 14px;
  }

  .hp7-season-add-btn {
    font-size: .6rem;
    padding: 6px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. VERY SMALL PHONE — max-width: 360px (iPhone SE, Galaxy S Mini)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 360px) {

  .content {
    padding: 8px !important;
  }

  /* ── Bento — minimal gaps & padding ──────────────────────────────────── */
  .hp7-bento {
    gap: 6px;
  }

  .hp7-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  .hp7-hero {
    padding: 14px 12px !important;
  }

  .hp7-title {
    font-size: 1.2rem !important;
  }

  .hp7-subtitle {
    font-size: .64rem !important;
  }

  /* ── Quicklinks — full width stacking ────────────────────────────────── */
  .hp7-quicklink {
    flex: 1 1 100%;
    min-width: 0 !important;
    padding: 8px 10px;
  }

  /* ── Nav cards — minimal ─────────────────────────────────────────────── */
  .hp7-nav-link {
    padding: 8px !important;
    min-height: 64px !important;
    gap: 8px !important;
  }

  .hp7-nav-desc {
    display: none;
  }

  .hp7-nav-meta {
    font-size: .46rem;
    padding: 3px 6px;
  }

  /* ── Card heads — tighter ────────────────────────────────────────────── */
  .hp7-card-head {
    margin-bottom: 8px;
  }

  .hp7-card-label h3 {
    font-size: .76rem;
  }

  .hp7-tag {
    font-size: .46rem;
    padding: 2px 6px;
  }

  /* ── Week snapshot — full width items ────────────────────────────────── */
  .hp7-week-snap {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* ── Stats smaller ───────────────────────────────────────────────────── */
  .hp7-stat-val {
    font-size: .95rem;
  }

  .hp7-stat-label {
    font-size: .48rem;
  }

  /* ── NBA card ────────────────────────────────────────────────────────── */
  .hp7-nba-title {
    font-size: .72rem;
  }

  .hp7-nba-reason {
    font-size: .58rem;
  }

  .hp7-nba-btn {
    font-size: .58rem;
    padding: 7px 12px;
  }

  .hp7-nba-icon {
    width: 32px;
    height: 32px;
    font-size: .85rem;
  }

  /* ── Form ring — extra compact ───────────────────────────────────────── */
  .hp7-form-ring {
    width: 60px !important;
    height: 60px !important;
  }

  /* ── Topbar ──────────────────────────────────────────────────────────── */
  .topbar {
    padding: 0 8px !important;
    height: 48px;
  }

  .page-title-text {
    font-size: .82rem;
  }

  /* ── Community — ultra compact ───────────────────────────────────────── */
  .cv4-container {
    padding: 8px;
  }

  .cv4-tab {
    padding: 6px 8px;
    font-size: .66rem;
  }

  .cv4-post {
    padding: 12px;
  }

  .cv4-post-content {
    font-size: .76rem;
  }

  /* ── General modals/overlays ─────────────────────────────────────────── */
  .modal-content {
    width: 98% !important;
    max-width: none !important;
    margin: 4px;
    border-radius: 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. LANDSCAPE PHONE — short height, wide
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-height: 500px) and (orientation: landscape) {
  .hp7-hero {
    padding: 16px 20px !important;
  }

  .hp7-title {
    font-size: 1.4rem !important;
  }

  .hp7-card {
    padding: 12px !important;
  }

  /* Modals don't exceed viewport height in landscape */
  .whats-new-modal-home,
  .modal-content,
  .cv4-modal,
  .import-modal {
    max-height: 85vh;
  }

  /* Sidebar slide-over stays within viewport */
  .sidebar.open {
    max-height: 100vh;
    overflow-y: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. SAFE-AREA INSETS (Notch & home indicator on iOS)
   ═══════════════════════════════════════════════════════════════════════════ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .sidebar {
    /* padding-top: env(safe-area-inset-top) removed — caused dead-space dark
       band at top of viewport in PWA/standalone mode on Windows & iOS */
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* topbar: intentionally excluded for same reason */
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. TOUCH TARGETS (mobile usability)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
  /* Ensure minimum 44px touch targets on touch devices */
  .hp7-quicklink {
    min-height: 44px;
  }

  .hp7-nba-btn,
  .hp7-act,
  .hp7-season-add-btn,
  .hp7-ach-cta,
  .cv4-tab,
  .cv4-post-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Slightly larger close buttons */
  .whats-new-close-home,
  .import-modal-header .close-btn {
    width: 40px;
    height: 40px;
  }

  /* Scrollable tabs indicator */
  .cv4-tabs {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
  }

  .cv4-tab {
    scroll-snap-align: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .hp7-anim,
  .hp7-card,
  .hp7-hero,
  .hp7-quicklink,
  .hp7-nav-link,
  .cv4-post {
    animation: none !important;
    transition: none !important;
  }

  .sidebar {
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. WIDE SCREENS — min-width: 1600px
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1600px) {
  .hp7-w {
    max-width: 1000px;
  }

  .hp7-bento {
    gap: 20px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   11. PAGE-SPECIFIC SUPPLEMENTARY FIXES
   Fills gaps in matches-revamp, training-revamp, settings-revamp, calendar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Matches page — 360px ──────────────────────────────────────────────── */
@media (max-width: 360px) {
  .mx-hero {
    padding: 16px 12px 12px;
  }

  .mx-hero__title {
    font-size: 16px;
  }

  .mx-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .mx-stat-card {
    padding: 10px 6px;
  }

  .mx-stat__num {
    font-size: 16px;
  }

  .mx-card {
    padding: 10px 12px;
    gap: 8px;
  }

  .mx-card__result {
    width: 34px;
    height: 34px;
    font-size: 11px;
  }

  .mx-card__stats {
    gap: 10px;
  }
}

/* ── Training page — 360px ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .tx-hero {
    padding: 16px 12px 12px;
  }

  .tx-hero__title {
    font-size: 16px;
  }

  .tx-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .tx-stat-card {
    padding: 10px 6px;
  }

  .tx-stat__num {
    font-size: 16px;
  }

  .tx-card {
    padding: 12px;
  }

  .tx-card__intensity-bar {
    width: 50px;
  }
}

/* ── Settings page — 360px ─────────────────────────────────────────────── */
@media (max-width: 360px) {
  .settings-container {
    padding: 10px;
  }

  .settings-header {
    gap: 8px;
  }

  .settings-tab {
    padding: 6px 8px;
    font-size: .68rem;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }

  .theme-cards,
  .shortcut-cards {
    grid-template-columns: 1fr;
  }
}

/* ── Calendar page — 480px/360px (supplements inline CSS) ──────────────── */
@media (max-width: 480px) {
  .cr-hero__title {
    font-size: 17px;
  }

  .cr-stats {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .cr-day-cell {
    min-height: 36px;
    font-size: .62rem;
  }
}

@media (max-width: 360px) {
  .cr-hero {
    padding: 14px 10px;
  }

  .cr-hero__title {
    font-size: 15px;
  }

  .cr-day-cell {
    min-height: 30px;
    font-size: .56rem;
    padding: 2px;
  }

  .cr-body {
    gap: 2px;
  }
}

/* ── Analytics KPIs — force 1-col at very small ────────────────────────── */
@media (max-width: 400px) {
  .ax-kpis {
    grid-template-columns: 1fr;
  }

  .analytics-kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Goals KPIs — force 1-col at very small ────────────────────────────── */
@media (max-width: 400px) {
  .gx-kpi-row {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. PRINT (basic print styles)
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  .sidebar,
  .topbar,
  .menu-toggle,
  .hp7-nba-btn,
  .hp7-season-add-btn,
  .hp7-act,
  .whats-new-backdrop-home {
    display: none !important;
  }

  .main {
    margin-left: 0 !important;
  }

  .hp7-card {
    break-inside: avoid;
    border: 1px solid #ccc;
  }

  body {
    background: #fff;
    color: #000;
  }
}