/* ── COMPREHENSIVE MOBILE FIXES ── */
@media (max-width: 720px) {
  /* Profile card actions: always visible on touch (no hover on mobile) */
  .profile-card-actions { opacity: 1 !important; }
  .pc-btn { padding: 6px 12px !important; font-size: 12px !important; }

  /* Payment gate */
  .payment-card { padding: 24px 20px !important; }
  .payment-title { font-size: 24px !important; }
  .payment-price { font-size: 52px !important; }
  .payment-actions { flex-direction: column !important; }
  .payment-btn-primary, .payment-btn-secondary { width: 100% !important; text-align: center !important; }

  /* Score simulator: stack label above the bar on narrow screens so the
     track keeps a visible width. The previous rule collapsed the track to
     0 width because it was placed in an `auto`-sized column and all of its
     children are position:absolute (zero intrinsic content). */
  .sim-row {
    grid-template-columns: 1fr auto !important;
    grid-template-areas: "label label" "track val" !important;
    gap: 4px 10px !important;
  }
  .sim-row > .sim-label   { grid-area: label !important; }
  .sim-row > [id^="simTrack_"] { grid-area: track !important; min-width: 0 !important; }
  .sim-row > div:last-child { grid-area: val !important; }
  .sim-score { font-size: 60px !important; }

  /* Results nav row */
  #shareBtn { width: 100% !important; text-align: center !important; }
  #resultsRetestBtn { width: 100% !important; }

  /* Trajectory stats: 2-column grid */
  .pv-traj-stats { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 !important; }
  .pv-traj-stat { border-right: none !important; margin-right: 0 !important; padding: 0 0 12px 0 !important; }
  .pv-traj-stat:nth-child(odd) { border-right: 1px solid var(--border) !important; padding-right: 16px !important; margin-right: 16px !important; }
  .pv-traj-stat-val { font-size: 22px !important; }
  .pv-trajectory-canvas { height: 240px !important; }

  /* Test entry modal */
  .te-modal { padding: 20px 16px !important; }
  .te-modal-actions { flex-direction: column !important; }
  .te-modal-actions button { width: 100% !important; text-align: center !important; }

  /* About modal */
  #aboutModal > div { padding: 20px 16px !important; border-radius: 0 !important; max-height: 100vh !important; }
  .about-tab { font-size: 11px !important; padding: 8px 10px !important; letter-spacing: 0.5px !important; }

  /* Profile view */
  .pv-pr-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 6px !important; }
  /* Leaderboard */
  .lb-row td { padding: 10px 8px !important; }
  .lb-score { font-size: 22px !important; }

  /* Sample modal */
  .sample-card { padding: 20px 16px !important; }

  /* ══ MOBILE PERFORMANCE — disable expensive decorations that cost GPU at 390px ══ */
  /* Level atmosphere + spectrum pip: pretty on desktop, invisible noise on a phone. Kill them. */
  #levelAtmosphere { display: none !important; }
  .level-spectrum::after { display: none !important; } /* fading underglow */
  /* (Wordmark text-shadow removed entirely — was causing WebKit ghost artifact
     on the M when combined with background-clip: text + transparent fill.) */

  /* ══ WIDTH-RECLAIM FIXES — reduce compounding padding on mobile ══ */

  /* Tighten outer app padding — every child inherits this, biggest leverage point */
  .app { padding: 96px 8px 80px !important; }

  /* Program session cards — stack name/prescription vertically so the exercise
     name doesn't get forced into a 22px-wide column that word-wraps per letter */
  .pm-session-card { padding: 14px 12px !important; }
  .pm-ex-head { flex-wrap: wrap !important; gap: 8px !important; }
  .pm-ex-rx {
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    flex: 1 1 100% !important;
    margin-left: 20px !important;
  }

  /* Performance profile — edge-to-edge on mobile. Break out of .app padding
     so the 12 bars can actually use the full viewport width when expanded. */
  #pvBatterySection {
    padding: 10px 6px !important;
    margin-left: -8px !important;   /* cancels .app left padding */
    margin-right: -8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }
  .pv-batt-outer { padding: 8px 4px 8px !important; }
  .pv-batt-domain-badge { display: none !important; }
  .pv-batt-strip-lbl { font-size: 7px !important; }
  .pv-batt-strip-lbl.active { font-size: 8px !important; }
  /* Bar labels — keep readable on mobile + inside expanded domain cards */
  .pv-batt-label span { font-size: 10px !important; letter-spacing: 0.5px !important; font-weight: 600 !important; }

  /* ══ PROGRESSIVE DISCLOSURE on PERFORMANCE PROFILE (mobile) ══
     Transform the 4-column horizontal bar chart into stacked, tappable domain
     cards. Bars are hidden until the user taps a card. Single-expand UX. */
  .pv-batt-grid {
    display: block !important;  /* was flex row → vertical stack */
  }
  .pv-batt-domain {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    margin-bottom: 6px !important;
    background: rgba(184,200,208,0.03);
    border: 1px solid rgba(184,200,208,0.08);
    border-radius: 3px;
    transition: border-color 0.2s;
  }
  .pv-batt-domain.is-expanded { border-color: rgba(184,200,208,0.18); }

  .pv-batt-domain-hdr {
    padding: 12px 14px !important;
    margin-bottom: 0 !important;
    border-bottom: none !important;
    cursor: pointer;
    min-height: 48px;  /* tap target */
    position: relative;
    padding-right: 36px !important;  /* room for chevron */
  }
  /* Chevron indicator */
  .pv-batt-domain-hdr::after {
    content: '\25BE'; /* ▾ */
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: rgba(184,200,208,0.5);
    transition: transform 0.25s;
  }
  .pv-batt-domain.is-expanded .pv-batt-domain-hdr::after {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent);
  }
  .pv-batt-domain-lbl { font-size: 10px !important; letter-spacing: 2px !important; color: rgba(184,200,208,0.5) !important; }
  .pv-batt-domain-avg { font-size: 28px !important; margin-left: auto; }

  /* Bars hidden by default, slide open on expand */
  .pv-batt-bars {
    display: none !important;
    padding: 0 10px 14px !important;
    gap: 6px !important;
  }
  .pv-batt-domain.is-expanded .pv-batt-bars { display: flex !important; }

  /* When showing only 1 domain's bars, give them full width + taller track */
  .pv-batt-domain.is-expanded .pv-batt-track { height: 170px !important; }
  .pv-batt-domain.is-expanded .pv-batt-score-below { font-size: 20px !important; }
  .pv-batt-domain.is-expanded .pv-batt-level-below { font-size: 8px !important; }

  /* Test names: hide the inside-bar vertical label entirely when a domain is
     expanded on mobile. The test name moves to the caption area BELOW the bar
     (.pv-batt-testname element). Keeps the bar clean and the name legible. */
  .pv-batt-domain.is-expanded .pv-batt-label { display: none !important; }
  .pv-batt-domain.is-expanded .pv-batt-testname { display: block !important; }
  /* Let the item grow to include the label below */
  .pv-batt-domain.is-expanded .pv-batt-item {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Hide separator — not needed in vertical layout */
  .pv-batt-sep { display: none !important; }

  /* ══ PROGRESSIVE DISCLOSURE — test grid + personal records on mobile ══
     Each domain group becomes a tappable card. Cards collapse by default. */
  .pv-domain-group {
    margin-bottom: 6px !important;
    border: 1px solid rgba(184,200,208,0.08);
    border-radius: 3px;
    background: rgba(184,200,208,0.02);
    transition: border-color 0.2s;
  }
  .pv-domain-group.is-expanded { border-color: rgba(184,200,208,0.18); }
  .pv-domain-group-hdr {
    padding: 12px 14px !important;
    cursor: pointer !important;
    min-height: 48px;
    padding-right: 36px !important;
    position: relative;
    touch-action: manipulation;
  }
  .pv-domain-group-lbl { font-size: 10px !important; letter-spacing: 2px !important; }
  .pv-domain-group-count {
    display: inline !important;
    font-family: 'DM Mono', monospace;
    font-size: 10px;
    color: var(--muted2);
    letter-spacing: 0.5px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .pv-domain-group-chev {
    display: inline !important;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Mono', monospace;
    font-size: 12px;
    color: rgba(184,200,208,0.5);
    transition: transform 0.25s, color 0.25s;
  }
  .pv-domain-group.is-expanded .pv-domain-group-chev {
    transform: translateY(-50%) rotate(180deg);
    color: var(--accent);
  }
  /* Separator line hidden when header is a tappable card */
  .pv-domain-group-sep { display: none !important; }

  /* Cards hidden until expanded */
  .pv-domain-group-cards {
    display: none !important;
    grid-template-columns: 1fr !important;
    padding: 0 10px 10px !important;
    gap: 6px !important;
    margin-top: 0 !important;
  }
  .pv-domain-group.is-expanded .pv-domain-group-cards {
    display: grid !important;
  }

  /* ══ LEADERBOARD — card-row treatment on mobile ══
     Desktop: traditional 4-5 column table. Mobile: each row becomes a flexible
     card so names/meta/score breathe instead of fighting for column width. */
  /* .lb-table, .lb-table thead, .lb-table tbody, .lb-table tr, .lb-table td {
    display: block !important;
  } */
  .lb-table thead { display: none !important; } /* column headers don't apply in card layout */
  .lb-row {
    display: grid !important;
    grid-template-columns: 42px 1fr auto;
    grid-template-areas:
      "rank name  score"
      "rank meta  pill";
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    padding: 10px 10px !important;
    border-bottom: 1px solid rgba(30,61,110,0.4);
  }
  .lb-row td {
    border: none !important;
    padding: 0 !important;
  }
  /* Slot each cell into a grid area */
  .lb-row td:nth-child(1) { grid-area: rank; }
  .lb-row td:nth-child(2) { grid-area: name / name / meta / meta; }  /* name + meta stacked inside */
  .lb-row td:nth-child(3) { display: none !important; }              /* bar column already hidden */
  .lb-row td:nth-child(4) { grid-area: score; text-align: right !important; padding: 0 !important; }
  .lb-row td:nth-child(5) { grid-area: pill;  text-align: right !important; padding: 0 !important; }

  .lb-rank { width: 100% !important; text-align: center !important; }
  .lb-score { font-size: 24px !important; line-height: 1 !important; }
  .lb-score-sub { font-size: 8px !important; }
  .lb-level-pill { font-size: 9px !important; padding: 2px 6px !important; letter-spacing: 1.5px !important; }
  .lb-meta-line { font-size: 10px !important; line-height: 1.3 !important; margin-top: 2px !important; }
  .lb-name { font-size: 14px !important; }

  /* "Your rank" block — tighter on mobile, was already responsive but trim further */
  .lb-your-rank {
    padding: 12px 14px !important;
    gap: 14px !important;
    flex-wrap: nowrap !important;
  }
  .lb-your-rank-num { font-size: 44px !important; }
  .lb-your-rank-detail { font-size: 16px !important; }

  /* ══ PROGRAM MODAL — tighter padding to match rest of mobile ══
     Was: overlay 24px 16px + inner hero 28px 32px + session cards 20px 24px.
     Compound was ~90px wasted on a 390px viewport. */
  #programModal {
    padding: 16px 6px !important;
  }
  /* Inner wrapper hero header */
  #programModal > div > div:first-child {
    padding: 20px 14px 16px !important;
  }
  /* Program body content wrapper (week nav + panels + after note) */
  #programModal > div > div:last-child {
    padding: 14px 10px !important;
  }
  .pm-session-card { padding: 14px 10px !important; }
  #programModal [style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  /* LB controls (filters) stack cleanly on mobile */
  .lb-controls { gap: 8px !important; margin-bottom: 16px !important; }
  .lb-select { min-width: 0 !important; flex: 1 1 140px !important; font-size: 14px !important; padding: 9px 12px !important; }
  .lb-toggle-btn { font-size: 10px !important; padding: 8px 12px !important; letter-spacing: 1.5px !important; }

  /* ══ BOTTOM-SHEET MODALS — mobile-native feel ══
     Modals slide up from the bottom edge, full-width, with top corners rounded.
     A visual drag handle at the top cues the swipe-to-dismiss gesture. */
  .modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .modal-overlay.open .modal {
    animation: sheetSlideUp 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .modal {
    max-width: 100% !important;
    width: 100% !important;
    padding: 28px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    border-radius: 16px 16px 0 0 !important;
    border: none !important;
    border-top: 2px solid var(--accent) !important;
    max-height: 92vh !important;
    overflow-y: auto;
    position: relative;
    touch-action: pan-y;
  }
  /* Drag handle — subtle horizontal bar at top */
  .modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(184,200,208,0.3);
    border-radius: 2px;
    pointer-events: none;
  }
  .modal-title { margin-top: 8px; }

  /* Test entry modal — same bottom-sheet treatment */
  .te-modal-overlay { padding: 0 !important; align-items: flex-end !important; }
  .te-modal-overlay[style*="display: flex"] .te-modal {
    animation: sheetSlideUp 0.28s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .te-modal {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 28px 18px calc(24px + env(safe-area-inset-bottom)) !important;
    max-height: 92vh !important;
    overflow-y: auto;
    position: relative;
    touch-action: pan-y;
  }
  .te-modal::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    background: rgba(184,200,208,0.3);
    border-radius: 2px;
    pointer-events: none;
  }

  @keyframes sheetSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Score trajectory — also edge-to-edge, reduce inner padding */
  .pv-trajectory {
    padding: 14px 10px !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
  }

  /* Test cards in the assessment wizard — were 18px 20px */
  .test-card { padding: 14px 12px !important; }
  .test-card.card-high, .test-card.card-mid, .test-card.card-low { padding: 13px 11px !important; }

  /* Profile view internal cards */
  .pv-radar-card { padding: 12px 10px !important; }
  .pv-level-progress { padding: 12px 12px !important; }
  .pv-improvement-card { padding: 12px 12px !important; }
  .hero-link-card { padding: 10px 12px !important; }
  .focus-card { padding: 12px 12px !important; }
  .pv-pr-card { padding: 8px 10px !important; }
  .pv-weight-stat { padding: 8px 10px !important; }

  /* Profile view header/collapsed bar */
  .pv-collapsed, .pv-hero, .pv-header { padding: 10px 8px !important; }

  /* ══ VERTICAL RHYTHM — tighten margins so each screen fits more content ══ */

  /* Header — was 12px 16px; tighten */
  header { padding: 10px 12px !important; }

  /* Section labels — were 40px top, 16px bottom */
  .section-label { margin-top: 24px !important; margin-bottom: 10px !important; }
  .pv-section-label { margin-top: 20px !important; margin-bottom: 8px !important; }

  /* Big hero/score card padding */
  .pv-score-card { padding: 20px 14px !important; }
  .final-score-block { padding: 28px 18px !important; }

  /* Hero spacing tighter */
  .hero-headline { margin-bottom: 16px !important; }
  .hero-cta-row { margin-bottom: 16px !important; gap: 10px !important; }
  .hero-why-strip { margin-bottom: 20px !important; padding: 14px 14px !important; align-items: flex-start !important; }
  /* Reduce green density on mobile: dim accent tagline */
  .hero-accent-tagline { font-size: 13px !important; opacity: 0.7 !important; letter-spacing: 1.5px !important; margin: 0 0 10px !important; }
  .hero-ticker { padding: 10px 14px !important; }
  .hero-link-row { gap: 8px !important; margin-bottom: 20px !important; }

  /* Nav row at bottom of assessment screens */
  .nav-row { margin-top: 24px !important; padding-top: 16px !important; }

  /* Profile stat rows */
  .pv-stat-row { margin-top: 14px !important; padding-top: 12px !important; }
  .pv-stat { padding: 0 10px !important; }

  /* Big button padding trimming */
  .btn-primary, .btn-secondary { padding: 13px 18px !important; }
  .hero-cta-btn { padding: 14px 20px !important; }

  /* ══ TAP TARGETS — iOS/Material minimum 44px for anything interactive ══ */
  .btn-primary, .btn-secondary, button,
  .profile-card, .test-grid-card, .hero-link-card,
  .program-card, .program-card-btn {
    min-height: 44px;
  }
  /* Small tappable icons get a larger hit area via padding */
  .card-expand-icon, .pc-btn {
    min-height: 36px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ══ MOBILE TYPOGRAPHY — more readable at arm's length ══ */
  body { line-height: 1.55; }
  p, .pv-athlete-meta, .hero-tagline, .hero-hook,
  .test-card-section-text, .program-card-desc { line-height: 1.6 !important; }

  /* Prevent iOS text-size-adjust from enlarging text in landscape */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* ══ iOS / Android touch refinements ══ */
  /* Kill the blue tap-highlight on iOS — we have our own active states */
  * { -webkit-tap-highlight-color: transparent; }
  /* Smooth momentum scrolling on iOS */
  body, .modal, .te-modal { -webkit-overflow-scrolling: touch; }
  /* Disable double-tap zoom on buttons — they're never meant to zoom */
  button, .btn-primary, .btn-secondary, .hero-cta-btn { touch-action: manipulation; }
  /* Prevent accidental text selection on tappable cards */
  .profile-card, .test-grid-card, .hero-link-card, .program-card, .pv-batt-item { -webkit-user-select: none; user-select: none; }

  /* Inputs: disable iOS autofill yellow that can wreck themes */
  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px var(--surface) inset !important;
    -webkit-text-fill-color: var(--text) !important;
  }
}

