/**
 * Reelym Enterprise Mobile System — shared responsive foundation.
 * Custom CSS (no Tailwind). Safe to load on Consumer, Studios, Admin.
 *
 * Breakpoints (tokens):
 *   --bp-xs: 320  --bp-sm: 375  --bp-md: 414
 *   --bp-tablet: 768  --bp-laptop: 1024  --bp-desktop: 1280
 */
:root {
  --bp-xs: 320px;
  --bp-sm: 375px;
  --bp-md: 414px;
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --nav-bar-h: 64px;
  --bottom-nav-h: 56px;
  --touch-min: 44px;
  --space-fluid: clamp(12px, 3.5vw, 24px);
  --text-fluid-sm: clamp(13px, 2.8vw, 15px);
  --text-fluid-md: clamp(15px, 3.2vw, 18px);
  --text-fluid-lg: clamp(20px, 5vw, 28px);
  --text-fluid-xl: clamp(26px, 6.5vw, 40px);
  --container-pad: clamp(12px, 4vw, 32px);
}

/* Fluid type helpers */
.lr-fluid-sm { font-size: var(--text-fluid-sm); }
.lr-fluid-md { font-size: var(--text-fluid-md); }
.lr-fluid-lg { font-size: var(--text-fluid-lg); }
.lr-fluid-xl { font-size: var(--text-fluid-xl); line-height: 1.15; }

/* Scroll containers — prevent page-wide overflow from tables/timelines */
.lr-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  max-width: 100%;
}
.lr-scroll-x > table {
  min-width: 520px;
}

/* Sticky mobile chrome helpers */
.lr-sticky-top {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(12px);
  background: rgba(10, 10, 15, 0.92);
}
.lr-sticky-cta {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 12px var(--container-pad);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, transparent, rgba(10, 10, 15, 0.96) 28%);
}

/* Thumb-friendly controls */
.lr-touch,
.lr-touch .btn,
.lr-touch button,
.lr-touch a.btn {
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

/* Media defaults */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}
video,
.reel-player,
.reel-player video {
  width: 100%;
  max-height: min(80vh, 720px);
  object-fit: contain;
  background: #000;
}

/* Lazy-load friendly fade */
img[loading='lazy'] {
  content-visibility: auto;
}

/* Modal / sheet on phones */
@media (max-width: 768px) {
  .modal-backdrop {
    align-items: flex-end;
    padding: 0;
  }
  .modal-box {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 16px 16px 0 0;
    max-height: min(92vh, 100%);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .container,
  .container.section,
  .section {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
  h1, .text-2xl { font-size: var(--text-fluid-xl); }
  h2 { font-size: var(--text-fluid-lg); }
  .card { padding: var(--space-fluid); }
  .btn-lg { width: 100%; justify-content: center; }

  /* Forms — prevent iOS zoom */
  input,
  textarea,
  select {
    font-size: 16px !important;
    max-width: 100%;
  }

  /* Dense toolbars wrap */
  .flex.gap-2,
  .flex.gap-3 {
    flex-wrap: wrap;
  }
}

/* Extra-narrow phones */
@media (max-width: 374px) {
  :root { --container-pad: 10px; }
  .btn { padding-left: 12px; padding-right: 12px; }
  .stat-card { padding: 10px !important; }
}

/* Landscape phones — keep chrome compact */
@media (max-width: 900px) and (orientation: landscape) {
  .modal-box { max-height: 88vh; }
  .nav-mobile-panel { max-height: 100vh; }
}

/* Foldable / dual approximate: treat mid-width as tablet stack */
@media (min-width: 600px) and (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
  .container.section { padding-left: 20px; padding-right: 20px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .nav-mobile-menu.open .nav-mobile-link,
  .nav-mobile-menu.open .nav-mobile-quick {
    animation: none !important;
  }
}

/* Reel player — defer to #view-viewer cinema rules in styles.css.
   Do NOT set stage height / object-fit:contain here (that caused the
   tiny letterboxed player on phones). */
@media (max-width: 768px) {
  #reel-narration,
  .reel-narration {
    font-size: var(--text-fluid-sm);
    line-height: 1.35;
  }
  .player-bar .btn,
  .player-controls button {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
  }
}

/* Memory upload — mobile touch targets + preview density */
@media (max-width: 768px) {
  #upload-drop.drop-zone,
  .drop-zone {
    min-height: 140px;
    padding: var(--space-fluid);
    touch-action: manipulation;
  }
  .upload-preview-grid {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 10px;
  }
  .upload-preview-item .remove-btn {
    width: var(--touch-min);
    height: var(--touch-min);
    top: 2px;
    right: 2px;
  }
  #upload-submit-btn,
  .upload-wizard-panel .btn {
    min-height: var(--touch-min);
    font-size: var(--text-fluid-md);
  }
  .upload-wizard-steps {
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}