/* ============================================================================
   Responsive helpers — breakpoints, visibility utilities, touch targets
   ============================================================================
   Mobile-first. The tokens.css file is breakpoint-agnostic; this file maps
   tokens onto media queries and provides utility classes for hide/show.

   Breakpoints (mobile-first; each kicks in at min-width)
     xs  default  (< 480px)
     sm  >=  480px
     md  >=  768px
     lg  >= 1024px
     xl  >= 1440px
   ============================================================================ */

/* -----------------------------------------------------------------------
   Visibility utility classes — opt-in
   .hidden-{bp}  hides at OR BELOW that breakpoint (max-width)
   .show-{bp}    shows ONLY at OR ABOVE that breakpoint (min-width)
   ----------------------------------------------------------------------- */
@media (max-width: 479px) {
  .hidden-xs { display: none !important; }
}
@media (max-width: 767px) {
  .hidden-sm { display: none !important; }
}
@media (max-width: 1023px) {
  .hidden-md { display: none !important; }
}
@media (max-width: 1439px) {
  .hidden-lg { display: none !important; }
}

@media (max-width: 479px) {
  .show-sm,
  .show-md,
  .show-lg,
  .show-xl { display: none !important; }
}
@media (min-width: 480px) and (max-width: 767px) {
  .show-md,
  .show-lg,
  .show-xl { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .show-lg,
  .show-xl { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .show-xl { display: none !important; }
}

/* -----------------------------------------------------------------------
   Touch target minimum on small screens
   Buttons / clickable elements get a min hit area on mobile so finger
   taps are reliable. Components that opt out can disable with .no-touch-min.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .c-button,
  .c-icon-button,
  button.c-tap,
  [role="button"].c-tap,
  a.c-tap {
    min-height: var(--tap-target-min);
    min-width: var(--tap-target-min);
  }
}

/* -----------------------------------------------------------------------
   Safe-area insets for iOS notch / home indicator
   ----------------------------------------------------------------------- */
.safe-area-top    { padding-top:    max(var(--space-4), env(safe-area-inset-top)); }
.safe-area-bottom { padding-bottom: max(var(--space-4), env(safe-area-inset-bottom)); }
.safe-area-left   { padding-left:   max(var(--space-4), env(safe-area-inset-left)); }
.safe-area-right  { padding-right:  max(var(--space-4), env(safe-area-inset-right)); }

/* -----------------------------------------------------------------------
   Container helpers — max-width + horizontal padding
   ----------------------------------------------------------------------- */
.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) {
  .container { padding-inline: var(--space-5); }
}
.container-sm  { max-width: var(--container-sm); }
.container-md  { max-width: var(--container-md); }
.container-lg  { max-width: var(--container-lg); }
.container-xl  { max-width: var(--container-xl); }
.container-2xl { max-width: var(--container-2xl); }

/* -----------------------------------------------------------------------
   Layout helpers — flex / grid quick-stacks
   ----------------------------------------------------------------------- */
.stack    { display: flex; flex-direction: column; gap: var(--space-3); }
.stack-2  { gap: var(--space-2); }
.stack-4  { gap: var(--space-4); }
.stack-5  { gap: var(--space-5); }
.row      { display: flex; align-items: center; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.row-end  { justify-content: flex-end; }
.row-between { justify-content: space-between; }

.grow     { flex-grow: 1; }
.shrink-0 { flex-shrink: 0; }

/* -----------------------------------------------------------------------
   Screen-reader-only — universal, non-breaking
   ----------------------------------------------------------------------- */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -----------------------------------------------------------------------
   Focus-visible ring — components reference this consistently
   ----------------------------------------------------------------------- */
.c-focus-ring:focus-visible,
.c-focusable:focus-visible {
  outline: none;
  box-shadow: var(--shadow-glow-accent);
}

/* ============================================================================
   RESPONSIVE CONTRACT  (read before adding a media query anywhere)
   ----------------------------------------------------------------------------
   Canonical breakpoint literals — author against THESE, no new numbers:
     480px   xs → sm   (phone portrait vs. large phone)
     768px   THE mobile/tablet ↔ desktop line. Author `@media (max-width:767px)`
             for "phone/tablet", `@media (min-width:768px)` for "desktop".
     1024px  tablet-landscape → wide desktop.
   The ~hundreds of legacy ad-hoc breakpoints are grandfathered; do NOT mass
   rewrite them. New and migrated code uses the literals above or the .u-*
   utilities below.

   Hard rules (regressions traced to violating these):
   • Global nav lives in modules/shell/mobile-nav.js + styles/shell.css.
     Never add `.nav-btn{display:none}` (or hide the nav) on small screens
     without keeping a mobile affordance that reaches every destination.
   • A panel with a fixed `width:NNNpx` MUST have a ≤767px escalation
     (full-width, .u-sheet-on-mobile, or a stacked layout). No exceptions.
   • Drag / scrub / canvas interactions handle PointerEvents, not bare
     mouse* as the only action path (touch users get nothing otherwise).
   See docs/responsive-foundation.md for the full rationale + device matrix.
   ============================================================================ */

/* -----------------------------------------------------------------------
   .u-scroll-x — horizontal overflow becomes a touch-momentum scroller.
   Use for wide tables / brackets / chip rows instead of letting the
   page itself scroll sideways.
   ----------------------------------------------------------------------- */
.u-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

/* -----------------------------------------------------------------------
   .u-stack-md — multi-column flex/grid collapses to a single column at
   ≤767px. Opt-in; desktop layout untouched.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .u-stack-md {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* -----------------------------------------------------------------------
   .u-sheet-on-mobile — a desktop side panel becomes a bottom sheet at
   ≤767px (fixed to the bottom, full width, own scroll) so it stops
   covering primary content (minimap, canvas, tables). Desktop ≥768px
   keeps the element exactly as authored.

   NOTE: an element whose width/left/top is set via winning *inline*
   styles (JS drag/resize) needs those neutralized in the same ≤767px
   guard — a class can't beat inline. See css/replay.css .replay-sidebar.
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
  .u-sheet-on-mobile {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 80vh;
    margin: 0 !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    z-index: var(--z-drawer);
    box-shadow: var(--shadow-xl);
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
  }
}