/* ── Someone Song — Responsive & Mobile ──
 * Breakpoints:
 *   ≤ 900px  tablet
 *   ≤ 600px  mobile
 */

/* ════════════════════════════════════════════
   DASHBOARD LAPTOP  ≤ 1200px
════════════════════════════════════════════ */
@media (max-width: 1200px) {
  .dash-content-inner { padding: var(--sp-30) var(--sp-28) var(--sp-48); }

  .dash-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-14);
  }

  .dash-stats-grid .stats-card:last-child {
    grid-column: 1 / -1;
  }

  .dash-stats-grid .stats-card {
    padding: var(--sp-18) var(--sp-20);
  }

  .dash-tab-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-18);
  }

  .dash-create-btn {
    font-size: var(--fs-14);
    padding: var(--sp-12) var(--sp-24);
  }

  .dash-greeting h2 { font-size: var(--fs-32); }
}

/* ════════════════════════════════════════════
   TABLET  ≤ 900px
════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── Landing nav: hide secondary links ── */
  .nav-wrap    { padding: 0 var(--sp-20); }
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: var(--sp-10) var(--sp-16);
    gap: var(--sp-10);
    position: relative;
  }
  .landing-menu-toggle { display: inline-flex; margin-left: auto; }
  .nav-actions { display: none; }
  .nav-links {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: var(--sp-6);
    padding: var(--sp-10);
    background: var(--glass-hi);
    border: 1px solid var(--border-hi);
    border-radius: var(--r-14);
    box-shadow: 0 16px 40px var(--scrim-03);
  }
  .nav-links.is-open { display: flex; }
  .nav-link {
    width: 100%;
    text-align: left;
    border-radius: var(--r-10);
    padding: var(--sp-10) var(--sp-12);
  }
  .nav-link-mobile-action {
    display: block;
    color: var(--rose);
  }

  /* ── Sections ── */
  .section    { padding: var(--sp-80) var(--sp-24); }
  .section-sm { padding: var(--sp-48) var(--sp-24); }
  .section--hero { padding-top: calc(var(--sp-96) + var(--sp-32) + var(--sp-2)); }

  /* ── Hero: brand above, conversation below ── */
  .hero-grid { grid-template-columns: 1fr; gap: var(--sp-40); }
  .hero-lead { max-width: 100%; }

  /* ── Gift: neighbours cost too much width to keep below 900px. The name
        row takes over as the picker, since the phones can no longer be it. ── */
  .gift-carousel { gap: var(--sp-20); }
  .gift-slot:not(.is-current) { display: none; }
  .gift-picker { display: flex; }

  /* The device frame is redundant here — the visitor is already holding a
     phone, and the bezel spends ~30% of the width drawing them one. Dropping
     it lets the photographs run edge to edge, which is the whole point of the
     section. Widths are set on the slot so the phone's 100% has something
     definite to resolve against. */
  .gift-slot { width: min(420px, 100%); }
  .gift-phone {
    width: 100%;
    aspect-ratio: 9 / 15.5;
    padding: 0;
    border-radius: var(--r-24);
  }
  .gift-phone-screen { border-radius: var(--r-24); }
  .gift-foot { flex-direction: column; align-items: flex-start; gap: var(--sp-28); }
  .gift-facts { flex-direction: column; gap: var(--sp-10); }
  .listen-picker { flex-direction: row; flex-wrap: wrap; }
  .listen-pick {
    flex: 1 1 12rem;
    border-left: none;
    border-bottom: 1px solid var(--border);
  }
  .listen-pick.is-current { border-left-color: transparent; border-bottom-color: var(--t1); }

  /* ── How it works: stack, keep the rule on the leading edge ── */
  .steps { grid-template-columns: 1fr; border-top: none; }
  .step {
    border-left: none;
    border-top: 1px solid var(--border);
    padding: var(--sp-28) 0 0;
  }
  .step:first-child { padding-left: 0; }

  /* ── Pricing: 1 col ── */
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }

  /* ── Footer: 2-col grid ── */
  .footer { padding: var(--sp-48) var(--sp-24) var(--sp-28); }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-40);
  }
  .footer-brand { grid-column: 1 / -1; }

  /* ── Legal pages ── */
  .legal-nav       { padding: var(--sp-16) var(--sp-24); }
  .legal-container { padding: var(--sp-40) var(--sp-24) var(--sp-80); }

  /* ── Contact page ── */
  .contact-nav { padding: var(--sp-16) var(--sp-24); }
  .contact-nav-inner { max-width: 100%; }
  .contact-wrap { grid-template-columns: 1fr; gap: var(--sp-40); padding: var(--sp-40) var(--sp-24) var(--sp-80); }

  /* ── App nav (nav.js rendered) ── */
  .nav {
    flex-wrap: wrap;
    height: auto;
    padding: var(--sp-12) var(--sp-16);
    gap: var(--sp-10);
  }
  .nav-center { order: 3; width: 100%; overflow-x: auto; padding-bottom: var(--sp-2); }

  /* ── Dashboard nav ── */
  .dash-nav { flex-wrap: wrap; height: auto; padding: var(--sp-12) var(--sp-16); gap: var(--sp-12); }
  .dash-menu-toggle { display: inline-flex; margin-left: auto; }
  .dash-nav-end { gap: var(--sp-8); }
  .dash-nav-tabs {
    order: 4;
    width: 100%;
    display: none;
    flex-direction: column;
    gap: var(--sp-8);
    padding-top: var(--sp-6);
  }
  .dash-nav-tabs.is-open { display: flex; }
  .dash-nav-tabs .dash-nav-link { width: 100%; text-align: left; }

  .dash-create-btn {
    font-size: var(--fs-13);
    padding: var(--sp-10) var(--sp-20);
  }

  .dash-stats-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-12);
    margin-bottom: var(--sp-28);
  }

  .dash-stats-grid .stats-card:last-child {
    grid-column: auto;
  }

  .dash-stats-grid .stats-card {
    padding: var(--sp-16) var(--sp-18);
    gap: var(--sp-12);
  }

  .dash-stats-grid .stats-value {
    font-size: var(--fs-20);
    line-height: 1.2;
    white-space: nowrap;
  }

  /* ── Song grid: 2 cols ── */
  .song-grid { grid-template-columns: repeat(2, 1fr); }

  /* ── Player layout: stack ── */
  .player-layout {
    flex-direction: column;
    padding: 0 var(--sp-20) var(--sp-40);
    overflow-y: auto;
    align-items: stretch;
    gap: var(--sp-16);
  }
  .player-main { flex: none; }
  .player-card {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-28);
    padding: var(--sp-32) var(--sp-24);
  }
  .player-card-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-20);
  }
  .player-tag-row {
    justify-content: center;
  }
  .take-chooser {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .take-chooser-controls {
    justify-content: center;
  }
  .player-actions-lock {
    border-radius: var(--r-16);
  }
  .turntable-container {
    width: 180px;
    height: 180px;
  }
  .turntable-plate {
    width: 150px;
    height: 150px;
  }
  .vinyl-disc {
    width: 126px;
    height: 126px;
  }
  .tonearm {
    right: 0px;
    top: -10px;
  }
  .player-lyrics {
    width: 100%;
    flex-shrink: 0;
    height: 22.5rem;
    max-height: none;
  }

  /* ── Lyrics review layout: stack ── */
  .lr-layout {
    flex-direction: column;
    padding: 0 var(--sp-20) var(--sp-40);
    overflow-y: auto;
    align-items: stretch;
    gap: var(--sp-16);
  }
  .lr-main { flex: none; }
  .lr-side { width: 100%; }

  /* ── Gift & Share layout: stack ── */
  .gift-share-layout {
    grid-template-columns: 1fr;
    padding: 0 var(--sp-24) var(--sp-40);
    gap: var(--sp-24);
  }
  .gift-share-card { width: 100%; max-height: none; position: static; }

  /* ── Refine page ── */
  .refine-page { padding: 0 var(--sp-24) var(--sp-40); }
  .refine-grid { grid-template-columns: 1fr; }
  .refine-chat-wrap { border-radius: var(--r-16); }

  /* ── Versions page ── */
  .ver-page { padding: 0 var(--sp-24) var(--sp-40); }

  /* ── Page center ── */
  .page-center { padding: 0 var(--sp-24) var(--sp-28); }
}

