/* ═════════════════════════════════════════════════════════════
   APEX MOBILE POLISH — extra mobile-only refinements
   Loaded after apex-mobile.js applies its base styles
   ═════════════════════════════════════════════════════════════ */

/* BOTTOM-SHEET MODAL STYLE on phones — feels native */
@media (max-width: 640px) {
  #modal-overlay,
  #progress-modal-overlay,
  #apex-goals-overlay,
  #apex-category-overlay,
  #apex-profile-overlay,
  #apex-pricing-overlay,
  #apex-ref-overlay,
  #apex-email-overlay,
  #apex-support-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  #modal-overlay > .modal,
  #progress-modal-overlay > .modal,
  #apex-goals-overlay > .modal,
  #apex-category-overlay > .modal,
  #apex-profile-overlay > .modal,
  #apex-pricing-overlay > .modal,
  #apex-ref-overlay > .modal,
  #apex-email-overlay > .modal,
  #apex-support-overlay > div {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 18px 18px 0 0 !important;
    border-bottom: 0 !important;
    animation: apexSheetUp .32s cubic-bezier(.2,.8,.2,1) !important;
  }
  @keyframes apexSheetUp {
    from { transform: translateY(100%); opacity: .8; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Drag handle indicator at top of every bottom-sheet */
  #modal-overlay > .modal::before,
  #progress-modal-overlay > .modal::before,
  #apex-goals-overlay > .modal::before,
  #apex-category-overlay > .modal::before,
  #apex-profile-overlay > .modal::before,
  #apex-pricing-overlay > .modal::before,
  #apex-ref-overlay > .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: rgba(148,163,184,.35);
    border-radius: 2px;
    margin: 8px auto 0;
    flex-shrink: 0;
  }

  /* Footer sticks to bottom of sheet */
  .modal-footer {
    padding-bottom: max(20px, calc(20px + env(safe-area-inset-bottom))) !important;
  }
}

/* MOBILE STAT ROW → horizontal scroll carousel on small phones */
@media (max-width: 420px) {
  .stat-row {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px !important;
    padding: 4px 16px !important;
    margin: 0 -16px !important;
    scrollbar-width: none;
  }
  .stat-row::-webkit-scrollbar { display: none; }
  .stat-row .stat-card {
    min-width: 130px !important;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

/* TIGHTER SPACING on small phones */
@media (max-width: 380px) {
  .main { padding: 0 14px !important; }
  .greeting { font-size: 22px !important; }
  .greeting-sub { font-size: 11px !important; }
  #profile-entry-row { gap: 6px !important; }
  #profile-entry-row button { font-size: 9px !important; padding: 7px 10px !important; }
  #goals-entry-row { padding: 12px 14px !important; }
  #goals-entry-row button { padding: 9px 14px !important; font-size: 11px !important; }
}

/* TAB TRANSITIONS — slide between tabs on mobile */
@media (max-width: 768px) {
  .tab-pane {
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
  }
  .tab-pane:not(.tab-active) {
    display: none !important;
  }
}

/* HIGH CONTRAST mode respect */
@media (prefers-contrast: more) {
  :root {
    --border: #4a6272 !important;
    --muted: #cbd5e1 !important;
  }
  .form-input, .form-select {
    border-width: 2px !important;
  }
}

/* IMPROVED FOCUS STATES for keyboard nav */
@media (any-hover: hover), (any-pointer: fine) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  [role="button"]:focus-visible {
    outline: 2px solid #14b8a6 !important;
    outline-offset: 2px !important;
  }
}

/* SKELETON shapes (use .apex-skeleton + sizes) */
.apex-skel-line { height: 14px; margin: 6px 0; border-radius: 4px; }
.apex-skel-line-sm { height: 10px; margin: 4px 0; border-radius: 4px; }
.apex-skel-card { height: 120px; border-radius: 6px; margin: 8px 0; }
.apex-skel-circle { width: 48px; height: 48px; border-radius: 50%; }

/* OFFLINE state visual */
html[data-online="0"] body {
  filter: saturate(.7);
}
html[data-online="0"] #apex-offline-banner {
  display: block !important;
}

/* iOS — hide URL bar on scroll for fullscreen feel */
@media all and (display-mode: standalone) {
  body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Long-press context menu on photos */
img.apex-photo-zoomable,
#progress-timeline img,
#progress-photo-preview img {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: default;
}

/* BUTTON LOADING STATE — when an async action fires */
button.is-loading,
a.is-loading {
  pointer-events: none;
  opacity: .7;
  position: relative;
}
button.is-loading::after,
a.is-loading::after {
  content: '';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: apexSpin .7s linear infinite;
}
@keyframes apexSpin { to { transform: translateY(-50%) rotate(360deg); } }

