@charset "UTF-8";
:root {
  --neutral-0: oklch(100% 0 0deg);
  --neutral-50: oklch(98.8% 0.002 260deg);
  --neutral-100: oklch(96.5% 0.003 260deg);
  --neutral-200: oklch(92% 0.004 260deg);
  --neutral-300: oklch(86% 0.005 260deg);
  --neutral-400: oklch(72% 0.008 260deg);
  --neutral-450: oklch(63% 0.009 260deg);
  --neutral-500: oklch(58% 0.01 260deg);
  --neutral-550: oklch(52% 0.011 260deg);
  --neutral-600: oklch(45% 0.012 260deg);
  --neutral-700: oklch(32% 0.013 260deg);
  --neutral-800: oklch(22% 0.012 260deg);
  --neutral-900: oklch(14% 0.01 260deg);
  --neutral-1000: oklch(8% 0.008 260deg);
  --success-50: oklch(97% 0.04 155deg);
  --success-100: oklch(92% 0.08 155deg);
  --success-500: oklch(65% 0.17 155deg);
  --success-700: oklch(48% 0.17 155deg);
  --success-900: oklch(28% 0.1 155deg);
  --warning-50: oklch(97% 0.04 85deg);
  --warning-100: oklch(92% 0.08 85deg);
  --warning-500: oklch(78% 0.16 85deg);
  --warning-700: oklch(48% 0.14 85deg);
  --warning-900: oklch(28% 0.08 85deg);
  --danger-50: oklch(97% 0.04 25deg);
  --danger-100: oklch(92% 0.08 25deg);
  --danger-500: oklch(58% 0.22 25deg);
  --danger-700: oklch(48% 0.2 25deg);
  --danger-900: oklch(28% 0.12 25deg);
  --info-50: oklch(97% 0.04 245deg);
  --info-100: oklch(92% 0.08 245deg);
  --info-500: oklch(65% 0.15 245deg);
  --info-700: oklch(48% 0.15 245deg);
  --info-900: oklch(28% 0.1 245deg);
  --success-ink: var(--success-700);
  --warning-ink: var(--warning-700);
  --danger-ink: var(--danger-700);
  --info-ink: var(--info-700);
  --fill-danger: var(--danger-500);
  --fill-danger-hover: oklch(48% 0.2 25deg);
  --text-on-danger: var(--neutral-0);
  --fill-success: var(--success-500);
  --text-on-success: var(--neutral-1000);
  --fill-warning: var(--warning-500);
  --text-on-warning: var(--neutral-1000);
  --fill-info: var(--info-500);
  --text-on-info: var(--neutral-1000);
  --accent-admin-50: oklch(97% 0.02 295deg);
  --accent-admin-100: oklch(93% 0.05 295deg);
  --accent-admin-200: oklch(86% 0.1 295deg);
  --accent-admin-400: oklch(72% 0.204 295deg);
  --accent-admin-500: oklch(58% 0.24 295deg);
  --accent-admin-600: oklch(54% 0.24 295deg);
  --accent-admin-700: oklch(46% 0.221 295deg);
  --accent-admin-900: oklch(28% 0.156 295deg);
  --accent-partner-50: oklch(97% 0.02 65deg);
  --accent-partner-100: oklch(93% 0.05 65deg);
  --accent-partner-200: oklch(86% 0.1 65deg);
  --accent-partner-400: oklch(66% 0.145 65deg);
  --accent-partner-500: oklch(56% 0.17 65deg);
  --accent-partner-600: oklch(48% 0.17 65deg);
  --accent-partner-700: oklch(40% 0.156 65deg);
  --accent-partner-900: oklch(28% 0.111 65deg);
  --accent-identity-50: oklch(97% 0.02 220deg);
  --accent-identity-100: oklch(93% 0.05 220deg);
  --accent-identity-200: oklch(86% 0.1 220deg);
  --accent-identity-400: oklch(63% 0.111 220deg);
  --accent-identity-500: oklch(53% 0.13 220deg);
  --accent-identity-600: oklch(45% 0.13 220deg);
  --accent-identity-700: oklch(37% 0.12 220deg);
  --accent-identity-900: oklch(28% 0.085 220deg);
  --accent-invoice-50: oklch(97% 0.02 160deg);
  --accent-invoice-100: oklch(93% 0.05 160deg);
  --accent-invoice-200: oklch(86% 0.1 160deg);
  --accent-invoice-400: oklch(62.5% 0.128 160deg);
  --accent-invoice-500: oklch(52.5% 0.15 160deg);
  --accent-invoice-600: oklch(44.5% 0.15 160deg);
  --accent-invoice-700: oklch(36.5% 0.138 160deg);
  --accent-invoice-900: oklch(28% 0.098 160deg);
  --accent-ninefive-50: oklch(97% 0.02 340deg);
  --accent-ninefive-100: oklch(93% 0.05 340deg);
  --accent-ninefive-200: oklch(86% 0.1 340deg);
  --accent-ninefive-400: oklch(68% 0.221 340deg);
  --accent-ninefive-500: oklch(58% 0.26 340deg);
  --accent-ninefive-600: oklch(50% 0.26 340deg);
  --accent-ninefive-700: oklch(42% 0.239 340deg);
  --accent-ninefive-900: oklch(28% 0.169 340deg);
  --gradient-border-subtle: linear-gradient(
    135deg,
    var(--accent-400),
    var(--accent-600)
  );
  --gradient-border-vivid: linear-gradient(
    135deg,
    var(--accent-admin-500),
    var(--accent-ninefive-500),
    var(--accent-identity-500)
  );
  --glass-surface: color-mix(in oklch, var(--surface-raised) 64%, transparent);
  --glass-blur: blur(20px) saturate(180%) brightness(1.06);
  --glass-border: 1px solid color-mix(in oklch, white 28%, transparent);
  --glass-shadow:
    0 16px 40px -12px color-mix(in oklch, var(--neutral-1000) 30%, transparent),
    0 2px 8px -4px color-mix(in oklch, var(--neutral-1000) 16%, transparent),
    inset 0 1px 0 0 color-mix(in oklch, white 65%, transparent),
    inset 0 0 0 1px color-mix(in oklch, white 8%, transparent);
  --glass-sheen: linear-gradient(150deg,
    color-mix(in oklch, white 38%, transparent) 0%,
    color-mix(in oklch, white 6%, transparent) 24%,
    transparent 48%);
  --overlay-scrim: color-mix(in oklch, var(--neutral-1000) 12%, transparent);
  --overlay-scrim-strong: color-mix(in oklch, var(--neutral-1000) 38%, transparent);
  --overlay-blur: blur(8px) saturate(120%);
  --glow-accent:
    0 0 0 3px color-mix(in oklch, var(--accent-500) 35%, transparent),
    0 0 24px color-mix(in oklch, var(--accent-500) 25%, transparent);
}

:root {
  --font-display: "Instrument Serif", ui-serif, Georgia, serif;
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-3xs: 0.625rem; /* 10px */
  --text-2xs: 0.6875rem; /* 11px */
  --text-xs: 0.75rem; /* 12px */
  --text-sm: 0.8125rem; /* 13px */
  --text-base: 0.9375rem; /* 15px — default body */
  --text-md: 1rem; /* 16px */
  --text-lg: 1.125rem; /* 18px */
  --text-xl: 1.375rem; /* 22px */
  --text-2xl: 1.75rem; /* 28px */
  --text-3xl: 2.25rem; /* 36px */
  --text-4xl: 2.875rem; /* 46px */
  --text-5xl: 3.75rem; /* 60px */
  --text-6xl: 4.75rem; /* 76px */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-widest: 0.08em;
  --icon-size-xs: 0.75rem; /* 12px */
  --icon-size-sm: 1rem; /* 16px */
  --icon-size-md: 1.25rem; /* 20px — default */
  --icon-size-lg: 1.5rem; /* 24px */
  --icon-size-xl: 2rem; /* 32px */
  --icon-stroke: 1.75;
}