/* ════════════════════════════════════════════
   MOBILE  ≤ 600px
════════════════════════════════════════════ */
@media (max-width: 600px) {

  /* ── Sections ── */
  .section    { padding: var(--sp-64) var(--sp-16); }
  .section-sm { padding: var(--sp-40) var(--sp-16); }
  .section--hero { padding-top: calc(var(--sp-96) + var(--sp-12)); padding-bottom: var(--sp-56); }

  /* ── Nav ── */
  .nav-wrap  { padding: 0 var(--sp-8); }
  .nav-inner { padding: var(--sp-10) var(--sp-12); height: auto; gap: var(--sp-12); }

  /* ── Hero ── */
  .hero-actions { gap: var(--sp-14); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .hero-trust { gap: var(--sp-14); }
  .hero-chat-body { padding: var(--sp-16) var(--sp-14); gap: var(--sp-12); }
  .hero-lyric { font-size: var(--fs-17); }

  .gift-foot { width: 100%; }
  .gift-foot .btn { width: 100%; justify-content: center; }

  /* ── Footer: 1 col ── */
  .footer { padding: var(--sp-32) var(--sp-16) var(--sp-20); }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-28);
  }
  .footer-brand { grid-column: auto; }

  /* ── Legal pages ── */
  .legal-nav { padding: var(--sp-14) var(--sp-16); }
  .legal-container { padding: var(--sp-32) var(--sp-16) var(--sp-60); }
  .legal-container h1 { font-size: var(--fs-32); }

  /* ── Auth card: full width ── */
  .auth-card {
    width: calc(100vw - 32px);
    max-width: 420px;
    padding: var(--sp-28) var(--sp-20);
    border-radius: var(--r-20);
  }

  /* ── Form card ── */
  .form-card { padding: var(--sp-24) var(--sp-16); }

  /* ── Field rows → stack on mobile ── */
  .field-row, .field-row--lg { flex-direction: column; }

  /* ── Card option rows → stack ── */
  .card-row { flex-direction: column; }

  /* ── Song grid: 1 col ── */
  .song-grid { grid-template-columns: 1fr; }

  /* ── Dashboard nav ── */
  .dash-nav { padding: var(--sp-10) var(--sp-12); }
  .dash-nav-end .btn-ghost { display: none; }
  .dash-menu-toggle { display: inline-flex; }

  .dash-stats-grid .stats-value {
    font-size: var(--fs-18);
  }

  .dash-create-btn {
    width: 100%;
    justify-content: center;
    padding: var(--sp-10) var(--sp-16);
  }

  /* ── Player ── */
  .player-card { padding: var(--sp-20) var(--sp-16); gap: var(--sp-18); align-items: stretch; }
  .player-layout { padding: 0 var(--sp-12) var(--sp-28); }
  .player-song-title { font-size: var(--fs-28); }
  .take-chooser {
    width: 100%;
    padding: var(--sp-12);
  }
  .take-chooser-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .take-segmented {
    width: 100%;
  }
  .take-segment {
    flex: 1;
    min-width: 0;
  }
  .take-confirm {
    width: 100%;
  }
  .player-actions-lock {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    padding: var(--sp-12) var(--sp-14);
  }
  .player-actions-lock-copy {
    text-align: left;
  }

  /* ── Lyrics review ── */
  .lr-card { padding: var(--sp-20) var(--sp-16); gap: var(--sp-18); }
  .lr-layout { padding: 0 var(--sp-12) var(--sp-28); }
  .lr-song-title { font-size: var(--fs-26); }
  .player-lyrics {
    height: 18.75rem;
    max-height: none;
  }

  /* ── Gift share ── */
  .gift-share-layout { padding: 0 var(--sp-12) var(--sp-28); }

  /* ── Refine ── */
  .refine-page { padding: 0 var(--sp-12) var(--sp-32); }
  .refine-chat-input { font-size: var(--fs-14); }
  .refine-chat-footer { flex-wrap: wrap; gap: var(--sp-10); }

  /* ── Versions ── */
  .ver-page    { padding: 0 var(--sp-12) var(--sp-32); }
  .ver-content { max-width: 100%; }

  /* ── Glass surfaces: tighter radius on small screens ── */
  .glass        { border-radius: var(--r-12); }
  .glass-strong { border-radius: var(--r-16); }

  /* ── Page center ── */
  .page-center { padding: 0 var(--sp-12) var(--sp-20); }

  /* ── Social button row ── */
  .btn-social-row { flex-direction: column; }

  /* ── Footer bottom ── */
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--sp-10); }
}

/* ════════════════════════════════════════════
   REDUCED MOTION (A complete visual stability override)
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  .reveal, .error-card, .auth-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .orb {
    animation: none !important;
    display: none !important;
  }
  .btn:hover,
  .occ-card:hover,
  .song-card-v:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .gift-play-btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}