/* Auto-managed: primitive-layer CSS. Density-aware control tokens.
 *
 * v3.1 (2026-05-22): block (V) and inline (H) padding are independent
 * axes — neither derived from the other or from a shared 4-grid step.
 * Heights and block-pad stay on the 4-grid family; inline-pad is tuned
 * per density mode to land in the 2.4–3.2 H:V ergonomic family.
 *
 * v3.4 (2026-05-23): size axis extended with xl + 2xl for hero CTAs,
 * marketing surfaces, and very-large tap-target use cases (kiosk,
 * accessibility-first). Heights follow the same 4-grid family; ratios
 * stay within 2.4–3.2 H:V across all 4 density modes.
 *
 * Token vocabulary (per CSS logical properties):
 *   --ctrl-block-h-{sm,md,lg,xl,2xl}    container height (= block-size)
 *   --ctrl-block-pad-{sm,md,lg,xl,2xl}  vertical inset
 *   --ctrl-inline-pad-{sm,md,lg,xl,2xl} horizontal inset
 *   --ctrl-gap-{sm,md,lg,xl,2xl}        icon↔label gap
 *   --ctrl-icon-{sm,md,lg,xl,2xl}       icon glyph size
 *
 * Density is selected by [data-density="<mode>"] on a surface root.
 * App-root default is `compact`; both :root and [data-density="compact"]
 * declare the same values to make the default explicit.
 */

:root,
[data-density="compact"] {
  --ctrl-block-h-sm: 36px;
  --ctrl-block-h-md: 44px;
  --ctrl-block-h-lg: 52px;
  --ctrl-block-h-xl: 60px;
  --ctrl-block-h-2xl: 72px;

  --ctrl-block-pad-sm: 8px;
  --ctrl-block-pad-md: 10px;
  --ctrl-block-pad-lg: 14px;
  --ctrl-block-pad-xl: 18px;
  --ctrl-block-pad-2xl: 22px;

  --ctrl-inline-pad-sm: 16px;
  --ctrl-inline-pad-md: 24px;
  --ctrl-inline-pad-lg: 32px;
  --ctrl-inline-pad-xl: 40px;
  --ctrl-inline-pad-2xl: 48px;

  --ctrl-gap-sm: 6px;
  --ctrl-gap-md: 8px;
  --ctrl-gap-lg: 10px;
  --ctrl-gap-xl: 12px;
  --ctrl-gap-2xl: 14px;

  --ctrl-icon-sm: 14px;
  --ctrl-icon-md: 16px;
  --ctrl-icon-lg: 18px;
  --ctrl-icon-xl: 22px;
  --ctrl-icon-2xl: 26px;

  --selection-box-size: 18px;
}

[data-density="comfortable"] {
  --ctrl-block-h-sm: 40px;
  --ctrl-block-h-md: 48px;
  --ctrl-block-h-lg: 56px;
  --ctrl-block-h-xl: 64px;
  --ctrl-block-h-2xl: 76px;

  --ctrl-block-pad-sm: 10px;
  --ctrl-block-pad-md: 12px;
  --ctrl-block-pad-lg: 16px;
  --ctrl-block-pad-xl: 20px;
  --ctrl-block-pad-2xl: 24px;

  --ctrl-inline-pad-sm: 24px;
  --ctrl-inline-pad-md: 32px;
  --ctrl-inline-pad-lg: 40px;
  --ctrl-inline-pad-xl: 48px;
  --ctrl-inline-pad-2xl: 56px;

  --ctrl-gap-sm: 8px;
  --ctrl-gap-md: 10px;
  --ctrl-gap-lg: 12px;
  --ctrl-gap-xl: 14px;
  --ctrl-gap-2xl: 16px;

  --ctrl-icon-sm: 16px;
  --ctrl-icon-md: 18px;
  --ctrl-icon-lg: 22px;
  --ctrl-icon-xl: 26px;
  --ctrl-icon-2xl: 30px;

  --selection-box-size: 20px;
}