:root {
  --type-display-xl-font: var(--font-display);
  --type-display-xl-size: var(--text-6xl);
  --type-display-xl-weight: var(--weight-regular);
  --type-display-xl-leading: var(--leading-none);
  --type-display-xl-tracking: var(--tracking-tight);
  --type-display-xl-transform: none;
  --type-display-xl-variant-numeric: normal;
  --type-display-lg-font: var(--font-display);
  --type-display-lg-size: var(--text-5xl);
  --type-display-lg-weight: var(--weight-regular);
  --type-display-lg-leading: var(--leading-tight);
  --type-display-lg-tracking: var(--tracking-tight);
  --type-display-lg-transform: none;
  --type-display-lg-variant-numeric: normal;
  --type-display-md-font: var(--font-display);
  --type-display-md-size: var(--text-4xl);
  --type-display-md-weight: var(--weight-regular);
  --type-display-md-leading: var(--leading-tight);
  --type-display-md-tracking: var(--tracking-snug);
  --type-display-md-transform: none;
  --type-display-md-variant-numeric: normal;
  --type-heading-xl-font: var(--font-ui);
  --type-heading-xl-size: var(--text-3xl);
  --type-heading-xl-weight: var(--weight-semibold);
  --type-heading-xl-leading: var(--leading-tight);
  --type-heading-xl-tracking: var(--tracking-snug);
  --type-heading-xl-transform: none;
  --type-heading-xl-variant-numeric: normal;
  --type-heading-lg-font: var(--font-ui);
  --type-heading-lg-size: var(--text-2xl);
  --type-heading-lg-weight: var(--weight-semibold);
  --type-heading-lg-leading: var(--leading-tight);
  --type-heading-lg-tracking: var(--tracking-snug);
  --type-heading-lg-transform: none;
  --type-heading-lg-variant-numeric: normal;
  --type-heading-md-font: var(--font-ui);
  --type-heading-md-size: var(--text-xl);
  --type-heading-md-weight: var(--weight-semibold);
  --type-heading-md-leading: var(--leading-snug);
  --type-heading-md-tracking: var(--tracking-normal);
  --type-heading-md-transform: none;
  --type-heading-md-variant-numeric: normal;
  --type-heading-sm-font: var(--font-ui);
  --type-heading-sm-size: var(--text-lg);
  --type-heading-sm-weight: var(--weight-semibold);
  --type-heading-sm-leading: var(--leading-snug);
  --type-heading-sm-tracking: var(--tracking-normal);
  --type-heading-sm-transform: none;
  --type-heading-sm-variant-numeric: normal;
  --type-body-lg-font: var(--font-ui);
  --type-body-lg-size: var(--text-md);
  --type-body-lg-weight: var(--weight-regular);
  --type-body-lg-leading: var(--leading-normal);
  --type-body-lg-tracking: var(--tracking-normal);
  --type-body-lg-transform: none;
  --type-body-lg-variant-numeric: normal;
  --type-body-font: var(--font-ui);
  --type-body-size: var(--text-base);
  --type-body-weight: var(--weight-regular);
  --type-body-leading: var(--leading-normal);
  --type-body-tracking: var(--tracking-normal);
  --type-body-transform: none;
  --type-body-variant-numeric: normal;
  --type-body-sm-font: var(--font-ui);
  --type-body-sm-size: var(--text-sm);
  --type-body-sm-weight: var(--weight-regular);
  --type-body-sm-leading: var(--leading-normal);
  --type-body-sm-tracking: var(--tracking-normal);
  --type-body-sm-transform: none;
  --type-body-sm-variant-numeric: normal;
  --type-ui-font: var(--font-ui);
  --type-ui-size: var(--text-sm);
  --type-ui-weight: var(--weight-medium);
  --type-ui-leading: var(--leading-snug);
  --type-ui-tracking: var(--tracking-normal);
  --type-ui-transform: none;
  --type-ui-variant-numeric: normal;
  --type-ui-sm-font: var(--font-ui);
  --type-ui-sm-size: var(--text-xs);
  --type-ui-sm-weight: var(--weight-medium);
  --type-ui-sm-leading: var(--leading-snug);
  --type-ui-sm-tracking: var(--tracking-normal);
  --type-ui-sm-transform: none;
  --type-ui-sm-variant-numeric: normal;
  --type-label-font: var(--font-ui);
  --type-label-size: var(--text-xs);
  --type-label-weight: var(--weight-medium);
  --type-label-leading: var(--leading-snug);
  --type-label-tracking: var(--tracking-wide);
  --type-label-transform: uppercase;
  --type-label-variant-numeric: normal;
  --type-label-sm-font: var(--font-ui);
  --type-label-sm-size: var(--text-3xs);
  --type-label-sm-weight: var(--weight-semibold);
  --type-label-sm-leading: var(--leading-none);
  --type-label-sm-tracking: var(--tracking-widest);
  --type-label-sm-transform: uppercase;
  --type-label-sm-variant-numeric: normal;
  --type-mono-font: var(--font-mono);
  --type-mono-size: var(--text-sm);
  --type-mono-weight: var(--weight-regular);
  --type-mono-leading: var(--leading-snug);
  --type-mono-tracking: var(--tracking-normal);
  --type-mono-transform: none;
  --type-mono-variant-numeric: tabular-nums;
  --type-mono-sm-font: var(--font-mono);
  --type-mono-sm-size: var(--text-xs);
  --type-mono-sm-weight: var(--weight-regular);
  --type-mono-sm-leading: var(--leading-snug);
  --type-mono-sm-tracking: var(--tracking-normal);
  --type-mono-sm-transform: none;
  --type-mono-sm-variant-numeric: tabular-nums;
}

:root {
  --type-heading-xl-size: clamp(var(--text-2xl), 5vw, var(--text-3xl));
  --type-heading-lg-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
}

:root,
[data-density=comfortable] {
  --type-body-size: var(--text-base);
  --type-body-sm-size: var(--text-sm);
  --type-ui-size: var(--text-sm);
  --type-body-leading: var(--leading-normal);
}

[data-density=compact] {
  --type-body-size: var(--text-sm);
  --type-body-sm-size: var(--text-xs);
  --type-ui-size: var(--text-xs);
  --type-body-leading: var(--leading-snug);
}

:root {
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
}

:root,
[data-density=comfortable] {
  /* Inset — padding within components */
  --space-inset-xs: var(--space-2); /* 8px  */
  --space-inset-sm: var(--space-3); /* 12px */
  --space-inset: var(--space-4); /* 16px — default */
  --space-inset-lg: var(--space-5); /* 20px */
  --space-inset-xl: var(--space-6); /* 24px */
  /* Stack — vertical rhythm between siblings */
  --space-stack-xs: var(--space-1); /* 4px  */
  --space-stack-sm: var(--space-2); /* 8px  */
  --space-stack: var(--space-3); /* 12px — default */
  --space-stack-lg: var(--space-4); /* 16px */
  --space-stack-xl: var(--space-6); /* 24px */
  --space-stack-2xl: var(--space-8); /* 32px */
  /* Inline — horizontal rhythm between siblings */
  --space-inline-xs: var(--space-1); /* 4px  */
  --space-inline-sm: var(--space-2); /* 8px  */
  --space-inline: var(--space-3); /* 12px — default */
  --space-inline-lg: var(--space-4); /* 16px */
  /* Layout — major page-level rhythm */
  --space-layout-sm: var(--space-6); /* 24px */
  --space-layout: var(--space-8); /* 32px — default */
  --space-layout-lg: var(--space-12); /* 48px */
  --space-layout-xl: var(--space-16); /* 64px */
  /* Gutter — responsive page edge padding */
  --gutter-sm: var(--space-4); /* mobile  */
  --gutter: var(--space-6); /* tablet  */
  --gutter-lg: var(--space-8); /* desktop */
}

[data-density=compact] {
  /* Inset */
  --space-inset-xs: var(--space-1); /* 8  → 4  */
  --space-inset-sm: var(--space-2); /* 12 → 8  */
  --space-inset: var(--space-3); /* 16 → 12 */
  --space-inset-lg: var(--space-4); /* 20 → 16 */
  --space-inset-xl: var(--space-5); /* 24 → 20 */
  /* Stack */
  --space-stack-xs: var(--space-0-5); /* 4  → 2  */
  --space-stack-sm: var(--space-1); /* 8  → 4  */
  --space-stack: var(--space-2); /* 12 → 8  */
  --space-stack-lg: var(--space-3); /* 16 → 12 */
  --space-stack-xl: var(--space-4); /* 24 → 16 */
  --space-stack-2xl: var(--space-6); /* 32 → 24 */
  /* Inline */
  --space-inline-xs: var(--space-0-5); /* 4  → 2  */
  --space-inline-sm: var(--space-1); /* 8  → 4  */
  --space-inline: var(--space-2); /* 12 → 8  */
  --space-inline-lg: var(--space-3); /* 16 → 12 */
  /* Layout */
  --space-layout-sm: var(--space-4); /* 24 → 16 */
  --space-layout: var(--space-6); /* 32 → 24 */
  --space-layout-lg: var(--space-8); /* 48 → 32 */
  --space-layout-xl: var(--space-12); /* 64 → 48 */
  /* Gutter */
  --gutter-sm: var(--space-3); /* 16 → 12 */
  --gutter: var(--space-4); /* 24 → 16 */
  --gutter-lg: var(--space-6); /* 32 → 24 */
}

:root {
  --radius-none: 0;
  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-3xl: 1.75rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md); /* buttons, inputs, selects   */
  --radius-card: var(--radius-xl); /* default cards              */
  --radius-surface: var(--radius-2xl); /* modals, large panels       */
  --radius-pill: var(--radius-full); /* badges, avatars, capsules  */
}

:root {
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.06),
                 0 2px 8px -2px rgba(0, 0, 0, 0.08);
  --elevation-3: 0 2px 4px rgba(0, 0, 0, 0.06),
                 0 8px 24px -4px rgba(0, 0, 0, 0.12);
  --elevation-4: 0 4px 8px rgba(0, 0, 0, 0.08),
                 0 16px 48px -8px rgba(0, 0, 0, 0.16);
  --elevation-5: 0 8px 16px rgba(0, 0, 0, 0.10),
                 0 32px 80px -12px rgba(0, 0, 0, 0.24);
  --elevation-pop:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 4px 12px -2px rgba(0, 0, 0, 0.12);
  --elevation-pop-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.10),
    0 8px 24px -4px rgba(0, 0, 0, 0.18);
  --elevation-inner-sm: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  --elevation-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

:root[data-theme=dark] {
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.30);
  --elevation-2: 0 1px 2px rgba(0, 0, 0, 0.40),
                 0 2px 8px -2px rgba(0, 0, 0, 0.50);
  --elevation-3: 0 2px 4px rgba(0, 0, 0, 0.40),
                 0 8px 24px -4px rgba(0, 0, 0, 0.60);
  --elevation-4: 0 4px 8px rgba(0, 0, 0, 0.50),
                 0 16px 48px -8px rgba(0, 0, 0, 0.70);
  --elevation-5: 0 8px 16px rgba(0, 0, 0, 0.60),
                 0 32px 80px -12px rgba(0, 0, 0, 0.80);
  --elevation-pop:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -1px 0 rgba(0, 0, 0, 0.40),
    0 1px 2px rgba(0, 0, 0, 0.30),
    0 4px 12px -2px rgba(0, 0, 0, 0.40);
  --elevation-pop-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -1px 0 rgba(0, 0, 0, 0.50),
    0 2px 4px rgba(0, 0, 0, 0.40),
    0 8px 24px -4px rgba(0, 0, 0, 0.50);
  --elevation-inner-sm: inset 0 1px 2px rgba(0, 0, 0, 0.30);
  --elevation-inner: inset 0 2px 4px rgba(0, 0, 0, 0.40);
}

