/* NTIS layout — breakpoints, grid, containers, chrome, stacking.
   Device classes (custom properties cannot be read inside @media, so the
   queries below repeat the literals; --bp-* exist for JS/matchMedia):
     mobile   0–767      4 cols · 16 gutter · 16 margin · header 56
     tablet   768–1023   8 cols · 24 gutter · 32 margin · header 64
     laptop   1024–1439 12 cols · 24 gutter · 40 margin · header 72
     desktop  ≥1440     12 cols · 32 gutter · 48 margin · header 72, content capped at 1240 */
:root{
  --bp-tablet: 768px;
  --bp-laptop: 1024px;
  --bp-desktop: 1440px;

  --grid-columns: 12; /* @kind other */
  --grid-gutter: 24px;
  --grid-margin: 40px;

  --container-max: 1240px;
  /* Navigation bars (header, sub-nav, page banner) cap their CONTENT at 1024 —
     a tighter, calmer row than the page — while the bar itself stays full-bleed. */
  --container-nav: 1024px;
  /* Page gutters: never less than the grid margin, never under the notch or
     rounded corners in landscape (physical safe areas — needs
     <meta name="viewport" content="…, viewport-fit=cover">). */
  --gutter-left: max(var(--grid-margin), env(safe-area-inset-left, 0px));
  --gutter-right: max(var(--grid-margin), env(safe-area-inset-right, 0px));
  --gutter-bottom: env(safe-area-inset-bottom, 0px);
  --container-narrow: 800px;
  --container-wide: 1440px;
  --measure-prose: 68ch; /* @kind other */

  --header-h: 72px;
  --header-h-compact: 56px;
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 72px;
  --rail-w: 56px;
  --field-h: 40px;
  --field-h-sm: 32px;
  --field-h-lg: 48px;
  --control-min: 44px; /* minimum touch target, never undercut */

  --z-base: 0; /* @kind other */
  --z-sticky: 100; /* @kind other */
  --z-header: 200; /* @kind other */
  --z-dropdown: 300; /* @kind other */
  --z-overlay: 400; /* @kind other */
  --z-modal: 500; /* @kind other */
  --z-toast: 600; /* @kind other */
}
@media (min-width: 1440px){
  :root{ --grid-gutter: 32px; --grid-margin: 48px; }
}
@media (max-width: 1023px){
  :root{ --grid-columns: 8; /* @kind other */ --grid-margin: 32px; --header-h: 64px; }
}
@media (max-width: 767px){
  :root{ --grid-columns: 4; /* @kind other */ --grid-gutter: 16px; --grid-margin: 16px; --header-h: 56px; }
}
/* Touch input: every control grows to the 44px floor, whatever the width. */
@media (pointer: coarse){
  :root{ --field-h: 44px; --field-h-sm: 36px; }
}
/* Fixed-size canvases (specimen cards, slides, posts) pin the laptop grid and
   pointer sizing, whatever frame they are previewed in. */
[data-ntis-static]{
  --grid-columns: 12; /* @kind other */
  --grid-gutter: 24px;
  --grid-margin: 40px;
  --header-h: 72px;
  --field-h: 40px;
  --field-h-sm: 32px;
}