[data-density="expanded"] {
  --ctrl-block-h-sm: 44px;
  --ctrl-block-h-md: 52px;
  --ctrl-block-h-lg: 60px;
  --ctrl-block-h-xl: 68px;
  --ctrl-block-h-2xl: 80px;

  --ctrl-block-pad-sm: 12px;
  --ctrl-block-pad-md: 14px;
  --ctrl-block-pad-lg: 18px;
  --ctrl-block-pad-xl: 22px;
  --ctrl-block-pad-2xl: 26px;

  --ctrl-inline-pad-sm: 32px;
  --ctrl-inline-pad-md: 40px;
  --ctrl-inline-pad-lg: 48px;
  --ctrl-inline-pad-xl: 56px;
  --ctrl-inline-pad-2xl: 64px;

  --ctrl-gap-sm: 10px;
  --ctrl-gap-md: 12px;
  --ctrl-gap-lg: 14px;
  --ctrl-gap-xl: 16px;
  --ctrl-gap-2xl: 18px;

  --ctrl-icon-sm: 18px;
  --ctrl-icon-md: 20px;
  --ctrl-icon-lg: 24px;
  --ctrl-icon-xl: 28px;
  --ctrl-icon-2xl: 32px;

  --selection-box-size: 22px;
}

[data-density="gigantic"] {
  --ctrl-block-h-sm: 52px;
  --ctrl-block-h-md: 64px;
  --ctrl-block-h-lg: 76px;
  --ctrl-block-h-xl: 88px;
  --ctrl-block-h-2xl: 104px;

  --ctrl-block-pad-sm: 14px;
  --ctrl-block-pad-md: 18px;
  --ctrl-block-pad-lg: 22px;
  --ctrl-block-pad-xl: 28px;
  --ctrl-block-pad-2xl: 34px;

  --ctrl-inline-pad-sm: 40px;
  --ctrl-inline-pad-md: 52px;
  --ctrl-inline-pad-lg: 64px;
  --ctrl-inline-pad-xl: 76px;
  --ctrl-inline-pad-2xl: 88px;

  --ctrl-gap-sm: 12px;
  --ctrl-gap-md: 16px;
  --ctrl-gap-lg: 20px;
  --ctrl-gap-xl: 22px;
  --ctrl-gap-2xl: 26px;

  --ctrl-icon-sm: 22px;
  --ctrl-icon-md: 26px;
  --ctrl-icon-lg: 30px;
  --ctrl-icon-xl: 36px;
  --ctrl-icon-2xl: 42px;

  --selection-box-size: 26px;
}

/* Page transition primitive -------------------------------------------------
 *
 * App-level route transition shell. The public React wrapper owns route frame
 * retention; this CSS owns only tokenized layering and compositor motion.
 */