:root {
  --motion-instant: 0ms;
  --motion-fast: 100ms;
  --motion-default: 150ms;
  --motion-moderate: 220ms;
  --motion-slow: 380ms;
  --motion-deliberate: 600ms;
  --ease-linear: cubic-bezier(0, 0, 1, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-anticipate: cubic-bezier(0.68, -0.4, 0.32, 1.4);
  --motion-hover: var(--motion-fast) var(--ease-out);
  --motion-focus: var(--motion-fast) var(--ease-out);
  --motion-press: var(--motion-instant);
  --motion-enter: var(--motion-moderate) var(--ease-spring);
  --motion-exit: var(--motion-default) var(--ease-in);
  --motion-transform: var(--motion-default) var(--ease-out);
  --motion-theme: var(--motion-slow) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-default: 0ms;
    --motion-moderate: 0ms;
    --motion-slow: 0ms;
    --motion-deliberate: 0ms;
  }
}
:root {
  --z-base: 0;
  --z-raised: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-toast: 700;
  --z-tooltip: 800;
  --z-debug: 9999;
}

:root {
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

:root,
:root[data-theme=light] {
  color-scheme: light;
  --surface-page: var(--neutral-50);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-overlay: var(--neutral-0);
  --border-subtle: var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong: var(--neutral-400);
  --text-primary: var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-tertiary: var(--neutral-550);
  --text-placeholder: var(--neutral-550);
  --text-disabled: var(--neutral-400);
  --text-inverse: var(--neutral-50);
  --scrollbar-thumb: color-mix(in oklch, var(--accent-500) 50%, transparent);
  --scrollbar-thumb-hover: color-mix(in oklch, var(--accent-600) 80%, transparent);
}

:root[data-theme=dark] {
  color-scheme: dark;
  --surface-page: var(--neutral-900);
  --surface-raised: var(--neutral-800);
  --surface-sunken: color-mix(in oklch, var(--neutral-800) 25%, var(--neutral-900));
  --surface-overlay: var(--neutral-800);
  --border-subtle: color-mix(in oklch, white 8%, transparent);
  --border-default: color-mix(in oklch, white 14%, transparent);
  --border-strong: color-mix(in oklch, white 26%, transparent);
  --text-primary: var(--neutral-100);
  --text-secondary: var(--neutral-400);
  --text-tertiary: var(--neutral-450);
  --text-placeholder: var(--neutral-450);
  --text-disabled: var(--neutral-600);
  --text-inverse: var(--neutral-900);
  --scrollbar-thumb: color-mix(in oklch, var(--accent-400) 60%, transparent);
  --scrollbar-thumb-hover: color-mix(in oklch, var(--accent-400) 90%, transparent);
  --success-50: color-mix(in srgb, var(--success-500) 18%, var(--surface-raised));
  --success-100: color-mix(in srgb, var(--success-500) 28%, var(--surface-raised));
  --success-700: oklch(78% 0.15 155);
  --warning-50: color-mix(in srgb, var(--warning-500) 18%, var(--surface-raised));
  --warning-100: color-mix(in srgb, var(--warning-500) 28%, var(--surface-raised));
  --warning-700: oklch(80% 0.14 85);
  --danger-50: color-mix(in srgb, var(--danger-500) 18%, var(--surface-raised));
  --danger-100: color-mix(in srgb, var(--danger-500) 28%, var(--surface-raised));
  --danger-700: oklch(78% 0.16 25);
  --info-50: color-mix(in srgb, var(--info-500) 18%, var(--surface-raised));
  --info-100: color-mix(in srgb, var(--info-500) 28%, var(--surface-raised));
  --info-700: oklch(78% 0.13 245);
}

:where(:root), [data-group=admin] {
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-admin-50);
  --accent-100: var(--accent-admin-100);
  --accent-200: var(--accent-admin-200);
  --accent-400: var(--accent-admin-400);
  --accent-500: var(--accent-admin-500);
  --accent-600: var(--accent-admin-600);
  --accent-700: var(--accent-admin-700);
  --accent-900: var(--accent-admin-900);
  --fill-accent: var(--accent-admin-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-admin-500) 50%, var(--accent-admin-600));
  --fill-accent-hover: var(--accent-admin-600);
  --fill-accent-active: var(--accent-admin-700);
  --accent-ink-on-light: var(--accent-admin-600);
  --accent-ink-on-dark: var(--accent-admin-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
}

:where(:root[data-theme=dark]), :root[data-theme=dark] [data-group=admin], :root[data-theme=dark][data-group=admin] {
  --accent-ink: var(--accent-ink-on-dark);
}

[data-group=partner] {
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-partner-50);
  --accent-100: var(--accent-partner-100);
  --accent-200: var(--accent-partner-200);
  --accent-400: var(--accent-partner-400);
  --accent-500: var(--accent-partner-500);
  --accent-600: var(--accent-partner-600);
  --accent-700: var(--accent-partner-700);
  --accent-900: var(--accent-partner-900);
  --fill-accent: var(--accent-partner-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-partner-500) 50%, var(--accent-partner-600));
  --fill-accent-hover: var(--accent-partner-600);
  --fill-accent-active: var(--accent-partner-700);
  --accent-ink-on-light: var(--accent-partner-600);
  --accent-ink-on-dark: var(--accent-partner-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
}

:root[data-theme=dark] [data-group=partner], :root[data-theme=dark][data-group=partner] {
  --accent-ink: var(--accent-ink-on-dark);
}

[data-group=identity] {
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-identity-50);
  --accent-100: var(--accent-identity-100);
  --accent-200: var(--accent-identity-200);
  --accent-400: var(--accent-identity-400);
  --accent-500: var(--accent-identity-500);
  --accent-600: var(--accent-identity-600);
  --accent-700: var(--accent-identity-700);
  --accent-900: var(--accent-identity-900);
  --fill-accent: var(--accent-identity-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-identity-500) 50%, var(--accent-identity-600));
  --fill-accent-hover: var(--accent-identity-600);
  --fill-accent-active: var(--accent-identity-700);
  --accent-ink-on-light: var(--accent-identity-600);
  --accent-ink-on-dark: var(--accent-identity-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
}

:root[data-theme=dark] [data-group=identity], :root[data-theme=dark][data-group=identity] {
  --accent-ink: var(--accent-ink-on-dark);
}

[data-group=invoice] {
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-invoice-50);
  --accent-100: var(--accent-invoice-100);
  --accent-200: var(--accent-invoice-200);
  --accent-400: var(--accent-invoice-400);
  --accent-500: var(--accent-invoice-500);
  --accent-600: var(--accent-invoice-600);
  --accent-700: var(--accent-invoice-700);
  --accent-900: var(--accent-invoice-900);
  --fill-accent: var(--accent-invoice-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-invoice-500) 50%, var(--accent-invoice-600));
  --fill-accent-hover: var(--accent-invoice-600);
  --fill-accent-active: var(--accent-invoice-700);
  --accent-ink-on-light: var(--accent-invoice-600);
  --accent-ink-on-dark: var(--accent-invoice-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
}

:root[data-theme=dark] [data-group=invoice], :root[data-theme=dark][data-group=invoice] {
  --accent-ink: var(--accent-ink-on-dark);
}

[data-group=ninefive] {
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-ninefive-50);
  --accent-100: var(--accent-ninefive-100);
  --accent-200: var(--accent-ninefive-200);
  --accent-400: var(--accent-ninefive-400);
  --accent-500: var(--accent-ninefive-500);
  --accent-600: var(--accent-ninefive-600);
  --accent-700: var(--accent-ninefive-700);
  --accent-900: var(--accent-ninefive-900);
  --fill-accent: var(--accent-ninefive-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-ninefive-500) 50%, var(--accent-ninefive-600));
  --fill-accent-hover: var(--accent-ninefive-600);
  --fill-accent-active: var(--accent-ninefive-700);
  --accent-ink-on-light: var(--accent-ninefive-600);
  --accent-ink-on-dark: var(--accent-ninefive-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
}

:root[data-theme=dark] [data-group=ninefive], :root[data-theme=dark][data-group=ninefive] {
  --accent-ink: var(--accent-ink-on-dark);
}

@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/inter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color var(--motion-hover);
}

