/* ============================================================
   Phone-only responsive overrides for MySkillManager
   Targets screens < 640px (below Tailwind's sm: breakpoint).
   Tablet and desktop layouts are completely untouched.

   CONVENTION: selectors are scoped as tightly as possible so
   tablet / desktop classes with the same Tailwind names are
   never affected. Where a utility is genuinely page-agnostic
   (headings, safe-area) a bare utility selector is acceptable.
   ============================================================ */

@media (max-width: 639px) {

  /* ==========================================================
     1.  GLOBAL TYPOGRAPHY – scale down large headings
     ========================================================== */
  h1.text-3xl,
  .text-center h1.text-3xl,
  .text-center > h1.text-3xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
  h1.text-4xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
  }
  h2.text-2xl,
  .text-center h2.text-2xl {
    font-size: 1.125rem !important;
    line-height: 1.5rem !important;
  }
  /* Subtitle / helper text beside headings */
  .text-center > p.text-zinc-500 {
    font-size: 0.8125rem !important;
    line-height: 1.25rem !important;
  }

  /* ==========================================================
     2.  ATTENDANCE PAGE
     ========================================================== */

  /* ── Page container ────────────────────────────────────────── */
  .max-w-2xl.mx-auto.px-4.py-6 {
    padding: 0.75rem 0.75rem 1rem !important;
  }

  /* ── Header block spacing ──────────────────────────────────── */
  .max-w-2xl .text-center.mb-8 {
    margin-bottom: 1.25rem !important;
  }

  /* ── Group name label ──────────────────────────────────────── */
  .max-w-2xl .text-center p.text-cyan-400 {
    font-size: 0.6875rem !important;
    margin-bottom: 0.25rem !important;
  }

  /* ── "X of Y present" counter ──────────────────────────────── */
  .max-w-2xl .text-center p.text-zinc-500 {
    font-size: 0.8125rem !important;
    margin-top: 0.125rem !important;
  }

  /* ── "All Present" + "Add Extra Gymnast" full-width buttons ── */
  .max-w-2xl > button.w-full,
  .max-w-2xl > a.w-full {
    font-size: 0.8125rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    min-height: 40px !important;
  }
  .max-w-2xl > button.w-full svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* ── Gymnast rows (primary + visiting + manual) ────────────── */
  .max-w-2xl button.rounded-xl[class*="min-h-"] {
    padding: 0.5rem 0.625rem !important;
    min-height: 48px !important;
    gap: 0.5rem !important;
  }
  /* Tighter list spacing */
  .max-w-2xl .space-y-2 {
    --tw-space-y-reverse: 0;
  }
  .max-w-2xl .space-y-2 > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0.375rem !important;
  }

  /* ── Check-mark icon box (h-10 w-10) inside attendance rows ── */
  .max-w-2xl .h-10.w-10.rounded-lg {
    height: 2rem !important;
    width: 2rem !important;
    border-radius: 0.375rem !important;
  }
  .max-w-2xl .h-10.w-10.rounded-lg svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* ── Gymnast name text ─────────────────────────────────────── */
  .max-w-2xl button.rounded-xl .text-lg.font-bold {
    font-size: 0.9375rem !important;
    line-height: 1.25rem !important;
  }
  /* Level badge beside name */
  .max-w-2xl button.rounded-xl .text-sm.text-zinc-500 {
    font-size: 0.75rem !important;
  }

  /* ── Section dividers ("From <Location>" / "Manually Added") ── */
  .max-w-2xl .text-sm.font-medium {
    font-size: 0.75rem !important;
  }
  .max-w-2xl .text-xs.text-zinc-700 {
    font-size: 0.625rem !important;
  }
  .max-w-2xl .mb-6:not(.text-center) {
    margin-bottom: 0.75rem !important;
  }

  /* ── "Start Training" submit button ────────────────────────── */
  .max-w-2xl button[class*="w-full"][class*="gap-2"]:last-of-type {
    font-size: 0.9375rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    min-height: 44px !important;
  }

  /* ── Error banner ──────────────────────────────────────────── */
  .max-w-2xl .bg-red-500\/20 {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.8125rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* ==========================================================
     3.  MODE SELECTION CARDS (Team Training / My Training)
     ========================================================== */
  /* Scope to the cards with large padding + min-height */
  .min-h-\[240px\].p-10 {
    padding: 1.25rem !important;
    min-height: 140px !important;
  }
  /* 80×80 icon box inside mode cards */
  .min-h-\[240px\] .h-20.w-20,
  .p-10 > .h-20.w-20,
  .h-20.w-20.rounded-2xl {
    height: 3rem !important;
    width: 3rem !important;
  }
  .h-20.w-20 svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
  }
  /* Gap inside mode cards */
  .min-h-\[240px\].gap-5,
  .min-h-\[240px\] .gap-5 {
    gap: 0.75rem !important;
  }

  /* ==========================================================
     4.  FAB BUTTON STACK (bottom-right floating actions)
     ========================================================== */
  .fixed.bottom-6.right-6.z-30 {
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
    right: 0.75rem !important;
    gap: 0.375rem !important;
    left: auto !important;
    max-width: calc(100vw - 1.5rem) !important;
  }
  .fixed.bottom-6.right-6.z-30 > button,
  .fixed.bottom-6.right-6.z-30 > a {
    font-size: 0.75rem !important;
    padding: 0.35rem 0.7rem !important;
    height: auto !important;
    min-height: 32px !important;
    gap: 0.25rem !important;
    max-width: min(44vw, 11rem) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  .fixed.bottom-6.right-6.z-30 > button:last-child,
  .fixed.bottom-6.right-6.z-30 > a:last-child {
    max-width: none !important;
  }
  .fixed.bottom-6.right-6.z-30 > button svg,
  .fixed.bottom-6.right-6.z-30 > a svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }

  /* ==========================================================
     5.  GYMNAST GRID (team view – 2-col card grid)
     ========================================================== */
  .grid.grid-cols-2 {
    gap: 0.5rem !important;
  }
  .grid.grid-cols-2 > button {
    padding: 0.75rem !important;
  }
  .min-h-\[160px\] {
    min-height: 100px !important;
  }
  /* Avatar circle */
  .grid.grid-cols-2 .h-14.w-14 {
    height: 2.5rem !important;
    width: 2.5rem !important;
  }
  .grid.grid-cols-2 .h-14.w-14 .text-lg {
    font-size: 0.8125rem !important;
  }
  /* Name under avatar */
  .grid.grid-cols-2 .text-lg.font-bold {
    font-size: 0.9375rem !important;
    line-height: 1.25rem !important;
  }

  /* ==========================================================
     6.  GYMNAST DASHBOARD / SKILL LIST PAGE
     ========================================================== */
  .max-w-3xl.mx-auto.px-4.pt-2.pb-24,
  .max-w-3xl.mx-auto.px-4 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
  /* This page's wrapper carries pb-24 on the same element, not a descendant. */
  .max-w-3xl.mx-auto.px-4.pt-2.pb-24 {
    padding-bottom: 7.5rem !important;
  }
  /* Keep the floating CTA stack in-flow on phone so it stops covering skills. */
  .max-w-3xl.mx-auto.px-4.pt-2.pb-24 > .fixed.bottom-6.right-6.z-30 {
    position: sticky !important;
    bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important;
    right: auto !important;
    left: auto !important;
    margin-top: 0.75rem !important;
    margin-left: auto !important;
    width: max-content !important;
    z-index: 20 !important;
  }

  /* ── Skill card rows ───────────────────────────────────────── */
  .max-w-3xl button.p-4.rounded-xl.min-h-\[48px\],
  .max-w-3xl button.p-4.rounded-xl {
    padding: 0.625rem 0.75rem !important;
    min-height: 44px !important;
    gap: 0.625rem !important;
  }
  .max-w-3xl button.p-4.rounded-xl h4.text-base {
    font-size: 0.9375rem !important;
    line-height: 1.2rem !important;
  }
  .max-w-3xl button.p-4.rounded-xl .text-xs.text-zinc-500 {
    font-size: 0.6875rem !important;
  }
  /* Section headers (Upskill / Detail etc.) */
  .max-w-3xl button.px-4.py-3.min-h-\[48px\],
  .max-w-3xl button.px-4.py-3 {
    padding: 0.5rem 0.75rem !important;
    min-height: 40px !important;
  }

  /* ── Apparatus tab bar (sticky top) ────────────────────────── */
  [role="tablist"] button,
  .sticky.top-0 button {
    font-size: 0.8125rem !important;
    padding-left: 0.625rem !important;
    padding-right: 0.625rem !important;
    min-height: 40px !important;
  }
  .sticky.top-0 button svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* ==========================================================
     7.  REQUEST SKILL PAGE
     ========================================================== */
  .flex.gap-2.mb-6.overflow-x-auto {
    gap: 0.375rem !important;
    margin-bottom: 1rem !important;
  }
  .flex.gap-2.mb-6.overflow-x-auto > button {
    padding: 0.375rem 0.625rem !important;
    font-size: 0.75rem !important;
    min-height: 34px !important;
  }
  .space-y-2 > button.p-4.rounded-xl {
    padding: 0.625rem 0.75rem !important;
  }

  /* ── Focus-Next recommendation cards ───────────────────────── */
  .max-w-3xl .mb-4 > .flex.gap-2\.5 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
  }
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > button,
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > a {
    min-width: 0 !important;
    width: 100% !important;
    padding: 0.5rem !important;
  }
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > button:last-child:nth-child(odd),
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > a:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > button .truncate,
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > a .truncate {
    font-size: 0.8125rem !important;
    line-height: 1rem !important;
  }
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > button .line-clamp-2,
  .max-w-3xl .mb-4 > .flex.gap-2\.5 > a .line-clamp-2 {
    font-size: 0.6875rem !important;
    line-height: 0.95rem !important;
  }

  /* ==========================================================
     8.  SPLIT TIMER
     ========================================================== */
  .h-24.w-24.rounded-full {
    height: 4rem !important;
    width: 4rem !important;
  }
  .text-5xl {
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }
  /* Per-gymnast timer cards */
  .grid.grid-cols-2.gap-3 > div.p-3 {
    padding: 0.5rem !important;
  }
  .grid.grid-cols-2.gap-3 {
    gap: 0.375rem !important;
  }
  /* Rep counter large number */
  .text-6xl, .text-7xl, .text-8xl {
    font-size: 2.5rem !important;
    line-height: 3rem !important;
  }

  /* ==========================================================
     9.  MODALS (Add Gymnast, etc.)
     ========================================================== */
  .fixed.inset-0.z-50[class*="pt-"] {
    padding-top: 3vh !important;
  }
  .fixed.inset-0.z-50 [style*="max-height: 80vh"] {
    max-height: 90vh !important;
  }
  /* Modal header */
  .fixed.inset-0.z-50 .p-4.border-b {
    padding: 0.625rem 0.75rem !important;
  }
  .fixed.inset-0.z-50 h2.text-lg {
    font-size: 1rem !important;
  }
  /* Modal search input area */
  .fixed.inset-0.z-50 .p-4.border-b + .p-4 {
    padding: 0.625rem 0.75rem !important;
  }
  /* Modal list items */
  .fixed.inset-0.z-50 button.p-3.rounded-xl {
    padding: 0.5rem 0.625rem !important;
    gap: 0.375rem !important;
  }
  .fixed.inset-0.z-50 .h-9.w-9 {
    height: 1.75rem !important;
    width: 1.75rem !important;
  }
  .fixed.inset-0.z-50 .h-9.w-9 svg {
    width: 0.875rem !important;
    height: 0.875rem !important;
  }
  .fixed.inset-0.z-50 .text-sm.font-bold {
    font-size: 0.8125rem !important;
  }
  .fixed.inset-0.z-50 .text-xs.text-zinc-500 {
    font-size: 0.6875rem !important;
  }

  /* ==========================================================
     10. PIN ENTRY PAGE
     ========================================================== */
  .max-w-xs {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .grid.grid-cols-3.gap-3 {
    gap: 0.375rem !important;
  }
  .grid.grid-cols-3 button.h-14 {
    height: 3rem !important;
  }

  /* ── My Training login input ───────────────────────────────── */
  input.py-4,
  input[class*="py-4"] {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  /* ==========================================================
     11. "HOW ARE YOU TRAINING?" INTRO SECTION
     ========================================================== */
  .text-center.mb-12 {
    margin-bottom: 2rem !important;
  }

  /* ==========================================================
     12. GOALS PAGE / STAT CARDS
     ========================================================== */
  .rounded-2xl.p-5 {
    padding: 0.75rem !important;
  }
  /* Only tighten p-6/p-8 inside card-like containers, not globally */
  .rounded-2xl.p-6,
  .rounded-xl.p-6 {
    padding: 1rem !important;
  }
  .rounded-2xl.p-8,
  .rounded-xl.p-8 {
    padding: 1.25rem !important;
  }

  /* ==========================================================
     13. BREADCRUMBS — prevent overflow
     ========================================================== */
  header .ml-4 {
    overflow: hidden;
    max-width: 45vw;
  }
  header .ml-4 span,
  header .ml-4 a {
    font-size: 0.75rem !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ==========================================================
     14. GENERAL MOBILE DENSITY (scoped)
     ========================================================== */
  /* Page-level top/bottom padding — scope to direct children of #root */
  #root > .py-6,
  #root > div > .py-6 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
  }

  /* Full-width action buttons anywhere (size-lg / size-xl) */
  button.w-full[class*="py-4"],
  a.w-full[class*="py-4"] {
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
  }

  /* ==========================================================
     15. TEXT SAFETY NET
     ========================================================== */
  .truncate {
    max-width: 100%;
  }
  h1, h2, h3, h4 {
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* ==========================================================
     16. SAFE AREA (iPhone notch / home indicator)
     ========================================================== */
  .safe-top {
    padding-top: env(safe-area-inset-top, 0px) !important;
  }
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }
}