.nxt-page-transition-root {
  --page-transition-duration: var(--dur-deliberate);
  --page-transition-ease: var(--ease-enter);
  --page-transition-scrim: var(--overlay-scrim);
  --page-transition-enter-y: 100vh;
  --page-transition-exit-y: -25vh;
  --page-transition-mask-size: 15em;
  --page-transition-blur-1: 0.09375em;
  --page-transition-blur-2: 0.1875em;
  --page-transition-blur-3: 0.375em;
  --page-transition-blur-4: 0.75em;
  --page-transition-blur-5: 1.5em;
  --page-transition-mask-1: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%);
  --page-transition-mask-2: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%);
  --page-transition-mask-3: linear-gradient(#0000 75%, #000 87.5% 100%);
  --page-transition-mask-4: linear-gradient(#0000 82%, #000 92% 100%);
  --page-transition-mask-5: linear-gradient(#0000 88%, #000 100%);

  position: relative;
  min-inline-size: 0;
  isolation: isolate;
}

.nxt-page-transition-root--viewport {
  min-block-size: 100dvh;
}

.nxt-page-transition__stack {
  display: grid;
  min-inline-size: 0;
  overflow: clip;
  isolation: isolate;
}

.nxt-page-transition-root--viewport .nxt-page-transition__stack {
  min-block-size: 100dvh;
}

.nxt-page-transition__frame {
  grid-area: 1 / 1;
  min-inline-size: 0;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition:
    transform var(--page-transition-duration) var(--page-transition-ease),
    opacity var(--page-transition-duration) var(--page-transition-ease);
}

.nxt-page-transition__frame--previous {
  pointer-events: none;
}

.nxt-page-transition-root[data-page-transition-phase="parked"]
  .nxt-page-transition__frame--current {
  transform: translate3d(0, var(--page-transition-enter-y), 0);
}

.nxt-page-transition-root[data-page-transition-phase="running"]
  .nxt-page-transition__frame--previous {
  transform: translate3d(0, var(--page-transition-exit-y), 0);
}

.nxt-page-transition-root[data-page-transition-phase="running"]
  .nxt-page-transition__frame--current {
  transform: translate3d(0, 0, 0);
}

.nxt-page-transition {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  pointer-events: none;
  overflow: clip;
  isolation: isolate;
  contain: paint;
  transform: translateZ(0);
}

.nxt-page-transition-root--viewport .nxt-page-transition {
  position: fixed;
}

.nxt-page-transition__scrim {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background: var(--page-transition-scrim);
  opacity: 0;
  transition: opacity var(--page-transition-duration) var(--page-transition-ease);
}

.nxt-page-transition-root[data-page-transition-phase="running"]
  .nxt-page-transition__scrim {
  opacity: 1;
}

.nxt-page-transition__blur-layer {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  inline-size: 100%;
  block-size: var(--page-transition-mask-size);
  opacity: 0;
  transition: opacity var(--page-transition-duration) var(--page-transition-ease);
}

.nxt-page-transition-root[data-page-transition-phase="running"][data-page-transition-mask="progressive-blur"]
  .nxt-page-transition__blur-layer {
  opacity: 1;
}

.nxt-page-transition__blur-layer--1 {
  -webkit-backdrop-filter: blur(var(--page-transition-blur-1));
  backdrop-filter: blur(var(--page-transition-blur-1));
  -webkit-mask: var(--page-transition-mask-1);
  mask: var(--page-transition-mask-1);
}

.nxt-page-transition__blur-layer--2 {
  -webkit-backdrop-filter: blur(var(--page-transition-blur-2));
  backdrop-filter: blur(var(--page-transition-blur-2));
  -webkit-mask: var(--page-transition-mask-2);
  mask: var(--page-transition-mask-2);
}

.nxt-page-transition__blur-layer--3 {
  -webkit-backdrop-filter: blur(var(--page-transition-blur-3));
  backdrop-filter: blur(var(--page-transition-blur-3));
  -webkit-mask: var(--page-transition-mask-3);
  mask: var(--page-transition-mask-3);
}

.nxt-page-transition__blur-layer--4 {
  -webkit-backdrop-filter: blur(var(--page-transition-blur-4));
  backdrop-filter: blur(var(--page-transition-blur-4));
  -webkit-mask: var(--page-transition-mask-4);
  mask: var(--page-transition-mask-4);
}

.nxt-page-transition__blur-layer--5 {
  -webkit-backdrop-filter: blur(var(--page-transition-blur-5));
  backdrop-filter: blur(var(--page-transition-blur-5));
  -webkit-mask: var(--page-transition-mask-5);
  mask: var(--page-transition-mask-5);
}

@media (prefers-reduced-motion: reduce) {
  .nxt-page-transition__frame,
  .nxt-page-transition__scrim,
  .nxt-page-transition__blur-layer {
    transition: none;
  }

  .nxt-page-transition-root[data-page-transition-phase]
    .nxt-page-transition__frame {
    transform: none;
  }

  .nxt-page-transition-root[data-page-transition-phase]
    .nxt-page-transition__scrim {
    opacity: 0;
  }

  .nxt-page-transition-root[data-page-transition-phase]
    .nxt-page-transition__blur-layer {
    opacity: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}