/*
 * Projet Résurgence — shared responsive design tokens
 * Source of truth: DesignTokens/src/pr-breakpoints.css
 *
 * Distribution: this is a plain CSS file with zero build step (like a
 * single-file IntersiteNavbar). Copy it verbatim into each consuming app's
 * static/css/pr-breakpoints.css, link it in <head> BEFORE the app's own
 * stylesheet/inline <style> block, and re-copy whenever this file changes.
 *
 * Canonical breakpoint scale — use these literal values in @media rules.
 * CSS custom properties cannot be referenced inside @media conditions, so
 * the --pr-bp-* vars below exist for documentation/JS use, not as a way to
 * write `@media (max-width: var(--pr-bp-md))` (that is not valid CSS):
 *   480px  (--pr-bp-sm)  — phone
 *   768px  (--pr-bp-md)  — tablet / phone landscape
 *   1024px (--pr-bp-lg)  — small laptop
 *   1280px (--pr-bp-xl)  — wide desktop
 *
 * Exception: PAPA intentionally keeps Bootstrap's native scale
 * (576/768/992/1200/1400) because its templates use Bootstrap grid classes
 * (col-md-, col-lg-, ...) that are hard-wired to those values. Do not force
 * PAPA's @media rules onto this scale — it would desync from Bootstrap's
 * own breakpoints and break the grid classes already in use.
 */

:root {
  --pr-bp-sm: 480px;
  --pr-bp-md: 768px;
  --pr-bp-lg: 1024px;
  --pr-bp-xl: 1280px;

  /* WCAG 2.5.5 minimum tap target */
  --pr-touch-target: 44px;
}

/* Opt-in utility classes — additive only, never overrides existing styles
   unless an app explicitly applies the class name. */

.pr-touch-target {
  min-height: var(--pr-touch-target);
  min-width: var(--pr-touch-target);
}

/* Wrap a wide table/row in this class to get a scrollable mobile fallback
   instead of a broken/overflowing layout. */
.pr-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pr-scroll-x::-webkit-scrollbar {
  height: 6px;
}

/* Bump touch targets only for touch input, leaving dense mouse-driven
   desktop layouts untouched. Apply by adding .pr-touch-target-coarse to any
   small interactive element (icon buttons, tabs, chips). */
@media (pointer: coarse) {
  .pr-touch-target-coarse {
    min-height: var(--pr-touch-target);
    min-width: var(--pr-touch-target);
  }
}