/* ══ RESPECT prefers-reduced-motion — accessibility + battery ══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .pv-batt-fill { transition: none !important; }
}

/* ══ FOCUS-VISIBLE — keyboard users (bluetooth keyboard, tab nav, iOS voice control)
   get a clear focus ring. Mouse users don't see outlines at all. ══ */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
  border-radius: 2px;
}
/* Inputs get a softer ring since they already have border colors */
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 0 !important;
}

/* ══ DOMAIN GROUPS for PROGRESSIVE DISCLOSURE (test grid + personal records) ══
   Desktop: each group is a block with its own cards grid inside — visually
   identical to the previous flat-with-header-dividers layout.
   Mobile: group becomes a tappable card that collapses/expands. */
.pv-domain-group {
  margin-bottom: 18px;
  grid-column: 1 / -1;  /* occupy full width when inside a parent grid */
}
.pv-domain-group-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  padding: 6px 0;
  margin: 0;
  cursor: default;
  color: inherit;
  text-align: left;
  font: inherit;
}
.pv-domain-group-lbl {
  font-family: 'DM Mono', monospace;
  font-size: 8px;
  color: var(--accent);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.85;
  flex-shrink: 0;
}
.pv-domain-group-sep {
  flex: 1;
  height: 1px;
  background: rgba(87,187,70,0.15);
}
.pv-domain-group-count,
.pv-domain-group-chev { display: none; }