*:hover,
*:focus-within {
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

*::-webkit-scrollbar {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: var(--radius-full);
  transition: background-color var(--motion-hover);
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

astra-input,
astra-select,
astra-textarea,
astra-combobox,
astra-number-input,
astra-tag-input,
astra-otp-input,
astra-file-upload,
astra-media-picker {
  min-width: 0;
  max-width: 100%;
}

astra-button {
  max-width: 100%;
}

img,
video {
  max-width: 100%;
}

a {
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

[hidden] {
  display: none !important;
}

@keyframes astra-fouc-reveal {
  to {
    visibility: visible;
  }
}
*:not(:defined) {
  visibility: hidden;
  animation: astra-fouc-reveal 0s 3s forwards;
}

html {
  font-size: 100%;
  font-family: var(--font-ui);
  font-feature-settings: "cv11", "ss01", "cv02", "cv03", "cv04";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
  font-variant-numeric: var(--type-body-variant-numeric);
  color: var(--text-primary);
  background: var(--surface-page);
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  color: var(--text-primary);
}

h1 {
  font-family: var(--type-heading-xl-font);
  font-size: var(--type-heading-xl-size);
  font-weight: var(--type-heading-xl-weight);
  line-height: var(--type-heading-xl-leading);
  letter-spacing: var(--type-heading-xl-tracking);
  text-transform: var(--type-heading-xl-transform);
  font-variant-numeric: var(--type-heading-xl-variant-numeric);
}

h2 {
  font-family: var(--type-heading-lg-font);
  font-size: var(--type-heading-lg-size);
  font-weight: var(--type-heading-lg-weight);
  line-height: var(--type-heading-lg-leading);
  letter-spacing: var(--type-heading-lg-tracking);
  text-transform: var(--type-heading-lg-transform);
  font-variant-numeric: var(--type-heading-lg-variant-numeric);
}

h3 {
  font-family: var(--type-heading-md-font);
  font-size: var(--type-heading-md-size);
  font-weight: var(--type-heading-md-weight);
  line-height: var(--type-heading-md-leading);
  letter-spacing: var(--type-heading-md-tracking);
  text-transform: var(--type-heading-md-transform);
  font-variant-numeric: var(--type-heading-md-variant-numeric);
}

h4 {
  font-family: var(--type-heading-sm-font);
  font-size: var(--type-heading-sm-size);
  font-weight: var(--type-heading-sm-weight);
  line-height: var(--type-heading-sm-leading);
  letter-spacing: var(--type-heading-sm-tracking);
  text-transform: var(--type-heading-sm-transform);
  font-variant-numeric: var(--type-heading-sm-variant-numeric);
}

h5 {
  font-family: var(--type-body-lg-font);
  font-size: var(--type-body-lg-size);
  font-weight: var(--type-body-lg-weight);
  line-height: var(--type-body-lg-leading);
  letter-spacing: var(--type-body-lg-tracking);
  text-transform: var(--type-body-lg-transform);
  font-variant-numeric: var(--type-body-lg-variant-numeric);
  font-weight: var(--weight-semibold);
}

h6 {
  font-family: var(--type-ui-font);
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  line-height: var(--type-ui-leading);
  letter-spacing: var(--type-ui-tracking);
  text-transform: var(--type-ui-transform);
  font-variant-numeric: var(--type-ui-variant-numeric);
}

p {
  font-family: var(--type-body-font);
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-leading);
  letter-spacing: var(--type-body-tracking);
  text-transform: var(--type-body-transform);
  font-variant-numeric: var(--type-body-variant-numeric);
  margin: 0;
}

code, pre, kbd, samp {
  font-family: var(--type-mono-font);
  font-size: var(--type-mono-size);
  font-weight: var(--type-mono-weight);
  line-height: var(--type-mono-leading);
  letter-spacing: var(--type-mono-tracking);
  text-transform: var(--type-mono-transform);
  font-variant-numeric: var(--type-mono-variant-numeric);
}

em, i {
  font-style: italic;
}

strong, b {
  font-weight: var(--weight-semibold);
}

small {
  font-family: var(--type-body-sm-font);
  font-size: var(--type-body-sm-size);
  font-weight: var(--type-body-sm-weight);
  line-height: var(--type-body-sm-leading);
  letter-spacing: var(--type-body-sm-tracking);
  text-transform: var(--type-body-sm-transform);
  font-variant-numeric: var(--type-body-sm-variant-numeric);
  color: var(--text-secondary);
}

::selection {
  background: var(--accent-200);
  color: var(--text-primary);
}

.print-only {
  display: none;
}

@media print {
  :root,
  :root[data-theme=dark],
  :root[data-theme=light] {
    color-scheme: light;
    --surface-page: var(--neutral-0);
    --surface-raised: var(--neutral-0);
    --surface-sunken: var(--neutral-100);
    --surface-overlay: var(--neutral-0);
    --border-subtle: var(--neutral-200);
    --border-default: var(--neutral-300);
    --border-strong: var(--neutral-400);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-700);
    --text-tertiary: var(--neutral-600);
    --text-placeholder: var(--neutral-500);
    --success-50: oklch(97% 0.04 155);
    --success-100: oklch(92% 0.08 155);
    --success-700: oklch(48% 0.17 155);
    --warning-50: oklch(97% 0.04 85);
    --warning-100: oklch(92% 0.08 85);
    --warning-700: oklch(48% 0.14 85);
    --danger-50: oklch(97% 0.04 25);
    --danger-100: oklch(92% 0.08 25);
    --danger-700: oklch(48% 0.20 25);
    --info-50: oklch(97% 0.04 245);
    --info-100: oklch(92% 0.08 245);
    --info-700: oklch(48% 0.15 245);
    --accent-ink: var(--accent-ink-on-light);
  }
  html, body {
    background: #fff !important;
    color: var(--neutral-900) !important;
    margin: 0 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  *, *::before, *::after {
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .no-print,
  .screen-only,
  [data-print=hide] {
    display: none !important;
  }
  .print-only {
    display: revert !important;
  }
  h1, h2, h3, h4 {
    break-after: avoid;
  }
  img, svg {
    max-width: 100% !important;
  }
  .page-break-before {
    break-before: page;
  }
  .page-break-after {
    break-after: page;
  }
  .print-avoid-break {
    break-inside: avoid;
  }
}
@page {
  margin: 18mm;
}
.p-0 {
  padding: var(--space-0);
}

.px-0 {
  padding-inline: var(--space-0);
}

.py-0 {
  padding-block: var(--space-0);
}

.pt-0 {
  padding-block-start: var(--space-0);
}

.pr-0 {
  padding-inline-end: var(--space-0);
}

.pb-0 {
  padding-block-end: var(--space-0);
}

.pl-0 {
  padding-inline-start: var(--space-0);
}

.m-0 {
  margin: var(--space-0);
}

.mx-0 {
  margin-inline: var(--space-0);
}

.my-0 {
  margin-block: var(--space-0);
}

.mt-0 {
  margin-block-start: var(--space-0);
}

.mr-0 {
  margin-inline-end: var(--space-0);
}

.mb-0 {
  margin-block-end: var(--space-0);
}

.ml-0 {
  margin-inline-start: var(--space-0);
}

.gap-0 {
  gap: var(--space-0);
}

.gap-x-0 {
  column-gap: var(--space-0);
}

.gap-y-0 {
  row-gap: var(--space-0);
}

.p-px {
  padding: var(--space-px);
}

.px-px {
  padding-inline: var(--space-px);
}

.py-px {
  padding-block: var(--space-px);
}

.pt-px {
  padding-block-start: var(--space-px);
}

.pr-px {
  padding-inline-end: var(--space-px);
}

.pb-px {
  padding-block-end: var(--space-px);
}

.pl-px {
  padding-inline-start: var(--space-px);
}

.m-px {
  margin: var(--space-px);
}

.mx-px {
  margin-inline: var(--space-px);
}

.my-px {
  margin-block: var(--space-px);
}

.mt-px {
  margin-block-start: var(--space-px);
}

.mr-px {
  margin-inline-end: var(--space-px);
}

.mb-px {
  margin-block-end: var(--space-px);
}

.ml-px {
  margin-inline-start: var(--space-px);
}

.gap-px {
  gap: var(--space-px);
}

.gap-x-px {
  column-gap: var(--space-px);
}

.gap-y-px {
  row-gap: var(--space-px);
}

.p-0-5 {
  padding: var(--space-0-5);
}

.px-0-5 {
  padding-inline: var(--space-0-5);
}

.py-0-5 {
  padding-block: var(--space-0-5);
}

.pt-0-5 {
  padding-block-start: var(--space-0-5);
}

.pr-0-5 {
  padding-inline-end: var(--space-0-5);
}

.pb-0-5 {
  padding-block-end: var(--space-0-5);
}

.pl-0-5 {
  padding-inline-start: var(--space-0-5);
}

.m-0-5 {
  margin: var(--space-0-5);
}

.mx-0-5 {
  margin-inline: var(--space-0-5);
}

.my-0-5 {
  margin-block: var(--space-0-5);
}

.mt-0-5 {
  margin-block-start: var(--space-0-5);
}

.mr-0-5 {
  margin-inline-end: var(--space-0-5);
}

.mb-0-5 {
  margin-block-end: var(--space-0-5);
}

.ml-0-5 {
  margin-inline-start: var(--space-0-5);
}

.gap-0-5 {
  gap: var(--space-0-5);
}

.gap-x-0-5 {
  column-gap: var(--space-0-5);
}

.gap-y-0-5 {
  row-gap: var(--space-0-5);
}

.p-1 {
  padding: var(--space-1);
}

.px-1 {
  padding-inline: var(--space-1);
}

.py-1 {
  padding-block: var(--space-1);
}

.pt-1 {
  padding-block-start: var(--space-1);
}

.pr-1 {
  padding-inline-end: var(--space-1);
}

.pb-1 {
  padding-block-end: var(--space-1);
}

.pl-1 {
  padding-inline-start: var(--space-1);
}

.m-1 {
  margin: var(--space-1);
}

.mx-1 {
  margin-inline: var(--space-1);
}

.my-1 {
  margin-block: var(--space-1);
}

.mt-1 {
  margin-block-start: var(--space-1);
}

.mr-1 {
  margin-inline-end: var(--space-1);
}

.mb-1 {
  margin-block-end: var(--space-1);
}

.ml-1 {
  margin-inline-start: var(--space-1);
}

.gap-1 {
  gap: var(--space-1);
}

.gap-x-1 {
  column-gap: var(--space-1);
}

.gap-y-1 {
  row-gap: var(--space-1);
}

.p-1-5 {
  padding: var(--space-1-5);
}

.px-1-5 {
  padding-inline: var(--space-1-5);
}

.py-1-5 {
  padding-block: var(--space-1-5);
}

.pt-1-5 {
  padding-block-start: var(--space-1-5);
}

.pr-1-5 {
  padding-inline-end: var(--space-1-5);
}

.pb-1-5 {
  padding-block-end: var(--space-1-5);
}

.pl-1-5 {
  padding-inline-start: var(--space-1-5);
}

.m-1-5 {
  margin: var(--space-1-5);
}

.mx-1-5 {
  margin-inline: var(--space-1-5);
}

.my-1-5 {
  margin-block: var(--space-1-5);
}

.mt-1-5 {
  margin-block-start: var(--space-1-5);
}

.mr-1-5 {
  margin-inline-end: var(--space-1-5);
}

.mb-1-5 {
  margin-block-end: var(--space-1-5);
}

.ml-1-5 {
  margin-inline-start: var(--space-1-5);
}

.gap-1-5 {
  gap: var(--space-1-5);
}

.gap-x-1-5 {
  column-gap: var(--space-1-5);
}

.gap-y-1-5 {
  row-gap: var(--space-1-5);
}

.p-2 {
  padding: var(--space-2);
}

.px-2 {
  padding-inline: var(--space-2);
}

.py-2 {
  padding-block: var(--space-2);
}

.pt-2 {
  padding-block-start: var(--space-2);
}

.pr-2 {
  padding-inline-end: var(--space-2);
}

.pb-2 {
  padding-block-end: var(--space-2);
}

.pl-2 {
  padding-inline-start: var(--space-2);
}

.m-2 {
  margin: var(--space-2);
}

.mx-2 {
  margin-inline: var(--space-2);
}

.my-2 {
  margin-block: var(--space-2);
}

.mt-2 {
  margin-block-start: var(--space-2);
}

.mr-2 {
  margin-inline-end: var(--space-2);
}

.mb-2 {
  margin-block-end: var(--space-2);
}

.ml-2 {
  margin-inline-start: var(--space-2);
}

.gap-2 {
  gap: var(--space-2);
}

.gap-x-2 {
  column-gap: var(--space-2);
}

.gap-y-2 {
  row-gap: var(--space-2);
}

.p-3 {
  padding: var(--space-3);
}

.px-3 {
  padding-inline: var(--space-3);
}

.py-3 {
  padding-block: var(--space-3);
}

.pt-3 {
  padding-block-start: var(--space-3);
}

.pr-3 {
  padding-inline-end: var(--space-3);
}

.pb-3 {
  padding-block-end: var(--space-3);
}

.pl-3 {
  padding-inline-start: var(--space-3);
}

.m-3 {
  margin: var(--space-3);
}

.mx-3 {
  margin-inline: var(--space-3);
}

.my-3 {
  margin-block: var(--space-3);
}

.mt-3 {
  margin-block-start: var(--space-3);
}

.mr-3 {
  margin-inline-end: var(--space-3);
}

.mb-3 {
  margin-block-end: var(--space-3);
}

.ml-3 {
  margin-inline-start: var(--space-3);
}

.gap-3 {
  gap: var(--space-3);
}

.gap-x-3 {
  column-gap: var(--space-3);
}

.gap-y-3 {
  row-gap: var(--space-3);
}

.p-4 {
  padding: var(--space-4);
}

.px-4 {
  padding-inline: var(--space-4);
}

.py-4 {
  padding-block: var(--space-4);
}

.pt-4 {
  padding-block-start: var(--space-4);
}

.pr-4 {
  padding-inline-end: var(--space-4);
}

.pb-4 {
  padding-block-end: var(--space-4);
}

.pl-4 {
  padding-inline-start: var(--space-4);
}

.m-4 {
  margin: var(--space-4);
}

.mx-4 {
  margin-inline: var(--space-4);
}

.my-4 {
  margin-block: var(--space-4);
}

.mt-4 {
  margin-block-start: var(--space-4);
}

.mr-4 {
  margin-inline-end: var(--space-4);
}

.mb-4 {
  margin-block-end: var(--space-4);
}

.ml-4 {
  margin-inline-start: var(--space-4);
}

.gap-4 {
  gap: var(--space-4);
}

.gap-x-4 {
  column-gap: var(--space-4);
}

.gap-y-4 {
  row-gap: var(--space-4);
}

.p-5 {
  padding: var(--space-5);
}

.px-5 {
  padding-inline: var(--space-5);
}

.py-5 {
  padding-block: var(--space-5);
}

.pt-5 {
  padding-block-start: var(--space-5);
}

.pr-5 {
  padding-inline-end: var(--space-5);
}

.pb-5 {
  padding-block-end: var(--space-5);
}

.pl-5 {
  padding-inline-start: var(--space-5);
}

.m-5 {
  margin: var(--space-5);
}

.mx-5 {
  margin-inline: var(--space-5);
}

.my-5 {
  margin-block: var(--space-5);
}

.mt-5 {
  margin-block-start: var(--space-5);
}

.mr-5 {
  margin-inline-end: var(--space-5);
}

.mb-5 {
  margin-block-end: var(--space-5);
}

.ml-5 {
  margin-inline-start: var(--space-5);
}

.gap-5 {
  gap: var(--space-5);
}

.gap-x-5 {
  column-gap: var(--space-5);
}

.gap-y-5 {
  row-gap: var(--space-5);
}

.p-6 {
  padding: var(--space-6);
}

.px-6 {
  padding-inline: var(--space-6);
}

.py-6 {
  padding-block: var(--space-6);
}

.pt-6 {
  padding-block-start: var(--space-6);
}

.pr-6 {
  padding-inline-end: var(--space-6);
}

.pb-6 {
  padding-block-end: var(--space-6);
}

.pl-6 {
  padding-inline-start: var(--space-6);
}

.m-6 {
  margin: var(--space-6);
}

.mx-6 {
  margin-inline: var(--space-6);
}

.my-6 {
  margin-block: var(--space-6);
}

.mt-6 {
  margin-block-start: var(--space-6);
}

.mr-6 {
  margin-inline-end: var(--space-6);
}

.mb-6 {
  margin-block-end: var(--space-6);
}

.ml-6 {
  margin-inline-start: var(--space-6);
}

.gap-6 {
  gap: var(--space-6);
}

.gap-x-6 {
  column-gap: var(--space-6);
}

.gap-y-6 {
  row-gap: var(--space-6);
}

.p-8 {
  padding: var(--space-8);
}

.px-8 {
  padding-inline: var(--space-8);
}

.py-8 {
  padding-block: var(--space-8);
}

.pt-8 {
  padding-block-start: var(--space-8);
}

.pr-8 {
  padding-inline-end: var(--space-8);
}

.pb-8 {
  padding-block-end: var(--space-8);
}

.pl-8 {
  padding-inline-start: var(--space-8);
}

.m-8 {
  margin: var(--space-8);
}

.mx-8 {
  margin-inline: var(--space-8);
}

.my-8 {
  margin-block: var(--space-8);
}

.mt-8 {
  margin-block-start: var(--space-8);
}

.mr-8 {
  margin-inline-end: var(--space-8);
}

.mb-8 {
  margin-block-end: var(--space-8);
}

.ml-8 {
  margin-inline-start: var(--space-8);
}

.gap-8 {
  gap: var(--space-8);
}

.gap-x-8 {
  column-gap: var(--space-8);
}

.gap-y-8 {
  row-gap: var(--space-8);
}

.p-10 {
  padding: var(--space-10);
}

.px-10 {
  padding-inline: var(--space-10);
}

.py-10 {
  padding-block: var(--space-10);
}

.pt-10 {
  padding-block-start: var(--space-10);
}

.pr-10 {
  padding-inline-end: var(--space-10);
}

.pb-10 {
  padding-block-end: var(--space-10);
}

.pl-10 {
  padding-inline-start: var(--space-10);
}

.m-10 {
  margin: var(--space-10);
}

.mx-10 {
  margin-inline: var(--space-10);
}

.my-10 {
  margin-block: var(--space-10);
}

.mt-10 {
  margin-block-start: var(--space-10);
}

.mr-10 {
  margin-inline-end: var(--space-10);
}

.mb-10 {
  margin-block-end: var(--space-10);
}

.ml-10 {
  margin-inline-start: var(--space-10);
}

.gap-10 {
  gap: var(--space-10);
}

.gap-x-10 {
  column-gap: var(--space-10);
}

.gap-y-10 {
  row-gap: var(--space-10);
}

.p-12 {
  padding: var(--space-12);
}

.px-12 {
  padding-inline: var(--space-12);
}

.py-12 {
  padding-block: var(--space-12);
}

.pt-12 {
  padding-block-start: var(--space-12);
}

.pr-12 {
  padding-inline-end: var(--space-12);
}

.pb-12 {
  padding-block-end: var(--space-12);
}

.pl-12 {
  padding-inline-start: var(--space-12);
}

.m-12 {
  margin: var(--space-12);
}

.mx-12 {
  margin-inline: var(--space-12);
}

.my-12 {
  margin-block: var(--space-12);
}

.mt-12 {
  margin-block-start: var(--space-12);
}

.mr-12 {
  margin-inline-end: var(--space-12);
}

.mb-12 {
  margin-block-end: var(--space-12);
}

.ml-12 {
  margin-inline-start: var(--space-12);
}

.gap-12 {
  gap: var(--space-12);
}

.gap-x-12 {
  column-gap: var(--space-12);
}

.gap-y-12 {
  row-gap: var(--space-12);
}

.p-16 {
  padding: var(--space-16);
}

.px-16 {
  padding-inline: var(--space-16);
}

.py-16 {
  padding-block: var(--space-16);
}

.pt-16 {
  padding-block-start: var(--space-16);
}

.pr-16 {
  padding-inline-end: var(--space-16);
}

.pb-16 {
  padding-block-end: var(--space-16);
}

.pl-16 {
  padding-inline-start: var(--space-16);
}

.m-16 {
  margin: var(--space-16);
}

.mx-16 {
  margin-inline: var(--space-16);
}

.my-16 {
  margin-block: var(--space-16);
}

.mt-16 {
  margin-block-start: var(--space-16);
}

.mr-16 {
  margin-inline-end: var(--space-16);
}

.mb-16 {
  margin-block-end: var(--space-16);
}

.ml-16 {
  margin-inline-start: var(--space-16);
}

.gap-16 {
  gap: var(--space-16);
}

.gap-x-16 {
  column-gap: var(--space-16);
}

.gap-y-16 {
  row-gap: var(--space-16);
}

.p-20 {
  padding: var(--space-20);
}

.px-20 {
  padding-inline: var(--space-20);
}

.py-20 {
  padding-block: var(--space-20);
}

.pt-20 {
  padding-block-start: var(--space-20);
}

.pr-20 {
  padding-inline-end: var(--space-20);
}

.pb-20 {
  padding-block-end: var(--space-20);
}

.pl-20 {
  padding-inline-start: var(--space-20);
}

.m-20 {
  margin: var(--space-20);
}

.mx-20 {
  margin-inline: var(--space-20);
}

.my-20 {
  margin-block: var(--space-20);
}

.mt-20 {
  margin-block-start: var(--space-20);
}

.mr-20 {
  margin-inline-end: var(--space-20);
}

.mb-20 {
  margin-block-end: var(--space-20);
}

.ml-20 {
  margin-inline-start: var(--space-20);
}

.gap-20 {
  gap: var(--space-20);
}

.gap-x-20 {
  column-gap: var(--space-20);
}

.gap-y-20 {
  row-gap: var(--space-20);
}

.p-24 {
  padding: var(--space-24);
}

.px-24 {
  padding-inline: var(--space-24);
}

.py-24 {
  padding-block: var(--space-24);
}

.pt-24 {
  padding-block-start: var(--space-24);
}

.pr-24 {
  padding-inline-end: var(--space-24);
}

.pb-24 {
  padding-block-end: var(--space-24);
}

.pl-24 {
  padding-inline-start: var(--space-24);
}

.m-24 {
  margin: var(--space-24);
}

.mx-24 {
  margin-inline: var(--space-24);
}

.my-24 {
  margin-block: var(--space-24);
}

.mt-24 {
  margin-block-start: var(--space-24);
}

.mr-24 {
  margin-inline-end: var(--space-24);
}

.mb-24 {
  margin-block-end: var(--space-24);
}

.ml-24 {
  margin-inline-start: var(--space-24);
}

.gap-24 {
  gap: var(--space-24);
}

.gap-x-24 {
  column-gap: var(--space-24);
}

.gap-y-24 {
  row-gap: var(--space-24);
}

.m-auto {
  margin: auto;
}

.mx-auto {
  margin-inline: auto;
}

.my-auto {
  margin-block: auto;
}

@media (hover: none) and (pointer: coarse) {
  .shortcut-hint {
    display: none !important;
  }
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-block-end: var(--space-6);
  /* Do NOT wrap by default. Actions stay anchored to the right at all
     tablet+ widths; the primary section shrinks to make room and the
     title truncates with an ellipsis if necessary. Mobile gets a
     dedicated rule below that restructures the header. */
}

.page-header__primary {
  flex: 1;
  min-width: 0;
}

.page-header__actions {
  display: flex;
  gap: var(--space-2);
  /* THE ZONE HOLDS STATE, NOT ONLY ACTIONS. Now that a record's current state
     reads as an astra-badge here (and the transitions that change it live in
     the `⋯`), the zone has a child that is NOT 40px tall. The default
     `align-items: stretch` inflated that badge to the height of the tallest
     button beside it — a 40px pill with 12px of text in it — and every page
     that wanted a badge in the header had to reach into the zone and undo the
     stretch itself. Centre the cross axis once, here: buttons are all one
     height so it changes nothing for them, and a wrapped zone centres each
     line rather than the block.
     The ≤768px collapse below is keyed on `astra-button`, so the badge stays
     visible on a phone — which is correct: an operator must be able to see
     what state a record is in without opening a menu. */
  align-items: center;
  /* The zone is ONE flex item and it never shrinks — a shrunken zone is a
     clipped control, and the platform rule is that an ACTIONABLE CONTROL MUST
     NEVER CLIP (the title is what gives way; it has `min-width: 0` above and
     re-flows). `max-width` is the escape hatch for the pathological zone that
     is wider than the header itself: it then wraps INSIDE the zone rather than
     overflowing the page. */
  flex-shrink: 0;
  flex-wrap: wrap;
  max-width: 100%;
}

/* Same guarantee one level down: nothing in the zone shrinks. A squeezed
   astra-button clips its label instead of getting narrower gracefully. The
   cluster is `display: contents`, so ITS children are flex items of the zone
   too and need the rule as well. */
.page-header__actions > *,
.page-header__cluster > * {
  flex-shrink: 0;
}

/* An actions GROUP that needs its own element (state-machine host, form
   wrapper). Transparent to layout at BOTH breakpoints: a real flex item would
   introduce a nested row with its own gap, so the group's buttons would space
   differently from a bare child of the zone. */
.page-header__cluster {
  display: contents;
}

/* ─── THE SPLIT PRIMARY: the joined shape ───────────────────────────────────
   Width-independent half of `.page-cta-split` (see the long comment beside
   `$split-pinned` at the top of this file). The POSITIONING halves live in the
   two media blocks below, because a split is pinned exactly where and when its
   primary would have been. */
.page-cta-split {
  display: inline-flex;
  align-items: center;
}

/* THE WRAPPER IS ONLY AS AVAILABLE AS ITS PRIMARY. `hidden` goes on the button
   (the AVAILABILITY CONTRACT), and the corner scrim / bar strip / reserved zone
   all disappear with it — so the caret must go too, or a lone chevron floats in
   the corner over nothing, opening a menu of alternatives to an action that is
   not on offer. Written as the negation of the promotion gate so the two can
   never disagree. */
.page-cta-split:not(:has(> astra-button[variant=primary]:not([hidden]))) {
  display: none;
}

/* ONE CONTROL WITH A SEAM, not two buttons that happen to touch: the inner
   corners collapse and the END half's own (already-present, transparent) 1px
   border becomes the hairline between the halves. Logical radii + a logical
   border edge, so the shape flips correctly in RTL with no second rule.

   BY POSITION, NOT BY ROLE. These used to say "the direct-child primary
   flattens its end corners, the dropdown trigger flattens its start corners",
   which silently required the labelled action to be child #1 and the caret to
   be child #2 — i.e. it hard-coded one arrangement of the halves at the same
   time as the file hard-coded one verb for them. Start/end says the same thing
   about the SHAPE while leaving both free. */
.page-cta-split > astra-button:first-child::part(button), .page-cta-split > astra-dropdown:first-child > astra-button[slot=trigger]::part(button) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

.page-cta-split > astra-button:last-child::part(button), .page-cta-split > astra-dropdown:last-child > astra-button[slot=trigger]::part(button) {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start-color: color-mix(in oklch, var(--text-on-accent) 30%, transparent);
}

/* The primary's hover lifts it 1px (`transform: translateY(-1px)`), which on a
   joined control tears the seam open and slides the hairline out of true. Both
   halves keep every other hover affordance — the gradient still brightens, the
   elevation still grows — they just do not move. */
.page-cta-split astra-button::part(button):hover {
  transform: none;
}

/* ─── MIRROR ITEMS ──────────────────────────────────────────────────────────
   A `[data-mirror]` menu item is the ≤768px copy of a control that is VISIBLE
   in the zone at this width — so at this width it must not render, or the
   action reads twice (once as a button, once in the ⋯). The ≤768px half of the
   pair is in the mobile block. */
astra-menu-item[data-mirror] {
  display: none;
}

/* …and the divider that fenced the mirror group off goes with it, or a menu
   whose mirrors are all hidden opens with a stray rule across its top. Keyed on
   the divider FOLLOWING a mirror: in the canonical order (mirrors, then plain
   items, then divider, then the destructive one) a divider only ever sits
   directly after a mirror when the group above it just emptied out.

   `astra-dropdown`'s divider hygiene now catches this case too, and every case
   this selector cannot see. This rule STAYS because the two react on different
   clocks: the media query flips the instant the viewport crosses 768px, while
   the JS pass runs on slotchange, on open and on resize-while-open. Without it
   a menu resized on a closed dropdown would keep a stale rule until the next
   time an operator opened it. */
astra-menu-item[data-mirror] + astra-menu-divider {
  display: none;
}

/* Card chrome for the `.page-header--sticky` band, at BOTH breakpoints: mobile
   drops the pinning (see the mobile block) but keeps the grouping the card
   creates — title + status chips + facts read as one operator object. The
   pinning itself lives in the ≥769px block at the bottom of this file. */
.page-header--sticky {
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
}

@media (max-width: 768px) {
  /* Vertical real estate the sticky CTA bar reserves at the bottom of the
     viewport: 3rem button + space-3 above + space-3 below + safe-area
     inset. Defined ONLY when the page actually renders a promoted CTA, so
     pages without one keep the shells' 12px fallback breathing room. */
  :root:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden])) {
    --page-action-bar-zone: calc(3rem + var(--space-3) + var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  /* ─── THE ACTION ZONE at ≤768px ───────────────────────────────────────────
     ONE LAYOUT MODEL AT EVERY WIDTH. The header stays the flex row it is on
     desktop; mobile only adds (a) permission to wrap and (b) a floor under the
     title. Title + secondaries + ⋯ therefore share the heading row here exactly
     as they do at 1280px, which is the whole point: an operator does not learn
     a second layout on a phone.

     THIS USED TO BE A GRID, and that is the bug this replaces. `.page-header`
     became `grid-template-areas: "primary dropdown"`, `.page-header__actions`
     dissolved with `display: contents`, and an area was assigned to exactly ONE
     child — `astra-dropdown`. Every other child (a ghost secondary, a
     state-machine button) had no area, so it AUTO-PLACED onto a new implicit
     row: measured on a 375px portal page, two ghosts landed BELOW the header at
     y=232 and squeezed the h1 from 319px to 194px. Three templates shipped
     three different local workarounds for that one bug (invoice-edit,
     shop-order-detail, shop-return-detail) — the cost of a placement rule that
     only knows about one kind of child.

     Placing the whole ZONE (`grid-area` on `.page-header__actions` instead of
     on the dropdown) would have fixed the symptom. Dropping the grid fixes the
     CLASS: with the zone as a single flex item there is nothing left to place,
     so a cluster wrapper, a tooltip host around a button, or tomorrow's second
     dropdown cannot fall out of it. Flex also buys the two behaviours the grid
     could not express here:
       · the zone wraps AS A WHOLE — it may drop under the title, but it can
         never interleave with it or split its own controls across rows;
       · `min-width` on `.page-header__primary` is a REAL floor. `minmax(0, 1fr)`
         asks the title to collapse toward zero before anything else gives; a
         floor makes the ZONE yield the row instead, which is the correct
         priority when the title is what identifies the record.
     (Container queries were the third option: they would need a named container
     on every shell plus a fallback for pages rendered outside one, to arrive at
     these same two declarations. Not worth it.) */
  .page-header {
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-end: var(--space-5);
  }
  .page-header__primary {
    /* TITLE FLOOR — under ~12rem a heading stops being readable, so that is the
       width at which the zone gives up the row rather than the title giving up
       characters. `min()` keeps it honest inside a container narrower than the
       floor: never wider than 100%, so the floor itself can never cause an
       overflow. */
    min-width: min(100%, 12rem);
  }
  /* COLLAPSE TO THE ⋯ ALONE.
     The narrow-width answer for a zone that HAS an overflow menu: hide the
     visible secondaries, let the ⋯ carry them, and the heading row is title +
     one 40px trigger.

     Gated on the menu actually containing the mobile copies
     (`astra-menu-item[data-mirror]` — see "MIRROR ITEMS" above), which makes
     the rule fail-safe in the only direction that matters: a zone whose
     secondaries are not mirrored keeps them (they merely wrap under the title,
     as one block), so no page can lose an action by being rebuilt on this file
     before its ⋯ is written.

     The promoted primary is excluded: it is already `position: fixed` in the
     thumb bar, not in this row. `[slot="trigger"]` excludes the ⋯ itself — the
     one control the collapse exists to keep. */
  .page-header__actions:has(astra-dropdown astra-menu-item[data-mirror]) astra-button:not([slot=trigger]):not([variant=primary]):not(.page-cta):not(.page-cta--pinned) {
    display: none;
  }
  /* The other half of the pair (default is `display: none`, above). */
  astra-menu-item[data-mirror] {
    display: block;
  }
  astra-menu-item[data-mirror] + astra-menu-divider {
    display: block;
  }
  /* Sticky primary CTA at the viewport bottom — 12px gap on every side.
     `position: fixed`, not absolute: fixed pins to the viewport whatever the
     header is doing, so the bar survived the header being a grid (whose areas
     act as containing blocks for absolutely-positioned children) and survives
     it being a flex row now. It is also why the promoted primary is excluded
     from the collapse above — it is not in that row at all. */
  .page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary] {
    position: fixed;
    top: auto;
    inset-inline: var(--space-3);
    bottom: max(var(--space-3), env(safe-area-inset-bottom));
    display: block;
    width: auto;
    z-index: var(--z-overlay);
  }
  /* `display: block` above would defeat the UA's `[hidden] { display:
     none }` (lower specificity) — restore it so hidden CTAs (multi-step
     flows toggling buttons) stay hidden. */
  .page-header__actions > astra-button[variant=primary][hidden],
  .page-header__cluster > astra-button[variant=primary][hidden],
  astra-button.page-cta[variant=primary][hidden],
  astra-button.page-cta--pinned[variant=primary][hidden] {
    display: none;
  }
  .page-header__actions > astra-button[variant=primary]::part(button),
  .page-header__cluster > astra-button[variant=primary]::part(button),
  astra-button.page-cta[variant=primary]::part(button),
  astra-button.page-cta--pinned[variant=primary]::part(button) {
    width: 100%;
    height: 3rem;
    box-shadow: var(--elevation-4);
  }
  /* THE SPLIT PRIMARY IS THE BAR. The wrapper takes the fixed positioning the
     rule above just gave its primary, so the caret rides the bar instead of
     being left behind in the heading row; the primary goes back to being an
     ordinary flex item and eats the width the caret does not need. Gated on the
     wrapper actually holding a PROMOTED primary — an un-promoted split is an
     in-flow control and must stay in the flow. */
  .page-cta-split:has(> astra-button.page-cta[variant=primary]:not([hidden])), .page-cta-split:has(> astra-button.page-cta--pinned[variant=primary]:not([hidden])) {
    position: fixed;
    top: auto;
    inset-inline: var(--space-3);
    bottom: max(var(--space-3), env(safe-area-inset-bottom));
    display: flex;
    z-index: var(--z-overlay);
  }
  .page-cta-split > astra-button.page-cta[variant=primary],
  .page-cta-split > astra-button.page-cta--pinned[variant=primary] {
    position: static;
    inset: auto;
    z-index: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* The caret is a fixed 3rem square beside a primary that flexes — the label
     half gives up the width, never the tap target. Same height and elevation as
     the half it is joined to. */
  .page-cta-split > astra-dropdown > astra-button[slot=trigger]::part(button) {
    width: 3rem;
    height: 3rem;
    padding: 0;
    box-shadow: var(--elevation-4);
  }
  /* Backdrop-blur fade strip behind the CTA — iOS Mail / Notes idiom.
     Sits at the viewport bottom, fades from transparent at the top to the
     page surface at the bottom, and blurs whatever scrolls underneath.

     Painted from the SHELL's main slot pseudo (::part(main)::after), i.e.
     a flat-tree ANCESTOR of the promoted button:
       - not the button's own pseudo — the button is a stacking context
         (fixed + z-index), so a pseudo-child would cover its gradient +
         label;
       - not body::after — Chromium paints a fixed body pseudo OVER
         slotted shadow-DOM content regardless of z-index (verified: a
         z-299 body::after covers the z-300 promoted astra-button inside
         astra-shell-admin), so the strip would wash out the CTA.
     A pseudo INSIDE the shell shadow tree layers correctly under the
     button in every shell. body::after remains only as the fallback for
     shell-less pages (plain DOM — z-index behaves normally there).
     mask-image gates the strip's pixels by alpha so the blur dissolves
     toward the top instead of cutting off. */
  astra-shell-admin:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-partner:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-ninefive:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-invoice:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-identity:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  body:not(:has(astra-shell-admin, astra-shell-partner, astra-shell-ninefive, astra-shell-invoice, astra-shell-identity)):has(astra-button.page-cta[variant=primary]:not([hidden]))::after {
    content: "";
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    height: calc(var(--page-action-bar-zone) + var(--space-8));
    background: linear-gradient(to top, var(--surface-page) 0%, color-mix(in oklch, var(--surface-page) 70%, transparent) 60%, transparent 100%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to top, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 45%, rgba(0, 0, 0, 0) 100%);
    z-index: calc(var(--z-overlay) - 1);
    pointer-events: none;
  }
  /* Reserve room under the sticky CTA so the last content row remains
     scrollable into view. Applied at the shell's main slot via
     ::part(main) — gated on a promoted CTA actually existing inside that
     shell so CTA-less pages keep their normal padding. */
  astra-shell-admin:has(.page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-partner:has(.page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-ninefive:has(.page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-invoice:has(.page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-identity:has(.page-header__actions > astra-button[variant=primary], .page-header__cluster > astra-button[variant=primary], astra-button.page-cta[variant=primary], astra-button.page-cta--pinned[variant=primary])::part(main) {
    padding-block-end: calc(var(--page-action-bar-zone, var(--space-3)) + var(--space-3));
  }
  /* Targeted layout wrappers (no-op when nested inside a shell, useful for
     pages rendered outside one) + a body-level reserve for shell-less
     pages that opt a CTA in. */
  .detail-layout,
  .settings-layout,
  .dashboard-grid {
    padding-block-end: calc(var(--page-action-bar-zone, var(--space-3)) + var(--space-3));
  }
  body:not(:has(astra-shell-admin, astra-shell-partner, astra-shell-ninefive, astra-shell-invoice, astra-shell-identity)):has(astra-button.page-cta[variant=primary]:not([hidden])) {
    padding-block-end: calc(var(--page-action-bar-zone, var(--space-3)) + var(--space-3));
  }
  /* Bottom-positioned toast regions ride above the action bar so toasts
     and the CTA never overlap (top-positioned regions are unaffected). */
  :root:has(.page-header__actions > astra-button[variant=primary]:not([hidden]), .page-header__cluster > astra-button[variant=primary]:not([hidden]), astra-button.page-cta[variant=primary]:not([hidden]), astra-button.page-cta--pinned[variant=primary]:not([hidden])) astra-toast-region[position^=bottom] {
    bottom: calc(var(--page-action-bar-zone) + var(--space-2));
  }
  /* `.page-header--sticky` does NOT stick on mobile. The thumb-zone bar is the
     mobile answer, and a sticky (= stacking-context-forming) ancestor would trap
     the DS-promoted `position: fixed` CTA inside it, painting it UNDER the action
     bar's blur strip (z-overlay − 1). Static + z-index:auto lets it escape to the
     viewport. The card chrome stays — only the pinning goes. */
  .page-header--sticky {
    position: static;
    z-index: auto;
    padding: var(--space-3);
    border-radius: var(--radius-md);
  }
}
@media (min-width: 769px) {
  /* PIN FLUSH TO THE SCROLLPORT, and no glass anywhere.
     ────────────────────────────────────────────────────────────────────────
     A browser insets a sticky element's constraint rect by the SCROLL
     CONTAINER'S PADDING, so a bare `top: 0` inside the shell's `.sh__main`
     (padding-block-start: space-8) pins the band 32px BELOW the scrollport's
     visible top edge. That leaves a live 32px strip in which scrolled content
     shows ABOVE the supposedly-pinned band.

     This used to be papered over with a `::before` glass panel, and that fix
     was worse than the bug: it painted UNCONDITIONALLY — including at
     scrollTop 0 with nothing beneath it — and it was only as wide as the band
     (the content box) while the scrollport is the content box PLUS the inline
     padding, so it rendered as a 948×32 pale blurred rectangle with hard
     left/right edges that washed the shell's radial accent gradient out at
     rest. Measured on portal shop-order-detail: bbox (289,84)–(1235,173).

     Cancel the inset instead: subtract the container's own top padding, which
     the sidebar shells publish as `--sh-main-pad-block-start`. The band then
     pins flush to the scrollport's visible top edge, so no strip can exist and
     none needs glassing — the card's opaque `--surface-raised` fill and its
     elevation-1 shadow cut the content cleanly on their own.

     At rest nothing moves: sticky only offsets once the element WOULD cross the
     threshold, and at scrollTop 0 the band sits a full padding below it.
     Fallback 0px == today's `top: 0` for any non-shell scroll container with no
     top padding. Mobile keeps `position: static` (see the ≤768px block). */
  .page-header--sticky {
    position: sticky;
    top: calc(-1 * var(--sh-main-pad-block-start, 0px));
    z-index: var(--z-raised);
  }
  /* The floating primary. `position: fixed` (not sticky) because the button
     sits deep inside a card — a sticky box can only travel within its own
     containing block, which is the card, i.e. exactly the scroll range that
     already failed. Bottom-END, so it never collides with the shells' sidebar
     (start) or with the default top-right toast region. */
  astra-button.page-cta--pinned[variant=primary] {
    position: fixed;
    top: auto;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    inset-inline-start: auto;
    z-index: var(--z-overlay);
  }
  /* `[hidden]` must still win (multi-step flows toggle the CTA). */
  astra-button.page-cta--pinned[variant=primary][hidden] {
    display: none;
  }
  astra-button.page-cta--pinned[variant=primary]::part(button) {
    height: 3rem;
    padding-inline: var(--space-6);
    box-shadow: var(--elevation-4);
  }
  /* THE SPLIT PRIMARY, pinned. Same corner, same insets, same z-index as the
     lone pill above — the wrapper simply wears them instead of the button, so
     the caret comes with it. The scrim underneath needs no new selector: it
     gates on `$pinned-visible`, i.e. on the BUTTON, which is still there,
     still classed and still not `hidden`.

     Both declarations below out-specify the `astra-button.page-cta--pinned[variant="primary"]` rules they correct
     (one extra class each) AND sit after them, so neither depends on the other
     mechanism alone. */
  .page-cta-split:has(> astra-button.page-cta--pinned[variant=primary]:not([hidden])) {
    position: fixed;
    top: auto;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    inset-inline-start: auto;
    z-index: var(--z-overlay);
  }
  .page-cta-split > astra-button.page-cta--pinned[variant=primary] {
    position: static;
    inset: auto;
    z-index: auto;
  }
  /* The caret matches the pill it is joined to: 3rem tall, square, same
     elevation. It keeps the pill's `padding-inline` off itself — an icon-only
     button that inherited space-6 either side would be 88px wide. */
  .page-cta-split > astra-dropdown > astra-button[slot=trigger]::part(button) {
    width: 3rem;
    height: 3rem;
    padding: 0;
    box-shadow: var(--elevation-4);
  }
  /* ---- The corner scrim ---------------------------------------------------
     A pill floating over arbitrary scrolling content is only legible if
     something separates it from that content. Mobile solves this with a
     full-width blurred fade strip; a full-width strip is the wrong SHAPE for a
     corner pill — it draws a band across a page that has no band.

     So: the same trick, radially. A quarter-disc of blur anchored in the
     bottom-end corner, and a `mask-image` whose alpha falls to 0 well before
     the box ends, so the blur DISSOLVES outward instead of stopping on an
     edge. Both layers use the same `115% 115%` radial geometry, so the tint
     and the blur fade together — mismatch them and the tint outlives the blur
     as a visible ring.

     Painted from `::part(main)::after`, the same flat-tree ancestor the mobile
     strip uses, for the same two reasons documented there: the button is its
     own stacking context (fixed + z-index) so its own pseudo would cover its
     label, and a fixed `body::after` paints OVER slotted shadow-DOM content in
     Chromium regardless of z-index.

     `pointer-events: none` is non-negotiable — this thing covers ~416x256px of
     real form controls (the product editor's Width/Weight inputs sit under it)
     and would eat every click in that corner.

     No doubling with mobile: that strip lives in the ≤768px block, this in the
     ≥769px block. Exactly one of the two can ever paint. */
  astra-shell-admin:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-partner:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-ninefive:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-invoice:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-identity:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  body:not(:has(astra-shell-admin, astra-shell-partner, astra-shell-ninefive, astra-shell-invoice, astra-shell-identity)):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::after {
    content: "";
    position: fixed;
    inset-block-start: auto;
    inset-inline-start: auto;
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: min(26rem, 38vw);
    block-size: min(16rem, 34vh);
    background: radial-gradient(115% 115% at 100% 100%, color-mix(in oklch, var(--surface-page) 88%, transparent) 0%, color-mix(in oklch, var(--surface-page) 62%, transparent) 42%, transparent 74%);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    mask-image: radial-gradient(115% 115% at 100% 100%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0) 76%);
    -webkit-mask-image: radial-gradient(115% 115% at 100% 100%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0) 76%);
    z-index: calc(var(--z-overlay) - 1);
    pointer-events: none;
  }
  /* `inset-inline-end` is logical but `at 100% 100%` is physical, so in RTL the
     anchor moves to the start edge and the blur would sit on the wrong side of
     its own box. Flip both gradients' origin with it. */
  astra-shell-admin:dir(rtl):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-partner:dir(rtl):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-ninefive:dir(rtl):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-invoice:dir(rtl):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-identity:dir(rtl):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  body:dir(rtl):not(:has(astra-shell-admin, astra-shell-partner, astra-shell-ninefive, astra-shell-invoice, astra-shell-identity)):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::after {
    background: radial-gradient(115% 115% at 0% 100%, color-mix(in oklch, var(--surface-page) 88%, transparent) 0%, color-mix(in oklch, var(--surface-page) 62%, transparent) 42%, transparent 74%);
    mask-image: radial-gradient(115% 115% at 0% 100%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0) 76%);
    -webkit-mask-image: radial-gradient(115% 115% at 0% 100%, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 34%, rgba(0, 0, 0, 0) 76%);
  }
  /* Reserve the pill's zone so the last content row can still scroll clear of
     it, and lift bottom toasts above it — the desktop halves of the two mobile
     rules, gated the same way on the CTA actually existing. */
  :root:has(astra-button.page-cta--pinned[variant=primary]:not([hidden])) {
    --page-action-bar-zone: calc(3rem + var(--space-5) + var(--space-5));
  }
  astra-shell-admin:has(astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-partner:has(astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-ninefive:has(astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-invoice:has(astra-button.page-cta--pinned[variant=primary])::part(main),
  astra-shell-identity:has(astra-button.page-cta--pinned[variant=primary])::part(main) {
    padding-block-end: calc(var(--page-action-bar-zone, var(--space-3)) + var(--space-3));
  }
  :root:has(astra-button.page-cta--pinned[variant=primary]:not([hidden])) astra-toast-region[position^=bottom] {
    bottom: calc(var(--page-action-bar-zone) + var(--space-2));
  }
}
/* Transparency is a preference, not a given. Keep the separation (the pill
   still needs to read against content) but drop the compositor-expensive blur
   and lean on an opaque-at-the-corner tint instead. Same radial falloff, so
   there is still no hard edge. */
@media (min-width: 769px) and (prefers-reduced-transparency: reduce) {
  astra-shell-admin:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-partner:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-ninefive:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-invoice:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  astra-shell-identity:has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::part(main)::after,
  body:not(:has(astra-shell-admin, astra-shell-partner, astra-shell-ninefive, astra-shell-invoice, astra-shell-identity)):has(astra-button.page-cta--pinned[variant=primary]:not([hidden]))::after {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: radial-gradient(115% 115% at 100% 100%, var(--surface-page) 0%, color-mix(in oklch, var(--surface-page) 80%, transparent) 42%, transparent 74%);
  }
}
.brand-mark {
  color: var(--accent-ink);
}

.action-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* Destructive at the start, confirming at the end, whatever the gap between
   them turns out to be. The split is what stops a mis-click, not the label. */
.action-row--split {
  justify-content: space-between;
}

/* Trailing cluster — the default reading for "these are this surface's
   actions" when nothing destructive is present. */
.action-row--end {
  justify-content: flex-end;
}

/* A cluster fenced off from the content above it (the settings "danger zone"
   idiom the five `.danger-row` copies were all reaching for). */
.action-row--fenced {
  padding-block-start: var(--space-4);
  margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

/* Below the thumb-zone breakpoint a wrapped cluster reads as a stack of
   equal-width blocks rather than a ragged row; the DS-promoted primary has
   already left the flow to the bottom bar by then, so what remains here is the
   secondary/destructive tail. */
@media (max-width: 480px) {
  .action-row > astra-button {
    flex: 1 1 auto;
  }
}
.status-surface {
  --status-accent: var(--accent-500);
  --status-ink: var(--accent-ink);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: radial-gradient(150px 130px at 1.5rem 1.3rem, color-mix(in oklch, var(--status-accent) 26%, transparent) 0%, color-mix(in oklch, var(--status-accent) 9%, transparent) 30%, transparent 68%), var(--status-surface-base, var(--surface-raised));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-2);
  padding: var(--space-3) var(--space-4);
  box-sizing: border-box;
}

.status-surface--default {
  --status-accent: var(--accent-500);
  --status-ink: var(--accent-ink);
}

.status-surface--success {
  --status-accent: var(--success-500);
  --status-ink: var(--success-ink);
}

.status-surface--warning {
  --status-accent: var(--warning-500);
  --status-ink: var(--warning-ink);
}

.status-surface--danger {
  --status-accent: var(--danger-500);
  --status-ink: var(--danger-ink);
}

.status-surface--info {
  --status-accent: var(--info-500);
  --status-ink: var(--info-ink);
}

.status-surface--quiet {
  background: color-mix(in srgb, var(--status-accent) 8%, var(--status-surface-base, var(--surface-raised)));
  border-color: color-mix(in srgb, var(--status-accent) 24%, var(--border-subtle));
  box-shadow: none;
}

.status-surface__icon {
  flex-shrink: 0;
  margin-block-start: 2px;
  display: inline-flex;
  color: var(--status-ink);
}

.status-surface__content {
  flex: 1 1 14rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.status-surface__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.status-surface__message {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.status-surface__message:empty {
  display: none;
}

.status-surface__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
/*# sourceMappingURL=core.css.map */