/* Responsive layer.
   The system's components are styled with inline styles, which beat any
   stylesheet rule. Responsive behaviour therefore cannot live in the
   components — it lives here, as attribute-driven utilities that use
   !important to win against the inline style they are overriding. This is
   the one place in the system where !important is correct.

   Scope, decided deliberately:
   - Marketing site  responsive to 360px. Read on phones, so it must work there.
   - Product UI      desktop only, floor 1024px. Evidence tables, the 232px rail
                     and multi-column registers do not survive a phone, and a
                     bad small-screen portal is worse than none. Stated, not omitted.
   - Documents/decks fixed page geometry by definition. Not responsive.

   Breakpoints are also published as tokens for documentation. Custom
   properties cannot be used inside a media query condition, so the numbers
   below are written literally and the tokens exist to be quoted, not consumed. */
:root{
  --bp-sm:600px; /* @kind other */
  --bp-md:900px; /* @kind other */
  --bp-lg:1200px; /* @kind other */
  --app-min-width:1024px; /* @kind other */
}

/* Desktop-only surfaces announce their floor rather than degrading silently. */
[data-app-shell]{min-width:var(--app-min-width)}

@media (max-width:1200px){
  [data-site-header]{gap:24px!important}
  [data-stack="lg"]{grid-template-columns:1fr!important}
  [data-cols="lg"]{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:900px){
  [data-stack="md"],[data-stack="lg"]{grid-template-columns:1fr!important}
  [data-cols="md"],[data-cols="lg"]{grid-template-columns:repeat(2,1fr)!important}
  [data-gutter]{padding-left:24px!important;padding-right:24px!important}
  [data-hide="md"]{display:none!important}
}
@media (max-width:600px){
  [data-site-header]{height:auto!important;flex-wrap:wrap!important;padding-top:12px!important;padding-bottom:12px!important;gap:12px!important}
  [data-stack],[data-cols]{grid-template-columns:1fr!important}
  [data-gutter]{padding-left:16px!important;padding-right:16px!important}
  [data-pad-y]{padding-top:44px!important;padding-bottom:44px!important}
  [data-hide]{display:none!important}
  [data-wrap]{flex-wrap:wrap!important}
  /* Display type is sized for a 1440px measure; it has to come down or it
     sets three words to a line. */
  [data-fluid="display-1"]{font-size:clamp(34px,9vw,64px)!important}
  [data-fluid="display-2"]{font-size:clamp(27px,7vw,44px)!important}
  [data-fluid="h1"]{font-size:clamp(23px,5.5vw,32px)!important}
}
/* Wide data tables scroll rather than crush. The shadow tells the reader
   there is more to the right; without it the truncation is silent. */
@media (max-width:900px){
  [data-scroll-x]{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
}