.pv-domain-group-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  margin-top: 6px;
}

/* ══ OFFLINE INDICATOR — shows when connection drops ══ */
#offlineBanner {
  position: fixed;
  top: env(safe-area-inset-top);
  left: 0; right: 0;
  background: #ff9047;
  color: #0a1e3d;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  z-index: 10000;
  transform: translateY(-100%);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}
#offlineBanner.visible { transform: translateY(0); }

/* Re-open the mobile media query so subsequent rules still apply */
@media (max-width: 720px) {
}

@media (max-width: 480px) {
  /* Profile cards */
  .profile-card { padding: 18px 16px !important; }
  .profile-card-score { font-size: 48px !important; }
  .profile-card-name { font-size: 22px !important; }

  /* Breakdown rows */
  .breakdown-name { width: 80px !important; font-size: 10px !important; }
  .breakdown-score { font-size: 18px !important; }
}

/* ── MOBILE FIXES — new elements + untreated layouts ── */
@media (max-width: 720px) {

  /* Profile settings modal — full screen on mobile */
  #profileSettingsModal { padding: 0 !important; align-items: flex-end !important; }
  #profileSettingsModal > div {
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 24px 18px 32px !important;
    width: 100% !important;
  }

  /* Subscription section in edit profile */
  #psSubSection { padding-top: 16px !important; margin-top: 16px !important; }
  #psSubSection button { font-size: 9px !important; padding: 9px 12px !important; }

  /* Payment gate — option header stacks price below name */
  .payment-option { padding: 14px 14px !important; }
  .payment-option-header { gap: 8px !important; }
  .payment-option-name { font-size: 15px !important; }
  .payment-option-desc { font-size: 10px !important; }
  .payment-option-price { font-size: 22px !important; }
  .payment-option-badge { font-size: 7px !important; padding: 2px 5px !important; }

  /* Profile actions row — keep the wrap layout at this breakpoint. The
     full-width column stack lives in the narrower @media block below
     (max-width: 480px). */
  #pvActions { gap: 8px !important; }
  #pvActions .btn-secondary { font-size: 9px !important; padding: 8px 12px !important; }

  /* Insight block — ensure readable */
  #pvInsightInline { margin-top: 12px !important; }
  #insightBlock .insight-text { font-size: 13px !important; line-height: 1.55 !important; }

  /* Coaching CTA — tighten on mobile */
  #pvCoachingCTA > div { padding-top: 20px !important; margin-top: 20px !important; }
  #pvCoachingCTA .btn-primary { width: 100% !important; text-align: center !important; font-size: 13px !important; padding: 12px 20px !important; }

  /* Radar card — full width, no max-width constraint */
  .pv-radar-card { padding: 20px 14px 16px !important; }
  #pvRadarSvg { max-width: 100% !important; }
  #radarChart { max-width: 100% !important; }
  .pv-radar-title-main { font-size: 17px !important; }

  /* Weight tracker — stack on very small screens */
  .pv-weight-row { gap: 8px !important; }
  .pv-weight-val { font-size: 18px !important; }
  .pv-weight-lbl { font-size: 7px !important; }

  /* Upsell cards in profile — tighten */
  #subscriptionUpsell { padding: 0 !important; }
}