/* TOAST positioning — bottom on mobile, top on desktop */
@media (max-width: 640px) {
  #apex-toast {
    top: auto !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%) !important;
    max-width: calc(100vw - 32px) !important;
  }
}

/* GPU-accelerated transforms — prevents jank during animation */
.modal,
.cycle-card,
.peptide-card,
.goal,
.apex-goal-tile,
.lane,
.who-card {
  will-change: transform;
  transform: translateZ(0);
}

/* PREVENT iOS rubber-band scroll on the body */
html, body {
  overscroll-behavior: none;
}

/* PERSONA-AWARE DENSITY (apex-persona.js sets data-apex-level) */

/* BEGINNER MODE — bigger fonts, more space, friendlier */
html[data-apex-level="beginner"] body {
  font-size: 15px !important;
}
html[data-apex-level="beginner"] .greeting,
html[data-apex-level="beginner"] .step-title,
html[data-apex-level="beginner"] .modal-title {
  letter-spacing: -.2px !important;
}
html[data-apex-level="beginner"] .form-input,
html[data-apex-level="beginner"] .form-select {
  font-size: 16px !important;
  padding: 13px 16px !important;
  min-height: 50px !important;
}
html[data-apex-level="beginner"] .stat-row {
  gap: 14px !important;
}
html[data-apex-level="beginner"] .stat-card {
  padding: 18px !important;
}
html[data-apex-level="beginner"] #apex-quickadd-pill {
  display: none !important;
}

/* ADVANCED MODE — tighter, denser, faster */
html[data-apex-level="advanced"] body {
  font-size: 13px !important;
}
html[data-apex-level="advanced"] .stat-card {
  padding: 10px 12px !important;
}
html[data-apex-level="advanced"] .stat-row {
  gap: 8px !important;
}
html[data-apex-level="advanced"] .form-input,
html[data-apex-level="advanced"] .form-select {
  padding: 8px 10px !important;
}
html[data-apex-level="advanced"] .greeting {
  font-size: 22px !important;
}
html[data-apex-level="advanced"] #goals-entry-row {
  padding: 10px 14px !important;
}

/* SWIPEABLE indicator for cycle cards (hint that cards have actions) */
@media (max-width: 640px) {
  .cycle-card {
    position: relative;
  }
}

/* STAGGER ANIMATION on cycle cards — each card slides in 60ms after the prior */
@keyframes apexCardIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#active-grid .cycle-card,
.cycle-grid .cycle-card {
  animation: apexCardIn .42s cubic-bezier(.2,.8,.2,1) both;
}
#active-grid .cycle-card:nth-child(1),
.cycle-grid .cycle-card:nth-child(1) { animation-delay: 0ms; }
#active-grid .cycle-card:nth-child(2),
.cycle-grid .cycle-card:nth-child(2) { animation-delay: 60ms; }
#active-grid .cycle-card:nth-child(3),
.cycle-grid .cycle-card:nth-child(3) { animation-delay: 120ms; }
#active-grid .cycle-card:nth-child(4),
.cycle-grid .cycle-card:nth-child(4) { animation-delay: 180ms; }
#active-grid .cycle-card:nth-child(5),
.cycle-grid .cycle-card:nth-child(5) { animation-delay: 240ms; }
#active-grid .cycle-card:nth-child(6),
.cycle-grid .cycle-card:nth-child(6) { animation-delay: 300ms; }
#active-grid .cycle-card:nth-child(7),
.cycle-grid .cycle-card:nth-child(7) { animation-delay: 360ms; }
#active-grid .cycle-card:nth-child(n+8),
.cycle-grid .cycle-card:nth-child(n+8) { animation-delay: 420ms; }

/* Same stagger for category tiles when picker opens */
.apex-goal-tile {
  animation: apexCardIn .35s cubic-bezier(.2,.8,.2,1) both;
}
#apex-goal-grid > button:nth-child(1) { animation-delay: 0ms; }
#apex-goal-grid > button:nth-child(2) { animation-delay: 30ms; }
#apex-goal-grid > button:nth-child(3) { animation-delay: 60ms; }
#apex-goal-grid > button:nth-child(4) { animation-delay: 90ms; }
#apex-goal-grid > button:nth-child(5) { animation-delay: 120ms; }
#apex-goal-grid > button:nth-child(6) { animation-delay: 150ms; }
#apex-goal-grid > button:nth-child(7) { animation-delay: 180ms; }
#apex-goal-grid > button:nth-child(8) { animation-delay: 210ms; }
#apex-goal-grid > button:nth-child(n+9) { animation-delay: 240ms; }

/* Stagger respects reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  #active-grid .cycle-card,
  .cycle-grid .cycle-card,
  .apex-goal-tile {
    animation: none !important;
  }
}