/* ==========================================================================
   breakpoints.css
   Central breakpoint reference for the app. Module CSS should write its own
   @media blocks using the values documented here — keep them in sync with
   this file (CSS custom properties can't be used inside @media queries, so
   the numbers are duplicated rather than referenced).

   Device breakpoints (the canonical three):
     --bp-sm   640px   phone ↔ tablet
     --bp-md   768px   small tablet ↔ tablet
     --bp-lg  1024px   tablet ↔ desktop

   Canonical @media patterns:
     @media (max-width: 639px)                         mobile only
     @media (min-width: 640px) and (max-width: 767px)  large mobile only
     @media (min-width: 640px) and (max-width: 1023px) tablet only
     @media (max-width: 1023px)                        tablet and below
     @media (min-width: 1024px)                        desktop and up

   IMPORTANT: when pairing a min-width rule with a max-width rule, use
   (min-width: N) with (max-width: N-1) so the boundary pixel matches
   exactly one rule. Never both `min-width: 640` and `max-width: 640`.

   Content breakpoints (okay to use when a component visually breaks):
     Some components have their own breakpoint where the content becomes
     cramped before the next device tier — e.g. wide tables that wrap at
     1000px, or grids that need to collapse at 900px. These are fine, but
     keep them local to the component's CSS and avoid inventing new ones
     when a canonical breakpoint works.
   ========================================================================== */

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}

/* --------------------------------------------------------------------------
   Reusable responsive visibility utilities.
   Use these in HTML when the element should simply disappear at a breakpoint.
   For module-specific behavior (layout changes, size tweaks), prefer writing
   the @media block inside that module's CSS file instead of adding a utility.
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hide-tablet {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .hide-tablet-down {
    display: none !important;
  }
}

@media (min-width: 1024px) {
  .hide-desktop {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .show-mobile-only {
    display: none !important;
  }
}

@media (max-width: 1023px) {
  .show-desktop-only {
    display: none !important;
  }
}