@media (max-width: 420px) {
  /* Weight tracker tiles stack vertically on smallest screens */
  .pv-weight-row { flex-direction: column !important; }

  /* Payment option price stays readable */
  .payment-option-price { font-size: 20px !important; }

  /* Profile actions — all full width */
  #pvActions button { width: 100% !important; text-align: center !important; }

  /* Profile settings modal padding tighter */
  #profileSettingsModal > div { padding: 20px 14px 28px !important; }
}

/* ── ADDITIONAL MOBILE FIXES ────────────────────────────────── */

/* 1. Levels grid: 6 levels → 2×3 on small phones (was 3-column, too tight) */
@media (max-width: 480px) {
  #levelsDisplayGrid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Profile actions — stack every button to full width on smaller phones.
     renderPvActions wraps Test/Retest in one inner div and Share Score in
     another, so we have to flatten both wrapper divs (full-width column)
     before the per-button rule actually applies. */
  #pvActions { flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  #pvActions > div { width: 100% !important; margin-left: 0 !important; flex-direction: column !important; gap: 8px !important; align-items: stretch !important; }
  #pvActions .btn-primary { width: 100% !important; flex: 1 1 100% !important; text-align: center !important; }
  #pvActions #shareBtn, #pvActions #pvShareBtn { flex: 1 1 100% !important; text-align: center !important; }
  /* .btn-sm has an 8px icon↔text gap that's unnecessary at narrow widths —
     it just bloats the button without adding clarity. We zero the flex gap
     and add a margin-right on the icon instead so the visual spacing
     between icon and text is explicit and easy to tune. */
  #pvActions .btn-sm { gap: 0 !important; }
  #pvActions .btn-sm .material-icons { margin-right: 8px !important; }
}

