/* ===========================================================================
   Canonical responsive scale (R-01)
   ===========================================================================

   The stylesheets grew 17 different max-width breakpoints - 350, 390, 480,
   520, 560, 640, 700, 720, 760, 768, 840, 900, 920, 1024, 1180, 1280, 1440 -
   plus min-widths at 921, 1025 and 1366, in two different syntaxes
   (`@media(max-width:760px)` and `@media (max-width: 768px)`). With that many
   thresholds nobody can predict what a page does at an arbitrary width, which
   is why responsive regressions keep coming back.

   FOUR breakpoints, and nothing else:

     --bp-mobile   640px   single column, stacked cards, no side rail
     --bp-tablet  1024px   two columns, side rail collapses to icons
     --bp-laptop  1280px   full app shell, side rail expanded
     --bp-wide    1600px   max content width reached, gutters grow

   CSS cannot use custom properties inside a media query, so these live here as
   documentation plus the container tokens that DO work as variables. Write the
   numbers literally and always in this form - with the space, mobile-first
   descending:

     @media (max-width: 1280px) { ... }
     @media (max-width: 1024px) { ... }
     @media (max-width:  640px) { ... }

   MIGRATION MAP - existing breakpoint -> canonical target.
   Not yet applied: each row shifts a real collapse point, so it must be
   verified against the R-02 screenshot matrix (8 pages x 10 widths) before
   landing. Do it one file at a time.

     350, 390, 480, 520, 560  ->  640   (mobile)
     700, 720, 760, 768       ->  640 or 1024, depending on the component:
                                   640 if the rule stacks a 2-up card grid,
                                   1024 if it collapses the side rail
     840, 900, 920, 1024      -> 1024   (tablet)
     1050, 1180, 1280         -> 1280   (laptop)
     1366, 1440               -> 1600   (wide)
     min-width: 921/1025      -> mirror of the max-width above it

   Files carrying breakpoints today: app-shell.css, base.css, chat.css,
   chat-widget.css, config-pages.css, customer.css, dashboard.css,
   facebook-pages.css, intent-studio.css, login.css, onboarding.css,
   operations-hub.css, page-system.css, platform.css, production-system.css,
   workflow-pages.css.
   =========================================================================== */

:root {
    /* Layout containers - these DO work as custom properties. */
    --bp-mobile: 640px;
    --bp-tablet: 1024px;
    --bp-laptop: 1280px;
    --bp-wide: 1600px;

    /* Content widths keyed to the scale above. */
    --content-narrow: 720px;    /* prose, forms, single-column detail */
    --content-default: 1180px;  /* standard page body */
    --content-wide: 1440px;     /* dashboards with side-by-side panels */
    --content-max: 1600px;      /* hard ceiling, matches --bp-wide */

    /* Gutters per tier. */
    --gutter-mobile: 14px;
    --gutter-tablet: 20px;
    --gutter-desktop: 28px;
}

/* Utility for wide content - tables, code, diagrams - so the page body itself
   never scrolls sideways.

   Deliberately NOT doing `html, body { overflow-x: hidden }`: that hides the
   symptom the R-02 matrix is meant to catch, and it breaks `position: sticky`
   descendants in several browsers. Fix the overflowing element instead. */
.scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}