/* 2. Hero test pills: single column on very small phones */
@media (max-width: 380px) {
  .hero-tests { grid-template-columns: repeat(2, 1fr) !important; gap: 4px !important; }
}

/* 3. Sample modal body: reduce horizontal padding on mobile */
@media (max-width: 720px) {
  .sample-body { padding: 20px 16px 0 !important; }
}

/* 4. iOS safe-area insets: prevent content hiding under home bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .app { padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important; }
}


  /* ── Collapsible profile sections — Standard+ ────────────────────── */
  .pv-collapse { border:1px solid rgba(184,200,208,0.08); border-left:2px solid rgba(87,187,70,0.25); border-radius:4px; margin-bottom:12px; background:rgba(10,24,50,0.4); transition:border-left-color 0.2s; }
  .pv-collapse:hover { border-left-color:rgba(87,187,70,0.5); }
  .pv-collapse-hdr { display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer; user-select:none; transition:background 0.15s; }
  .pv-collapse-hdr:hover { background:rgba(87,187,70,0.03); }
  .pv-collapse-hdr.open { border-bottom:1px solid rgba(184,200,208,0.06); }
  .pv-collapse-title { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:3px; color:var(--accent); text-transform:uppercase; flex-shrink:0; opacity:0.9; }
  .pv-collapse-meta { flex:1; font-family:'DM Mono',monospace; font-size:9px; color:var(--muted2); letter-spacing:0.5px; }
  .pv-collapse-chev { font-size:10px; color:rgba(184,200,208,0.35); transition:transform 0.22s; flex-shrink:0; }
  .pv-collapse-chev.open { transform:rotate(180deg); color:var(--accent); }
  .pv-collapse-body { display:none; width:100%; }
  .pv-collapse-body.open { display:block; width:100%; }
  .pv-collapse-inner { padding:16px 18px 20px; width:100%; box-sizing:border-box; }

  /* ── Performance Profile Battery ─────────────────────────────────── */
  .pv-batt-outer { background:#040c1a; border-radius:4px; padding:16px 14px 14px; position:relative; overflow:hidden; }
  .pv-batt-grid { display:flex; width:100%; gap:14px; align-items:flex-end; }
  .pv-batt-domain { display:flex; flex-direction:column; min-width:0; justify-content:flex-end; }
  .pv-batt-domain[data-tests="4"] { flex:4; }
  .pv-batt-domain[data-tests="1"] { flex:1; max-width:calc(8.333% - 10.5px); }
  .pv-batt-domain[data-tests="3"] { flex:3; }
  .pv-batt-domain-hdr { display:flex; align-items:center; gap:8px; margin-bottom:6px; padding-bottom:6px; border-bottom:1px solid rgba(184,200,208,0.07); flex-wrap:wrap; min-height:36px; }
  .pv-batt-domain-lbl { font-family:'DM Mono',monospace; font-size:8px; letter-spacing:2px; color:rgba(184,200,208,0.22); text-transform:uppercase; flex-shrink:0; }
  .pv-batt-domain-avg { font-family:'Barlow Condensed',sans-serif; font-size:32px; font-weight:800; line-height:1; flex-shrink:0; }
  .pv-batt-domain-badge { font-family:'DM Mono',monospace; font-size:7px; letter-spacing:1.5px; padding:2px 6px; border-radius:2px; flex-shrink:0; opacity:0.75; }
  .pv-batt-sep { width:1px; background:linear-gradient(to bottom, transparent, rgba(184,200,208,0.08) 20%, rgba(184,200,208,0.08) 80%, transparent); flex-shrink:0; align-self:stretch; margin-top:32px; }
  .pv-batt-bars { display:flex; gap:3px; flex:1; }
  .pv-batt-item { flex:1; display:flex; flex-direction:column; cursor:default; position:relative; min-width:0; }
  .pv-batt-item.is-weakest .pv-batt-track { outline:1px solid rgba(255,180,60,0.35); }
  .pv-batt-item.is-weakest .pv-batt-weakest-dot { display:block !important; }
  .pv-batt-score-above, .pv-batt-level-badge { display: none; } /* deprecated — captions now live below */

  /* ── Caption under each bar (score + level) ── */
  .pv-batt-caption {
    display: flex; flex-direction: column; align-items: center;
    gap: 3px; margin-top: 6px; padding-top: 6px;
    border-top: 1px solid rgba(184,200,208,0.06);
  }
  /* Test name in caption — hidden by default (desktop uses vertical in-bar label).
     Shown on mobile in the expanded domain view where bars are wide enough for
     horizontal text. */
  .pv-batt-testname {
    display: none;
    font-family: 'DM Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(240,244,240,0.82);
    text-align: center;
    line-height: 1.2;
    margin-bottom: 2px;
  }
  .pv-batt-score-below {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 17px; font-weight: 800; line-height: 1;
    letter-spacing: 0;
    transition: transform 0.15s;
  }
  .pv-batt-level-below {
    font-family: 'DM Mono', monospace;
    font-size: 7px; letter-spacing: 1.5px;
    padding: 1px 5px;
    border: 0.5px solid transparent;
    border-radius: 1px;
    opacity: 0.85;
    line-height: 1;
  }

  /* ── HUD tick marks on the track's left edge ── */
  .pv-batt-tick {
    position: absolute;
    left: 0; width: 4px; height: 1px;
    pointer-events: none; z-index: 2;
  }
  /* Tick labels on far right (gauge readout) — only visible when track is tall enough */
  .pv-batt-tick-lbl {
    position: absolute;
    right: 2px;
    font-family: 'DM Mono', monospace;
    font-size: 6px;
    color: rgba(184,200,208,0.18);
    letter-spacing: 0.5px;
    pointer-events: none;
    transform: translateY(50%);
    line-height: 1;
  }

  /* ── Peak marker — bright data-point dot at top of each fill ── */
  .pv-batt-peak {
    position: absolute;
    top: -3px; left: 50%;
    transform: translateX(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    z-index: 3;
    animation: peakPulse 2.4s ease-in-out infinite;
  }
  @keyframes peakPulse {
    0%, 100% { opacity: 0.85; transform: translateX(-50%) scale(1); }
    50%      { opacity: 1;    transform: translateX(-50%) scale(1.15); }
  }

  /* ── Scan-line sweep on initial render — tech/readout feel ── */
  .pv-batt-scan {
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    animation: scanSweep 1.6s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    animation-delay: 0.15s;
  }
  @keyframes scanSweep {
    0%   { top: 100%; opacity: 0; }
    10%  { opacity: 0.7; }
    85%  { opacity: 0.5; }
    100% { top: -2px; opacity: 0; }
  }
  .pv-batt-track { width:100%; height:240px; position:relative; background:rgba(184,200,208,0.03); overflow:hidden; }
  .pv-batt-weakest-dot { display:none; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:5px; height:5px; border-radius:50%; background:#ffb43c; box-shadow:0 0 6px #ffb43c; z-index:2; }
  .pv-batt-fill { position:absolute; bottom:0; left:0; right:0; height:0; min-height:4px; transition:height 0.85s cubic-bezier(0.22,1,0.36,1); }
  .pv-batt-fill::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:currentColor; box-shadow:0 0 6px currentColor, 0 0 16px currentColor, 0 -3px 14px currentColor; }
  .pv-batt-fill::after { content:''; position:absolute; top:1px; left:0; right:0; height:55%; background:linear-gradient(to bottom,currentColor 0%,transparent 100%); opacity:0.24; }
  .pv-batt-level-zone { position:absolute; left:0; right:0; pointer-events:none; }
  .pv-batt-label { position:absolute; bottom:8px; left:0; right:0; display:flex; align-items:center; justify-content:center; pointer-events:none; }
  .pv-batt-label span { font-family:'DM Mono',monospace; font-size:9px; letter-spacing:0.5px; white-space:nowrap; writing-mode:vertical-rl; transform:rotate(180deg); line-height:1; font-weight:500; }
  /* Tooltip */
  .pv-batt-tooltip { position:fixed; background:#040c1a; border:1px solid rgba(184,200,208,0.15); border-left:2px solid currentColor; border-radius:2px; padding:10px 14px; font-family:'DM Mono',monospace; font-size:10px; pointer-events:none; opacity:0; transition:opacity 0.12s; z-index:9999; white-space:nowrap; min-width:180px; }
  .pv-batt-tooltip.visible { opacity:1; }
  .pv-batt-tooltip-name { font-family:'Barlow Condensed',sans-serif; font-size:15px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:var(--text); margin-bottom:4px; }
  .pv-batt-tooltip-score { font-size:11px; margin-bottom:2px; }
  .pv-batt-tooltip-cta { font-size:8px; color:rgba(184,200,208,0.35); letter-spacing:1.5px; margin-top:6px; text-transform:uppercase; }
  /* Level strip */
  .pv-batt-strip { display:flex; gap:2px; margin-top:6px; }
  .pv-batt-strip-seg { flex:1; height:3px; border-radius:1px; position:relative; }
  .pv-batt-strip-seg.active { height:4px; }
  .pv-batt-strip-pip { width:9px; height:9px; border-radius:50%; position:absolute; right:-4px; top:50%; transform:translateY(-50%); }
  .pv-batt-strip-labels { display:flex; gap:2px; margin-top:5px; }
  .pv-batt-strip-lbl { flex:1; text-align:center; font-family:'DM Mono',monospace; font-size:8px; letter-spacing:1px; color:rgba(184,200,208,0.35); }
  .pv-batt-strip-lbl.active { font-size:10px; font-weight:700; letter-spacing:1px; }


/* ── Hover utility classes (replace inline onmouseover/onmouseout) ───────── */
.ax-hover-dim:hover          { opacity: 0.85 !important; }
.ax-hover-accent:hover       { color: var(--accent) !important; border-color: var(--accent) !important; }
.ax-hover-text:hover         { border-color: var(--muted) !important; color: var(--text) !important; }
.ax-hover-accent-border:hover{ border-color: var(--accent) !important; }
.ax-hover-muted:hover        { color: var(--muted) !important; }
.ax-hover-red:hover          { border-color: #ff6060 !important; color: #ff6060 !important; }