@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);
  --accent-royalties-50: oklch(97% 0.02 65deg);
  --accent-royalties-100: oklch(93% 0.05 65deg);
  --accent-royalties-200: oklch(86% 0.1 65deg);
  --accent-royalties-400: oklch(66% 0.145 65deg);
  --accent-royalties-500: oklch(56% 0.17 65deg);
  --accent-royalties-600: oklch(48% 0.17 65deg);
  --accent-royalties-700: oklch(40% 0.156 65deg);
  --accent-royalties-900: oklch(28% 0.111 65deg);
  --accent-ads-50: oklch(97% 0.02 262deg);
  --accent-ads-100: oklch(93% 0.05 262deg);
  --accent-ads-200: oklch(86% 0.1 262deg);
  --accent-ads-400: oklch(66% 0.162 262deg);
  --accent-ads-500: oklch(56% 0.19 262deg);
  --accent-ads-600: oklch(48% 0.19 262deg);
  --accent-ads-700: oklch(40% 0.175 262deg);
  --accent-ads-900: oklch(28% 0.124 262deg);
  --accent-supplier-50: oklch(97% 0.02 174deg);
  --accent-supplier-100: oklch(93% 0.05 174deg);
  --accent-supplier-200: oklch(86% 0.1 174deg);
  --accent-supplier-400: oklch(62.5% 0.102 174deg);
  --accent-supplier-500: oklch(52.5% 0.12 174deg);
  --accent-supplier-600: oklch(44.5% 0.12 174deg);
  --accent-supplier-700: oklch(36.5% 0.11 174deg);
  --accent-supplier-900: oklch(28% 0.078 174deg);
  --accent-music-50: oklch(97% 0.02 12deg);
  --accent-music-100: oklch(93% 0.05 12deg);
  --accent-music-200: oklch(86% 0.09 12deg);
  --accent-music-400: oklch(67% 0.14 12deg);
  --accent-music-500: oklch(54% 0.17 12deg);
  --accent-music-600: oklch(46% 0.17 12deg);
  --accent-music-700: oklch(38% 0.156 12deg);
  --accent-music-900: oklch(28% 0.11 12deg);
  --accent-shop-50: oklch(97% 0.02 262deg);
  --accent-shop-100: oklch(93% 0.05 262deg);
  --accent-shop-200: oklch(86% 0.1 262deg);
  --accent-shop-400: oklch(66% 0.162 262deg);
  --accent-shop-500: oklch(56% 0.19 262deg);
  --accent-shop-600: oklch(48% 0.19 262deg);
  --accent-shop-700: oklch(40% 0.175 262deg);
  --accent-shop-900: oklch(28% 0.124 262deg);
  --accent-pixel-50: oklch(97% 0.02 45deg);
  --accent-pixel-100: oklch(93% 0.05 45deg);
  --accent-pixel-200: oklch(86% 0.09 45deg);
  --accent-pixel-400: oklch(65.5% 0.128 45deg);
  --accent-pixel-500: oklch(55.5% 0.15 45deg);
  --accent-pixel-600: oklch(47.5% 0.15 45deg);
  --accent-pixel-700: oklch(39.5% 0.138 45deg);
  --accent-pixel-900: oklch(28% 0.097 45deg);
  --accent-xtra-50: oklch(97% 0.012 255deg);
  --accent-xtra-100: oklch(93% 0.03 255deg);
  --accent-xtra-200: oklch(86% 0.06 255deg);
  --accent-xtra-400: oklch(66.5% 0.085 255deg);
  --accent-xtra-500: oklch(53% 0.1 255deg);
  --accent-xtra-600: oklch(45% 0.1 255deg);
  --accent-xtra-700: oklch(37% 0.092 255deg);
  --accent-xtra-900: oklch(28% 0.065 255deg);
  --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-tint: color-mix(in oklch, var(--surface-raised) 66%, transparent);
  --glass-strong-mix: 86%;
  --glass-tint-strong: color-mix(in oklch, var(--surface-raised) var(--glass-strong-mix), transparent);
  --glass-tint-inverse: color-mix(in oklch, var(--neutral-800) 86%, transparent);
  --glass-blur: blur(40px) saturate(180%) brightness(1.04);
  --glass-sheen: linear-gradient(to bottom, color-mix(in oklch, white 6%, transparent), transparent 3rem);
  --glass-edge-color: color-mix(in oklch, var(--neutral-1000) 8%, transparent);
  --glass-edge: 1px solid var(--glass-edge-color);
  --glass-rim:
    inset 0 1px 0 color-mix(in oklch, white 22%, transparent),
    inset 0 0 0 1px color-mix(in oklch, white 6%, transparent);
  --glass-float:
    0 1px 2px color-mix(in oklch, var(--neutral-1000) 8%, transparent),
    0 10px 28px -10px color-mix(in oklch, var(--neutral-1000) 22%, transparent);
  --glass-feather: 1rem;
  --glass-seam: transparent;
  --glass-surface: var(--glass-tint);
  --glass-border: var(--glass-edge);
  --glass-shadow: var(--glass-rim), var(--glass-float);
  --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);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-tint: var(--glass-tint-strong);
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-tint: var(--surface-raised);
    --glass-tint-strong: var(--surface-raised);
    --glass-tint-inverse: var(--neutral-800);
    --glass-blur: none;
    --glass-sheen: none;
    --glass-feather: 0px;
    --glass-seam: var(--border-subtle);
  }
}
@media (forced-colors: active) {
  :root {
    --glass-tint: Canvas;
    --glass-tint-strong: Canvas;
    --glass-tint-inverse: Canvas;
    --glass-blur: none;
    --glass-sheen: none;
    --glass-edge-color: CanvasText;
    --glass-rim: 0 0 0 0 transparent;
    --glass-feather: 0px;
    --glass-seam: CanvasText;
  }
}
: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 */
  /* --- The 2xs rung (stack + inline) -----------------------------------
     2px is the most-written hardcoded number in the estate: 25 `gap: 2px`
     across the platform's app templates, 25 more inside this design system's
     own src/, and 49 further hardcoded Astra declarations whose value contains
     a 2px. That is not eyeballing — it is ONE shared idiom, the two-line
     name-over-detail stack inside a dense row, written identically everywhere,
     which is the signature of a real shape.

     Yet the raw `--space-0-5` (2px) was referenced in exactly two places in
     the whole system, both inside the [data-density="compact"] block below,
     which no page in the estate can currently reach. So 2px had no semantic
     name at all, and every sweep faced a false choice: double all ~50 gaps to
     `stack-xs` (4px) and change how dense rows look, or re-commit to the raw
     scale and keep spelling rhythm as measurement. This rung removes the
     choice. It is the bottom of the ladder, not a new step on the raw scale —
     the raw scale already had 2px and is not changed.

     REJECTED here, deliberately; do not reintroduce either:
       · a 6px semantic rung. When this was written `--space-1-5` (6px) was
         referenced 0 times in Astra. The W6 sweep since gave it ~10 uses, and
         they STRENGTHEN the rejection rather than reopening it: every one is
         RAW measurement — astra-badge's sm end-caps, the scrub-bubble chips in
         astra-audio/-slider/-video, astra-calendar's event bar, the nav row
         inset. Not one is rhythm between siblings, which is the only thing a
         semantic rung would be for. 6px is a control-geometry number, and it
         already has the right home.
       · re-basing `--space-inline-xs` from 4px to 6px. The ~9 near-6px values
         that suggest it (.3rem/.35rem/.4rem) are all one thing, the
         checkbox/radio-to-label gap — and astra-checkbox and astra-radio
         already own that gap at `--space-inline-sm` (8px). Re-basing would
         silently move astra-badge's internal gap, which is correctly 4px.
     -------------------------------------------------------------------- */
  /* Stack — vertical rhythm between siblings */
  --space-stack-2xs: var(--space-0-5); /* 2px — see the note above */
  --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-2xs: var(--space-0-5); /* 2px — see the note above */
  --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 — page edge padding. The three RUNGS; `--gutter` itself is
     derived from them by width in section 4 below. */
  --gutter-sm: var(--space-4); /* 16px — phone  */
  --gutter-md: var(--space-6); /* 24px — tablet / narrow desktop */
  --gutter-lg: var(--space-8); /* 32px — wide 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 — 2xs steps to the 1px rung rather than colliding with xs, which
     is itself 2px here; the ladder stays strictly ordered in both densities
     and 2xs is never the wider of the two. */
  --space-stack-2xs: var(--space-px); /* 2  → 1  */
  --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-2xs: var(--space-px); /* 2  → 1  */
  --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 — the rungs move; the derived `--gutter` follows them for free */
  --gutter-sm: var(--space-3); /* 16 → 12 */
  --gutter-md: var(--space-4); /* 24 → 16 */
  --gutter-lg: var(--space-6); /* 32 → 24 */
}

:root,
[data-density] {
  --gutter: var(--gutter-sm);
}

@media (min-width: 768px) {
  :root,
  [data-density] {
    --gutter: var(--gutter-md);
  }
}
@media (min-width: 1280px) {
  :root,
  [data-density] {
    --gutter: var(--gutter-lg);
  }
}
: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  */
}

@property --sq-r {
  syntax: "*";
  inherits: false;
}
@property --sq-tl {
  syntax: "*";
  inherits: false;
}
@property --sq-tr {
  syntax: "*";
  inherits: false;
}
@property --sq-br {
  syntax: "*";
  inherits: false;
}
@property --sq-bl {
  syntax: "*";
  inherits: false;
}
: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);
  --ai-sheen-speed: 2.4s;
  --ai-reveal-stagger: 18ms;
  --ai-ease: var(--ease-out);
  --ai-glow-duration: 600ms;
}

@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);
  --surface-selected: color-mix(in srgb, var(--accent-500) 8%, var(--surface-sunken));
  --border-selected: var(--accent-500);
  --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);
  --glass-text-tertiary: oklch(46.5% 0.012 260);
  --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);
  --surface-selected: color-mix(in srgb, var(--accent-500) 16%,
                        color-mix(in srgb, var(--neutral-700) 55%, var(--surface-raised)));
  --border-selected: var(--accent-500);
  --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);
  --glass-strong-mix: 92%;
  --glass-text-tertiary: oklch(70% 0.009 260);
  --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] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --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));
  --glass-accent-ink: var(--accent-admin-700);
}

: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);
  --glass-accent-ink: color-mix(in oklch, var(--accent-admin-400) 50%, var(--accent-admin-200));
}

[data-group=partner] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --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));
  --glass-accent-ink: var(--accent-partner-700);
}

:root[data-theme=dark] [data-group=partner], :root[data-theme=dark][data-group=partner] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-partner-400) 50%, var(--accent-partner-200));
}

[data-group=identity] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --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));
  --glass-accent-ink: var(--accent-identity-700);
}

:root[data-theme=dark] [data-group=identity], :root[data-theme=dark][data-group=identity] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-identity-400) 50%, var(--accent-identity-200));
}

[data-group=invoice] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --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));
  --glass-accent-ink: var(--accent-invoice-700);
}

:root[data-theme=dark] [data-group=invoice], :root[data-theme=dark][data-group=invoice] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-invoice-400) 50%, var(--accent-invoice-200));
}

[data-group=ninefive] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --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));
  --glass-accent-ink: var(--accent-ninefive-700);
}

:root[data-theme=dark] [data-group=ninefive], :root[data-theme=dark][data-group=ninefive] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-ninefive-400) 50%, var(--accent-ninefive-200));
}

[data-group=royalties] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-royalties-50);
  --accent-100: var(--accent-royalties-100);
  --accent-200: var(--accent-royalties-200);
  --accent-400: var(--accent-royalties-400);
  --accent-500: var(--accent-royalties-500);
  --accent-600: var(--accent-royalties-600);
  --accent-700: var(--accent-royalties-700);
  --accent-900: var(--accent-royalties-900);
  --fill-accent: var(--accent-royalties-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-royalties-500) 50%, var(--accent-royalties-600));
  --fill-accent-hover: var(--accent-royalties-600);
  --fill-accent-active: var(--accent-royalties-700);
  --accent-ink-on-light: var(--accent-royalties-600);
  --accent-ink-on-dark: var(--accent-royalties-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-royalties-700);
}

:root[data-theme=dark] [data-group=royalties], :root[data-theme=dark][data-group=royalties] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-royalties-400) 50%, var(--accent-royalties-200));
}

[data-group=ads] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-ads-50);
  --accent-100: var(--accent-ads-100);
  --accent-200: var(--accent-ads-200);
  --accent-400: var(--accent-ads-400);
  --accent-500: var(--accent-ads-500);
  --accent-600: var(--accent-ads-600);
  --accent-700: var(--accent-ads-700);
  --accent-900: var(--accent-ads-900);
  --fill-accent: var(--accent-ads-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-ads-500) 50%, var(--accent-ads-600));
  --fill-accent-hover: var(--accent-ads-600);
  --fill-accent-active: var(--accent-ads-700);
  --accent-ink-on-light: var(--accent-ads-600);
  --accent-ink-on-dark: var(--accent-ads-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-ads-700);
}

:root[data-theme=dark] [data-group=ads], :root[data-theme=dark][data-group=ads] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-ads-400) 50%, var(--accent-ads-200));
}

[data-group=supplier] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-supplier-50);
  --accent-100: var(--accent-supplier-100);
  --accent-200: var(--accent-supplier-200);
  --accent-400: var(--accent-supplier-400);
  --accent-500: var(--accent-supplier-500);
  --accent-600: var(--accent-supplier-600);
  --accent-700: var(--accent-supplier-700);
  --accent-900: var(--accent-supplier-900);
  --fill-accent: var(--accent-supplier-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-supplier-500) 50%, var(--accent-supplier-600));
  --fill-accent-hover: var(--accent-supplier-600);
  --fill-accent-active: var(--accent-supplier-700);
  --accent-ink-on-light: var(--accent-supplier-600);
  --accent-ink-on-dark: var(--accent-supplier-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-supplier-700);
}

:root[data-theme=dark] [data-group=supplier], :root[data-theme=dark][data-group=supplier] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-supplier-400) 50%, var(--accent-supplier-200));
}

[data-group=music] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-music-50);
  --accent-100: var(--accent-music-100);
  --accent-200: var(--accent-music-200);
  --accent-400: var(--accent-music-400);
  --accent-500: var(--accent-music-500);
  --accent-600: var(--accent-music-600);
  --accent-700: var(--accent-music-700);
  --accent-900: var(--accent-music-900);
  --fill-accent: var(--accent-music-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-music-500) 50%, var(--accent-music-600));
  --fill-accent-hover: var(--accent-music-600);
  --fill-accent-active: var(--accent-music-700);
  --accent-ink-on-light: var(--accent-music-600);
  --accent-ink-on-dark: var(--accent-music-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-music-700);
}

:root[data-theme=dark] [data-group=music], :root[data-theme=dark][data-group=music] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-music-400) 50%, var(--accent-music-200));
}

[data-group=shop] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-shop-50);
  --accent-100: var(--accent-shop-100);
  --accent-200: var(--accent-shop-200);
  --accent-400: var(--accent-shop-400);
  --accent-500: var(--accent-shop-500);
  --accent-600: var(--accent-shop-600);
  --accent-700: var(--accent-shop-700);
  --accent-900: var(--accent-shop-900);
  --fill-accent: var(--accent-shop-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-shop-500) 50%, var(--accent-shop-600));
  --fill-accent-hover: var(--accent-shop-600);
  --fill-accent-active: var(--accent-shop-700);
  --accent-ink-on-light: var(--accent-shop-600);
  --accent-ink-on-dark: var(--accent-shop-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-shop-700);
}

:root[data-theme=dark] [data-group=shop], :root[data-theme=dark][data-group=shop] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-shop-400) 50%, var(--accent-shop-200));
}

[data-group=pixel] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-pixel-50);
  --accent-100: var(--accent-pixel-100);
  --accent-200: var(--accent-pixel-200);
  --accent-400: var(--accent-pixel-400);
  --accent-500: var(--accent-pixel-500);
  --accent-600: var(--accent-pixel-600);
  --accent-700: var(--accent-pixel-700);
  --accent-900: var(--accent-pixel-900);
  --fill-accent: var(--accent-pixel-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-pixel-500) 50%, var(--accent-pixel-600));
  --fill-accent-hover: var(--accent-pixel-600);
  --fill-accent-active: var(--accent-pixel-700);
  --accent-ink-on-light: var(--accent-pixel-600);
  --accent-ink-on-dark: var(--accent-pixel-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-pixel-700);
}

:root[data-theme=dark] [data-group=pixel], :root[data-theme=dark][data-group=pixel] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-pixel-400) 50%, var(--accent-pixel-200));
}

[data-group=xtra] {
  --corner-shape: squircle;
  --radius-control: 0.875rem;
  --radius-card: 1.25rem;
  --radius-surface: 1.5rem;
  --text-on-accent: var(--neutral-0);
  --accent-50: var(--accent-xtra-50);
  --accent-100: var(--accent-xtra-100);
  --accent-200: var(--accent-xtra-200);
  --accent-400: var(--accent-xtra-400);
  --accent-500: var(--accent-xtra-500);
  --accent-600: var(--accent-xtra-600);
  --accent-700: var(--accent-xtra-700);
  --accent-900: var(--accent-xtra-900);
  --fill-accent: var(--accent-xtra-500);
  --fill-accent-shade: color-mix(in oklch, var(--accent-xtra-500) 50%, var(--accent-xtra-600));
  --fill-accent-hover: var(--accent-xtra-600);
  --fill-accent-active: var(--accent-xtra-700);
  --accent-ink-on-light: var(--accent-xtra-600);
  --accent-ink-on-dark: var(--accent-xtra-400);
  --accent-ink: var(--accent-ink-on-light);
  --accent-ink-on-tint: color-mix(in oklch, var(--accent-ink) 80%, var(--text-primary));
  --glass-accent-ink: var(--accent-xtra-700);
}

:root[data-theme=dark] [data-group=xtra], :root[data-theme=dark][data-group=xtra] {
  --accent-ink: var(--accent-ink-on-dark);
  --glass-accent-ink: color-mix(in oklch, var(--accent-xtra-400) 50%, var(--accent-xtra-200));
}

@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;
}

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;
  }
}
/* ─── SCREEN-READER-ONLY TEXT (`.visually-hidden`) ───────────────────────────
   THE RECIPE IS LOAD-BEARING AND EVERY DECLARATION IN IT IS DOING A JOB.
   This is not a spacing rule that happens to contain a margin. It is a single
   indivisible clip: the box is shrunk to 1px, `overflow` and `clip`/`clip-path`
   crush what is inside it to nothing, and `margin: -1px` pulls that 1px box
   back over its own edge so it cannot contribute a visible pixel of layout.

   `margin: -1px` and `padding: 0` are therefore CLIP GEOMETRY, not rhythm.
   Substituting a spacing token for either one moves the element OUT of its own
   clip rect and paints hidden screen-reader text on the page — a failure that
   shows up as garbage text in front of a customer and that no visual test in
   this estate would catch. A sweep, a linter or a future author must leave
   these two values exactly as they are.

   WHAT ACTUALLY GUARDS THAT, precisely: `tools/ci/check-css-shapes.php` in the
   platform holds all three spellings of this recipe in its `[promoted]` section,
   which is a HARD GATE — a template that re-declares the set fails the build and
   is told to adopt the class. That is protection against the recipe being
   RE-HAND-ROLLED. Nothing anywhere protects the values in THIS file from being
   edited, and no automated sweeper exists that would tokenise them; the
   protection there is this comment and nothing else. Do not read the guard as
   permission to stop being careful here.

   DOCUMENT-SCOPED, AND THAT IS A REAL LIMIT. A class only reaches nodes in the
   document tree. Anything inside a shadow root — a component's internals, and
   also anything the page hands to a component that renders into its own shadow
   root, such as an `astra-table` cell — is untouched by this rule and renders
   FULLY VISIBLE if you give it the class and assume it worked. That single
   constraint is why ~15 Astra components each carry their own copy of the
   recipe rather than using this one, and why `affiliate-payouts.php` reads the
   declarations back out of this rule at runtime and applies them inline. Check
   `el.getRootNode() === document` before trusting the class.

   Both clip spellings ship on purpose. `clip` is the legacy form and is still
   what several engines honour most reliably inside a `position: absolute`
   subtree; `clip-path: inset(50%)` is the modern one and is unaffected by
   `clip` being deprecated. Carrying both is how the recipe stays correct
   whichever one a given engine ignores — and it is what the estate's own
   copies were already split between, six writing `clip` and two `clip-path`.

   NOT focusable-safe by design. A skip link that must APPEAR when tabbed to
   needs the `:not(:focus)` variant, which is a different behaviour and would
   silently un-hide the live regions that make up every current use in the
   estate. If a skip link ever lands, give it its own class rather than
   loosening this one.

   Use it for: `role="status"` live regions announcing a copy-to-clipboard
   receipt, a `<label>` naming a control whose purpose is already visually
   obvious, a heading that structures a page for a screen reader without
   appearing in the design.
   ─────────────────────────────────────────────────────────────────────────── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── ONE AUTHOR PER GAP (`.page-stack`) ────────────────────────────────────
   THE SPACING RULE THIS ESTATE KEPT BREAKING, written down as a class.
   `.page-header` carries `margin-block-end: var(--space-6)` because most pages
   stack it in normal block flow, where a margin is the only way to say "leave
   room under me". But a page whose own root is a flex or grid column ALSO owns
   a `gap` — and then two things are describing the same piece of empty space
   and the answer is their sum, which is never a step of the scale. The payouts
   console is the worked example: `.payouts { gap: var(--space-5) }` (20px) plus
   the header's own 24px put 44px between the heading block and the queue, and
   the owner read it as exactly what it is — "too much padding" (2026-09-04) —
   with no single number anywhere in the source to change.

   A page that wants the stack to own the rhythm says so with this class, and
   the header stops carrying a second opinion. There is deliberately no variant
   for a different gap: a page needing a different rhythm re-points
   `--page-stack-gap` on its own element (see the properties below), and the
   header still contributes nothing.

   UPDATED 2026-09-06: the class used to say "set `gap` on your own element".
   Do not — the section rung is DERIVED from `--page-stack-gap`, so a bare
   `gap` override changes the rhythm without changing the derivation and the
   space above a heading stops being the number that is declared. Re-point the
   property instead; it moves both. */
.page-stack {
  /* THE THREE NUMBERS, PUBLISHED AS PROPERTIES so a page can re-tune its own
     rhythm without writing a margin on anything. Override THESE, never `gap`:
     the section rung is derived from the base one below, and setting `gap`
     directly leaves the derivation reading a value the stack is no longer
     using.

     WHY THESE LADDERS. The base gap is vertical rhythm between siblings
     (`stack`); the section rung is page-level section rhythm (`layout`), which
     is the ladder whose whole job is "how far apart are two sections of a
     page"; the heading rung is again sibling rhythm, one step down, because a
     heading and the thing it titles are siblings that belong together. */
  --page-stack-gap: var(--space-stack-xl); /* 24px — between siblings */
  --page-stack-section-gap: var(--space-layout); /* 32px — above a heading  */
  --page-stack-heading-gap: var(--space-stack); /* 12px — below a heading  */
  display: flex;
  flex-direction: column;
  gap: var(--page-stack-gap);
  min-width: 0;
}

/* ─── THE SAME FAULT ONE LEVEL DOWN: THE STACKED HEADING ────────────────────
   `.page-stack` ended the double gap between a page HEADER and the page. It did
   not end it between a page and its own section headings, and the moment the
   class was rolled out to 86 templates that is where the fault reappeared —
   because a stack's `gap` and a heading's `margin-block-start` are two
   different properties describing one piece of empty space, so the answer is
   their sum and no single number in any file is it.

   MEASURED, /payouts/attention at 390pt: 56px between the page subtitle and the
   first h2 — 8px of the tabs strip's own bottom margin, plus the stack's 24px
   gap, plus the template's own 24px heading margin. Three authors, one gap, and
   the owner's word for the result was that the sections look adrift.

   THE RULE, and it is the whole of it:

     INSIDE A .page-stack, THE STACK DECIDES EVERY VERTICAL GAP. A direct child
     contributes no block margin of its own. A SECTION HEADING (h2-h6) gets
     --page-stack-section-gap above it and --page-stack-heading-gap below it;
     everything else gets --page-stack-gap. To change any of them, change the
     property — do not write a margin.

     Two exemptions, both narrow and both argued below: a bare `h1` (a page
     title, whose rhythm belongs to .page-header) and `.visually-hidden` (whose
     negative margin is clip geometry, not spacing).

   WHY THE CALC, WHICH IS THE PART TO READ BEFORE EDITING. A flex `gap` cannot
   be varied per child, so the heading's own margin is the only way to say "more
   air here". That margin ADDS to the gap — which is the fault — so what is
   written is the DIFFERENCE, and what is DECLARED is the total. Read
   `--page-stack-section-gap: 32px` and the space above a heading is 32px; there
   is one number and it is the true one. The negative below is the same
   arithmetic in the other direction and is safe for the same reason the estate's
   other negative-margin pairings are not: both halves are derived by calc from
   --page-stack-gap in one rule, in one file, so re-tuning the gap moves them
   both and they cannot be edited apart.

   WHY THE CLASS IS DOUBLED. `.attention h2` is (0,1,1) and lives in a page's
   own <style>, which is parsed after core.css — so a normal `.page-stack > h2`
   would tie on specificity and lose on source order, and the rule above would
   be true everywhere except the pages that actually have the fault. (0,2,1)
   wins that comparison, which is what makes the rule a rule rather than a
   default. A page that genuinely wants different spacing has the three
   properties; it does not need to out-specify the system to get it.

   FIRST AND LAST CHILD ARE ZEROED. A heading opening a stack must not push the
   page down by a gap that has nothing above it, and a heading closing one must
   not pull the stack's bottom edge up by the negative.

   `.visually-hidden` IS EXEMPT FROM THE RESET, AND THAT IS THE ONE LINE HERE
   THAT WOULD HAVE BROKEN PRODUCTION SILENTLY. Its `margin: -1px` is not
   rhythm — it is CLIP GEOMETRY, half of an indivisible recipe that pulls a 1px
   box back over its own edge (utilities/_utilities.scss carries the whole
   argument). This reset out-specifies that rule at (0,2,0) against (0,1,0), so
   without the exemption every screen-reader-only span that happens to be a
   direct child of a page stack loses the block half of its clip offset. It is
   already the case on one page in the estate — `portal/shop-order-detail`
   opens its stack with one — and the failure mode is hidden text painting on a
   customer's screen, which no test here would see. `:not(:where(…))` because
   `:where()` contributes ZERO specificity: the exemption must not quietly make
   this rule harder to override than the line above claims it is.

   H1 IS NOT IN THE HEADING SET, DELIBERATELY. A bare `h1` in a stack is a page
   TITLE, and the space under a page title is `.page-header`'s decision (24px,
   the same as the stack's own gap) — not a section break. Treating it as one
   pulled `portal/ads-admin`'s title 12px closer to its content, which is a
   restyle of a page that has no fault, to make a rule tidier. Section headings
   are h2 and below. */
.page-stack.page-stack > *:not(:where(.visually-hidden)) {
  margin-block: 0;
}

.page-stack.page-stack > :is(h2, h3, h4, h5, h6) {
  margin-block-start: calc(var(--page-stack-section-gap) - var(--page-stack-gap));
  margin-block-end: calc(var(--page-stack-heading-gap) - var(--page-stack-gap));
}

.page-stack.page-stack > :is(h2, h3, h4, h5, h6):first-child {
  margin-block-start: 0;
}

.page-stack.page-stack > :is(h2, h3, h4, h5, h6):last-child {
  margin-block-end: 0;
}

.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;
}

/* ─── THE SUBTITLE UNDER THE TITLE ──────────────────────────────────────────
   `.page-header__subtitle` was MARKUP WITH NO RULE BEHIND IT. This file has
   documented it in the pattern's own example since the pattern was extracted
   (see the markup sketch above), four payouts templates write it, and nothing
   anywhere in Astra ever styled it — so it inherited `p { margin: 0 }` from
   base/_typography.scss and rendered at body size in `--text-primary`, flush
   against the heading. Measured on the rendered payouts console: a 0px gap at
   390pt AND at 1280px, at 15px, at the h1's own colour. On a phone, where the
   h1 wraps to two lines, that is a subtitle indistinguishable from a third line
   of the title — which is exactly what the owner reported (2026-09-05: "the 'JW
   GROUP LIMITED · one company's books at a time' text also seems too close to
   the text above it").

   THE VALUES ARE NOT INVENTED — THEY ARE THE ESTATE'S, ADOPTED. Sixteen
   templates across two portals independently wrote the same subtitle rule under
   sixteen local names (`.overview__scope`, `.rail__scope`, `.setup__scope`,
   `.content-item__sub`, `.guide__lede`, `.prog__scope`, …), fourteen of them
   byte for byte: `margin: var(--space-1) 0 0; color: var(--text-secondary);
   font-size: var(--text-sm)`. That is a decision the estate has already taken
   and re-taken; it simply had no home. This is the home, and the numbers are
   theirs, so a template adopting the DS class swaps one rule for none and moves
   nothing on screen.

   SPACE COMES FROM THE STACK LADDER, NOT THE RAW SCALE (docs/SPACING-WORKLIST
   §0.3): this is a VERTICAL gap between two siblings, so `--space-stack-xs`.
   It resolves to the same 4px `--space-1` those sixteen copies hardcode, and it
   halves under `[data-density="compact"]` where a hardcoded 4 would not.

   FOUR PIXELS ONLY BECAUSE THE TYPE IS DOING THE REST OF THE WORK. The gap was
   never the whole complaint — a 15px near-white line 0px under a 30px near-white
   line reads as one block whatever the margin is. Dropping to `--text-sm` and
   `--text-secondary` is what makes it a subtitle; the 4px is what stops the two
   line boxes touching. Measured together at 390pt they separate cleanly, and at
   1280px, where the h1 is one line, the header does not loosen — the block grows
   by 4px and the title's own `margin-block-end` is untouched. A larger step was
   tried and is wrong on desktop: `--space-stack-sm` puts 8px between a one-line
   title and its subtitle and the pair stops reading as one unit.

   Scoped to `.page-header__subtitle` and NOT to `.page-header__primary > h1 + p`,
   deliberately. The generic selector would out-specify all sixteen of those
   local class rules (0,1,1 beats 0,1,0) and silently restyle sixteen pages that
   are not broken — a DS rule reaching past its own class to overrule templates
   is how a design system loses trust. Those pages adopt this class when someone
   is looking at them; until then they keep their own copy and nothing moves. */
.page-header__subtitle {
  margin-block-start: var(--space-stack-xs);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.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;
}

/* ─── A HEADING THAT CARRIES A COUNT (`.count-title`) ───────────────────────
   Nineteen NineFive templates declared this rule, seventeen of them byte for
   byte, and a nine-line comment explaining WHY had been copy-pasted alongside
   it into ten of them. The idiom was understood and written down; it simply had
   no home, so it propagated by clipboard. This is that home, and this is the
   one copy of the reasoning:

   THE COUNT BELONGS INSIDE THE HEADING, IN ITS INLINE FLOW. "Shop orders 128"
   is one fact, not a title with a statistic parked beside it, and a screen
   reader must read it as one phrase — which is why the badge is a CHILD of the
   h1 and carries its own `aria-label` spelling the noun out ("128 orders"),
   rather than sitting in the actions zone or in a stats card. Putting it in the
   flow also means the pair truncates and wraps as a unit at narrow widths
   instead of the number being orphaned onto its own line.

   `align-items: center` is doing the optical work: a badge is a short pill and
   a heading is a tall line box, so aligning their boxes' tops leaves the pill
   floating near the ascenders. Centring puts it on the heading's optical
   middle. `flex-wrap: wrap` is what stops a long title plus its badge from
   forcing the whole console wider than the viewport on a phone.

   NOT named `.page-header__count`, deliberately. Three of the twenty-two uses
   are an h2 or h3 titling a section INSIDE a card, not the page's own h1, and a
   `__` name would have claimed an ownership that does not hold — it would also
   have meant editing markup in twenty-two files to rename a class that is
   already correct. The rule lives here because the page header is where it
   usually appears; it is scoped to nothing so it keeps working anywhere a
   heading counts something. */
.count-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 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 when they are ALL that a ⋯ holds, the trigger goes too — that decision
   is astra-dropdown's, from what actually renders (see "WITHDRAWAL" there).
   CSS cannot make it: `:has()` can spot a menu whose every item is a mirror,
   but not one emptied by a page's own `hidden`, a permission gate or a state
   machine, and those are the same dead control. */
/* …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 — including a menu resized while CLOSED, which the
   component re-judges at every width change rather than at the next open. This
   rule STAYS for what remains: the two react on different clocks. The media
   query flips synchronously the instant the viewport crosses 768px; the JS pass
   is coalesced into the next animation frame. Without this rule that gap is one
   painted frame of stray rule across the top of an open menu. */
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.

     THE INLINE INSET IS THE PAGE GUTTER, the block inset is the shell frame's
     own 12px. Both used to be a flat `var(--space-3)`, and that was right while
     the shell frame was also a flat 12px: the bar sat exactly on the frame's
     edge and read as floating a clean 16px proud of the content inside it.
     Then `--gutter` was wired (tokens/_spacing.scss section 4) and the frame
     collapsed to 0 below 480px, so on a 390px phone the content came to 16px
     from the screen while this bar stayed at 12px — a 4px near-miss, the bar
     overhanging every card on the page by half a hairline, which reads as a
     mistake rather than as a float. `var(--gutter)` puts it back on a line the
     eye can find: one gutter from the screen edge, the same dial the page
     itself reads, so it is flush with the content where the frame is gone and
     floats proud of it where the frame is there. It follows [data-density] for
     free, and the fallback is only for a page that loads this sheet without the
     tokens — `--gutter` is defined on :root at every width.

     `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. */
  /* THE PRIMARY LIFTS FOR A DOCKED BAR RATHER THAN DISAPPEARING UNDER ONE.
     `--astra-bottom-dock` is the shared bottom-edge claim (see
     components/_shared/bottom-dock.js): astra-table's selection bar publishes
     its measured height there while it is docked at ≤768px, because it pins to
     this exact corner at this exact z-index and used to land straight on top of
     the CTA — the owner photographed "Start a payout" gone the instant a row
     was ticked (2026-09-04). Unset on every page that has no docked bar, so the
     fallback of 0px is the normal case and this is a no-op there. */
  .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(--gutter, var(--space-3));
    /* THE SAFE-AREA INSET IS INSIDE THE DOCK, SO IT MUST NOT BE ADDED TWICE.
       astra-table's docked bar pads its own bottom by
       `calc(var(--space-3) + env(safe-area-inset-bottom, 0px))`, and what it
       publishes as --astra-bottom-dock is getBoundingClientRect().height — the
       whole box, inset included. `max(--space-3, inset) + dock` therefore added
       a SECOND home-indicator height on top of a bar that already cleared it:
       on a 34px-indicator phone the visual gap between this button and the top
       of the bar became 34px instead of 12px. Subtracting the dock inside the
       max is what makes the expression right in both states: with no dock it is
       still `max(12px, inset)`, and with a dock the inset term goes negative and
       the max settles on the 12px gap this button is supposed to have.
       (env() reads 0 in headless Chromium, so this is arithmetic rather than a
       screenshot — noted honestly rather than claimed as measured.) */
    bottom: calc(max(var(--space-3), env(safe-area-inset-bottom, 0px) - var(--astra-bottom-dock, 0px)) + var(--astra-bottom-dock, 0px));
    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(--gutter, var(--space-3));
    /* The split rides the dock exactly as the single primary above does, and
       sits on the same gutter — the two are the same bar with a different
       number of halves in it, so these insets have to stay identical. */
    /* Same bottom as the single primary above, safe-area arithmetic included —
       see the note there. The split IS that bar with a second half in it, and
       the two expressions have to stay identical or the caret rides at a
       different height from the button it belongs to. */
    bottom: calc(max(var(--space-3), env(safe-area-inset-bottom, 0px) - var(--astra-bottom-dock, 0px)) + var(--astra-bottom-dock, 0px));
    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;
    /* THE STRIP RIDES THE DOCK WITH THE BUTTON IT IS BEHIND. Its whole job is
       to keep the CTA off bare content — without it the button is a solid pill
       laid across whatever it happens to be over. When a docked selection bar
       lifts the CTA (see --astra-bottom-dock beside the promoted primary), a
       strip still pinned to bottom:0 is behind the BAR instead, and the button
       is bare again — measured on the payouts queue at 390pt, the lifted CTA
       cut straight across the card the operator had just ticked. */
    bottom: var(--astra-bottom-dock, 0px);
    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) {
    /* + the bottom edge's claim: this replaces the shell's own end padding (which carries it), and the CTA
       rides ON TOP of a docked bar here (see the promoted primary's bottom), so both are under the content. */
    padding-block-end: calc(var(--page-action-bar-zone, var(--space-3)) + var(--space-3) + var(--astra-bottom-dock, 0px));
  }
  /* 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] {
    /* …and above a docked selection bar too, which the CTA is now sitting on
       top of (see --astra-bottom-dock beside the promoted primary). */
    bottom: calc(var(--page-action-bar-zone) + var(--astra-bottom-dock, 0px) + 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-control);
  }
}
@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 PINNED BAR (owner 2026-10-31: "the sticky header is not feathering ... it is clipping and could
     be a lot better"). A rounded card pinned flush to the top let the content show past its corners and
     gutters, and the old feather painted the PAGE colour in the card's width only: a grey smear over the
     white card beneath. It also never ran: it rode a scroll-driven animation, and `scroll(nearest)`
     cannot see the shell's scroller, which lives in the shell's shadow tree.

     So it keys on the flag the shell already sets on itself (`data-scrolled`, scrollTop > 2, the same
     one that drives the shell's own top fade). Once the page scrolls, the card eases into a full-width
     frosted bar, the topbar's glass: its margins open to the scrollport's gutters (the same `--gutter`
     the shell pads with, so nothing overflows sideways), its padding grows by the same amount so no
     word moves, and its corners and side borders go. At rest it is the card it always was. */
  .page-header--sticky {
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    transition: margin var(--duration-normal, 200ms) var(--ease-out, ease), padding var(--duration-normal, 200ms) var(--ease-out, ease), border-radius var(--duration-normal, 200ms) var(--ease-out, ease), background-color var(--duration-normal, 200ms) ease, border-color var(--duration-normal, 200ms) ease, box-shadow var(--duration-normal, 200ms) ease;
  }
  [data-scrolled] .page-header--sticky {
    margin-inline: calc(-1 * var(--gutter, 1.5rem));
    padding-inline: calc(var(--space-4) + var(--gutter, 1.5rem));
    border-radius: 0;
    border-color: transparent;
    border-block-end-color: var(--border-subtle);
    background-color: color-mix(in oklab, var(--surface-raised) 86%, transparent);
    box-shadow: none;
  }
  /* The feather: a progressive blur under the bar, full width, fading from frosted to clear, so the
     content dissolves whatever its own colour is (a white card, the page, a table). */
  .page-header--sticky::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    block-size: var(--space-6);
    background: linear-gradient(to bottom, color-mix(in oklab, var(--surface-page) 55%, transparent), transparent);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--duration-normal, 200ms) ease;
  }
  [data-scrolled] .page-header--sticky::after {
    opacity: 1;
  }
}
@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
  .page-header--sticky, .page-header--sticky::after {
    transition: none;
  }
}
@media (min-width: 769px) {
  /* 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) {
    /* The pill sits in the corner and a dock in the middle, side by side on the same edge: the content clears
       the taller of the two, never their sum. */
    padding-block-end: calc(max(var(--page-action-bar-zone, var(--space-3)), var(--astra-bottom-dock, 0px)) + 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;
  }
}
/* ─── THE LEADING-ICON NUDGE, AS ONE NAMED VALUE ────────────────────────────
   A status glyph is a square box; the sentence beside it is a line box with
   ascenders, descenders and half-leading. Align their TOPS and the glyph reads
   as sitting slightly high, because the text's own cap height starts a couple
   of pixels down inside its line box. This value is the correction, and it is
   OPTICAL ALIGNMENT TO A BASELINE, not rhythm between two things.

   That distinction is why it is published here as its own property and NOT as
   a spacing token. A spacing token is a statement about how far apart two
   objects should sit, it is re-pointed by density, and it would carry this
   number into every sweep and every ratchet that touches rhythm. This number
   is a property of the type, and it moves only if the icon size or the line
   height moves.

   It is published rather than inlined because the estate proved it has to be:
   sixteen templates re-derived this same correction by hand and landed on five
   different magic numbers (2px, .125rem, .15rem, .1em, .15em) — a spread of
   about 0.4px that nobody can see and that no two authors will ever guess the
   same way twice. A leading icon anywhere in the estate references this, so
   there is one number to re-tune and nothing to grep for.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --status-icon-nudge: 2px;
}

.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: var(--status-icon-nudge);
  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;
}

/* ─── INLINE — the smallest usable status surface ───────────────────────────
   THE VARIANT THAT EXISTS BECAUSE THE COMPONENT'S ENTRY PRICE WAS TOO HIGH.

   `.status-surface` is adopted in 43 templates, so nobody was unaware of it.
   Seven more places hand-rolled a tinted notice anyway, and the audit found
   why: the canonical form asks for a six-element DOM — `__icon`, `__content`,
   `__title`, `__message`, `__actions` — and what these authors had was ONE
   SENTENCE and an icon. There is no title to write, no secondary message and
   no button, so three quarters of that scaffolding would have been empty
   wrappers. Faced with writing five nested elements or eight lines of CSS,
   they wrote the CSS, and the estate grew a second status idiom with five
   different tints and five different icon nudges.

   The lesson, worth more than the variant: WHEN A COMPONENT IS BEING
   OVERRIDDEN FROM OUTSIDE, CHECK ITS SMALLEST USABLE FORM BEFORE ADDING A
   SPACING PROP. The overrides here were never about the spacing values; they
   were about the DOM.

   WHEN NOT TO REACH FOR THIS, because the survey that found these seven found
   sixteen and the other nine are a DIFFERENT SHAPE. The survey looked for the
   leading-icon nudge, and a nudge is the symptom, not the thing: nine of its
   hits (`.usage__row` ×4, `.checklist li`, `.terms li`, `.bill__notice`,
   `.reports__howpaid-bank`, `.px__preview-promise`) are icon-and-text ROWS, and
   converting them would have put a tinted, bordered, elevated notice around a
   checklist item.

   The line is NOT "does it already have padding and a radius" — four of those
   nine have both, plus a border and a surface fill. It is what the block SAYS:

     · A NOTICE is TONAL and it is ONE SENTENCE. It carries a state — success,
       warning, danger, info — the tone is load-bearing, and the whole block is
       a single statement about the thing beside it. That is this variant.
     · A ROW is NEUTRAL and it is a RECORD. It has columns, often a trailing
       action, and its icon is a type marker rather than a state. Tinting it
       would claim an alarm the author never raised.

   If you cannot name the TONE without inventing one, it is a row.

   So this variant changes the CONTRACT, not the look. Write:

     <p class="status-surface status-surface--inline status-surface--warning" role="status">
       <astra-icon name="alert-circle"></astra-icon>
       <span>We have paid out more than this quarter earned.</span>
     </p>

   A direct `astra-icon` child is treated as the leading glyph — it gets the
   ink colour, it does not shrink and it gets the nudge — so no `__icon`
   wrapper is needed. Everything else beside it is the sentence. `__icon` and
   the full scaffolding still work if a notice later grows a title and actions;
   this is a subset, not a fork.

   WHAT IS DELIBERATELY NOT CHANGED: the padding. The tint is a radial gradient
   whose origin is calibrated to a glyph sitting at `padding-inline:
   var(--space-4)`, and the comment on that gradient says not to re-tune the
   padding without re-tuning the origin. A "compact" inline notice that moved
   the padding would slide the glow off its own icon. An inline notice is
   already shorter than a titled one because it holds one line instead of
   three; it does not also need to be tighter.

   WHAT IS DELIBERATELY DIFFERENT FROM THE HAND-ROLLS IT REPLACES: they set
   `color: var(--warning-ink)` on the whole block, tinting the body text to
   match the glyph. The canonical language does not: `--status-ink` is scoped
   to the ICON, where it only has to clear WCAG's 3:1 floor for non-text UI,
   and the sentence stays `--text-primary`, which is the only value in the
   system proven to clear 4.5:1 against a tinted surface in BOTH themes. Body
   text in an ink colour was the riskier of the two guesses.
   ─────────────────────────────────────────────────────────────────────────── */
.status-surface--inline {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  flex-wrap: nowrap;
  gap: var(--space-inline-sm);
}

.status-surface--inline > astra-icon {
  flex: none;
  margin-block-start: var(--status-icon-nudge);
  color: var(--status-ink);
}

.status-surface--inline > :not(astra-icon):not(.status-surface__icon) {
  min-width: 0;
  overflow-wrap: anywhere;
  margin: 0;
}

.status-surface--inline:has(> astra-button) {
  flex-wrap: wrap;
  align-items: center;
  row-gap: var(--space-2);
}
.status-surface--inline:has(> astra-button) > :not(astra-icon):not(.status-surface__icon):not(astra-button) {
  flex: 1 1 10rem;
}
.status-surface--inline:has(> astra-button) > astra-button {
  flex: none;
}

.form-msg {
  margin: 0;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.form-msg:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.form-msg--error {
  color: var(--danger-ink);
}

.form-msg--success {
  color: var(--success-ink);
}

.form-msg--muted {
  color: var(--text-secondary);
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-end: var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--motion-hover);
}
.back-link astra-icon {
  width: 1rem;
  height: 1rem;
  transition: transform var(--motion-hover);
}
.back-link:hover {
  color: var(--text-primary);
}
.back-link:hover astra-icon {
  transform: translateX(-2px);
}
.back-link:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .back-link {
    min-height: 2.75rem;
  }
}

.editor-opening {
  margin: 0;
  padding: var(--space-6) max(16px, env(safe-area-inset-left, 0px));
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.editor-opening a {
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
}

@media (scripting: none) {
  .editor-opening {
    display: none;
  }
}
.view-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--border-subtle);
  margin-block-start: calc(-1 * var(--space-2));
}
.view-tabs::-webkit-scrollbar {
  display: none;
}
.view-tabs > a {
  position: relative;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--motion-hover);
}
.view-tabs > a::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent-500);
  transform: scaleX(0);
  transition: transform var(--motion-moderate) var(--ease-out);
}
.view-tabs > a:hover {
  color: var(--text-primary);
}
.view-tabs > a[aria-current=page], .view-tabs > a[aria-current=true] {
  color: var(--accent-ink);
}
.view-tabs > a[aria-current=page]::after, .view-tabs > a[aria-current=true]::after {
  transform: scaleX(1);
}
.view-tabs > a:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
  border-radius: var(--radius-control);
}
.view-tabs > [aria-current] {
  scroll-initial-target: nearest;
}
@supports (animation-timeline: scroll()) {
  .view-tabs {
    mask-image: linear-gradient(to right, transparent, black var(--view-tabs-fade-start), black calc(100% - var(--view-tabs-fade-end)), transparent);
    animation: view-tabs-fade linear both;
    animation-timeline: scroll(self inline);
  }
}

@property --view-tabs-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --view-tabs-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes view-tabs-fade {
  0% {
    --view-tabs-fade-start: 0px;
    --view-tabs-fade-end: 2rem;
  }
  10% {
    --view-tabs-fade-start: 2rem;
  }
  90% {
    --view-tabs-fade-end: 2rem;
  }
  100% {
    --view-tabs-fade-start: 2rem;
    --view-tabs-fade-end: 0px;
  }
}
.view-tabs__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 1.5rem;
  height: 1.125rem;
  padding: 0 0.35em;
  border-radius: var(--radius-full);
  background: var(--surface-sunken);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}
[aria-current] > .view-tabs__count {
  background: color-mix(in oklch, var(--accent-500) 14%, transparent);
  color: var(--accent-ink);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.filter-chips > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover);
}
.filter-chips > a:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}
.filter-chips > a[aria-current=page], .filter-chips > a[aria-current=true] {
  background: color-mix(in srgb, var(--accent-500) 10%, var(--surface-raised));
  border-color: color-mix(in oklab, var(--accent-500) 40%, transparent);
  color: var(--accent-ink);
}
.filter-chips > a:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .filter-chips > a {
    min-height: 2.75rem;
  }
}

.filter-chips__count {
  font-variant-numeric: tabular-nums;
}

.panel-grid {
  display: grid;
  gap: var(--space-stack-lg) var(--space-inline-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.panel-grid > .panel--wide {
  grid-column: 1/-1;
}

.panel-grid--stretch {
  align-items: stretch;
}
.panel-grid--stretch > astra-card::part(card) {
  height: 100%;
  box-sizing: border-box;
}

.panel__title {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-primary);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
}

.panel__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
  text-decoration: none;
}
.panel__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.panel__lead {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.item-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.item-list > li + li {
  border-block-start: 1px solid var(--border-subtle);
}

.item-list__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  min-height: 3rem;
  padding: var(--space-2) 0;
  color: inherit;
  text-decoration: none;
}
.item-list__row:is(button) {
  box-sizing: border-box;
  inline-size: calc(100% + 2 * var(--space-2));
  border: 0;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.item-list__row:is(a, button) {
  margin-inline: calc(-1 * var(--space-2));
  padding-inline: var(--space-2);
  border-radius: var(--radius-control);
  transition: background-color var(--motion-hover);
}
.item-list__row:is(a, button):hover {
  background: var(--surface-sunken);
}
.item-list__row:is(a, button):focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}
.item-list__row:is(a, button)::after {
  content: "";
  flex-shrink: 0;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-inline: var(--space-1) var(--space-1-5);
  border-block-start: 1.5px solid var(--text-tertiary);
  border-inline-end: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--motion-hover);
}
.item-list__row:is(a, button):hover::after {
  transform: translateX(2px) rotate(45deg);
}

.item-list__icon {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.item-list__icon astra-icon {
  width: 1rem;
  height: 1rem;
}
.item-list__icon[data-tone=accent] {
  background: color-mix(in oklch, var(--accent-500) 12%, transparent);
  color: var(--accent-ink);
}
.item-list__icon[data-tone=success] {
  background: color-mix(in oklch, var(--success-500) 14%, transparent);
  color: var(--success-ink);
}
.item-list__icon[data-tone=warning] {
  background: color-mix(in oklch, var(--warning-500) 16%, transparent);
  color: var(--warning-ink);
}

.item-list__main {
  display: grid;
  gap: 2px;
  min-width: 0;
  flex: 1 1 8rem;
}

.item-list__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.item-list__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.item-list__end {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}

.item-list:has(> li > :is(a, button).item-list__row) > li > div.item-list__row::after {
  content: "";
  flex: none;
  width: calc(0.4375rem + 1.5px);
  margin-inline: var(--space-1) var(--space-1-5);
}

.item-list--stack {
  container-type: inline-size;
}

@container (max-width: 30rem) {
  .item-list--stack .item-list__row {
    row-gap: var(--space-1);
  }
  .item-list--stack .item-list__row > .item-list__icon {
    align-self: flex-start;
  }
  .item-list--stack .item-list__end {
    order: 3;
    flex-basis: 100%;
    box-sizing: border-box;
    justify-content: flex-start;
    margin-inline-start: 0;
  }
  .item-list--stack .item-list__row:has(> .item-list__icon) > .item-list__end {
    padding-inline-start: calc(2rem + var(--space-3));
  }
}
.stat-strip {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.stat-strip > astra-stats-card[size=lg] {
  grid-column: 1/-1;
}
@media (min-width: 768px) {
  .stat-strip {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  }
  .stat-strip > astra-stats-card[size=lg] {
    grid-column: span 2;
  }
}
@media (max-width: 767px) {
  .stat-strip > astra-stats-card:is([orientation=auto], [orientation=row]) {
    grid-column: 1/-1;
  }
}

.kv-list {
  margin: 0;
  display: grid;
}
.kv-list > div {
  display: grid;
  grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-2-5, 0.625rem) 0;
  align-items: baseline;
}
.kv-list > div + div {
  border-block-start: 1px solid var(--border-subtle);
}
.kv-list dt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.kv-list dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
@media (max-width: 479.98px) {
  .kv-list > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.checklist > li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.checklist > li > astra-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-tertiary);
}
.checklist > li[data-on] > astra-icon {
  color: var(--success-ink);
}
.checklist > li[data-tone=warning] > astra-icon {
  color: var(--warning-ink);
}
.checklist > li[data-tone=danger] > astra-icon {
  color: var(--danger-ink);
}
.checklist > li[data-tone=info] > astra-icon {
  color: var(--info-ink);
}
.checklist strong {
  display: block;
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.settings-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-xl) var(--space-layout);
  padding-block: var(--space-stack-xl);
}
.settings-section + .settings-section {
  border-block-start: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
  .settings-section {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 40rem);
    row-gap: var(--space-stack);
  }
}

.settings-section__intro h2, .settings-section__intro h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
}
.settings-section__intro p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.settings-section__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
  min-width: 0;
}

@keyframes astra-enter-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes astra-enter-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  .enter > * {
    animation: astra-enter-rise var(--motion-moderate) var(--ease-out) backwards;
  }
  .enter > :is(.page-header, :has(.page-cta, .page-cta--pinned)) {
    animation-name: astra-enter-fade;
  }
  .enter > :nth-child(2) {
    animation-delay: 30ms;
  }
  .enter > :nth-child(3) {
    animation-delay: 60ms;
  }
  .enter > :nth-child(4) {
    animation-delay: 90ms;
  }
  .enter > :nth-child(5) {
    animation-delay: 120ms;
  }
  .enter > :nth-child(6) {
    animation-delay: 150ms;
  }
  .enter > :nth-child(n+7) {
    animation-delay: 180ms;
  }
}
body:has(astra-modal[open]) :is(.page-cta, .page-cta--pinned) {
  visibility: hidden;
}

.portal-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .portal-wordmark__site {
    display: none;
  }
}
.choice-scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 20rem;
  overflow-y: auto;
}

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

.copyval, .copyblock {
  --copyval-pad: .25rem;
  border-radius: var(--radius-sm);
  background-color: transparent;
  box-shadow: 0 0 0 var(--copyval-pad) transparent, 0 0 0 calc(var(--copyval-pad) + 1px) transparent;
  transition: background-color 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease);
}

.copyval {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: 100%;
  --copyval-btn: 1.5rem;
  --copyval-btn-inline: var(--copyval-btn);
}

.copyval__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.copyval__btn::part(button) {
  width: var(--copyval-btn-inline);
  height: var(--copyval-btn);
}

.copyval__btn:not([hidden]) {
  display: flex;
  flex: none;
  block-size: var(--copyval-btn);
  inline-size: var(--copyval-btn-inline);
}

.copyval__btn {
  align-self: flex-start;
  margin-block: 0;
  margin-block: calc((1lh - var(--copyval-btn)) / 2);
}

.copyval__btn, .addr-all {
  opacity: 0.8;
  transition: opacity var(--duration-fast, 120ms) ease;
}

.copyval:hover .copyval__btn, .copyval__btn:focus-visible,
.copyblock:hover .addr-all, .addr-all:focus-visible {
  opacity: 1;
}

.copyval[data-copied], .copyblock[data-copied] {
  background-color: color-mix(in oklab, var(--success-500) 16%, transparent);
  box-shadow: 0 0 0 var(--copyval-pad) color-mix(in oklab, var(--success-500) 16%, transparent), 0 0 0 calc(var(--copyval-pad) + 1px) color-mix(in oklab, var(--success-ink) 40%, transparent);
  transition-duration: 90ms;
}

.copyval[data-copied] .copyval__btn, .copyblock[data-copied] .addr-all {
  opacity: 1;
}

.copyblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (prefers-reduced-motion: reduce) {
  .copyval, .copyblock, .copyval__btn, .addr-all {
    transition: none;
  }
}
@media (pointer: coarse) {
  .copyval {
    --copyval-btn-inline: 2rem;
  }
}
.figure-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.figure-table :is(th, td) {
  padding-block: var(--space-2);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--border-subtle);
}
.figure-table :is(th, td) + :is(th, td) {
  padding-inline-start: var(--space-6);
}
.figure-table th {
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.figure-table .num {
  text-align: end;
  white-space: nowrap;
}
.figure-table th.num {
  white-space: normal;
}

.figure-table__note {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .figure-table thead {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .figure-table tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-6);
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--border-subtle);
  }
  .figure-table :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
  }
  .figure-table :is(th, td) + :is(th, td) {
    padding-inline-start: 0;
  }
  .figure-table tr > :first-child:not([data-label]) {
    flex: 1 0 100%;
  }
  .figure-table .num {
    text-align: start;
  }
  .figure-table [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    white-space: normal;
  }
}
@property --ai-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes ai-spin {
  to {
    --ai-angle: 360deg;
  }
}
@keyframes ai-fade-out {
  to {
    opacity: 0;
  }
}
.ai-sheen-edge,
.ai-landed {
  position: relative;
  isolation: isolate;
}
.ai-sheen-edge::after,
.ai-landed::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--ai-angle), transparent 0deg, transparent 200deg, var(--accent-500) 270deg, color-mix(in oklab, var(--accent-500) 45%, white) 310deg, var(--accent-500) 335deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.ai-sheen-edge::after {
  animation: ai-spin var(--ai-sheen-speed) linear infinite;
}

.ai-landed::after {
  animation: ai-spin var(--ai-glow-duration) linear 1, ai-fade-out 260ms var(--ease-out) var(--ai-glow-duration) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .ai-sheen-edge::after,
  .ai-landed::after {
    animation: none;
    background: var(--accent-500);
  }
}
html[data-focus-mode] [data-focus-fade] {
  opacity: var(--focus-fade-opacity, 0.14);
}

@media (prefers-reduced-motion: no-preference) {
  html[data-focus-easing] [data-focus-fade] {
    transition: opacity var(--motion-slow) var(--ease-out);
  }
}
@media (forced-colors: active) {
  html[data-focus-mode] [data-focus-fade] {
    opacity: 1;
  }
}
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.6em;
  box-sizing: border-box;
  padding: 0.1em 0.45em;
  border: 1px solid var(--border-default);
  border-block-end-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-family: var(--type-mono-font);
  font-size: var(--text-xs);
  line-height: 1.3;
  white-space: nowrap;
}

.shortcut-group {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.shortcut-list + .shortcut-group {
  margin-block-start: var(--space-5);
}

.shortcut-list {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) 1fr;
  gap: var(--space-2) var(--space-5);
  align-items: center;
  margin: 0;
}

.shortcut-list dt {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
}

.shortcut-list dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

@media (max-width: 480px) {
  .shortcut-list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .shortcut-list dd {
    margin-block-end: var(--space-2);
  }
}
.editor-canvas,
.xtra-canvas {
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
  padding-block-end: var(--space-8);
}

.editor-canvas__bar,
.xtra-canvas__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  inline-size: 100%;
  max-inline-size: 60rem;
  margin-inline: auto;
  min-inline-size: 0;
}
.editor-canvas__bar > .back-link,
.xtra-canvas__bar > .back-link {
  margin-block-end: 0;
}

.editor-canvas__meta,
.xtra-canvas__meta {
  min-inline-size: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.editor-canvas__actions,
.xtra-canvas__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: auto;
}

.editor-canvas__column,
.xtra-canvas__column {
  display: grid;
  gap: var(--space-5);
  inline-size: 100%;
  max-inline-size: 46rem;
  margin-inline: auto;
  min-inline-size: 0;
}
.editor-canvas__column > *,
.xtra-canvas__column > * {
  min-inline-size: 0;
}

.editor-canvas__cover-frame,
.editor-canvas__drawer-cover,
.xtra-canvas__cover-frame,
.xtra-canvas__drawer-cover {
  display: block;
  inline-size: 100%;
  overflow: hidden;
  background: var(--surface-sunken);
}
.editor-canvas__cover-frame > img,
.editor-canvas__drawer-cover > img,
.xtra-canvas__cover-frame > img,
.xtra-canvas__drawer-cover > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.editor-canvas__cover-frame,
.xtra-canvas__cover-frame {
  aspect-ratio: 16/7;
}

.editor-canvas__cover-meta,
.xtra-canvas__cover-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.editor-canvas__titles,
.xtra-canvas__titles {
  display: grid;
  gap: var(--space-2);
}

.editor-canvas__drawer-cover,
.xtra-canvas__drawer-cover {
  aspect-ratio: 16/9;
  border-radius: var(--radius-card);
}

.website-row-link {
  display: grid;
  gap: 1px;
  flex: 1;
  min-width: 0;
  padding-block: var(--space-1-5);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
}
.website-row-link:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.website-row-link:hover .website-row-link__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.website-row-link__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-row-link__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.website-editor .panel__title {
  min-width: 0;
  overflow-wrap: anywhere;
}

.website-order.action-row {
  display: none;
  justify-content: flex-end;
  margin-block-start: var(--space-3);
}

astra-sortable-list[data-changed] ~ .website-order.action-row {
  display: flex;
}

.website-order__note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  margin-inline-end: auto;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--warning-ink);
}
.website-order__note astra-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.website-pair {
  display: grid;
  gap: var(--space-stack) var(--space-inline-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 640px) {
  .website-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.website-days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.website-days > legend {
  padding: 0;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.website-title-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  min-width: 0;
}

.website-meta {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.website-subhead {
  margin: var(--space-4) 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.website-fieldset {
  display: grid;
  gap: var(--space-stack);
  margin: 0;
  padding: var(--space-4) 0 0;
  border: 0;
  min-width: 0;
  border-block-start: 1px solid var(--border-subtle);
}
.website-fieldset > legend {
  float: left;
  inline-size: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.website-split {
  display: grid;
  gap: var(--space-stack-lg) var(--space-inline-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
.website-split > .website-split__col {
  display: contents;
}
@media (min-width: 1024px) {
  .website-split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
  }
  .website-split.website-split--one {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .website-split > .website-split__col {
    display: grid;
    gap: var(--space-stack-lg);
    align-content: start;
    min-width: 0;
  }
  .website-split > .website-split__side {
    grid-column: 2;
    grid-row: 1/span 2;
  }
  .website-split > .website-split__late {
    grid-column: 1;
  }
}

@media (min-width: 1024px) {
  .settings-section.website-section--wide {
    grid-template-columns: minmax(0, 1fr);
  }
}

.website-form-save {
  padding-block: var(--space-stack-xl) 0;
  border-block-start: 1px solid var(--border-subtle);
}
@media (min-width: 1024px) {
  .website-form-save {
    display: grid;
    column-gap: var(--space-layout);
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 40rem);
  }
  .website-form-save > * {
    grid-column: 2;
  }
}

@property --website-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --website-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@keyframes website-strip-fade {
  0% {
    --website-fade-start: 0px;
    --website-fade-end: 2rem;
  }
  10% {
    --website-fade-start: 2rem;
  }
  90% {
    --website-fade-end: 2rem;
  }
  100% {
    --website-fade-start: 2rem;
    --website-fade-end: 0px;
  }
}
@media (max-width: 767.98px) {
  .website-chips > [aria-current] {
    scroll-initial-target: nearest;
    scroll-snap-align: center;
  }
  @supports (animation-timeline: scroll()) {
    .website-chips {
      mask-image: linear-gradient(to right, transparent, black var(--website-fade-start), black calc(100% - var(--website-fade-end)), transparent);
      animation: website-strip-fade linear both;
      animation-timeline: scroll(self inline);
    }
  }
  .website-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 3px 2px;
  }
  .website-chips::-webkit-scrollbar {
    display: none;
  }
}

.website-checklist > li[data-on] {
  color: var(--text-secondary);
}
.website-checklist > li:not([data-on]) {
  color: var(--text-primary);
}

.website-arrow {
  color: var(--text-tertiary);
  margin-inline: var(--space-1);
}

.website-search {
  display: grid;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
  max-inline-size: 40rem;
}
@media (min-width: 640px) {
  .website-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .website-search > astra-button {
    margin-block-start: 1.6rem;
  }
}

.website-wording {
  max-inline-size: 48rem;
}

.website-wording__row {
  display: grid;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.website-wording__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-width: 0;
}
.website-wording__head code {
  font-size: var(--text-xs);
  padding: 2px var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.website-wording__form {
  display: grid;
  gap: var(--space-stack);
}

.website-roles {
  overflow-x: auto;
}
.website-roles table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.website-roles th, .website-roles td {
  padding: var(--space-2) var(--space-2);
  vertical-align: middle;
}
.website-roles thead th {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  text-align: center;
  white-space: nowrap;
  border-block-end: 1px solid var(--border-default);
}
.website-roles thead th:first-child {
  text-align: start;
  padding-inline-start: 0;
}
.website-roles tbody tr + tr > * {
  border-block-start: 1px solid var(--border-subtle);
}
.website-roles tbody th {
  text-align: start;
  font-weight: var(--weight-regular, 400);
  color: var(--text-primary);
  padding-inline-start: 0;
}
.website-roles td {
  inline-size: 4.5rem;
  text-align: center;
}
.website-roles td astra-checkbox {
  display: inline-flex;
  justify-content: center;
}
.website-roles tr[data-missing] .website-roles__action {
  color: var(--text-secondary);
}
@media (max-width: 479.98px) {
  .website-roles td {
    inline-size: 3.25rem;
    padding-inline: var(--space-1);
  }
}

.website-roles__action {
  display: block;
}

.website-roles__note {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-block-start: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.website-roles__note astra-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

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

.website-request {
  display: grid;
  gap: var(--space-stack-lg) var(--space-inline-lg);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .website-request {
    grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
  }
  .website-request.website-request--one {
    grid-template-columns: minmax(0, 48rem);
  }
}

.website-request__thread {
  display: grid;
  gap: var(--space-stack-lg);
  min-width: 0;
}

.website-thread {
  display: grid;
  gap: var(--space-stack);
}

.website-thread__who {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.website-thread__who astra-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.website-thread__body {
  font-size: var(--text-sm);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.website-thread__body > p {
  margin: 0;
}
.website-thread__body > p + p {
  margin-block-start: var(--space-3);
}

.website-topic {
  display: grid;
  gap: var(--space-stack-lg) var(--space-inline-lg);
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .website-topic {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
  }
}

.website-topic__side {
  display: grid;
  gap: var(--space-stack-lg);
  min-width: 0;
}

.website-points {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: website-point;
  display: grid;
  gap: var(--space-3);
}
.website-points > li {
  counter-increment: website-point;
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--text-primary);
  line-height: var(--leading-normal);
}
.website-points > li::before {
  content: counter(website-point);
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklch, var(--accent-500) 12%, transparent);
  color: var(--accent-ink);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

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

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

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

.studio-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
  min-width: 0;
}
.studio-stack > form {
  margin: 0;
}

.studio-count {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.studio-token {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}
.studio-token code {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.6;
  color: var(--text-primary);
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

.studio-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

@media (min-width: 1024px) {
  .studio-gates {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-layout);
  }
  .studio-gates > li + li {
    border-block-start: 0;
  }
  .studio-gates > li:nth-child(n+3) {
    border-block-start: 1px solid var(--border-subtle);
  }
}

.studio-diff {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.studio-diff__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.studio-diff__title code {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.studio-diff__code {
  margin: 0;
  padding-block: 0;
  overflow: auto;
  max-height: 28rem;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.studio-diff__code > code {
  display: block;
  min-width: max-content;
}
.studio-diff__code:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.studio-diff__line {
  display: block;
  padding-inline: var(--space-3);
  white-space: pre;
}
.studio-diff__line:first-child {
  padding-block-start: var(--space-2);
}
.studio-diff__line:last-child {
  padding-block-end: var(--space-2);
}
.studio-diff__line[data-sign=added] {
  background: color-mix(in oklab, var(--success-500) 14%, transparent);
  color: var(--text-primary);
}
.studio-diff__line[data-sign=removed] {
  background: color-mix(in oklab, var(--danger-500) 12%, transparent);
  color: var(--text-primary);
}
.studio-diff__line[data-sign=kept] {
  color: var(--text-secondary);
}

.studio-actions {
  display: grid;
  min-width: 0;
}
.studio-actions > .settings-section:first-child {
  padding-block-start: 0;
}
.studio-actions > .settings-section:last-child {
  padding-block-end: 0;
}

.studio-actions form {
  scroll-margin-block-start: var(--space-layout);
}

.studio-resign {
  margin-block-start: var(--space-stack);
}

.studio-resign__form {
  display: grid;
  gap: var(--space-stack);
  max-width: 40rem;
  margin: 0;
  padding-block-end: var(--space-stack);
}

.engagement-section {
  display: grid;
  gap: var(--space-stack);
  min-width: 0;
}
.engagement-section > h2, .engagement-section > .engagement-section__head > h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text-primary);
}
.engagement-section .count-title {
  gap: var(--space-2);
}

.engagement-section__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-height: 2.25rem;
}

.engagement-note {
  margin: 0;
  max-width: 68ch;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.engagement-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-lg);
  margin: 0;
}

.engagement-pair {
  display: grid;
  gap: var(--space-stack) var(--space-inline-lg);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5rem), 1fr));
}

.engagement-pair--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.engagement-short {
  max-width: 14rem;
}

.engagement-winner__action {
  margin-block-start: var(--space-stack);
}
@media (max-width: 480px) {
  .engagement-winner__action astra-button {
    display: block;
  }
  .engagement-winner__action astra-button::part(button) {
    width: 100%;
  }
}

.engagement-winner__history {
  margin: var(--space-stack-sm) 0 0;
  padding-inline-start: var(--space-5);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.engagement-winner__history li {
  overflow-wrap: anywhere;
}

.engagement-redraw {
  display: grid;
  gap: var(--space-stack);
}

.engagement-publish-link {
  padding-block-start: var(--space-stack-sm);
  border-block-start: 1px solid var(--border-subtle);
}

.engagement-master {
  display: grid;
  gap: var(--space-stack-xl);
  min-width: 0;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}
.engagement-master > astra-card {
  min-width: 0;
}
.engagement-master > astra-card > .panel__title {
  flex: 1 1 calc(100% - 3rem);
  min-width: 0;
  overflow-wrap: anywhere;
}
.engagement-master > astra-card > .engagement-master__close {
  order: 1;
}
.engagement-master > astra-card > .page-header__actions {
  order: 2;
}
@media (min-width: 1280px) {
  .engagement-master:has(> astra-card:not([hidden])) {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  }
}

.engagement-actions {
  margin-block-start: var(--space-stack-lg);
}

.team-subhead {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text-primary);
}

summary.team-subhead {
  cursor: pointer;
  border-radius: var(--radius-sm);
}

summary.team-subhead:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.team-setup [aria-busy=true] {
  opacity: 0.62;
  transition: opacity var(--motion-hover);
}

.team-bill > li > .item-list__row {
  min-height: 0;
  padding-block: var(--space-2);
}
.team-bill .item-list__end {
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.team-row-actions {
  margin-block-start: calc(-1 * var(--space-1));
  padding-block-end: var(--space-3);
  padding-inline-start: calc(2rem + var(--space-3));
}

.company-stats {
  display: grid;
  gap: var(--space-inline-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}
@media (max-width: 768px) {
  .company-stats {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }
}

.company-attention__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.company-attention__title astra-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--text-secondary);
}

@media (min-width: 1024px) {
  .company-attach {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-layout);
  }
  .company-attach > li + li {
    border-block-start: 0;
  }
  .company-attach > li:nth-child(n+3) {
    border-block-start: 1px solid var(--border-subtle);
  }
}

.company-attach__meter {
  inline-size: 4rem;
  flex: none;
}

.company-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
}

.company-pairs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
}
@media (min-width: 640px) {
  .company-pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-stack) var(--space-inline-lg);
  }
}

.company-fgroup {
  display: grid;
  gap: var(--space-stack);
}

.company-fgroup__title {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.company-form > .company-fgroup__title:first-child {
  margin-block-start: 0;
}

.company-fgroup__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.company-done {
  display: grid;
  gap: var(--space-stack-lg);
}

.company-ack-list {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-sm);
}
.company-ack-list a {
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
}

.company-console {
  height: 100%;
  min-height: 0;
}

.company-ticket .ticket__panel, .company-chat .chat-panel {
  flex: 1;
  min-height: 20rem;
  display: grid;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
}

.company-chat .chat-panel {
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
}
.company-chat .chat-panel[data-empty="1"] {
  grid-template-columns: minmax(0, 1fr);
}
.company-chat .chat-panel[data-empty="1"] .pane-conv {
  display: none;
}
.company-chat .chat-panel[data-empty="1"] .pane-list {
  border-inline-end: 0;
}
.company-chat .chat-panel[data-empty="1"] {
  flex: none;
  min-height: 0;
}
.company-chat .pane-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-inline-end: 1px solid var(--border-subtle);
}
.company-chat .pane-list__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2);
}
.company-chat .pane-conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.company-chat .thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.company-chat .thread {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-align: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  transition: background-color var(--motion-hover);
}
.company-chat .thread:hover {
  background: var(--surface-sunken);
}
.company-chat .thread:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}
.company-chat .thread.is-active {
  background: color-mix(in oklch, var(--accent-500) 10%, transparent);
}
.company-chat .thread.is-active:hover {
  background: color-mix(in oklch, var(--accent-500) 14%, transparent);
}
.company-chat .thread astra-avatar {
  flex: none;
}
.company-chat .thread__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.company-chat .thread__top, .company-chat .thread__bottom {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.company-chat .thread__bottom {
  align-items: center;
}
.company-chat .thread__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-chat .thread.is-unread .thread__name {
  font-weight: var(--weight-semibold);
}
.company-chat .thread__time {
  flex: none;
  font-size: var(--text-2xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.company-chat .thread__preview {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-chat .thread.is-unread .thread__preview {
  color: var(--text-primary);
}
.company-chat .thread__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-500);
}
.company-chat .thread--skeleton {
  cursor: default;
}
.company-chat .thread--skeleton:hover {
  background: none;
}
.company-chat .conv__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.25rem;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}
.company-chat .conv__back {
  display: none;
  flex: none;
}
.company-chat .chat-panel[data-pane=list] .conv__head {
  display: none;
}
.company-chat .conv__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.company-chat .conv__id h2 {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-chat .conv__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.company-chat .conv__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.company-chat #conv-chat {
  flex: 1;
  min-height: 0;
}
@media (max-width: 820px) {
  .company-chat .chat-panel {
    grid-template-columns: minmax(0, 1fr);
  }
  .company-chat .chat-panel[data-pane=list] .pane-conv {
    display: none;
  }
  .company-chat .chat-panel[data-pane=conv] .pane-list {
    display: none;
  }
  .company-chat .pane-list {
    border-inline-end: 0;
  }
  .company-chat .conv__back {
    display: inline-flex;
  }
  .company-chat .conv__head {
    flex-wrap: wrap;
    row-gap: var(--space-1);
  }
  .company-chat .conv__id {
    min-width: 8rem;
  }
}

@media (max-width: 820px) {
  .company-chat:has(.chat-panel[data-pane=conv]) > :is(.page-header, astra-tabs) {
    display: none;
  }
}
.company-chat__hint {
  flex: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: center;
}
.company-chat__hint astra-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
}

.company-ticket .ticket__panel {
  min-height: 18rem;
  grid-template-columns: 16rem minmax(0, 1fr);
}
.company-ticket .ticket__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-sunken);
  border-inline-end: 1px solid var(--border-subtle);
  overflow-y: auto;
  min-height: 0;
}
.company-ticket .aside-id {
  min-width: 0;
  max-width: 100%;
}
.company-ticket .aside-name {
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.company-ticket .aside-sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}
.company-ticket .aside-mail {
  color: var(--accent-ink);
  text-decoration: none;
}
.company-ticket .aside-mail:hover {
  text-decoration: underline;
}
.company-ticket .ticket__facts {
  width: 100%;
  margin: var(--space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.company-ticket .ticket__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.company-ticket .ticket__facts dt {
  color: var(--text-tertiary);
  margin: 0;
}
.company-ticket .ticket__facts dd {
  color: var(--text-primary);
  margin: 0;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
  text-align: end;
}
.company-ticket .ticket__convo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}
.company-ticket .ticket__convo > .status-surface {
  flex: none;
  border-radius: 0;
  border-inline: 0;
  border-block-start: 0;
  box-shadow: none;
}
.company-ticket #ticket-chat {
  flex: 1;
  min-height: 0;
}
.company-ticket .convo__closed {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
@media (max-width: 820px) {
  .company-ticket .ticket__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .company-ticket .ticket__aside {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: start;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border-subtle);
    padding: var(--space-3) var(--space-4);
    overflow: visible;
  }
  .company-ticket .aside-id {
    flex: 1;
  }
  .company-ticket .ticket__facts {
    margin: 0;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
  }
  .company-ticket .ticket__facts > div {
    gap: var(--space-1);
  }
}

.company-disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.company-disclosure > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
}
.company-disclosure > summary::-webkit-details-marker {
  display: none;
}
.company-disclosure > summary astra-icon {
  width: 1rem;
  height: 1rem;
  color: var(--text-secondary);
}
.company-disclosure > summary::after {
  content: "";
  margin-inline-start: auto;
  width: 0.4375rem;
  height: 0.4375rem;
  border-block-end: 1.5px solid var(--text-tertiary);
  border-inline-end: 1.5px solid var(--text-tertiary);
  transform: rotate(45deg);
  transition: transform var(--motion-hover);
}
.company-disclosure > summary:hover {
  background: var(--surface-sunken);
}
.company-disclosure > summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}
.company-disclosure[open] > summary::after {
  transform: rotate(-135deg);
}
.company-disclosure > form {
  padding: 0 var(--space-4) var(--space-4);
}

.company-client .company-client__hint:empty {
  display: none;
}

.company-client__grid {
  display: grid;
  gap: var(--space-stack-lg) var(--space-inline-lg);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1100px) {
  .company-client__grid {
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
  }
}
@media (max-width: 1099.98px) {
  .company-client__grid > .company-client__main, .company-client__grid > .company-client__side {
    display: contents;
  }
  .company-client__grid .company-client__account {
    order: -1;
  }
}

.company-client__main, .company-client__side {
  display: grid;
  gap: var(--space-stack-lg);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.company-client__headline {
  margin: 0 0 var(--space-3);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.company-client__total {
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.company-client__list {
  flex-basis: 100%;
  font-variant-numeric: tabular-nums;
}

.company-client__link-out {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.company-client .bill {
  display: grid;
  margin-block-end: var(--space-3);
}
.company-client .bill__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: baseline;
  padding: var(--space-1-5) 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.company-client .bill__label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.company-client .bill__detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.company-client .bill__amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.company-client .bill__row--credit .bill__amount {
  color: var(--success-ink);
}
.company-client .bill__row--total {
  margin-block-start: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
  font-weight: var(--weight-semibold);
}
.company-client .rowset {
  display: grid;
}
.company-client .rowline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-3);
  align-items: center;
  box-sizing: border-box;
  min-height: 3rem;
  padding-block: var(--space-1-5);
  font-size: var(--text-sm);
}
.company-client .rowline--module {
  grid-template-columns: minmax(0, 1fr) 3.5rem minmax(5.5rem, auto);
}
.company-client .rowline--module > astra-badge {
  justify-self: center;
}
.company-client .rowline--module > .price-edit {
  justify-self: end;
}
.company-client .rowset > * + .rowline {
  border-block-start: 1px solid var(--border-subtle);
}
.company-client .rowset > .status-surface {
  margin-block-end: var(--space-2);
}
.company-client .rowline__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.company-client .rowline__sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}
.company-client .rowline__money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.company-client .rowline--module .rowline__name {
  overflow-wrap: normal;
}
.company-client .rowline--module :is(.rowline__label, .rowline__sub) {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 560px) {
  .company-client .rowline:not(.rowline--module) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .company-client .rowline:not(.rowline--module) .rowline__money {
    grid-column: 1/-1;
  }
}
@media (max-width: 400px) {
  .company-client .rowline--module {
    grid-template-columns: minmax(0, 1fr) 2.75rem 4.75rem;
    gap: var(--space-2);
  }
  .company-client .rowline--module :is(.rowline__label, .rowline__sub) {
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }
}
.company-client .price-edit {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  margin-block: calc(-1 * var(--space-1));
  margin-inline-end: calc(-1 * var(--space-2));
  border-radius: var(--radius-control);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: background-color var(--motion-hover), color var(--motion-hover);
}
.company-client .price-edit:hover {
  background: color-mix(in oklch, var(--accent-500) 10%, transparent);
  color: var(--accent-ink-on-tint);
}
.company-client .price-edit:active {
  background: color-mix(in oklch, var(--accent-500) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--accent-500) 22%, transparent);
}
.company-client .price-edit:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
@media (pointer: coarse) {
  .company-client .price-edit::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: max(100%, 44px);
    transform: translateY(-50%);
  }
}
.company-client .price-edit__pencil {
  opacity: 0;
  color: var(--text-tertiary);
  transition: opacity var(--motion-hover);
}
.company-client .price-edit:is(:hover, :focus-visible) .price-edit__pencil {
  opacity: 1;
  color: currentColor;
}
@media (hover: none) {
  .company-client .price-edit__pencil {
    opacity: 0.55;
  }
}
.company-client .preview[aria-busy=true] {
  opacity: 0.55;
}
.company-client .preview__figures {
  font-variant-numeric: tabular-nums;
}

.shop-collections .tree__row {
  padding-inline: calc(var(--space-2) + var(--shop-tree-level, 0) * 1.5rem) var(--space-2);
}

.shop-collections .tree__row:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}

@media (pointer: coarse) {
  .shop-collections .tree__row {
    min-height: 44px;
    padding-block: var(--space-3);
  }
}
.shop-collections .tree__count {
  font-variant-numeric: tabular-nums;
}
.shop-collections .tree-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-collections .assign__head {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.shop-collections .assign {
  position: relative;
  display: grid;
  gap: var(--space-2);
  max-height: 20rem;
  overflow: auto;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
@media (max-width: 640px) {
  .shop-collections .assign {
    max-height: none;
    overflow: visible;
  }
}

.shop-meta .shop-meta__values {
  margin-inline-start: var(--space-6);
}
.shop-meta .shop-meta__values .item-list__row {
  min-height: 2.5rem;
}
.shop-meta .shop-meta__none {
  margin: 0 0 var(--space-2) var(--space-6);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
@media (max-width: 479.98px) {
  .shop-meta .shop-meta__values, .shop-meta .shop-meta__none {
    margin-inline-start: var(--space-4);
  }
}

.shop-rules form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-rules .rule-effect {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.shop-rules .probe {
  display: grid;
  gap: var(--space-4);
}
.shop-rules .probe__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-rules #probe-out:empty {
  display: none;
}

.shop-coupons form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-coupons .scope {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.shop-coupons .scope__effect {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.shop-coupons .scope__note {
  margin: 0 0 var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-coupons .scope__group {
  display: grid;
  gap: var(--space-2);
}
.shop-coupons .chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.shop-coupons .chipset:empty {
  display: none;
}
.shop-coupons .chipset__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  max-width: 100%;
  padding: var(--space-0-5, 0.125rem) var(--space-1) var(--space-0-5, 0.125rem) var(--space-2-5, 0.625rem);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  background: var(--surface-raised);
  font-size: var(--text-sm);
}
.shop-coupons .chipset__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.shop-coupons .chipset__chip button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: var(--space-0-5, 0.125rem) var(--space-1);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
}
.shop-coupons .chipset__chip button:hover {
  background: color-mix(in oklch, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
.shop-coupons .chipset__chip button:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 1px;
}
.shop-coupons .scope .cpal__chip > button:first-child {
  display: none;
}
.shop-coupons .scope .cpal__list {
  max-height: 11rem;
}

.shop-products .qe-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-products .qe-head__line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.shop-products .qe-head__title {
  margin: 0;
  min-width: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.shop-products .qe-head__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.shop-products .qe-head__desc:empty {
  display: none;
}
.shop-products #edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-products .qe-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
@media (max-width: 479.98px) {
  .shop-products .qe-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
.shop-products .qe-facts {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}
.shop-products .qe-facts__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.shop-products astra-table::part(shop-name) {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.shop-products astra-table::part(shop-name--variant) {
  padding-inline-start: var(--space-4);
}
.shop-products astra-table::part(shop-name-title) {
  overflow-wrap: anywhere;
}
.shop-products astra-table::part(shop-name-meta) {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.shop-products astra-table::part(shop-name-warn) {
  font-size: var(--text-xs);
  color: var(--warning-ink);
  overflow-wrap: anywhere;
}
.shop-products astra-table::part(shop-before) {
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.shop-products astra-table::part(shop-after) {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.shop-products .bulk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.shop-products .bulk__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-products .bulk__params {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}
@media (max-width: 479.98px) {
  .shop-products .bulk__params {
    grid-template-columns: minmax(0, 1fr);
  }
}
.shop-products .bulk__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.shop-products .bulk__confirm {
  margin: 0;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.shop-products .bulk__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.shop-products .bulk__note:empty {
  display: none;
}
.shop-products .bulk__strips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.shop-products .bulk__strips:empty {
  display: none;
}
.shop-products .bulk__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.shop-products .bulk__totals {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.shop-products .bulk__skips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.shop-products .bulk__section-title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.shop-pf__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-lg) var(--space-inline-lg);
  align-items: start;
}
@media (min-width: 1280px) {
  .shop-pf__grid {
    grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 21.25rem);
  }
}

.shop-pf #page-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  min-width: 0;
}

.shop-pf__col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-lg);
  min-width: 0;
}

.shop-pf__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}

.shop-pf__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--space-3);
}

.shop-pf__fields--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 479.98px) {
  .shop-pf__fields--pairs {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-pf__bullets {
  display: grid;
  gap: var(--space-2);
}

.shop-pf__bullets:empty {
  display: none;
}

.shop-pf__bullet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: end;
}

.shop-pf__picture-note {
  color: var(--warning-ink);
}

.shop-pf #f-information {
  min-height: 14rem;
}

.shop-order .order-detail__addr .addr-line {
  display: block;
}
.shop-order .addr-line + .copyblock {
  margin-block-start: var(--space-2);
}
.shop-order .order-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-order .order-head__title h1 {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-order .order-head__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-order .order-head__facts strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.shop-order .order-head__facts .fact {
  display: inline-flex;
  gap: var(--space-1-5);
  align-items: baseline;
}
@media (max-width: 479.98px) {
  .shop-order .order-head__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shop-order .order-head__facts .fact:first-child {
    grid-column: 1/-1;
  }
}
.shop-order form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-order .shop-order__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  min-width: 0;
}
.shop-order .shop-order__stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-lg) var(--space-inline-lg);
  min-width: 0;
}
.shop-order .kv-list address {
  font-style: normal;
  line-height: var(--leading-relaxed, 1.6);
}
.shop-order .kv-list .note {
  white-space: pre-line;
}
.shop-order .notes-thread {
  position: relative;
  display: grid;
  gap: var(--space-2);
  margin-block-end: var(--space-3);
  max-height: 18rem;
  overflow: auto;
}
@media (max-width: 640px) {
  .shop-order .notes-thread {
    max-height: none;
    overflow: visible;
  }
}
.shop-order .note-item {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
}
.shop-order .note-item__meta {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.shop-order .note-item__body {
  margin: 0;
  justify-self: stretch;
  font-size: var(--text-sm);
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.shop-order .note-item--internal {
  border-color: color-mix(in srgb, var(--warning-500) 40%, var(--border-default));
  background: color-mix(in srgb, var(--warning-500) 8%, var(--surface-raised));
}
.shop-order .trk-lines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.shop-order .trk-lines legend {
  padding: 0;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-order .trk-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}
.shop-order .trk-line__flags {
  grid-column: 1/-1;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
}
.shop-order .trk-line astra-button {
  align-self: center;
}
.shop-order .trk-read {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.shop-order .trk-read__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-weight: var(--weight-semibold);
}
.shop-order .trk-read__meta, .shop-order .trk-read__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-order .trk-read__note:empty {
  display: none;
}
.shop-order astra-table::part(trk-cell) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  max-width: 100%;
}
.shop-order astra-table[data-view=cards]::part(trk-cell) {
  display: flex;
  justify-content: flex-end;
}
.shop-order astra-table::part(trk-chip) {
  max-width: 100%;
  min-width: 0;
}
@media (hover: hover) and (pointer: fine) {
  .shop-order .order-detail__addr .copyval__btn {
    opacity: 0;
  }
  .shop-order .order-detail__addr .copyval:is(:hover, :focus-within, [data-copied]) .copyval__btn {
    opacity: 1;
  }
}
.shop-order .addr-all {
  margin-inline-start: calc(-1 * var(--space-3) - 1px);
}
@media (max-width: 768px) {
  .shop-order .order-head astra-menu-item[data-mirror][hidden] {
    display: none;
  }
}

.shop-rd .rd__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack-lg);
}
.shop-rd .rd__titlekey {
  white-space: nowrap;
}
.shop-rd .rd__linehead {
  display: flex;
  gap: var(--space-1) var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
}
.shop-rd .rd__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-rd .rd__reason {
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-rd .rd__cardactions {
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  .shop-rd .rd__cardactions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .shop-rd .rd__cardactions > astra-button {
    flex: 0 0 auto;
  }
}
.shop-rd .rd__cards astra-card[data-dirty] {
  border-radius: var(--radius-card);
  outline: 2px solid color-mix(in oklch, var(--warning-500) 65%, transparent);
  outline-offset: 2px;
}
.shop-rd .rd__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.shop-rd .rd__progress astra-stepper {
  flex: 1 1 22rem;
  min-width: 0;
}
.shop-rd .rd__rejected {
  flex: 1 1 auto;
  align-items: center;
  flex-wrap: wrap;
  row-gap: var(--space-2);
}
.shop-rd .rd__rejected > span {
  flex: 1 1 10rem;
}
.shop-rd .rd__rejected > astra-button {
  flex: none;
}
@media (max-width: 640px) {
  .shop-rd .rd__progress {
    align-items: flex-start;
    flex-direction: column;
  }
  .shop-rd .rd__progress astra-stepper {
    flex: none;
    align-self: stretch;
  }
}
.shop-rd .rd__notes {
  margin-top: var(--space-4);
}
.shop-rd .rd__trackers {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.shop-rd .rd__tracker {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.shop-rd .rd__trkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-rd .rd__trkgrid {
  display: grid;
  gap: var(--space-3);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.shop-rd .trk-grp {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.shop-rd .trk-grp__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
.shop-rd .trk-grp__lede {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-rd .trk-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: 0;
  font-size: var(--text-sm);
}
.shop-rd .trk-state__file {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}
.shop-rd .trk-state__ok {
  color: var(--success-ink);
  flex-shrink: 0;
}
.shop-rd .trk-state__text {
  flex: 1 1 12rem;
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-rd .trk-label-link {
  margin-inline-start: calc(-1 * var(--space-3) - 1px);
}
.shop-rd .trk-state__why {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-rd .trk-state__why:empty {
  display: none;
}
.shop-rd .trk-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-rd .trk-grp astra-file-upload::part(list) {
  display: none;
}
.shop-rd .rd__addrow {
  margin-top: var(--space-4);
}

.shop-console__form {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 479.98px) {
  .shop-console__form {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shop-console__wide {
  grid-column: 1/-1;
}

.shop-console__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.shop-settings__head {
  margin-block-end: 0;
}

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

.shop-settings__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-settings__bar h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.shop-settings__meta {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.shop-pe__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.shop-pe__title {
  margin: 0;
  overflow-wrap: anywhere;
}

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

.shop-pe {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .shop-pe {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem);
  }
}
.shop-pe h2 {
  margin: 0;
  font-size: var(--text-md);
}

.shop-pe__main, .shop-pe__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-inline-size: 0;
}

.shop-pe__stack {
  display: grid;
  gap: var(--space-4);
}

.shop-pe__description {
  display: grid;
  gap: var(--space-2);
}

.shop-pe__warn {
  color: var(--warning-700);
}

.shop-pe__warn[hidden] {
  display: none;
}

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

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

.shop-pe__collapsed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.shop-pe__variations {
  display: grid;
  gap: var(--space-4);
}

.shop-pe__variations[hidden] {
  display: none;
}

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

.shop-pe__video-link {
  margin-block-start: var(--space-3);
}

.shop-pe__list {
  margin: 0;
  padding-inline-start: var(--space-5);
  display: grid;
  gap: var(--space-1);
}

.shop-pe__facts {
  margin: 0 0 var(--space-3);
  display: grid;
  gap: 0;
}

.shop-pe__fact {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border-subtle);
}
.shop-pe__fact:last-child {
  border-block-end: 0;
}
.shop-pe__fact dt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-pe__fact dd {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-inline-size: 0;
  font-size: var(--text-sm);
}
@media (max-width: 480px) {
  .shop-pe__fact {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

.shop-pe__address .copyval__text {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.shop-pe__serp {
  display: grid;
  gap: 2px;
  margin-block-end: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}

.shop-pe__serp-url {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.shop-pe__serp-title {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--info-ink, var(--accent-ink));
  overflow-wrap: anywhere;
}

.shop-pe__serp-desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

.shop-pe__ro-strip, .shop-pe__ro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.shop-pe__ro-thumb {
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: var(--radius-card);
  display: block;
  background: var(--surface-sunken);
}

.pf__stock {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.pf__stock-qty {
  max-width: 14rem;
}

.vx-axes {
  display: grid;
  gap: var(--space-2);
}

.vx-axes:empty {
  display: none;
}

.vx-axis {
  --vx-control: calc(2.75rem + 4px);
  display: grid;
  grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  animation: repeater-in var(--duration-normal, 200ms) var(--ease-out, ease);
}

.vx-axis__name {
  display: flex;
  align-items: center;
  min-block-size: var(--vx-control);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.vx-axis__values::part(label) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vx-axis__remove {
  margin-block-start: calc((var(--vx-control) - 2rem) / 2);
}

.vx-axis-add {
  max-inline-size: 26rem;
}

@media (max-width: 640px) {
  .vx-axis {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .vx-axis__values {
    grid-column: 1/-1;
    grid-row: 2;
  }
}
.vx-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.vx-bar__preview {
  margin: 0;
  margin-inline-end: auto;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.vx-bar__preview:empty {
  display: none;
}

.vx-table {
  display: grid;
  gap: var(--space-2);
  --vx-axes: 0;
}

.vx-table:empty {
  display: none;
}

.vx-row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  animation: repeater-in var(--duration-normal, 200ms) var(--ease-out, ease);
  transition: border-color var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease;
}
.vx-row:hover, .vx-row:focus-within {
  border-color: var(--border-default);
}
.vx-row[data-open] {
  box-shadow: var(--elevation-1);
}

.vx-row__main {
  display: grid;
  align-items: start;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(var(--vx-axes), minmax(6rem, 0.9fr)) minmax(6.5rem, 0.9fr) minmax(7rem, 1.2fr) minmax(12rem, 1.5fr) auto;
}

.vx-row__attrs {
  display: contents;
}

.vx-row__stock {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
}

.vx-row__actions {
  display: flex;
  gap: var(--space-1);
  margin-block-start: calc(var(--type-ui-size) * var(--leading-snug) + var(--space-stack-xs) + 0.25rem);
}

.vx-row__toggle::part(button) {
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
}

.vx-row[data-open] .vx-row__toggle::part(button) {
  transform: rotate(180deg);
}

.vx-row__more {
  padding-block-start: var(--space-3);
  border-block-start: 1px dashed var(--border-subtle);
  animation: disclosure-in var(--duration-normal, 200ms) var(--ease-out, ease);
}

.vx-row__more .v-image {
  max-inline-size: 22rem;
}

.vx-row + .vx-row .vx-row__main :is(astra-input, astra-number-input, astra-combobox, astra-select)::part(label) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.vx-row + .vx-row .vx-row__actions {
  margin-block-start: 0.25rem;
}

@media (max-width: 768px) {
  .vx-row__main {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vx-row__stock, .vx-row__main > .v-sku {
    grid-column: 1/-1;
  }
  .vx-row__actions {
    grid-column: 1/-1;
    justify-content: flex-end;
    margin-block-start: 0;
  }
  .vx-row + .vx-row .vx-row__main :is(astra-input, astra-number-input, astra-combobox, astra-select)::part(label) {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vx-axis, .vx-row, .vx-row__more {
    animation: none;
  }
}
.pme {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.pme astra-media-picker::part(multi-helper) {
  display: none;
}

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

.pme__cover[hidden] {
  display: none;
}

.pme__cover-view {
  position: relative;
  display: block;
  inline-size: 100%;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
  cursor: zoom-in;
}
.pme__cover-view:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}

.pme__cover-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 400ms var(--ease-out, ease);
}

.pme__cover-view:hover .pme__cover-img {
  transform: scale(1.03);
}

.pme__cover-zoom {
  position: absolute;
  inset-block-end: var(--space-2);
  inset-inline-end: var(--space-2);
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 999px;
  color: var(--text-primary);
  background: color-mix(in oklab, var(--surface-raised) 85%, transparent);
  box-shadow: var(--elevation-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.pme__cover-empty {
  display: grid;
  place-items: center;
  inline-size: 100%;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  color: var(--text-tertiary);
  background: var(--surface-sunken);
  border: 1px dashed var(--border-default);
}

.pme__cover-text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
  min-width: 0;
}

.pme__link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: flex-end;
}

.pme__link-url {
  flex: 1 1 14rem;
  min-width: 0;
}

.pme__link-add {
  flex: 0 0 auto;
}

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

.pme__rows[hidden] {
  display: none;
}

.pme__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-2);
  align-items: start;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}

.pme__pos {
  flex: none;
  min-width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
}

.pme__body {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.pme__ident {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.pme__name {
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}

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

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

.pme__poster-text {
  flex: 1 1 100%;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.pme__still {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-control);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-raised);
  border: 1px dashed var(--border-default);
  color: var(--text-tertiary);
  background-size: cover;
  background-position: center;
}

.pme__still[data-set] {
  border-style: solid;
}

@media (min-width: 769px) {
  .shop-check__fields {
    grid-template-columns: minmax(0, 7rem) minmax(0, 16rem) max-content;
  }
  .shop-check__fields.shop-check__fields--region {
    grid-template-columns: minmax(0, 7rem) minmax(0, 8rem) minmax(0, 16rem) max-content;
  }
}

.shop-check__out {
  margin: var(--space-3) 0 0;
  display: grid;
}

.shop-check__out:empty {
  display: none;
}

.shop-check .probe__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: baseline;
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--border-subtle);
}
.shop-check .probe__row dt {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-check .probe__row dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.shop-check .probe__row dd b {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.shop-policies__form {
  --page-stack-gap: var(--space-4);
}

.shop-policies__people {
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.shop-policies__people legend {
  padding: 0;
  margin-block-end: var(--space-2);
  font-size: var(--type-ui-size);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.shop-policies__choices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-2) var(--space-4);
}

.shop-meta2__section {
  display: grid;
  gap: var(--space-3);
}

.shop-meta2__title {
  margin: 0;
  font-size: var(--text-lg);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.shop-meta2__grid {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.shop-meta2__grid:empty {
  display: none;
}

.shop-meta2__item {
  min-inline-size: 0;
  animation: tile-board-in var(--duration-normal, 200ms) var(--ease-out, ease) both;
}

.shop-meta2__open {
  position: relative;
  display: grid;
  gap: var(--space-1);
  inline-size: 100%;
  block-size: 100%;
  padding: var(--space-4) var(--space-10) var(--space-4) var(--space-4);
  text-align: start;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--elevation-1);
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease), box-shadow var(--duration-normal, 200ms) ease, border-color 120ms ease;
}
.shop-meta2__open:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  border-color: var(--border-default);
}
.shop-meta2__open:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}

.shop-meta2__name {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.shop-meta2__count {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.shop-meta2__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-2);
}

.shop-meta2__chips:empty {
  display: none;
}

.shop-meta2__chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: var(--text-xs);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

.shop-meta2__chip--more {
  color: var(--text-secondary);
}

.shop-meta2__go {
  position: absolute;
  inset-inline-end: var(--space-4);
  inset-block-start: var(--space-4);
  color: var(--text-tertiary);
}

.shop-meta2__add {
  max-inline-size: 32rem;
  grid-template-columns: minmax(0, 1fr) max-content;
}

.shop-meta2__tags {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.shop-meta2__tags:empty {
  display: none;
}

.shop-meta2__tag {
  display: inline-flex;
  align-items: center;
  min-block-size: 2rem;
  padding: 0 var(--space-3);
  border-radius: 999px;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  cursor: pointer;
  background: var(--surface-raised);
  border: 1px solid var(--border-default);
  transition: background-color 120ms ease, border-color 120ms ease;
}
.shop-meta2__tag:hover {
  border-color: var(--accent-500);
  background: color-mix(in oklab, var(--accent-500) 8%, var(--surface-raised));
}
.shop-meta2__tag:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}

span.shop-meta2__tag {
  cursor: default;
}

.shop-meta2__drawer {
  display: grid;
  gap: var(--space-5);
}

.shop-meta2__drawer .form-grid {
  grid-template-columns: minmax(0, 1fr) max-content;
}

.shop-meta2__values {
  display: grid;
  gap: var(--space-2);
}

.shop-meta2__subtitle {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.shop-meta2__value {
  flex: 1;
  min-inline-size: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: start;
  cursor: text;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .shop-meta2__add, .shop-meta2__drawer .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.shop-sf__place {
  display: grid;
  gap: var(--space-3);
}

.shop-sf__head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-sf__head h2 {
  margin: 0;
  font-size: var(--text-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.shop-sf__max {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.shop-sf__board--words {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
}
.shop-sf__board--words .tile-board__add {
  min-block-size: 5.5rem;
}

.shop-sf__ref {
  display: grid;
  gap: var(--space-2);
}

.tile-board__tile[draggable=true] {
  cursor: grab;
}

.tile-board__tile[data-dragging] {
  cursor: grabbing;
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .shop-meta2__item {
    animation: none;
  }
  .shop-meta2__open, .pme__cover-img {
    transition: none;
  }
  .shop-meta2__open:hover {
    transform: none;
  }
}
.shop-settings__bar-text {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
}

.shop-policies astra-card > h2[slot=header] {
  margin: 0;
  font-size: var(--text-lg);
}

.shop-jw-orders .shop-orders h1 {
  margin: 0;
}
.shop-jw-orders .shop-orders__tools {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
}
.shop-jw-orders .shop-orders__tools astra-tabs {
  flex-basis: 100%;
  min-width: 0;
}

.shop-jw-returns .returns__head h1 {
  margin: 0;
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-returns .returns__filters {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  flex-wrap: wrap;
}
.shop-jw-returns .returns__filters astra-tabs {
  flex-basis: 100%;
  min-width: 0;
}

.shop-jw-collections .tree {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shop-jw-collections .tree__row {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: none;
  color: inherit;
  font: inherit;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}
.shop-jw-collections .tree__row:not(.tree__row--static):hover {
  background: var(--surface-sunken);
}
.shop-jw-collections .tree__row--static {
  cursor: default;
}
.shop-jw-collections .tree__row:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
}
@media (pointer: coarse) {
  .shop-jw-collections .tree__row {
    min-height: 44px;
    padding-block: var(--space-3, 0.75rem);
  }
}
.shop-jw-collections .tree__count {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.shop-jw-collections .tree__slug {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.shop-jw-collections .collection-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.shop-jw-collections .field-note {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}
.shop-jw-collections .assign-hint {
  margin: var(--space-4, 1rem) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.shop-jw-coupons .coupons__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.shop-jw-coupons .coupons__head h1 {
  margin: 0;
}
.shop-jw-coupons #create-form, .shop-jw-coupons #edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.shop-jw-coupons .scope {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.shop-jw-coupons .scope[hidden] {
  display: none;
}
.shop-jw-coupons .scope__effect {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-primary);
}
.shop-jw-coupons .scope__effect b {
  font-weight: var(--weight-semibold);
}
.shop-jw-coupons .scope__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-coupons .scope__group {
  display: grid;
  gap: var(--space-2);
}
.shop-jw-coupons .chipset {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.shop-jw-coupons .chipset:empty {
  display: none;
}
.shop-jw-coupons .chipset__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border-default);
  border-radius: 999px;
  padding: 0.15rem 0.35rem 0.15rem 0.6rem;
  font-size: var(--text-sm);
  background: var(--surface-raised);
  max-width: 100%;
}
.shop-jw-coupons .chipset__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 14rem;
}
.shop-jw-coupons .chipset__chip button {
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  line-height: 1;
  padding: 0.1rem 0.2rem;
  border-radius: 999px;
  color: var(--text-secondary);
}
.shop-jw-coupons .chipset__chip button:hover {
  background: color-mix(in oklch, var(--text-primary) 8%, transparent);
  color: var(--text-primary);
}
.shop-jw-coupons .scope .cpal__chip > button:first-child {
  display: none;
}
.shop-jw-coupons .scope .cpal__list {
  max-height: 11rem;
}

.shop-jw-products .shop-products__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.shop-jw-products .shop-products__head-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
}
.shop-jw-products .shop-products__head h1 {
  margin: 0;
}
.shop-jw-products .shop-products__tools {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
}
.shop-jw-products .shop-products__tools astra-tabs {
  flex-basis: 100%;
  min-width: 0;
}
.shop-jw-products #edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.shop-jw-products .qe-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
.shop-jw-products .qe-head__line {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  min-width: 0;
}
.shop-jw-products .qe-head__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}
.shop-jw-products .qe-head__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}
.shop-jw-products .qe-head__desc:empty {
  display: none;
}
.shop-jw-products .orphan-note {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
  justify-items: start;
}
.shop-jw-products .orphan-note[hidden] {
  display: none;
}
.shop-jw-products .muted {
  margin: 0;
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 0.875rem);
}
.shop-jw-products .edit-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-2, 0.5rem);
}
.shop-jw-products .qe-facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1, 0.25rem);
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
}
.shop-jw-products .qe-facts:empty {
  display: none;
}
.shop-jw-products .qe-facts__row {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  min-width: 0;
}
.shop-jw-products .qe-facts__key {
  flex: none;
  color: var(--text-secondary, #6b7280);
}
.shop-jw-products .qe-facts__value {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}
.shop-jw-products .bulk-scope {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  font-size: var(--text-sm, 0.875rem);
}
.shop-jw-products .bulk-scope[hidden] {
  display: none;
}
.shop-jw-products .bulk-scope astra-icon {
  flex: none;
}
.shop-jw-products .bulk-scope__text {
  flex: 1 1 12rem;
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.shop-jw-products .bulk-scope__text strong {
  font-variant-numeric: tabular-nums;
}
.shop-jw-products .bulk-scope[data-scope=filter] {
  border-color: var(--warning-500);
  background: var(--warning-50);
}
.shop-jw-products .bulk-scope[data-scope=filter] astra-icon {
  color: var(--warning-700);
}
.shop-jw-products .bulk-bar-scope {
  display: none;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
  color: var(--warning-700);
  padding-inline-start: var(--space-2, 0.5rem);
}
.shop-jw-products #products-table[data-bulk-scope=filter]::part(bulk-count) {
  display: none;
}
.shop-jw-products #products-table[data-bulk-scope=filter] .bulk-bar-scope {
  display: inline-flex;
}
.shop-jw-products .bulk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.shop-jw-products .bulk__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.shop-jw-products .bulk__params {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3, 0.75rem);
  align-items: start;
}
.shop-jw-products .bulk__params > [hidden] {
  display: none;
}
.shop-jw-products .bulk__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
  padding: var(--space-4, 1rem);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  background: var(--surface-sunken);
}
.shop-jw-products .bulk__panel[hidden] {
  display: none;
}
.shop-jw-products .bulk__confirm {
  margin: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.shop-jw-products .bulk__note {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.875rem);
  overflow-wrap: anywhere;
}
.shop-jw-products .bulk__strip {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: flex-start;
  margin: 0;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  font-size: var(--text-sm, 0.875rem);
  overflow-wrap: anywhere;
}
.shop-jw-products .bulk__strip astra-icon {
  flex: none;
}
.shop-jw-products .bulk__strip--warn {
  border-color: var(--warning-500);
  background: var(--warning-50);
}
.shop-jw-products .bulk__strip--warn astra-icon {
  color: var(--warning-700);
}
.shop-jw-products .bulk__strip--danger {
  border-color: var(--danger-500);
  background: var(--danger-50);
}
.shop-jw-products .bulk__strip--danger astra-icon {
  color: var(--danger-700);
}
.shop-jw-products .bulk__strip--ok {
  border-color: var(--success-500);
  background: var(--success-50);
}
.shop-jw-products .bulk__strip--ok astra-icon {
  color: var(--success-700);
}
.shop-jw-products .bulk__strips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}
.shop-jw-products .bulk__strips:empty {
  display: none;
}
.shop-jw-products .bulk__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
  align-items: center;
}
.shop-jw-products .bulk__totals {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm, 0.875rem);
}
.shop-jw-products .bulk__skips {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2, 0.5rem);
  color: var(--text-secondary);
  font-size: var(--text-sm, 0.875rem);
}
.shop-jw-products .bulk__skips li {
  overflow-wrap: anywhere;
}
.shop-jw-products .bulk__section-title {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
}

.shop-jw-order .order-detail h2 {
  margin: 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-order .order-head {
  margin: 0;
}
.shop-jw-order .order-head__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-order .order-head__title h1 {
  margin: 0;
  font-size: var(--text-xl);
}
.shop-jw-order .order-head__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-order .order-head__facts strong {
  color: var(--text-primary);
  font-weight: 600;
}
.shop-jw-order .order-head__facts .fact {
  display: inline-flex;
  gap: var(--space-2);
  align-items: baseline;
}
.shop-jw-order .order-detail__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.shop-jw-order .muted {
  color: var(--text-secondary);
}
.shop-jw-order .ret-rows {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.shop-jw-order .ret-row {
  display: grid;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: auto minmax(0, 1fr) auto;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
}
.shop-jw-order .ret-row__id {
  font-weight: 600;
}
.shop-jw-order .ret-row__meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
@media (max-width: 720px) {
  .shop-jw-order .ret-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .shop-jw-order .ret-row__meta {
    grid-column: 1/-1;
  }
}
.shop-jw-order .order-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: var(--space-4) var(--space-5);
}
.shop-jw-order .order-detail__grid > section {
  min-width: 0;
}
.shop-jw-order .order-detail__grid h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-tertiary);
}
.shop-jw-order .order-detail__cards dl {
  margin: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.shop-jw-order .order-detail__cards dt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-order .order-detail__cards dd {
  margin: var(--space-1) 0 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.shop-jw-order .order-detail__addr {
  font-style: normal;
  line-height: 1.6;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.shop-jw-order .order-detail__delivery {
  margin: var(--space-4) 0 0;
  padding: var(--space-3);
  white-space: pre-line;
  border: 1px solid var(--info-100);
  background: var(--info-50);
  border-radius: var(--radius-card);
}
.shop-jw-order .order-detail__delivery strong {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.shop-jw-order .trk-lines {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  border: 0;
}
.shop-jw-order .trk-lines legend {
  padding: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-order .trk-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
}
.shop-jw-order .trk-line__flags {
  grid-column: 1/-1;
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.shop-jw-order .trk-line astra-button {
  align-self: center;
}
.shop-jw-order .trk-error {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--danger-100);
  background: var(--danger-50);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
}
.shop-jw-order #contact-form, .shop-jw-order #refund-form, .shop-jw-order #return-form, .shop-jw-order #tracker-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-jw-order .notes-thread {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.shop-jw-order #notes-older {
  margin-top: var(--space-2);
}
.shop-jw-order .note-item {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
}
.shop-jw-order .note-item__meta {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
}
.shop-jw-order .note-item__body {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.shop-jw-order .note-item--internal {
  border-color: color-mix(in oklch, var(--warning-500) 45%, var(--border-default));
  background: color-mix(in oklch, var(--warning-500) 10%, var(--surface-raised));
}
.shop-jw-order .note-item--internal astra-badge {
  margin: 0 0 var(--space-1);
}
.shop-jw-order #order-note-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-jw-order .copyval, .shop-jw-order .copyblock {
  --copyval-pad: .25rem;
  border-radius: var(--radius-sm);
  background-color: transparent;
  box-shadow: 0 0 0 var(--copyval-pad) transparent, 0 0 0 calc(var(--copyval-pad) + 1px) transparent;
  transition: background-color 220ms var(--ease-out, ease), box-shadow 220ms var(--ease-out, ease);
}
.shop-jw-order .copyval {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: 100%;
  --copyval-btn: 1.5rem;
  --copyval-btn-inline: var(--copyval-btn);
}
.shop-jw-order .copyval__text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.shop-jw-order .copyval__btn::part(button) {
  width: var(--copyval-btn-inline);
  height: var(--copyval-btn);
}
.shop-jw-order .copyval__btn:not([hidden]) {
  display: flex;
  flex: none;
  block-size: var(--copyval-btn);
  inline-size: var(--copyval-btn-inline);
}
.shop-jw-order .copyval__btn {
  align-self: flex-start;
  margin-block: 0;
  margin-block: calc((1lh - var(--copyval-btn)) / 2);
}
.shop-jw-order .copyval__btn, .shop-jw-order .addr-all {
  opacity: 0.55;
  transition: opacity var(--duration-fast, 120ms) ease;
}
.shop-jw-order .copyval:hover .copyval__btn, .shop-jw-order .copyval__btn:focus-visible,
.shop-jw-order .copyblock:hover .addr-all, .shop-jw-order .addr-all:focus-visible {
  opacity: 1;
}
.shop-jw-order .copyval[data-copied], .shop-jw-order .copyblock[data-copied] {
  background-color: color-mix(in oklch, var(--success-500) 16%, transparent);
  box-shadow: 0 0 0 var(--copyval-pad) color-mix(in oklch, var(--success-500) 16%, transparent), 0 0 0 calc(var(--copyval-pad) + 1px) color-mix(in oklch, var(--success-ink) 40%, transparent);
  transition-duration: 90ms;
}
.shop-jw-order .copyval[data-copied] .copyval__btn, .shop-jw-order .copyblock[data-copied] .addr-all {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .shop-jw-order .copyval, .shop-jw-order .copyblock, .shop-jw-order .copyval__btn, .shop-jw-order .addr-all {
    transition: none;
  }
}
@media (pointer: coarse) {
  .shop-jw-order .copyval {
    --copyval-btn-inline: 2rem;
  }
}
.shop-jw-order .order-detail__addr .addr-line {
  display: block;
}
.shop-jw-order .addr-all {
  margin-top: var(--space-2);
}
.shop-jw-order .addr-line + .copyblock {
  margin-block-start: var(--space-2);
}
.shop-jw-order .trk-read {
  display: grid;
  gap: var(--space-1);
  margin: 0 0 var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken, transparent);
}
.shop-jw-order .trk-read__id {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
}
.shop-jw-order .trk-read__meta, .shop-jw-order .trk-read__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .shop-jw-order .order-head__title h1 {
    font-size: var(--text-lg);
  }
  .shop-jw-order .order-detail #lines-table {
    --trk-chip-max: calc(100vw - 12.75rem);
  }
  .shop-jw-order .order-head astra-menu-item[data-mirror][hidden] {
    display: none;
  }
}

.shop-jw-rd .rd__head h1 {
  margin: 0;
  font-size: var(--text-xl);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-rd .rd__meta {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin: 0;
}
.shop-jw-rd .rd__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
.shop-jw-rd .rd h2 {
  margin: 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-rd .rd__linehead {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
}
.shop-jw-rd .rd__reason {
  margin: var(--space-2) 0 var(--space-4);
  color: var(--text-secondary);
}
.shop-jw-rd .rd__cardactions {
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  .shop-jw-rd .rd__cardactions {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }
  .shop-jw-rd .rd__cardactions > astra-button {
    flex: 0 0 auto;
  }
}
.shop-jw-rd .rd__cards astra-card[data-dirty] {
  border-radius: var(--radius-card);
  outline: 2px solid color-mix(in oklch, var(--warning-500) 65%, transparent);
  outline-offset: 2px;
}
.shop-jw-rd .rd__progress {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.shop-jw-rd .rd__progress astra-stepper {
  flex: 1 1 22rem;
  min-width: 0;
}
@media (max-width: 640px) {
  .shop-jw-rd .rd__progress {
    align-items: flex-start;
    flex-direction: column;
  }
  .shop-jw-rd .rd__progress astra-stepper {
    flex: none;
    align-self: stretch;
  }
}
.shop-jw-rd .rd__rejected {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-3);
  border: 1px solid color-mix(in oklch, var(--danger-500) 45%, var(--border-default));
  background: color-mix(in oklch, var(--danger-500) 8%, var(--surface-raised));
  border-radius: var(--radius-card);
}
.shop-jw-rd .rd__notes {
  margin-top: var(--space-4);
}
.shop-jw-rd .rd__trackers {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.shop-jw-rd .rd__tracker {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.shop-jw-rd .rd__trkbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.shop-jw-rd .rd__trkgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--space-3);
  align-items: start;
}
.shop-jw-rd .trk-grp {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  min-width: 0;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken, transparent);
}
.shop-jw-rd .trk-grp__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.shop-jw-rd .trk-grp__lede {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-rd .trk-state {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}
.shop-jw-rd .trk-state__file {
  font-weight: 600;
  overflow-wrap: anywhere;
}
.shop-jw-rd .trk-state__why {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.shop-jw-rd .trk-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.shop-jw-rd .trk-grp astra-file-upload::part(list) {
  display: none;
}
.shop-jw-rd .rd__addrow {
  margin-top: var(--space-4);
}
.shop-jw-rd .muted {
  color: var(--text-secondary);
}
@media (max-width: 768px) {
  .shop-jw-rd .rd__head h1 {
    font-size: var(--text-lg);
  }
}

.shop-jw-print {
  color-scheme: light;
  margin: 2rem auto;
  max-width: 46rem;
  padding: 0 1.5rem;
  color: #111;
  background: #fff;
  font: 14px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.shop-jw-print * {
  box-sizing: border-box;
}
.shop-jw-print header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  border-bottom: 2px solid #111;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}
.shop-jw-print .brandmark {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  margin: 0;
}
.shop-jw-print h1 {
  font-size: 1.25rem;
  margin: 0;
  text-align: right;
}
.shop-jw-print .muted {
  color: #555;
}
.shop-jw-print .shop-jw-print__status {
  text-align: right;
  margin: 0.25rem 0 0;
}
.shop-jw-print .shop-jw-print__none {
  text-align: center;
}
.shop-jw-print .label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #555;
  margin-bottom: 0.25rem;
}
.shop-jw-print .cols {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.shop-jw-print .cols > div {
  flex: 1 1 12rem;
}
.shop-jw-print address {
  font-style: normal;
}
.shop-jw-print .dates {
  text-align: right;
}
.shop-jw-print .dates div + div {
  margin-top: 0.5rem;
}
.shop-jw-print .lines-scroll {
  overflow-x: auto;
  margin-bottom: 1rem;
}
.shop-jw-print table {
  width: 100%;
  border-collapse: collapse;
}
.shop-jw-print th, .shop-jw-print td {
  padding: 0.5rem 0.625rem;
  text-align: right;
}
.shop-jw-print th:first-child, .shop-jw-print td:first-child {
  text-align: left;
}
.shop-jw-print thead th {
  border-bottom: 1px solid #111;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.shop-jw-print tbody td {
  border-bottom: 1px solid #ddd;
  font-variant-numeric: tabular-nums;
}
.shop-jw-print .totals {
  margin-left: auto;
  width: 16rem;
}
.shop-jw-print .totals div {
  display: flex;
  justify-content: space-between;
  padding: 0.25rem 0;
}
.shop-jw-print .totals .grand {
  border-top: 2px solid #111;
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
}
.shop-jw-print .note {
  margin: 1.5rem 0;
  padding: 0.75rem 1rem;
  background: #f4f4f4;
  border-radius: var(--radius-card);
}
.shop-jw-print .note p {
  margin: 0;
  white-space: pre-line;
}
.shop-jw-print dl.kv {
  margin: 0;
}
.shop-jw-print dl.kv div {
  display: flex;
  gap: 1rem;
  padding: 0.125rem 0;
}
.shop-jw-print dl.kv dt {
  width: 9rem;
  color: #555;
  margin: 0;
}
.shop-jw-print dl.kv dd {
  margin: 0;
}
.shop-jw-print .toolbar {
  display: flex;
  gap: var(--space-2, 0.5rem);
  justify-content: flex-end;
  margin-bottom: 1rem;
}
@media print {
  .shop-jw-print {
    margin: 0;
    max-width: none;
    font-size: 12px;
  }
  .shop-jw-print .note {
    background: none;
    border: 1px solid #ddd;
  }
  .shop-jw-print .toolbar {
    display: none;
  }
  .shop-jw-print .lines-scroll {
    overflow-x: visible;
  }
}

@media print {
  @page {
    margin: 18mm;
  }
}
.shop-jw-print .shop-jw-print__more {
  margin-top: 2rem;
  border-top: 1px solid #ddd;
  padding-top: 1rem;
}

.shop-jw-collections .shop-jw-collections__search {
  display: block;
  margin-bottom: var(--space-3);
}

.finance-pairs {
  display: grid;
  gap: var(--space-stack) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

.finance-more > summary {
  cursor: pointer;
  width: fit-content;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
  border-radius: var(--radius-control);
}
.finance-more > summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.finance-more[open] > summary {
  margin-block-end: var(--space-3);
}

.finance-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.finance-toolbar > .filter-chips {
  flex: 1 1 auto;
  min-width: 0;
}

.finance-toolbar__end {
  margin-inline-start: auto;
}

.finance-stats {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .finance-stats {
    grid-template-columns: repeat(var(--finance-stats-cols, 4), minmax(0, 1fr));
  }
}
@media (max-width: 767.98px) {
  .finance-stats > :last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}

.finance-figure {
  margin: 0 0 var(--space-2);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.finance-lead-gap {
  margin-block-start: var(--space-3);
}

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

.finance-quiet {
  display: block;
  margin-block-start: 2px;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.finance-radios {
  display: grid;
  gap: var(--space-3);
}

.finance-email-preview {
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}
.finance-email-preview h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.finance-email-preview p {
  margin: 0 0 var(--space-2);
}
.finance-email-preview p:last-child {
  margin-block-end: 0;
}

.finance-payouts .queue__filters {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  flex-wrap: wrap;
}
.finance-payouts .queue__filters astra-tabs {
  flex: 1 1 22rem;
  min-width: 0;
}
.finance-payouts .queue__filters astra-select {
  flex: 0 1 16rem;
  min-width: 0;
}
.finance-payouts .queue__filters:not(:has(> :not([hidden]))) {
  display: none;
}
.finance-payouts .queue__ref {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm);
  user-select: all;
}
.finance-payouts .queue__send {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}
.finance-payouts .queue__notice {
  margin-block-start: var(--space-3);
}
.finance-payouts .queue__pager {
  margin-block-start: var(--space-2);
}

.finance-invoices__tools {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.finance-invoices__tools astra-tabs {
  flex: 1 1 20rem;
  min-width: 0;
}
.finance-invoices__tools:not(:has(> :not([hidden]))) {
  display: none;
}

.finance-invoice .page-header__subtitle {
  overflow-wrap: anywhere;
}

.finance-invoice__chase {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.finance-invoice__chase astra-icon {
  flex: none;
  color: var(--text-tertiary);
}
.finance-invoice__chase[hidden] {
  display: none;
}

.finance-invoice__fields {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.finance-invoice__linkout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
}
.finance-invoice__linkout astra-input {
  flex: 1 1 18rem;
  min-width: 0;
}

.finance-invoice__lines {
  display: grid;
}

.finance-invoice__line {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--space-4);
}
.finance-invoice__line + .finance-invoice__line {
  border-block-start: 1px solid var(--border-subtle);
}
.finance-invoice__line:first-child {
  padding-block-start: 0;
}
.finance-invoice__line > .l-item_name {
  grid-column: 1/-1;
}
.finance-invoice__line > astra-button {
  grid-column: 1/-1;
  justify-self: end;
  order: 9;
}
@media (max-width: 479.98px) {
  .finance-invoice__line {
    grid-template-columns: minmax(0, 1fr);
  }
}

.finance-invoice__fields--pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}

.finance-invoice__line-desc {
  grid-column: 1/-1;
}

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

.finance-invoice__sums {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.finance-invoice__sums > div {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}
.finance-invoice__sums dt {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.finance-invoice__sums dd {
  margin: 0;
  min-width: 6rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.finance-invoice__sums .is-total dt {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.finance-invoice__sums .is-total dd {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
}

.finance-quotes .finance-quotes__row {
  align-items: flex-start;
  padding-block: var(--space-3);
}
.finance-quotes .finance-quotes__row > .item-list__end {
  padding-block-start: 2px;
}
.finance-quotes .finance-quotes__warn {
  color: var(--warning-ink);
}
@media (max-width: 479.98px) {
  .finance-quotes .finance-quotes__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-3);
    row-gap: var(--space-1);
  }
  .finance-quotes .finance-quotes__row > .item-list__icon {
    grid-row: 1/span 2;
  }
  .finance-quotes .finance-quotes__row > .item-list__end {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    padding: 0;
  }
  .finance-quotes .finance-quotes__row > .item-list__main {
    grid-column: 2;
  }
}
.finance-quotes .finance-quotes__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}
.finance-quotes .finance-quotes__actions > form {
  margin: 0;
}
.finance-quotes .finance-quotes__actions > astra-button {
  flex: none;
}
.finance-quotes .finance-quotes__days {
  display: grid;
  gap: var(--space-stack) var(--space-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.finance-quotes #quote-form:has(astra-radio-group[name="deposit[kind]"][value=none]) .finance-quotes__deposit-value {
  display: none;
}
.finance-quotes .finance-quotes__line {
  display: grid;
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.finance-quotes .finance-quotes__line > .finance-quotes__line-title, .finance-quotes .finance-quotes__line > .finance-quotes__what, .finance-quotes .finance-quotes__line > astra-checkbox {
  grid-column: 1/-1;
}
@media (max-width: 479.98px) {
  .finance-quotes .finance-quotes__line {
    grid-template-columns: minmax(0, 1fr);
  }
}
.finance-quotes .finance-quotes__line:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}
.finance-quotes .finance-quotes__line-title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.finance-quotes .finance-quotes__more {
  border-block-start: 1px solid var(--border-subtle);
  padding-block-start: var(--space-3);
}
.finance-quotes .finance-quotes__more > summary {
  cursor: pointer;
  width: fit-content;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-ink);
  border-radius: var(--radius-control);
}
.finance-quotes .finance-quotes__more > summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.finance-quotes .finance-quotes__more > .finance-quotes__line:first-of-type {
  border-block-start: 0;
}

.finance-pub {
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--space-5) var(--space-4) var(--space-8);
}
.finance-pub > * + * {
  margin-block-start: var(--space-5);
}
.finance-pub .pub__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
}
.finance-pub .pub__title {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.finance-pub .pub__title h1 {
  margin: 0;
  overflow-wrap: anywhere;
}
.finance-pub .pub__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.finance-pub .pub__facts strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.finance-pub .pub__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}
@media (min-width: 768px) {
  .finance-pub .pub__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
  .finance-pub .pub__grid > astra-card:only-child {
    grid-column: 1/-1;
  }
}
.finance-pub .pub__grid > astra-card::part(card) {
  height: 100%;
  box-sizing: border-box;
}
.finance-pub address {
  font-style: normal;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.finance-pub .pub__sums {
  display: grid;
  gap: var(--space-1);
  justify-items: end;
  margin: var(--space-4) 0 0;
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}
.finance-pub .pub__sums > div {
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}
.finance-pub .pub__sums dt {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.finance-pub .pub__sums dd {
  margin: 0;
  min-width: 7rem;
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.finance-pub .pub__sums .is-total dt {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}
.finance-pub .pub__sums .is-total dd {
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
}
.finance-pub .pub__methods + .kv-list {
  margin-block-start: var(--space-3);
}
.finance-pub .pub__message {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}
.finance-pub .pub__foot {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
  text-align: center;
}
.finance-pub .pub__pay {
  display: grid;
  gap: var(--space-4);
}
.finance-pub .pub__pay-lede {
  margin: 0;
  color: var(--text-secondary);
}
.finance-pub .pub__pay-lede strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}
.finance-pub .pub__pay-form {
  display: grid;
  gap: var(--space-4);
}
.finance-pub .pub__pay-form[hidden] {
  display: none;
}
.finance-pub #payment-element {
  min-height: 3rem;
}
.finance-pub .pub__pay-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.finance-pub .pub__pay-msg {
  display: none;
  align-items: flex-start;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  color: var(--text-primary);
}
.finance-pub .pub__pay-msg.is-shown {
  display: flex;
}
.finance-pub .pub__pay-msg astra-icon {
  flex: none;
  margin-block-start: var(--status-icon-nudge);
}
.finance-pub .pub__pay-msg.is-error {
  background: var(--danger-50);
  color: var(--danger-700);
}
.finance-pub .pub__pay-msg.is-success {
  background: var(--success-50);
  color: var(--success-700);
}
.finance-pub .pub__pending {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--success-50);
  color: var(--success-700);
}
.finance-pub .pub__pending astra-icon {
  flex: none;
  margin-block-start: var(--status-icon-nudge);
}
.finance-pub .pub__pending p {
  margin: 0;
}
.finance-pub .pub__pending p + p {
  margin-block-start: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.finance-pub .pub__alt {
  margin: 0;
}
.finance-pub .pub__alt summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
}
.finance-pub .pub__alt summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.finance-pub .pub__alt[open] summary {
  margin-block-end: var(--space-3);
}

.finance-media {
  position: relative;
  min-height: 60vh;
  /* THE CONTROL BLOCK IS A STACK, NOT A ROW. The view switch sits ON TOP of the type
           filter because the two answer different questions in sequence — WHICH library, then
           narrowed to WHICH type. Laid side by side (what this row used to do) they read as
           peers, and peers is exactly the lie: the switch changes the subject, the chips only
           qualify it. Stacking is also what every other console here does with astra-tabs
           (shop-orders, xtra-articles, the support inbox): tabs above the tools they scope. */
}
.finance-media .media__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3, 0.75rem);
}
.finance-media {
  /* Both halves withdrawn (no bin, one kind): the block draws nothing and leaves no gap. */
}
.finance-media .media__controls:not(:has(> :not([hidden]))) {
  display: none;
}
.finance-media .media__chips {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}
.finance-media {
  /* The type filter wears the portal's filter-chip look (_portal-patterns.scss
     .filter-chips): a quiet pill, the pressed one tinted with accent ink, never a solid
     accent fill (a solid fill beside the view tabs read as a second selection). */
}
.finance-media .chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 0.375rem);
  min-height: 2rem;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover);
}
.finance-media .chip:hover {
  border-color: var(--border-default);
  color: var(--text-primary);
}
.finance-media .chip[aria-pressed=true] {
  background: color-mix(in srgb, var(--accent-500) 10%, var(--surface-raised));
  border-color: color-mix(in oklab, var(--accent-500) 40%, transparent);
  color: var(--accent-ink);
}
.finance-media .chip:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
@media (max-width: 767.98px) {
  .finance-media {
    /* MEASURED at 375px: the pill is 34.3px tall — under the 44px touch floor, and it
             always has been, on both libraries. Raised on the part rather than in the base
             rule so a desktop control row keeps its compact pills, which is the same trade
             `.media__selbar astra-button` and `.card__restore` already make in this sheet. */
  }
  .finance-media .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
.finance-media {
  /* …AND THE FLOOR IS A FACT ABOUT THE POINTER, NOT THE VIEWPORT. `max-width: 767.98px`
           misses an iPad in portrait by 0.02px: MEASURED at 768×1024 the chips came back
           34.3px with a thumb on them, and every touch tablet above that width is the same
           miss. Raised again on the query this sheet already uses for the only other tap
           target it has to defend (`.usage__badges astra-button`), purely additively — a
           fine pointer at any width still gets the compact pill. The three controls move
           together because a phone that gets 44px chips and a 32px Restore is the same
           inconsistency one breakpoint further out. */
}
@media (pointer: coarse) {
  .finance-media .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .media__selbar astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .media__selbar astra-button::part(button) {
    min-height: 44px;
  }
  .finance-media .card__restore {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .card__restore::part(button) {
    min-height: 44px;
  }
}
.finance-media {
  /* ── Selection bar ─────────────────────────────────────────────────
     A TINTED SURFACE WITH A LEADING ICON (the toast idiom), never an accent stripe down one
     edge — the platform rule. It replaces the type chips while selecting, so the two never
     compete for the same row. */
}
.finance-media .media__selbar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.finance-media .media__selbar[hidden] {
  display: none;
}
.finance-media {
  /* The chips are hidden from the a11y tree by their own `hidden` (that is the script's job),
     but a zero-height flex ROW still earns the column gap either side of itself — dead space
     where the chips used to be. So the WRAPPER collapses with them, exactly as the portal's
     library does; the two media pages differ in no element and no rule. */
}
.finance-media .media__selbar .status-surface__actions {
  margin-inline-start: auto;
}
.finance-media {
  /* ── Grid ─────────────────────────────────────────────────────────── */
}
.finance-media .media__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4, 1rem);
}
@media (max-width: 560px) {
  .finance-media .media__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
  }
  .finance-media {
    /* Audio keeps its square here now: the tile variant is a cover with a disc — the same
       shape as a video card — and works at a 2-up 151.5px exactly like one, so the old
       full-width-row exception (and its hidden AUDIO badge) went with the transport row
       that needed it. The disc's own mobile step-down rides the shared block below. */
  }
}
.finance-media .card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--motion-hover), box-shadow var(--motion-hover), border-color var(--motion-hover);
}
.finance-media .card:hover {
  box-shadow: var(--elevation-2);
  border-color: var(--border-default);
}
.finance-media {
  /* The lift is motion, so it waits for permission: with motion reduced the card still
     answers the pointer (shadow + border), it just does not move. */
}
@media (prefers-reduced-motion: no-preference) {
  .finance-media .card:hover {
    transform: translateY(-3px);
  }
}
.finance-media .card:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.finance-media .card__media {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.finance-media .card__media img, .finance-media .card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.finance-media .card__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  height: 100%;
  padding: var(--space-2, 0.5rem);
  color: var(--text-tertiary);
  background: linear-gradient(135deg, var(--surface-sunken), var(--surface-raised));
}
.finance-media {
  /* The document tile's second line — format + weight, so a card with no picture still says
     what the file IS. Secondary ink, because the card body underneath carries the name. */
}
.finance-media .card__tile-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.finance-media {
  /* In-card audio IS the DS tile: astra-audio's `variant="tile"` carries the whole design
     (cover-first stage, centred scrim disc, bottom-edge scrub rail, designed no-cover
     ground), so no ::part surgery remains — the card only sizes the disc through the two
     custom properties astra-audio publishes for exactly this job. The disc step matches
     `.card__play`'s 2.5rem, and the ≤560px block below steps both down together. One player
     at a time is the DS's shared MediaRegistry claim — never reimplemented here.

     THE TILE'S BOTTOM INLINE-END CORNER IS THE PLAYER'S, and this sheet must keep it free.
     astra-audio/astra-video now paint their own running time there once a tile has been
     played — a small glass pill above the scrub rail, reading "0:12 / 3:41" (and "0:12 / —"
     while the length is genuinely unknown). It is the DS's, inside the shadow root, and it
     takes no attribute and no property from this page; the page's only duty is not to park
     anything on top of it. Which is why every overlay this sheet owns sits along the TOP
     edge — the kind chip inline-start, the licence flag and the selection checkbox
     inline-end — and why a future overlay must go there too, not into the corner opposite.
     The kind line beneath the picture prints the same length from the STORED durationMs, so
     formatDuration() floors exactly as the DS clock does: two readings of one file, a few
     pixels apart, must not disagree. */
}
.finance-media .card__audio {
  width: 100%;
  height: 100%;
  --aud-play-size: 2.5rem;
  --aud-play-icon: var(--icon-size-md);
}
.finance-media {
  /* In-card video is the SAME DS tile family — astra-video's `variant="tile"` — sized the
     same way through astra-video's own published properties. The ROUNDING is the CARD's:
     .card is `border-radius: 12px` + `overflow: hidden` and .card__media clips too, so the
     square's top corners are cut by the card, not by the player (measured: the host, .vid
     and .vid__stage all compute to 0px here, because this sheet sets no radius on
     .card__video). The DS's host → .vid → stage `inherit` chain is still real and still
     worth knowing about — it is what would carry a radius INTO the shadow root if a host
     ever set one — it is simply not the mechanism doing the work on this page. */
}
.finance-media .card__video {
  width: 100%;
  height: 100%;
  --vid-play-size: 2.5rem;
  --vid-play-icon: var(--icon-size-md);
}
.finance-media {
  /* Deliberately theme-INDEPENDENT: this scrim floats over the video frame itself, not over a
     themed surface, so it stays a dark disc with a white glyph in both themes. */
}
.finance-media .card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
}
.finance-media {
  /* 2.5rem is astra-button's icon-only `md` footprint — the DS's own answer to "a round
     control with a 20px glyph in it". */
}
.finance-media .card__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}
.finance-media .card__body {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem);
}
.finance-media .card__meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.finance-media .card__name {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.finance-media .card__kind {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
}
.finance-media .card__menu-btn {
  flex: 0 0 auto;
}
.finance-media .card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}
.finance-media {
  /* The §13.6 licence flag floats opposite the kind chip so the two never overlap. */
  /* Selection: the checkbox only exists while selecting, and a picked card carries the accent
     ring so the state survives on a tile whose picture is mostly white. */
}
.finance-media .card__pick {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 2;
  display: none;
}
.finance-media.is-selecting .card__pick {
  display: block;
}
.finance-media.is-selecting .card__menu-btn {
  visibility: hidden;
}
.finance-media {
  /* …and the licence flag steps down out of the checkbox's corner for exactly as long as the
     checkbox is there, rather than being displaced permanently for a mode that is usually
     off — which left every licensed tile's flag misaligned with the kind chip opposite it. */
  /* WHILE SELECTING, THE TILE IS THE PICK — for AV squares too. The in-card players eat
     clicks by design (stopPropagation, so scrubbing never opens the drawer); this hands
     the pointer back to the card for the mode's duration, so a press picks instead of
     playing. */
}
.finance-media.is-selecting .card__media astra-audio, .finance-media.is-selecting .card__media astra-video {
  pointer-events: none;
}
.finance-media .card.is-picked {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px var(--accent-500) inset;
}
.finance-media {
  /* ── "Recently deleted" (MEDIA_INFRA_SPEC.md §5) ───────────────────
           A TABLIST, NOT A PILL. This used to be a `.chip` in its own group beside the type
           chips, and that was the bug the owner reported: `.chip[aria-pressed="true"]` paints
           the accent fill, so with the bin open BOTH "All" and "Recently deleted" were filled
           accent at once — two things selected, in one visual language, answering two
           different questions. Measured: 2 accent-filled pills at 375px AND at 1280px.

           astra-tabs is the platform's answer to "which view am I in" (the support inbox,
           shop-orders, xtra-articles, pixel-content all use it), and it fixes the ambiguity
           three ways at once:
             • a tablist has a MANDATORY selection, so "Library" becomes a real, visible,
               pressable state instead of being signalled only by the absence of a fill;
             • the UNDERLINE variant marks the active tab with accent TEXT + a 2px indicator,
               which is a different mark from a filled pill — so the switch can never be
               mistaken for a peer of the chips. `the pill variant` was rejected for exactly
               this reason: its selected tab is `background: var(--fill-accent)`, i.e. the
               same accent-filled pill, which would have rebuilt the bug in a new element;
             • an astra-tab host is `min-height: 2.75rem` = 44px exactly, clearing the touch
               floor that the 34.3px pill never did (the pill variant is 2rem = 32px).

           THE TYPE CHIPS STAY, AND STAY OPERABLE, IN BOTH VIEWS — they are not decoration
           here. `/api/media/recently-deleted` takes `type` and honours it all the way down
           (MediaController::recentlyDeleted → EngineLibrary::deletedShapes →
           AssetLibrary::recentlyDeletedForOwner($owner, $search, $kind, …) → the DAO's
           pageDeletedForOwner/countDeletedForOwner), and this page has always put `type` in
           that request's query string. Filtering a full bin down to Documents is a real need,
           so the chips are left live rather than hidden: hiding a filter that works would
           trade one lie for another. */
}
.finance-media .media__views {
  min-width: 0;
}
.finance-media {
  /* THIS STRIP HAS NO PANELS. The grid below is the panel — it is outside the component
           because it is also the drop target, the selection surface and the paging container,
           and moving it inside an astra-tab-panel would put all of that behind a slot for no
           gain. astra-tabs still renders its empty `.tabs__panels` with a `--space-4`
           padding-block-start, which MEASURED as 16px of dead air between the switch and the
           type chips (244.2 → 272.2 at 375px) and read as a gap twice the size of the one the
           control block actually asks for. Collapsed through the exposed part. */
}
.finance-media .media__views::part(panels) {
  display: none;
}
.finance-media {
  /* A deleted file is desaturated so the grid reads at a glance as a DIFFERENT place rather
     than the library with extra buttons. Never colour alone: every card also carries the
     strip below, in words. */
}
.finance-media .card--deleted .card__media {
  filter: grayscale(1);
  opacity: 0.7;
}
.finance-media {
  /* …and the desaturation LIFTS while a trash preview is actually playing — colour returns
     when the operator looks. `data-started` is the DS players' own reflected first-playing
     fact (set on first `playing`, cleared on track change/registry reset), so the lift can
     never key on a guess. It is also the attribute the DS reveals the tile's scrub rail AND
     its corner time pill on, so all three arrive as ONE event: the card colours, the rail
     appears, the clock starts reading. Keying the lift on anything else would stagger them. */
}
.finance-media .card--deleted .card__media:has(astra-video[data-started]),
.finance-media .card--deleted .card__media:has(astra-audio[data-started]) {
  filter: none;
  opacity: 1;
}
.finance-media {
  /* THE ROW'S STATE, IN THE TOAST IDIOM — tinted surface + leading glyph + a sentence, never
     a start-edge stripe. `--over` is the row whose 30 days ran out or whose stored file has
     already gone: it carries the reason and NO restore control, because a button that could
     only ever return a refusal is the defect this surface exists to end. */
  /* THE STRIP MUST WRAP, NOT CRUSH. `.media__grid` tracks are `minmax(180px, 1fr)`, so a
           card can be 180px wide — about 156px inside this padding. Take the clock glyph, two
           gaps and a `size="sm"` Restore button out of that and the sentence was left roughly
           40px, which it spent one word per line ("30 / days / left / to / restore"). The
           button is `flex: 0 0 auto`, so it never yields; only the text could, and `min-width:
           0` let it yield all the way down. Fixed at both ends: the label asks for a real
           basis (below) so the BUTTON wraps to its own line before the sentence breaks up,
           and the sentence itself lost the words the Restore button beside it already says. */
}
.finance-media .card__life {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--text-xs, 0.75rem);
}
.finance-media .card__life--ok {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.finance-media .card__life--over {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}
.finance-media .card__life p {
  margin: 0;
  min-width: 0;
  flex: 1 1 6rem;
}
.finance-media .card__life astra-icon {
  flex: 0 0 auto;
}
.finance-media .card__restore {
  flex: 0 0 auto;
  margin-inline-start: auto;
}
@media (max-width: 560px) {
  .finance-media {
    /* A 2-up tile is 153.5px wide, and the glyph, the sentence and the button cannot share
       one line inside it: `flex: 0 0 auto` on the button squeezed the paragraph to ZERO
       width and then painted the button ON TOP of the words, so "29 days left to restore"
       was unreadable on a phone. The strip becomes a grid instead — glyph, then the
       sentence in a `minmax(0, 1fr)` track, then the ONE action a deleted card offers on
       its own row, which is also where it clears the 44px touch floor that `sm` does not
       reach on its own (it stays compact in a desktop grid tile). */
  }
  .finance-media .card__life {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: var(--space-2, 0.5rem);
  }
  .finance-media .card__life p {
    grid-column: 2;
  }
  .finance-media .card__restore {
    grid-column: 1/-1;
    justify-self: start;
    margin-inline-start: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .card__restore::part(button) {
    min-height: 44px;
  }
}
.finance-media {
  /* One step down the DS scale on a phone, where a 2-up tile is 151.5px and every glyph on it
     costs proportionally more. AFTER the rules it overrides: identical specificity, so source
     order is the only thing that decides. */
}
@media (max-width: 560px) {
  .finance-media .card__play span {
    width: 2rem;
    height: 2rem;
  }
  .finance-media .card__play astra-icon {
    --icon-size-md: var(--icon-size-sm);
  }
  .finance-media .card__audio {
    --aud-play-size: 2rem;
    --aud-play-icon: var(--icon-size-sm);
  }
  .finance-media .card__video {
    --vid-play-size: 2rem;
    --vid-play-icon: var(--icon-size-sm);
  }
}
.finance-media {
  /* Uploading / failed / loading states — none of them are pressable, so they drop the card's
     affordances entirely rather than inviting a click that does nothing. */
}
.finance-media .card--pending, .finance-media .card--skeleton {
  cursor: default;
}
.finance-media .card--pending:hover, .finance-media .card--skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}
.finance-media .card--skeleton {
  pointer-events: none;
}
.finance-media {
  /* Tone follows the surface underneath: sunken on the raised card body, one step further to
     --surface-page on the tile, which is itself sunken — a skeleton painted in its host's own
     colour is invisible. */
}
.finance-media .card--skeleton astra-skeleton {
  --sk-bg: var(--surface-sunken);
}
.finance-media .card--skeleton .card__media astra-skeleton {
  width: 100%;
  --sk-bg: var(--surface-page);
}
.finance-media {
  /* A cover that has not decoded yet — the FIRST-PAINT case. Absolutely positioned inside the
     square the tile already reserves, so it can never move anything; removed the moment the
     image loads (or fails). */
}
.finance-media .card__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  --sk-bg: var(--surface-page);
}
.finance-media {
  /* The tone underlay: an asset with a STORED dominant colour paints its own colour while
     its cover decodes — the picture's first pixel is a fact about the picture, not a generic
     shimmer. No animation, so there is nothing to reduce for reduced-motion; the skeleton
     stays the fallback for rows without a stored colour. */
}
.finance-media .card__ph--tone {
  position: absolute;
  inset: 0;
}
.finance-media .card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  text-align: center;
  background: color-mix(in oklch, var(--surface-raised) 84%, transparent);
  color: var(--text-secondary);
}
.finance-media .card__overlay astra-progress-bar {
  width: 80%;
}
.finance-media .card__error {
  color: var(--danger-700);
  font-size: var(--text-sm, 0.8125rem);
}
.finance-media .media__more {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 0.75rem) 0;
}
.finance-media {
  /* ── Edit drawer ──────────────────────────────────────────────────── */
}
.finance-media #edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.finance-media {
  /* ONE UNIT: the asset. The thing that plays and the facts about the file it plays are the
     same object — as two separately bordered boxes they read as two. */
}
.finance-media .drawer__asset {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  overflow: hidden;
}
.finance-media .drawer__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 42vh;
  min-height: 8rem;
}
.finance-media .drawer__preview img {
  max-width: 100%;
  max-height: 42vh;
  object-fit: contain;
  display: block;
}
.finance-media .drawer__preview--player {
  overflow: visible;
  max-height: none;
  min-height: 0;
  display: block;
  padding: var(--space-3, 0.75rem);
}
.finance-media .drawer__preview--player > astra-audio, .finance-media .drawer__preview--player > astra-video {
  display: block;
  width: 100%;
}
.finance-media .drawer__preview--player > astra-audio::part(root) {
  background: transparent;
  border: 0;
  padding: 0;
}
.finance-media .drawer__preview--player > astra-audio::part(info) {
  display: none;
}
.finance-media .drawer__readonly {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}
.finance-media .drawer__readonly code {
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}
.finance-media {
  /* ── The palette row (stored colour facts, made copyable) ─────────────
     A plain plate row like `.drawer__readonly` — no box, no stripe. Each swatch is a real
     button whose press copies the hex, and the hex is ALSO printed in the open underneath,
     because a value hidden behind hover is not "displayed". */
}
.finance-media .drawer__palette {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border-block-start: 1px solid var(--border-subtle);
}
.finance-media .drawer__swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-control);
  background: var(--swatch);
  /* hairline derived from the stored ink so a near-white swatch still reads on the
     plate; the fallback only ever chromes a synthesised dominant chip with no stored
     ink — it never claims contrast ON the swatch. */
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--swatch-ink, var(--text-primary)) 18%, transparent);
}
.finance-media .drawer__swatch--dominant {
  width: 2.75rem;
  height: 2.75rem;
}
.finance-media .drawer__swatch astra-icon {
  color: var(--swatch-ink, var(--text-primary));
  opacity: 0;
  transition: opacity var(--motion-hover);
}
.finance-media .drawer__swatch:hover astra-icon, .finance-media .drawer__swatch:focus-visible astra-icon {
  opacity: 1;
}
.finance-media .drawer__swatch:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.finance-media .drawer__swatch-col {
  display: block;
}
.finance-media .drawer__swatch-hex {
  display: block;
  margin-block-start: var(--space-1, 0.25rem);
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-3xs, 0.625rem);
  color: var(--text-tertiary);
}
.finance-media {
  /* 44px floor on touch — the ::after strip idiom, never a bigger visible chip. */
}
@media (pointer: coarse) {
  .finance-media .drawer__swatch::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}
.finance-media {
  /* The cover's own state, on the asset plate it belongs to. `--quiet` because this is a row
     GROUPED with the file facts above it, and `--status-surface-base` because the plate is
     sunken — the utility composites its tint over whatever surface it is told it is on. */
}
.finance-media .drawer__cover {
  border-block-start: 1px solid var(--border-subtle);
  --status-surface-base: var(--surface-sunken);
}
.finance-media {
  /* The callout is a ROW of the plate, not a card inside a card: the quiet tint stays, the
     box chrome goes, and the row gets the plate's own rhythm. (The chrome used to be
     stripped on the WRAPPER above, where both declarations were no-ops — the surface inside
     kept core.css's border + radius and read as a cramped box nested flush in the plate.) */
}
.finance-media .drawer__cover > .status-surface {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3, 0.75rem);
}
.finance-media .drawer__cover-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-control);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
}
.finance-media {
  /* ── "Where this file is used" worklist (the §5 refusal) ───────────
     Moved from media.php's last <style> block (2026-10-28; a template carries no rules).
     Ported rule for rule from apps/portal/templates/content.php so the two halves of the
     platform paint one dialog, not two dialects. MediaBulkDeleteTemplateTest reads these
     rules from this partial.
     `minmax(0, 1fr)` on every track here is load-bearing rather than tidy: a stored media
     name — and a post title — is routinely ONE unbroken token and a `1fr` track's min is
     `auto`, so a single 60-character name widens the dialog and scrolls the panel sideways at
     375px. This estate has shipped that exact bug. */
}
.finance-media #usage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.finance-media #usage-note .status-surface__message {
  overflow-wrap: anywhere;
}
.finance-media .usage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}
.finance-media {
  /* A BULK refusal holds several blocked files at once, so the SAME rows are grouped under
     the file they belong to. This is a heading plus a nested list — the rows themselves are
     still built by `usageRow`, there is no second row renderer, and a single blocked file
     never reaches this shell at all (it opens the ungrouped single-file worklist instead). */
}
.finance-media .usage__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}
.finance-media .usage__group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  padding-block-start: var(--space-2, 0.5rem);
}
.finance-media .usage__group-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-semibold, 600);
}
.finance-media .usage__group-count {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}
.finance-media {
  /* SUNKEN, like the drawer's asset plate — `--surface-raised` is the modal panel's own
     colour in the light theme, which would leave the rows separated by a hairline alone. */
}
.finance-media .usage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  min-height: 2.75rem;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}
.finance-media .usage__row > astra-icon {
  color: var(--text-secondary);
  margin-block-start: var(--status-icon-nudge);
}
.finance-media .usage__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1, 0.25rem);
}
.finance-media {
  /* Long titles wrap INSIDE the track rather than widening it — `anywhere` because a stored
     title can be a single unbroken token (a slug, a filename, an external URL). */
}
.finance-media .usage__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium, 500);
}
.finance-media {
  /* The plain-text half of the rule "never offer a link that answers 403/404": a row the
     server did not prove openable is body ink, with no anchor and no pointer affordance. */
}
.finance-media .usage__name--plain {
  color: var(--text-primary);
}
.finance-media .usage__name astra-icon {
  margin-inline-start: var(--space-1, 0.25rem);
  vertical-align: -0.125em;
}
.finance-media .usage__meta {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}
.finance-media .usage__ref {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}
.finance-media {
  /* Badges AND the one action a stale row offers share this cell — the row's third grid
     track — so the clear control never needs a track of its own (which would change
     `.usage__row`'s pinned `auto minmax(0, 1fr) auto` and squeeze the title). */
}
.finance-media .usage__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}
.finance-media {
  /* TOUCH HIT AREA. The DS's `sm` button is 2rem tall — right beside a badge with a mouse,
     under the 44px minimum with a thumb, and Clear is the only tap target inside a row. The
     HOST grows, so the extra area belongs to the element the listener is bound to. */
}
@media (pointer: coarse), (max-width: 560px) {
  .finance-media .usage__badges astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .usage__badges astra-button::part(button) {
    min-height: 44px;
  }
}
@media (max-width: 560px) {
  .finance-media {
    /* The badges drop off the row's trailing edge onto their own line under the text, so
       the body column keeps its width instead of being squeezed to a word. */
  }
  .finance-media .usage__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .finance-media .usage__badges {
    grid-column: 2;
  }
}
.finance-media {
  /* ── Select-mode pins (moved with the worklist) ──────────────────────
     After `.card__badge` above, so the licence flag's own offset wins at equal specificity.
     THE LICENCE FLAG MOVES FOR THE CHECKBOX, AND ONLY FOR AS LONG AS IT IS THERE. */
}
.finance-media .card__badge--license {
  left: auto;
  right: 0.5rem;
}
.finance-media.is-selecting .card__badge--license {
  top: 2.4rem;
}
.finance-media.is-selecting .media__controls {
  display: none;
}
@media (max-width: 560px) {
  .finance-media {
    /* These two are the ONLY way out of the mode and the only way to run the delete, and
       the DS's `sm` is 32px — under the 44px floor. The size attribute keeps the bar
       compact on a desktop row; the tap target is raised on the part instead. */
  }
  .finance-media .media__selbar astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .finance-media .media__selbar astra-button::part(button) {
    min-height: 44px;
  }
}

/* ── Drop zone, scoped to the shell's MAIN region ─────────────────────
   It lives OUTSIDE the shell (see its markup comment): `.sh__main` carries a mask, and a
   mask clips its whole painted subtree — `position: fixed` descendants included — so a frame
   that has to outline the main region cannot live inside it. */
.finance-media__dropzone {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-box, so the width the script computes IS the painted width. */
  box-sizing: border-box;
  border: 3px dashed var(--accent-500);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--accent-500) 8%, transparent);
}

.finance-media__dropzone[hidden] {
  display: none;
}

.finance-media__dropzone-pill {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: 999px;
  background: var(--accent-500);
  color: var(--text-on-accent);
  font-weight: 600;
  box-shadow: var(--elevation-3);
}

.finance-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
  min-width: 0;
}

.finance-consequences {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}
.finance-consequences > li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.finance-consequences > li > astra-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--text-tertiary);
}
.finance-consequences > li[data-tone=warning] {
  color: var(--text-primary);
}
.finance-consequences > li[data-tone=warning] > astra-icon {
  color: var(--warning-ink);
}
.finance-consequences strong {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.finance-invoice__addresses {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
}
.finance-invoice__addresses h3 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
}
.finance-invoice__addresses p {
  margin: 0;
  white-space: pre-line;
  color: var(--text-secondary);
}

.finance-fieldset {
  display: grid;
  gap: var(--space-stack);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.finance-fieldset > legend {
  float: left;
  inline-size: 100%;
  padding: 0;
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.finance-fieldset + .finance-fieldset {
  padding-block-start: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}

.finance-company-switch {
  display: block;
  width: max-content;
  min-width: min(34rem, 100%);
  max-width: 100%;
}

.finance-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-lg);
}

.finance-heading--sub {
  font-size: var(--text-md);
}

.finance-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin: 0;
}
.finance-facts dt {
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}
.finance-facts dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.finance-facts--sunken {
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.finance-facts--sunken dd {
  font-weight: var(--weight-semibold);
}

.finance-facts--boxed {
  gap: var(--space-2) var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
}
.finance-facts--boxed dd {
  letter-spacing: 0.04em;
  font-weight: var(--weight-semibold);
}

.finance-cards {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.finance-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.finance-card-actions {
  margin-block-start: var(--space-3);
}

.finance-fenced {
  padding-block-start: var(--space-4);
  margin-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

.finance-confirm {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
}

.finance-hive .muted {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.finance-hive astra-modal > :not([slot], [hidden]) ~ :not([slot], [hidden]) {
  margin-block-start: var(--space-stack);
}
.finance-hive .status-surface__content > p,
.finance-hive .status-surface__message p {
  margin: 0;
}
.finance-hive .status-surface__message p + p {
  margin-block-start: var(--space-2);
}
.finance-hive ul.status-surface__message {
  margin: 0;
  padding-inline-start: var(--space-5);
}
.finance-hive .po-notice .status-surface__actions {
  margin-block-start: var(--space-2);
}
.finance-hive .po-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.finance-hive .po-filters__row {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  flex-wrap: wrap;
}
.finance-hive .po-filters__row astra-select {
  min-width: 11rem;
}
.finance-hive .po-filters__open {
  display: none;
}
@media (max-width: 768px) {
  .finance-hive .po-filters__facets {
    display: none;
  }
  .finance-hive .po-filters__open:not([hidden]) {
    display: inline-flex;
  }
  .finance-hive astra-modal[open] .po-filters__facets {
    display: flex;
  }
}
.finance-hive .po-preview {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.finance-hive .po-preview__co {
  display: grid;
  gap: var(--space-1);
}
.finance-hive .po-preview__co + .po-preview__co {
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
}
.finance-hive .po-preview__name {
  font-weight: var(--weight-semibold);
}
.finance-hive .po-preview__net {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}
.finance-hive .po-preview__detail {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.finance-hive .po-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  min-width: 0;
}
.finance-hive .po-actions > astra-dropdown:first-child {
  margin-inline-end: auto;
}
@media (max-width: 560px) {
  .finance-hive .po-actions astra-button[data-action] {
    flex: 1 1 auto;
  }
}
.finance-hive astra-modal[data-actions=none]::part(footer) {
  display: none;
}
.finance-hive .po-lines-wrap {
  overflow-x: auto;
}
.finance-hive .po-lines {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.finance-hive .po-lines th, .finance-hive .po-lines td {
  text-align: start;
  padding: var(--space-1) var(--space-2);
  border-block-end: 1px solid var(--border-subtle);
}
.finance-hive .po-lines .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
}
.finance-hive .po-balance-line {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: inherit;
}
.finance-hive .po-ss__figure {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.finance-statement {
  max-width: 42rem;
  margin: var(--space-8) auto;
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.finance-statement h1 {
  margin: 0 0 var(--space-1);
  font-size: var(--text-xl);
}
.finance-statement .finance-facts {
  margin-block: var(--space-5);
}
@media print {
  .finance-statement {
    border: 0;
    margin: 0;
  }
}

.finance-statement__payer {
  margin: 0;
  color: var(--text-secondary);
}

.finance-statement__basis {
  margin: var(--space-4) 0 var(--space-5);
}

@media print {
  .finance-statement__print {
    display: none;
  }
}
.ads-campaigns {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.ads-campaign {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card, var(--radius-lg));
  box-shadow: var(--elevation-1);
  transition: box-shadow var(--motion-hover), border-color var(--motion-hover), transform var(--motion-hover);
}
.ads-campaign:hover {
  box-shadow: var(--elevation-3);
  border-color: var(--border-default);
}
.ads-campaign:focus-within {
  border-color: var(--accent-500);
}

.ads-campaign__media {
  inline-size: 5.5rem;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-500) 10%, var(--surface-sunken));
  display: grid;
  place-items: center;
  color: var(--accent-ink);
}
.ads-campaign__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.ads-campaign__media astra-icon {
  width: 1.75rem;
  height: 1.75rem;
}

.ads-campaign__body {
  display: grid;
  gap: var(--space-1);
  min-inline-size: 0;
  align-content: start;
}

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

.ads-campaign__name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.ads-campaign__name:hover {
  color: var(--accent-ink);
}
.ads-campaign__name:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.ads-campaign__headline {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ads-campaign__spend,
.ads-campaign__figures,
.ads-campaign__foot {
  grid-column: 1/-1;
}

.ads-campaign__spend {
  display: grid;
  gap: var(--space-1);
}

.ads-campaign__spend-line {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.ads-campaign__figures {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.ads-campaign__figures > div {
  display: grid;
  gap: 0;
  min-inline-size: 0;
}
.ads-campaign__figures dt {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.ads-campaign__figures dd {
  margin: 0;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ads-campaign__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid var(--border-subtle);
}

.ads-builder {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .ads-builder {
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    align-items: start;
  }
}

.ads-builder__form {
  display: grid;
  gap: var(--space-4);
  min-inline-size: 0;
}

.ads-builder__form > astra-stepper {
  min-inline-size: 0;
  max-inline-size: 100%;
}

.ads-builder__preview {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}
@media (min-width: 1024px) {
  .ads-builder__preview {
    position: sticky;
    inset-block-start: 0;
  }
}
@media (max-width: 1023px) {
  .ads-builder__preview {
    order: 1;
  }
}

.ads-builder__fields {
  display: grid;
  gap: var(--space-3);
}

.ads-builder__pair {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.ads-builder__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

.ads-builder__review {
  margin: 0;
  display: grid;
}
.ads-builder__review > div {
  display: grid;
  grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-2);
  border-block-end: 1px solid var(--border-subtle);
}
.ads-builder__review dt {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.ads-builder__review dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.ads-drop {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-4);
  align-items: center;
}

.ads-crop {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.ads-campaigns[hidden],
.ads-crop[hidden],
.ads-drop[hidden] {
  display: none;
}

.ads-view-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ads-preview__slot--pickable {
  cursor: pointer;
  border-radius: var(--radius-sm);
  outline: 2px solid transparent;
  outline-offset: var(--space-1);
  transition: outline-color var(--motion-fast);
}
.ads-preview__slot--pickable[data-picked] {
  outline-color: var(--accent-500);
}

.report-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-3);
}
.report-filters > astra-select {
  min-inline-size: 13rem;
}

.ads-drop__square {
  inline-size: 7rem;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px dashed var(--border-strong);
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
}
.ads-drop__square img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.ads-drop__square:has(img) {
  border-style: solid;
  border-color: var(--border-subtle);
}

.ads-drop__body {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
  justify-items: start;
}

.ads-estimate {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--accent-500) 8%, var(--surface-sunken));
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.ads-estimate strong {
  font-size: var(--text-xl);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.ads-preview {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}

.ads-preview__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ads-preview__slot {
  display: grid;
  gap: var(--space-1);
}

.ads-preview__slot-name {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.ads-native {
  --ads-native-ratio: 6 / 5;
  aspect-ratio: var(--ads-native-ratio);
  inline-size: 100%;
  display: grid;
  overflow: hidden;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  text-decoration: none;
}
.ads-native--mpu {
  --ads-native-ratio: 300 / 250;
  grid-template-rows: auto minmax(0, 1fr);
}
.ads-native--leaderboard {
  --ads-native-ratio: 728 / 90;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.ads-native--mobile {
  --ads-native-ratio: 320 / 100;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
}
.ads-native--inline {
  --ads-native-ratio: 640 / 360;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.ads-native__pic {
  --crop-x: 0;
  --crop-y: 0;
  --crop-w: 1;
  --crop-h: 1;
  position: relative;
  display: block;
  overflow: hidden;
  min-block-size: 0;
  aspect-ratio: 2/1;
  background: color-mix(in srgb, var(--accent-500) 14%, var(--surface-sunken));
}
.ads-native--leaderboard .ads-native__pic, .ads-native--mobile .ads-native__pic, .ads-native--inline .ads-native__pic {
  block-size: 100%;
  aspect-ratio: 1;
}

.ads-native__img {
  position: absolute;
  max-inline-size: none;
  inline-size: calc(100% / var(--crop-w));
  block-size: calc(100% / var(--crop-h));
  inset-inline-start: calc(var(--crop-x) / var(--crop-w) * -100%);
  inset-block-start: calc(var(--crop-y) / var(--crop-h) * -100%);
  object-fit: cover;
}
.ads-native__img:not([src]) {
  visibility: hidden;
}

.ads-native__copy {
  display: grid;
  align-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  min-inline-size: 0;
}
.ads-native--inline .ads-native__copy {
  padding: var(--space-4);
  gap: var(--space-2);
}

.ads-native--leaderboard .ads-native__label,
.ads-native--leaderboard .ads-native__copy .ads-native__cta {
  display: none;
}

.ads-native__label {
  font-size: 0.625rem;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.ads-native__head {
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.ads-native--leaderboard .ads-native__head {
  -webkit-line-clamp: 1;
}
.ads-native--inline .ads-native__head {
  font-size: var(--text-lg);
}

.ads-native__text {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ads-native--mpu .ads-native__text, .ads-native--mobile .ads-native__text, .ads-native--leaderboard .ads-native__text {
  display: none;
}
.ads-native--inline .ads-native__text {
  font-size: var(--text-sm);
}

.ads-native__cta {
  justify-self: start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  border: 1px solid var(--border-strong);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
.ads-native--leaderboard .ads-native__cta {
  margin-inline-end: var(--space-3);
}
.ads-native--mobile .ads-native__cta {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .ads-campaign {
    transition: none;
  }
}
.hive-lookup {
  grid-template-columns: minmax(0, 34rem) auto;
  justify-content: start;
}
@media (max-width: 768px) {
  .hive-lookup {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hive-table-wrap {
  overflow-x: auto;
  margin-inline: calc(-1 * var(--space-1));
  padding-inline: var(--space-1);
}

.hive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.hive-table th, .hive-table td {
  text-align: start;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
}
.hive-table th {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
  white-space: nowrap;
}
.hive-table tbody tr:last-child > td {
  border-block-end: 0;
}
.hive-table th:first-child, .hive-table td:first-child {
  padding-inline-start: 0;
}
.hive-table th:last-child, .hive-table td:last-child {
  padding-inline-end: 0;
}
.hive-table .num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hive-subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hive-answer {
  display: grid;
  gap: var(--space-3);
}

.hive-answer__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.hive-answer__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.hive-words {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  max-width: 80ch;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.hive-words strong {
  display: block;
  color: var(--text-primary);
  margin-block-end: var(--space-1);
}

.hive-lift {
  min-width: 12rem;
}

.hive-lift__body {
  display: grid;
  gap: var(--space-2);
  max-width: 26rem;
}
.hive-lift__body p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hive-muted {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.hive-filters {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 15rem));
}
@media (max-width: 768px) {
  .hive-filters {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hive-section {
  display: grid;
  gap: var(--space-3);
}

.hive-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.hive-section__title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hive-section__meta {
  margin: 0 0 0 auto;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
@media (max-width: 640px) {
  .hive-section__meta {
    margin-inline-start: 0;
    flex-basis: 100%;
  }
}

.hive-split {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: start;
}

.hive-funnel {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
}

.hive-delta {
  font-variant-numeric: tabular-nums;
}
.hive-delta[data-dir=up] {
  color: var(--success-ink, var(--success-700));
}
.hive-delta[data-dir=down] {
  color: var(--danger-ink, var(--danger-700));
}
.hive-delta[data-dir=flat] {
  color: var(--text-secondary);
}

.hive-live {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  background: color-mix(in oklab, var(--accent-500) 4%, var(--surface-raised));
}

.hive-live__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hive-live__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--success-500);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--success-500) 50%, transparent);
  animation: hive-live-pulse 2s ease-out infinite;
}

@keyframes hive-live-pulse {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklab, var(--success-500) 50%, transparent);
  }
  70%, 100% {
    box-shadow: 0 0 0 0.5rem transparent;
  }
}
.hive-live__meta {
  margin: 0 0 0 auto;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hive-live__controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--text-sm);
}
.hive-live__controls a {
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.hive-live__controls a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hive-live__says {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hive-live astra-stats-card {
  transition: opacity 240ms ease;
}

.hive-live astra-stats-card[data-changed] {
  opacity: 0.55;
}

.ins__live-toggle {
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-subtle);
  background: transparent;
}
.ins__live-toggle[aria-pressed=true] {
  color: var(--text-primary);
  border-color: var(--border-default);
}
.ins__live-toggle:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .hive-live__dot {
    animation: none;
  }
  .hive-live astra-stats-card {
    transition: none;
  }
  .hive-live astra-stats-card[data-changed] {
    opacity: 1;
  }
}
.hive-chip-rows {
  display: grid;
  gap: var(--space-2);
}

.hive-days {
  display: grid;
  gap: var(--space-5);
}

.hive-day {
  display: grid;
  gap: var(--space-2);
}

.hive-day__title {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hive-day__count {
  font-size: var(--text-xs);
  font-weight: var(--weight-regular, 400);
  color: var(--text-secondary);
}

.hive-day__card .item-list__row > astra-avatar {
  flex: none;
}

.hive-day__card .item-list__end time {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.hive-detail-section {
  margin-block-start: var(--space-4);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

.hive-diff td {
  overflow-wrap: anywhere;
}
.hive-diff tr.is-changed > td {
  background: var(--surface-sunken);
  font-weight: var(--weight-semibold);
}

.hive-raw {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
}

.hive-ads__views::part(panels) {
  display: none;
}

.hive-ads__view {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hive-ads__view[hidden] {
  display: none;
}

.hive-ads__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.hive-ads__tools > astra-tabs {
  flex-basis: 100%;
  min-width: 0;
}

.hive-creative__plate {
  display: grid;
  place-items: center;
  min-height: 6rem;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.hive-creative__plate img {
  max-width: 100%;
  max-height: 13rem;
  object-fit: contain;
  border-radius: var(--radius-control);
}

.hive-creative__none {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.hive-review__body {
  display: grid;
  gap: var(--space-5);
}

.hive-review__art {
  max-width: 100%;
  max-height: 16rem;
  justify-self: start;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-subtle);
  cursor: zoom-in;
}

.hive-review .ads-preview {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hive-review .ads-preview > .ads-preview__label {
  grid-column: 1/-1;
}
.hive-review .ads-preview > .ads-preview__slot:has(.ads-native--leaderboard),
.hive-review .ads-preview > .ads-preview__slot:has(.ads-native--inline) {
  grid-column: 1/-1;
}
.hive-review .ads-preview > .ads-preview__slot:has(.ads-native--inline) {
  max-inline-size: 26rem;
}
@media (max-width: 480px) {
  .hive-review .ads-preview {
    grid-template-columns: minmax(0, 1fr);
  }
}

.hive-approval__meta {
  margin: var(--space-1) 0 0;
  overflow-wrap: anywhere;
}

.hive-review__dest {
  overflow-wrap: anywhere;
}

.hive-review__form {
  display: grid;
  gap: var(--space-3);
}

.hive-bill {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.hive-bill h3 {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.hive-bill__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.hive-bill__head h2 {
  margin: 0;
  font-size: var(--text-lg);
}

.hive-bill__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--space-3);
}

.hive-bill__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.hive-bill__fact dt {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.hive-bill__fact dd {
  margin: 0;
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.hive-bill__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.hive-bill__checks li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.hive-bill__checks li astra-icon {
  flex: none;
}
.hive-bill__checks li[data-met="1"] astra-icon {
  color: var(--success-600);
}
.hive-bill__checks li[data-met="0"] astra-icon {
  color: var(--text-tertiary);
}

.hive-bill__value {
  margin-inline-start: auto;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.hive-bill__tier {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.hive-bill__tier header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}
.hive-bill__tier header .hive-bill__value {
  font-weight: var(--weight-regular, 400);
}

.hive-bill__notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.hive-bill__notice astra-icon {
  flex: none;
  margin-block-start: var(--status-icon-nudge);
}
.hive-bill__notice p {
  margin: 0;
}
.hive-bill__notice p + p {
  margin-top: var(--space-1);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.hive-bill__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.hive-bill__control {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}
.hive-bill__control h3 {
  font-size: var(--text-md);
}
.hive-bill__control p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.hive-bill__control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.hive-bill__runs {
  --astra-table-max-height: 22rem;
}

.hive-integ__body {
  display: grid;
  gap: var(--space-5);
}

.hive-integ__snippet {
  display: grid;
  gap: var(--space-2);
}
.hive-integ__snippet p {
  margin: 0;
}

.hive-code {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  line-height: 1.5;
}
.hive-code code {
  font-family: var(--type-mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
}

.hive-integ__origins {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hive-integ__origins code {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
}

.hive-integ__result {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-3);
}

.hive-integ__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.hive-integ__facts code {
  overflow-wrap: anywhere;
}

.hive-integ__ads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
  gap: var(--space-3);
}

.hive-integ__ad {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.hive-integ__ad img {
  max-width: 100%;
  border-radius: var(--radius-control);
}

.hive-integ__ad-label {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.hive-integ__ad-title {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.hive-integ__ad-host {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.hive-doc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.hive-doc h2, .hive-doc h3, .hive-doc h4 {
  margin: var(--space-3) 0 0;
}
.hive-doc h2 {
  font-size: var(--text-lg);
}
.hive-doc h3 {
  font-size: var(--text-md);
}
.hive-doc p, .hive-doc ul, .hive-doc ol {
  margin: 0;
}
.hive-doc ul, .hive-doc ol {
  padding-inline-start: 1.25rem;
}
.hive-doc code {
  font-family: var(--type-mono-font, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.9em;
  background: var(--surface-sunken);
  padding: 0 0.25em;
  border-radius: var(--radius-xs, 4px);
}
.hive-doc pre {
  margin: 0;
  padding: var(--space-3);
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.hive-doc pre code {
  background: none;
  padding: 0;
}
.hive-doc blockquote {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}
.hive-doc table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--text-sm);
}
.hive-doc th, .hive-doc td {
  text-align: start;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.hive-doc th {
  color: var(--text-secondary);
  font-size: var(--text-xs);
}

.hive-doc__scroll {
  overflow-x: auto;
}

.hive-media.media {
  position: relative;
  min-height: 60vh;
}

.hive-media .media__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

/* Title + count badge on one baseline (the styleguide's card-header idiom): the total is a
   bare-number astra-badge, not heading-sized text in parentheses. */
.hive-media .media__head h1 {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.hive-media .media__controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3, 0.75rem);
}

.hive-media .media__chips {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}

.hive-media .chip {
  appearance: none;
  border: 1px solid var(--border-default);
  background: var(--surface-raised);
  color: var(--text-secondary);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font: inherit;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.hive-media .chip:hover {
  border-color: var(--accent-400);
}

.hive-media .chip[aria-pressed=true] {
  background: var(--accent-500);
  color: var(--text-on-accent);
  border-color: var(--accent-500);
}

.hive-media .chip:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

@media (max-width: 767.98px) {
  .hive-media .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}
@media (pointer: coarse) {
  .hive-media .chip {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .media__selbar astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .media__selbar astra-button::part(button) {
    min-height: 44px;
  }
  .hive-media .card__restore {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .card__restore::part(button) {
    min-height: 44px;
  }
}
/* ── The head's action zone ────────────────────────────────────────
   One ghost secondary (Select) plus the primary (Upload). Only Upload carries `page-cta`,
   so it stays the single promoted action the shell lifts into the mobile thumb-zone bar —
   a second promoted control there would make the page ask two questions at once. */
.hive-media .media__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}

@media (max-width: 767.98px) {
  /* THE TWIN OF apps/ninefive/templates/media.php — the two libraries must not drift here.
     Upload is promoted into the DS thumb-zone bar at this width, leaving only the ghost
     "Select" in the zone. Step the heading down so the title and that control share ONE
     line (the dashboard idiom), and hold the zone on the trailing edge so it is never
     orphaned left when it does wrap. The ghost is deliberately NOT stretched: a
     full-width ghost with a centred label reads as the page's main action, which it
     is not. */
  .hive-media .media__head h1 {
    font-size: var(--text-xl, 1.375rem);
  }
  .hive-media .media__actions {
    margin-inline-start: auto;
    justify-content: flex-end;
  }
}
/* ── Selection bar ─────────────────────────────────────────────────
   A TINTED SURFACE WITH A LEADING ICON (the toast idiom), never an accent stripe down one
   edge — the platform rule. It replaces the type chips while selecting, so the two never
   compete for the same row. */
.hive-media .media__selbar {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.hive-media .media__selbar[hidden] {
  display: none;
}

/* The chips are hidden from the a11y tree by their own `hidden` (that is the script's job),
   but a zero-height flex ROW still earns a gap on each side of itself — 40px of dead space
   where the chips used to be. So the WRAPPER collapses with them. */
.hive-media.media.is-selecting .media__controls {
  display: none;
}

.hive-media .media__selbar .status-surface__actions {
  margin-inline-start: auto;
}

@media (max-width: 560px) {
  /* These two are the ONLY way out of the mode and the only way to run the delete, and
     the DS's `sm` is 32px — under the 44px floor. The size attribute keeps the bar
     compact on a desktop row; the tap target is raised on the part instead, exactly as
     the where-used worklist's Clear buttons already do lower down this sheet. */
  .hive-media .media__selbar astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .media__selbar astra-button::part(button) {
    min-height: 44px;
  }
}
/* ── Grid ─────────────────────────────────────────────────────────── */
.hive-media .media__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4, 1rem);
}

@media (max-width: 560px) {
  .hive-media .media__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 0.75rem);
  }
  /* No audio exception any more. The old full-width-row escape existed because a
     transport row could not live in a 151.5px square — the TILE can, exactly like a
     video tile, so an audio card keeps the grid's rhythm and its AUDIO badge on a
     phone. The disc steps down with `.card__play`'s own 2rem step further down. */
}
.hive-media .card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.hive-media .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--elevation-2);
  border-color: var(--border-default);
}

.hive-media .card:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.hive-media .card__media {
  position: relative;
  aspect-ratio: 1/1;
  background: var(--surface-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hive-media .card__media img, .hive-media .card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hive-media .card__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  height: 100%;
  padding: var(--space-2, 0.5rem);
  color: var(--text-tertiary);
  background: linear-gradient(135deg, var(--surface-sunken), var(--surface-raised));
}

/* A tile's second line, when the glyph alone would not say enough — today the "Still
   encoding…" state of an AV asset whose rendition the worker has not written yet.
   Secondary ink, because the card body underneath already carries the name. */
.hive-media .card__tile-label {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── In-card audio (astra-audio, tile) ────────────────────────────
   THE DS CARRIES THE DESIGN. `variant="tile"` is the whole presentation
   — cover-first stage, centred scrim disc, the scrub rail on the tile's
   bottom edge — so this sheet only sizes the square and the disc. No
   ::part surgery any more: the tile has no info or transport chrome to
   remove, and reaching in to restyle what the DS already decided would
   be the old local-patch mistake back again.

   THE PLAY DISC IS SIZED FROM OUT HERE. `.aud__play` is the player's own
   control, so the card must not reach for it — it sets the two custom
   properties astra-audio publishes on :host for exactly this (declared
   inside its coarse-pointer block too, so an outer-tree override wins at
   every breakpoint). 2.5rem is astra-button's icon-only `md` footprint —
   the same disc `.card__play` paints on a video tile — and the phone
   step further down matches its 2rem step. DS scale, never loose px. */
.hive-media .card__audio {
  width: 100%;
  height: 100%;
  --aud-play-size: 2.5rem;
  --aud-play-icon: var(--icon-size-md);
}

/* The video tile is the audio tile's twin (astra-video `variant="tile"`), and its disc is
   sized through the same published seam — 2.5rem is the identical scrim disc the audio
   square and the posterless `.card__play` fallback both paint. */
.hive-media .card__video {
  width: 100%;
  height: 100%;
  --vid-play-size: 2.5rem;
  --vid-play-icon: var(--icon-size-md);
}

/* Deliberately theme-INDEPENDENT: this scrim floats over the video frame itself, not over a
   themed surface, so it stays a dark disc with white glyph in both themes. */
.hive-media .card__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
}

/* 2.5rem is astra-button's icon-only `md` footprint — the DS's own answer to "a round
   control with a 20px glyph in it". The 3rem it replaces was a loose number that made the
   scrim disc the loudest thing in the tile. The glyph itself is astra-icon's `md` default
   (set as an ATTRIBUTE in mediaInner, not through `--astra-icon-size`, which is not a DS
   variable and never sized anything). */
.hive-media .card__play span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
}

.hive-media .card__body {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-3, 0.75rem);
}

.hive-media .card__meta {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hive-media .card__name {
  font-size: var(--text-sm, 0.875rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hive-media .card__kind {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary);
  text-transform: capitalize;
}

.hive-media .card__menu-btn {
  flex: 0 0 auto;
}

.hive-media .card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
}

/* The §13.6 licence flag floats opposite the kind chip so the two never overlap. */
.hive-media .card__badge--license {
  left: auto;
  right: 0.5rem;
}

/* Selection: the checkbox only exists while selecting, and a picked card carries the accent
   RING (all four edges, from the border plus an inset shadow) so the state survives on a
   tile whose picture is mostly white. A ring, deliberately, not a start-edge stripe. */
.hive-media .card__pick {
  position: absolute;
  top: 0.375rem;
  right: 0.375rem;
  z-index: 2;
  display: none;
}

.hive-media.media.is-selecting .card__pick {
  display: block;
}

/* The ⋯ menu is a per-card action, and selection is a per-PAGE one — leaving both live
   invites a Delete from the menu on a card the operator has just ticked for a bulk delete. */
.hive-media.media.is-selecting .card__menu-btn {
  visibility: hidden;
}

/* …and the licence flag steps down out of the checkbox's corner for exactly as long as the
   checkbox is there, rather than being moved permanently for a mode that is usually off. */
.hive-media.media.is-selecting .card__badge--license {
  top: 2.4rem;
}

.hive-media .card.is-picked {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 2px var(--accent-500) inset;
}

/* WHILE SELECTING, THE TILE IS THE PICK — for AV squares too. The in-card
   players eat clicks by design; this hands the pointer back to the card for
   the mode's duration, so a press picks instead of playing. */
.hive-media.media.is-selecting .card__media astra-audio,
.hive-media.media.is-selecting .card__media astra-video {
  pointer-events: none;
}

.hive-media .media__views {
  min-width: 0;
}

.hive-media .media__views::part(panels) {
  display: none;
}

/* A deleted file is desaturated so the grid reads at a glance as a DIFFERENT place, not as
   the library with extra buttons. Never colour alone: every card also carries the strip
   below, in words. */
.hive-media .card--deleted .card__media {
  filter: grayscale(1);
  opacity: 0.7;
}

/* …and the desaturation LIFTS while a preview is actually playing — colour returns when
   the operator looks at the thing they are deciding about, and comes back to grey when
   the player resets. Both players reflect `data-started` for exactly this. */
.hive-media .card--deleted .card__media:has(astra-video[data-started]),
.hive-media .card--deleted .card__media:has(astra-audio[data-started]) {
  filter: none;
  opacity: 1;
}

/* The trash players fill the square the image thumb would have — the same delivery the
   live library plays, mounted only when the server proved the rendition ready. */
.hive-media .card--deleted .card__media astra-video {
  width: 100%;
}

/* THE ROW'S STATE, IN THE TOAST IDIOM — tinted surface + leading glyph + a sentence.
   Never a start-edge stripe (the platform rule). `--over` is the row whose 30 days ran out
   or whose stored file has already gone: it carries the reason and NO restore control,
   because offering one that would 409 is the defect this whole surface exists to end. */
.hive-media .card__life {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  font-size: var(--text-xs, 0.75rem);
}

.hive-media .card__life--ok {
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.hive-media .card__life--over {
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}

.hive-media .card__life p {
  margin: 0;
  min-width: 0;
  flex: 1 1 6rem;
}

.hive-media .card__life astra-icon {
  flex: 0 0 auto;
}

.hive-media .card__restore {
  flex: 0 0 auto;
  margin-inline-start: auto;
}

@media (max-width: 560px) {
  /* A 2-up tile is 153.5px wide, and the glyph, the sentence and the button cannot share
     one line inside it: `flex: 0 0 auto` on the button squeezed the paragraph to ZERO
     width and then painted the button ON TOP of the words, so "29 days left to restore"
     was unreadable on a phone. The strip becomes a grid instead — glyph, then the
     sentence in a `minmax(0, 1fr)` track, then the one action on its own row, which is
     also where it can clear the 44px touch floor `sm` does not reach on its own. */
  .hive-media .card__life {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    row-gap: var(--space-2, 0.5rem);
  }
  .hive-media .card__life p {
    grid-column: 2;
  }
  .hive-media .card__restore {
    grid-column: 1/-1;
    justify-self: start;
    margin-inline-start: 0;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .card__restore::part(button) {
    min-height: 44px;
  }
}
/* "Even more so on mobile": a 2-up tile is 151.5px, so every glyph on it costs
   proportionally more than the same glyph in a 223px desktop column — the play disc was
   31.7% of the tile's width there against 21.5% here. One step down the DS scale on each.
   This block sits AFTER the rules it overrides on purpose: they carry identical
   specificity, so source order is the only thing that decides, and the layout media query
   at the top of this sheet would lose. */
@media (max-width: 560px) {
  .hive-media .card__play span {
    width: 2rem;
    height: 2rem;
  }
  .hive-media .card__play astra-icon {
    --icon-size-md: var(--icon-size-sm);
  }
  .hive-media .card__audio {
    --aud-play-size: 2rem;
    --aud-play-icon: var(--icon-size-sm);
  }
  .hive-media .card__video {
    --vid-play-size: 2rem;
    --vid-play-icon: var(--icon-size-sm);
  }
}
/* Uploading / failed / loading states — none of them are pressable, so they drop the
   card's affordances entirely rather than inviting a click that does nothing. */
.hive-media .card--pending, .hive-media .card--skeleton {
  cursor: default;
}

.hive-media .card--pending:hover, .hive-media .card--skeleton:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--border-subtle);
}

.hive-media .card--skeleton {
  pointer-events: none;
}

/* TONE FOLLOWS THE SURFACE UNDERNEATH (the DS's documented rule): sunken on the raised card
   body, one step further to --surface-page on the tile, which is itself sunken — a skeleton
   painted in its host's own colour is invisible. The shimmer is derived from --sk-bg toward
   --surface-raised, so both keep a sweep that reads on either theme, and astra-skeleton
   drops the animation entirely under prefers-reduced-motion. */
.hive-media .card--skeleton astra-skeleton {
  --sk-bg: var(--surface-sunken);
}

/* The tile skeleton is a flex ITEM of `.card__media`, so it has no width to take an
   aspect-ratio from until it is told to fill the column. */
.hive-media .card--skeleton .card__media astra-skeleton {
  width: 100%;
  --sk-bg: var(--surface-page);
}

/* A cover that has not decoded yet — the FIRST-PAINT case, which had no loading state at
   all: the boot page is server-rendered, so a throttled connection showed two dozen flat
   grey holes with nothing to say they were still coming. The placeholder is absolutely
   positioned inside the tile the image already reserves, so it can never move anything;
   it is removed the moment the image loads (or fails). */
.hive-media .card__ph {
  position: absolute;
  inset: 0;
  width: 100%;
  --sk-bg: var(--surface-page);
}

/* When the asset's DOMINANT COLOUR is stored, the pre-load ground is that colour rather
   than a generic shimmer — the picture's own colour is a better loading statement than
   grey (the same pattern photo libraries use). No shimmer, no animation — nothing to
   reduce for reduced-motion. The skeleton above stays the fallback for assets without a
   stored colour. */
.hive-media .card__ph--tone {
  position: absolute;
  inset: 0;
}

/* The scrim over an uploading thumbnail is derived from the live surface token, so it is
   correct in either theme with no per-theme override to keep in sync. */
.hive-media .card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem);
  text-align: center;
  background: color-mix(in oklch, var(--surface-raised) 84%, transparent);
  color: var(--text-secondary);
}

.hive-media .card__overlay astra-progress-bar {
  width: 80%;
}

.hive-media .card__error {
  color: var(--danger-700);
  font-size: var(--text-sm, 0.8125rem);
}

/* ── Drop zone, scoped to the shell's MAIN region ─────────────────────
   It used to be `.media.is-dragging::after { position: fixed; inset: 1rem }` — a VIEWPORT
   rectangle, painted inside `.sh__main`. Main carries a `mask-image`, and a mask clips its
   whole painted subtree (fixed-position descendants included) to its own border box: the
   outline's left edge fell under the sidebar and its top edge under the topbar, so both
   were clipped away and only two of the four dashed edges ever reached the screen, the
   surviving one fading into the mask's top ramp. The pill was viewport-centred too — 640px
   on a 1280px window, i.e. 122px left of main's real centre, floating over the nav.
   So the frame LEAVES the masked subtree entirely: it is a direct child of <body>, sized
   from the main region's own rect each time a drag arms it. All four edges land inside the
   panel, at full strength, and the nav is visibly not part of the target. */
.media__dropzone {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-box, so the width the script computes IS the painted width — there is no
     global border-box reset in core.css and the 3px frame would otherwise push the
     right and bottom edges 6px past the region it is supposed to be outlining. */
  box-sizing: border-box;
  border: 3px dashed var(--accent-500);
  border-radius: var(--radius-card);
  background: color-mix(in oklch, var(--accent-500) 8%, transparent);
}

.media__dropzone[hidden] {
  display: none;
}

.media__dropzone-pill {
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  border-radius: 999px;
  background: var(--accent-500);
  color: var(--text-on-accent);
  font-weight: 600;
  box-shadow: var(--elevation-3);
}

.hive-media .media__more {
  display: flex;
  justify-content: center;
  padding: var(--space-3, 0.75rem) 0;
}

/* ── Edit drawer ──────────────────────────────────────────────────── */
.hive-media #edit-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}

/* ONE UNIT: the asset. The thing that plays and the facts about the file it plays are the
   same object — as two separately bordered boxes they read as two, and the audio case put
   the asset's NAME on screen three times (player title, this row, the Name field below).
   So: one plate, the preview above the facts, a hairline between them, and the DS player
   drops its own frame into it via ::part — the only sanctioned way in. */
.hive-media .drawer__asset {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  overflow: hidden;
}

.hive-media .drawer__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-height: 42vh;
  min-height: 8rem;
}

.hive-media .drawer__preview img {
  max-width: 100%;
  max-height: 42vh;
  object-fit: contain;
  display: block;
}

/* Players get the full column and no min-height — a compact transport row is exactly as
   tall as it needs to be, and an 8rem floor would open a hole under it. */
.hive-media .drawer__preview--player {
  overflow: visible;
  max-height: none;
  min-height: 0;
  display: block;
  padding: var(--space-3, 0.75rem);
}

.hive-media .drawer__preview--player > astra-audio, .hive-media .drawer__preview--player > astra-video {
  display: block;
  width: 100%;
}

.hive-media .drawer__preview--player > astra-audio::part(root) {
  background: transparent;
  border: 0;
  padding: 0;
}

/* The player's title is this asset's name, and the Name field is two rows below it. Keep
   the artwork (it is the unit's thumb), drop the duplicate. */
.hive-media .drawer__preview--player > astra-audio::part(info) {
  display: none;
}

.hive-media .drawer__readonly {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  padding: var(--space-3, 0.75rem);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

.hive-media .drawer__readonly code {
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
}

/* ── The stored palette, as a plate row ───────────────────────────
   Extraction stores a dominant colour + palette for this file; this row is where the
   operator reads them. Each chip is a copy BUTTON with its hex printed in the open —
   a value hidden behind hover is not "displayed". A plain row of the plate, exactly
   like `.drawer__readonly`: hairline above, no stripe, no box-in-a-box. */
.hive-media .drawer__palette {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem);
  border-block-start: 1px solid var(--border-subtle);
}

.hive-media .drawer__palette[hidden] {
  display: none;
}

.hive-media .drawer__swatch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.hive-media .drawer__swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-control);
  background: var(--swatch);
  /* hairline derived from the stored ink so a near-white swatch still reads on the plate */
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--swatch-ink) 18%, transparent);
}

.hive-media .drawer__swatch--dominant {
  width: 2.75rem;
  height: 2.75rem;
}

.hive-media .drawer__swatch astra-icon {
  color: var(--swatch-ink);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.hive-media .drawer__swatch:hover astra-icon, .hive-media .drawer__swatch:focus-visible astra-icon {
  opacity: 1;
}

.hive-media .drawer__swatch:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.hive-media .drawer__swatch-hex {
  display: block;
  margin-block-start: var(--space-1, 0.25rem);
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-3xs, 0.625rem);
  color: var(--text-tertiary);
}

/* 44px floor on touch — the ::after strip idiom, never a bigger visible chip */
@media (pointer: coarse) {
  .hive-media .drawer__swatch::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}
/* The cover's own state, on the asset plate it belongs to. `--quiet` because this is a row
   GROUPED with the file facts above it, not an announcement, and `--status-surface-base`
   because the plate is sunken — the utility composites its tint over whatever surface it is
   told it is sitting on. */
.hive-media .drawer__cover {
  border-block-start: 1px solid var(--border-subtle);
  --status-surface-base: var(--surface-sunken);
}

/* The callout is a ROW of the plate, not a card inside a card. `.status-surface` ships its
   own border, radius and padding from core.css — nested flush inside this square sunken
   plate those read as a second box, corners colliding with the plate's edges (the reported
   crampedness). The quiet tint stays; the box chrome goes; the row takes the plate's own
   rhythm. The surface's flex gap provides honest row-gap when the action wraps. */
.hive-media .drawer__cover > .status-surface {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3, 0.75rem);
}

.hive-media .drawer__cover-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-control);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
}

.hive-media .perm-note {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

/* ── "Where this file is used" ─────────────────────────────────────── */
/* The delete refusal, as a WORKLIST. The server resolves every live usage to a named
   place and — only when it has proved the operator can open it — a URL; this is the
   painting half. The block's own state is the TOAST IDIOM (tinted surface + leading
   status glyph, `.status-surface`), never a coloured start-edge stripe. */
.hive-media #usage-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}

/* The note QUOTES the asset's own display name, and a stored name is routinely ONE unbroken
   token (`IMG_20260814_final_v3_approved_by_marketing_and_legal_teams_hi_res.jpg`). The DS's
   `.status-surface__message` breaks on word boundaries only, so at 375px that token painted
   straight out of the panel and the file the operator is being told about was clipped
   mid-name. Same `anywhere` the rows below use — scoped to this note, the utility itself is
   untouched. */
.hive-media #usage-note .status-surface__message {
  overflow-wrap: anywhere;
}

.hive-media .usage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}

/* A BULK refusal holds several blocked files at once, so the SAME rows are grouped under
   the file they belong to. This is a heading plus a nested list — the rows themselves are
   still built by `usageRow`, there is no second row renderer, and a single blocked file
   never reaches this shell at all (it opens the ungrouped single-file worklist instead).
   `minmax(0, 1fr)` again at this nesting level: the group is a grid item too, and a 70-
   character filename with no spaces would otherwise widen the whole dialog. */
.hive-media .usage__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}

.hive-media .usage__group-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  min-width: 0;
  gap: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
  padding-block-start: var(--space-2, 0.5rem);
}

/* A stored media name is routinely ONE unbroken token — same `anywhere` the rows use. */
.hive-media .usage__group-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-semibold, 600);
}

.hive-media .usage__group-count {
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

/* Whose placements this block is listing, when they are not the block's own. Secondary
   weight and colour: it explains the list, it is not another heading — and `anywhere`
   for the same reason the name above has it, since it quotes a stored media name. */
.hive-media .usage__group-from {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

/* `minmax(0, 1fr)` on the body column is load-bearing, not decorative: a `1fr` track's
   min is `auto`, so ONE 60-character article title with no spaces widens the track past
   the panel and the whole dialog scrolls sideways at 375px. This estate has shipped that
   exact bug. The row also keeps a ≥44px tap target for the link inside it. */
.hive-media .usage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  min-height: 2.75rem;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  /* SUNKEN, like the drawer's asset plate — `--surface-raised` is the same colour as the
     modal panel in the light theme, which left five rows separated by a hairline alone. */
  background: var(--surface-sunken);
}

.hive-media .usage__row > astra-icon {
  color: var(--text-secondary);
  margin-block-start: var(--status-icon-nudge);
}

.hive-media .usage__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1, 0.25rem);
}

/* Long titles wrap INSIDE the track rather than widening it — `anywhere` because a stored
   title can be a single unbroken token (a slug, a filename, an external URL). */
.hive-media .usage__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium, 500);
}

/* The plain-text half of the rule "never offer a link that answers 403/404": a row the
   server did not prove openable is body ink, with no anchor and no pointer affordance. */
.hive-media .usage__name--plain {
  color: var(--text-primary);
}

.hive-media .usage__name astra-icon {
  margin-inline-start: var(--space-1, 0.25rem);
  vertical-align: -0.125em;
}

.hive-media .usage__meta {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

.hive-media .usage__ref {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

/* Badges AND the one action a stale row offers share this cell — the row's third
   grid track — so the clear control never needs a track of its own (which would
   change `.usage__row`'s pinned `auto minmax(0, 1fr) auto` and squeeze the title). */
.hive-media .usage__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

/* TOUCH HIT AREA. The DS's `sm` button is 2rem tall, which is the right rhythm beside a
   badge with a mouse and under the 44px minimum with a thumb — and Clear is the only
   tap target inside a row, sitting directly beneath a wrapped title. The HOST grows, so
   the extra area belongs to the element the click listener is bound to; `::part(button)`
   carries the ink so the control still LOOKS like the ghost `sm` it is everywhere else.
   Scoped to a coarse pointer (and to the narrow layout, where the badges own their own
   line anyway) — the desktop worklist keeps the DS's own sizing untouched. */
@media (pointer: coarse), (max-width: 560px) {
  .hive-media .usage__badges astra-button {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .hive-media .usage__badges astra-button::part(button) {
    min-height: 44px;
  }
}
/* ≤560px: the badges drop off the row's trailing edge onto their own line under the
   text, so the body column keeps its width instead of being squeezed to a word. */
@media (max-width: 560px) {
  .hive-media .usage__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hive-media .usage__badges {
    grid-column: 2;
  }
}
/* The layout is content-item.php's, deliberately: these are the two halves of one library
   and an operator moving between them should not have to re-learn where anything is. */
.hive-asset .content-item__head h1 {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.hive-asset .content-item__sub {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.hive-asset .content-item__sub code {
  font-family: var(--font-mono, monospace);
}

/* Two shapes from one source order. Mobile: the rail is `display: contents`, so its cards
   become direct flex items and interleave with the form — the asset, then the form, then
   the reference cards. Desktop (≥1024px): the rail reassembles as a real column beside a
   wide form, so nothing lands below the fold. */
.hive-asset .content-item__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.hive-asset .content-item__side {
  display: contents;
}

.hive-asset .content-item__main {
  min-width: 0;
  order: 0;
}

.hive-asset .ci-preview {
  order: -1;
}

/* With the preview, ahead of the form: on the page whose reported defect was a card with
   no picture, the cover belongs beside the asset it grounds, not below a metadata form.
   Ties in `order` fall back to document order, so it lands after the preview. */
.hive-asset .ci-cover {
  order: -1;
}

.hive-asset .ci-meta {
  order: 1;
}

@media (min-width: 1024px) {
  .hive-asset .content-item__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    align-items: start;
  }
  /* Both rows are pinned explicitly: auto-placement walks items in order-modified
     DOCUMENT order, so the source-first rail would push the form down to row 2. */
  .hive-asset .content-item__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .hive-asset .content-item__main {
    grid-column: 1;
    grid-row: 1;
  }
}
.hive-asset .content-item__grid form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}

.hive-asset .content-item__grid h2 {
  margin: 0;
  font-size: var(--text-md, 1rem);
}

.hive-asset .meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.hive-asset .meta-list dt {
  font-weight: 600;
}

.hive-asset .meta-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hive-asset .meta-list dd code {
  font-family: var(--font-mono, monospace);
}

.hive-asset .preview__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}

/* astra-audio/astra-video are display:block and own their frame, radius and dark-mode
   surfaces — the card only has to let them span the column. */
.hive-asset .preview__player {
  display: block;
  width: 100%;
}

/* The preview must never become a billboard: on mobile a tall asset would push the form it
   sits above off the screen entirely. Capped tight on a phone, roomier on the rail. */
.hive-asset .preview__img {
  max-height: 14rem;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hive-asset .preview__img {
    max-height: 20rem;
  }
}
.hive-asset .perm-note {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

/* ── The cover ─────────────────────────────────────────────────────
   The picture the library tile paints, at a size worth judging. The drawer can only
   afford a 40px thumb inside a status glyph slot; this is the unbounded surface, so the
   cover gets a real frame. The frame reserves its square whether or not there is a
   picture in it, so setting or clearing a cover moves nothing else on the page. */
.hive-asset .cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}

.hive-asset .cover__frame {
  aspect-ratio: 1;
  width: 100%;
  max-width: 15rem;
  margin-inline: auto;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* The designed empty state, not a grey hole: a dashed frame reads as "a place for
   something", where a filled one reads as "something that failed to load". */
.hive-asset .cover__frame--empty {
  border: 1px dashed var(--border-subtle);
  background: transparent;
}

.hive-asset .cover__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hive-asset .cover__none {
  display: grid;
  justify-items: center;
  gap: var(--space-2, 0.5rem);
  color: var(--text-tertiary);
  font-size: var(--text-sm, 0.8125rem);
}

.hive-asset .cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 0.5rem);
}

/* ── The stored palette ────────────────────────────────────────────
   Extraction stored a dominant colour + palette for this file; this row is where the
   operator reads them. Each chip is a copy BUTTON with its hex printed in the open — a
   value hidden behind hover is not "displayed". Identical to the drawer's row, so the two
   surfaces show one asset's colours the same way. */
.hive-asset .swatches {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3, 0.75rem);
  margin-block-start: var(--space-3, 0.75rem);
}

.hive-asset .swatch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

.hive-asset .swatch {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-control);
  background: var(--swatch);
  /* hairline derived from the stored ink so a near-white swatch still reads on the card */
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--swatch-ink) 18%, transparent);
}

.hive-asset .swatch--dominant {
  width: 2.75rem;
  height: 2.75rem;
}

.hive-asset .swatch astra-icon {
  color: var(--swatch-ink);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.hive-asset .swatch:hover astra-icon, .hive-asset .swatch:focus-visible astra-icon {
  opacity: 1;
}

.hive-asset .swatch:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

.hive-asset .swatch-hex {
  display: block;
  margin-block-start: var(--space-1, 0.25rem);
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: var(--text-3xs, 0.625rem);
  color: var(--text-tertiary);
}

/* 44px floor on touch — the ::after strip idiom, never a bigger visible chip */
@media (pointer: coarse) {
  .hive-asset .swatch::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    translate: -50% -50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
  }
}
/* ── "Where this file is used" ─────────────────────────────────────
   The library shows this list only when a delete is refused, because a modal has room for
   one thing at a time. A PAGE has room for it always — and it is the fact an operator most
   often opens an asset to check. The server resolves every usage to a named place and,
   ONLY when it has proved this operator can open it, a URL; this is the painting half. */
.hive-asset .usage__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}

/* `minmax(0, 1fr)` on the body column is load-bearing, not decorative: a `1fr` track's min
   is `auto`, so ONE 60-character title with no spaces widens the track past the card. */
.hive-asset .usage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  min-height: 2.75rem;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-control);
  background: var(--surface-sunken);
}

.hive-asset .usage__row > astra-icon {
  color: var(--text-secondary);
  margin-block-start: var(--status-icon-nudge);
}

.hive-asset .usage__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1, 0.25rem);
}

.hive-asset .usage__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium, 500);
}

/* The plain-text half of the rule "never offer a link that answers 403/404": a row the
   server did not prove openable is body ink, with no anchor and no pointer affordance. */
.hive-asset .usage__name--plain {
  color: var(--text-primary);
}

.hive-asset .usage__name astra-icon {
  margin-inline-start: var(--space-1, 0.25rem);
  vertical-align: -0.125em;
}

.hive-asset .usage__meta {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

.hive-asset .usage__ref {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.hive-asset .usage__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 0.25rem);
}

.hive-asset .usage__empty {
  margin: 0;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  .hive-asset .usage__row {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .hive-asset .usage__badges {
    grid-column: 2;
  }
}
/* The where-used worklist, in the SAME class names and the same shape the media
   library's refusal paints (content.php). The rules are restated rather than shared
   because every page in this portal carries its own <style> block — there is no shared
   page stylesheet to put them in — so matching the names is what keeps one file's
   refusal from looking like a different feature to the one beside it. */
.hive-item .usage__list {
  list-style: none;
  margin: var(--space-4, 1rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
}

.hive-item .usage__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
  align-items: start;
  padding: var(--space-3, 0.75rem);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-control);
  background: var(--surface-raised, transparent);
}

.hive-item .usage__row > astra-icon {
  color: var(--text-secondary);
  margin-block-start: var(--status-icon-nudge);
}

.hive-item .usage__body {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1, 0.25rem);
}

.hive-item .usage__name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: var(--weight-medium, 500);
}

.hive-item .usage__name--plain {
  color: var(--text-primary);
}

.hive-item .usage__meta {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

.hive-item .content-item__head h1 {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  overflow-wrap: anywhere;
}

.hive-item .content-item__sub {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.hive-item .content-item__sub code {
  font-family: var(--font-mono, monospace);
}

/* Two shapes from one source order.
   Mobile: the rail goes `display: contents`, so its cards become direct flex items and can
   be interleaved with the form — asset, then the form, then the reference cards. That is
   the reading order the job wants: see what the file is, edit it, consult the rest.
   Desktop (≥1024px): the rail reassembles as a real column beside a wide form — the same
   wide-main + narrow-rail shape as the article editor — so nothing is below the fold. */
.hive-item .content-item__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.hive-item .content-item__side {
  display: contents;
}

.hive-item .content-item__main {
  min-width: 0;
  order: 0;
}

.hive-item .ci-preview {
  order: -1;
}

.hive-item .ci-meta {
  order: 1;
}

@media (min-width: 1024px) {
  .hive-item .content-item__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
    align-items: start;
  }
  /* Both rows are pinned explicitly. Auto-placement walks items in order-modified
     DOCUMENT order, so the rail (source-first, column 2) advances the cursor past
     column 1 and the sparse-packing rule would push the form down to row 2. */
  .hive-item .content-item__side {
    display: flex;
    flex-direction: column;
    gap: var(--space-4, 1rem);
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
  }
  .hive-item .content-item__main {
    grid-column: 1;
    grid-row: 1;
  }
}
.hive-item .content-item__grid form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}

.hive-item .content-item__grid h2 {
  margin: 0;
  font-size: var(--text-md, 1rem);
}

.hive-item .meta-list {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
}

.hive-item .meta-list dt {
  font-weight: 600;
}

.hive-item .meta-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.hive-item .file-help {
  margin: var(--space-2, 0.5rem) 0 0;
  font-size: var(--text-sm, 0.8125rem);
  color: var(--text-secondary);
}

/* The lead line of a dialog that opens on it (Replace this file): no gap above. */
.hive-item .file-help--lead {
  margin-block-start: 0;
}

/* A small heading inside a card, under its facts (Details › Dominant colours). Moved out of
   content-item.php's style attribute (quick wins 2026-11-07). */
.hive-item .content-item__subhead {
  margin: var(--space-4, 1rem) 0 var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
}

.hive-item .file-status code {
  overflow-wrap: anywhere;
}

.hive-item .swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
}

.hive-item .swatch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.8125rem);
}

/* The chip paints an arbitrary extracted hex, so its hairline must read on either theme —
   a semantic border token, softened with color-mix rather than a hardcoded black inset. */
.hive-item .swatch__chip {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: var(--radius-sm, 4px);
  border: 1px solid var(--border-default);
  box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--border-default) 55%, transparent);
}

.hive-item .preview__img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  display: block;
}

/* astra-audio/astra-video are display:block and own their own frame, radius and dark-mode
   surfaces — the card only has to let them span the column. */
.hive-item .preview__player {
  display: block;
  width: 100%;
}

/* The preview must never become a billboard: on mobile a tall asset would push the form it
   sits above off the screen entirely, which is the failure mode leading with it could
   otherwise introduce. Capped tight on a phone, roomier on the desktop rail. */
.hive-item .preview__img {
  max-height: 14rem;
  width: auto;
  margin-inline: auto;
}

@media (min-width: 1024px) {
  .hive-item .preview__img {
    max-height: 20rem;
  }
}
.hive-item .perm-note {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

/* The manual cover's own thumbnail, inside the status surface's glyph slot — the picture
   IS the status here, so it takes the glyph's place rather than sitting beside it. */
.hive-item .cover-thumb {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-control);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
}

.hive-support .support__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  justify-content: space-between;
}

/* Count-badge heading idiom: the total is a neutral astra-badge pill, NOT heading-sized
   text. The badge stays in the heading's INLINE flow (astra-badge is inline-flex +
   vertical-align:middle, so it centres itself against the title) — a flex row would push
   the pill onto a line of its own the moment the title wraps at 375px. The `&nbsp;` before
   it keeps the pill glued to the last word so they wrap together. */
.hive-support .support__head h1 {
  margin: 0;
}

.hive-support .support__refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 0.875rem);
}

.hive-support .support__filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

.hive-support.support nav.support__back {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
}

/* Viewport-fit page: header actions stay reachable, ONE scrollable = the thread. */
.hive-ticket.ticket {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

/* The band is a DS `.page-header` now (was a bespoke flex row with a spacer). Two local
   adjustments only, both about this page's viewport-fit column and neither touching the
   zone's own layout: it must not grow, and the DS bottom margin would double the column
   gap (the same reset dashboard.php carries). */
.hive-ticket .ticket__head {
  flex: none;
}

.hive-ticket.ticket .page-header {
  margin-block-end: 0;
}

.hive-ticket .ticket__head h1 {
  margin: 0;
  font-size: var(--text-xl, 1.25rem);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── the styleguide support-panel composition: facts aside + conversation ── */
.hive-ticket .ticket__panel {
  flex: 1;
  min-height: 18rem;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-card, 0.75rem);
  overflow: hidden;
  background: var(--surface-raised, #fff);
  box-shadow: var(--elevation-2, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.hive-ticket .ticket__aside {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
  background: var(--surface-sunken, #f9fafb);
  border-inline-end: 1px solid var(--border-subtle, #e5e7eb);
  overflow-y: auto;
  min-height: 0;
}

.hive-ticket .ticket__aside .aside-name {
  font-weight: var(--weight-semibold, 600);
  font-size: var(--text-md, 1.0625rem);
  color: var(--text-primary, #111827);
  overflow-wrap: anywhere;
}

.hive-ticket .ticket__aside .aside-sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #9ca3af);
  overflow-wrap: anywhere;
}

.hive-ticket .ticket__facts {
  width: 100%;
  margin: var(--space-4, 1rem) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.hive-ticket .ticket__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
}

.hive-ticket .ticket__facts dt {
  color: var(--text-tertiary, #9ca3af);
  margin: 0;
}

.hive-ticket .ticket__facts dd {
  color: var(--text-primary, #111827);
  margin: 0;
  font-weight: var(--weight-medium, 500);
  overflow-wrap: anywhere;
  text-align: end;
}

/* Both links live on themed surfaces, so they take the semantic accent token — never a
   hardcoded blue, which would fail against the dark theme's sunken aside.
   --accent-ink, NOT --accent-600: the numbered steps are theme-INVARIANT, so a step
   chosen to darken on paper darkens INTO the paper on a dark page. This rule is (0,2,1)
   and so OVERRIDES the DS's own `a { color: var(--accent-ink) }` base rule — the DS fix
   does not reach it. Measured on --surface-sunken in dark, admin group: -600 gave
   3.41:1 on a 12px link, under the 4.5 floor; --accent-ink lands 5.11+. */
.hive-ticket .ticket__facts a, .hive-ticket .aside-mail {
  color: var(--accent-ink, inherit);
}

.hive-ticket .ticket__facts a:hover, .hive-ticket .aside-mail:hover {
  text-decoration: underline;
}

.hive-ticket .ticket__convo {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.hive-ticket .convo__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-block-end: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface-raised, #fff);
}

.hive-ticket .convo__head-title {
  font-weight: var(--weight-semibold, 600);
  color: var(--text-primary, #111827);
}

.hive-ticket .convo__head-sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #9ca3af);
}

.hive-ticket #ticket-chat {
  flex: 1;
  min-height: 0;
}

.hive-ticket .convo__closed {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  border-block-start: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface-sunken, #f9fafb);
  color: var(--text-secondary, #6b7280);
  font-size: var(--text-sm, 0.875rem);
}

/* ── mobile: facts stack above the thread as a compact strip ── */
@media (max-width: 820px) {
  .hive-ticket .ticket__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .hive-ticket .ticket__aside {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    text-align: start;
    border-inline-end: 0;
    border-block-end: 1px solid var(--border-subtle, #e5e7eb);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    overflow: visible;
  }
  .hive-ticket .ticket__aside .aside-id {
    flex: 1;
    min-width: 0;
  }
  .hive-ticket .ticket__facts {
    margin: 0;
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-2, 0.5rem) var(--space-4, 1rem);
  }
  .hive-ticket .ticket__facts > div {
    gap: var(--space-1, 0.25rem);
  }
}
/* The console fills the shell's main viewport: exactly ONE scrollable exists — the
   message history inside <astra-chat> (plus the thread list's own column). */
.hive-chat.chat {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 1rem);
}

.hive-chat .chat__head {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
}

.hive-chat .chat__head h1 {
  margin: 0;
  font-size: var(--text-2xl, 1.5rem);
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.hive-chat .chat__filters {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* ── the panel: the styleguide support-panel composition (list | conversation) ── */
.hive-chat .chat-panel {
  flex: 1;
  min-height: 20rem;
  display: grid;
  grid-template-columns: minmax(260px, 340px) 1fr;
  border: 1px solid var(--border-subtle, #e5e7eb);
  border-radius: var(--radius-card, 0.75rem);
  overflow: hidden;
  background: var(--surface-raised, #fff);
  box-shadow: var(--elevation-2, 0 1px 3px rgba(0, 0, 0, 0.1));
}

.hive-chat .pane-list {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-inline-end: 1px solid var(--border-subtle, #e5e7eb);
}

.hive-chat .pane-list__scroll {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-2, 0.5rem);
}

.hive-chat .pane-conv {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

/* ── thread rows: DS list idiom (avatar · name/preview · relative time) ── */
.hive-chat .thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hive-chat .thread {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  text-align: start;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  cursor: pointer;
}

.hive-chat .thread:hover {
  background: var(--surface-sunken, #f3f4f6);
}

.hive-chat .thread:focus-visible {
  outline: 2px solid var(--accent-500, #6d28d9);
  outline-offset: -2px;
}

.hive-chat .thread.is-active {
  background: color-mix(in oklch, var(--accent-500, #6d28d9) 10%, transparent);
}

.hive-chat .thread.is-active:hover {
  background: color-mix(in oklch, var(--accent-500, #6d28d9) 14%, transparent);
}

.hive-chat .thread astra-avatar {
  flex: none;
}

.hive-chat .thread__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.hive-chat .thread__top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
}

.hive-chat .thread__name {
  flex: 1;
  min-width: 0;
  font-weight: var(--weight-medium, 500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-chat .thread.is-unread .thread__name {
  font-weight: var(--weight-semibold, 600);
}

.hive-chat .thread__time {
  flex: none;
  font-size: var(--text-2xs, 0.6875rem);
  color: var(--text-tertiary, #9ca3af);
  white-space: nowrap;
}

.hive-chat .thread__bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
}

.hive-chat .thread__preview {
  flex: 1;
  min-width: 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary, #6b7280);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-chat .thread.is-unread .thread__preview {
  color: var(--text-primary, #111827);
}

.hive-chat .thread__dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-500, #6d28d9);
}

/* A ghost row wears the REAL row's class so it is the same box — it only has to give
   back the affordances a row that cannot be pressed must not offer. */
.hive-chat .thread--skeleton {
  cursor: default;
}

.hive-chat .thread--skeleton:hover {
  background: none;
}

/* ── conversation header (styleguide sg-support-head idiom) ── */
.hive-chat .conv__head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-block-end: 1px solid var(--border-subtle, #e5e7eb);
  background: var(--surface-raised, #fff);
  min-height: 3.25rem;
}

.hive-chat .conv__back {
  display: none;
  flex: none;
}

.hive-chat .conv__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.hive-chat .conv__id h2 {
  margin: 0;
  font-size: var(--text-base, 1rem);
  font-weight: var(--weight-semibold, 600);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-chat .conv__sub {
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #9ca3af);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-chat .conv__tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
}

.hive-chat #conv-chat {
  flex: 1;
  min-height: 0;
}

.hive-chat #conv-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── mobile: master-detail — ONE pane at a time, back button in the conv header ── */
@media (max-width: 820px) {
  .hive-chat .chat-panel {
    grid-template-columns: 1fr;
  }
  .hive-chat .chat-panel[data-pane=list] .pane-conv {
    display: none;
  }
  .hive-chat .chat-panel[data-pane=conv] .pane-list {
    display: none;
  }
  /* Reading a conversation, the page title, the availability switch and BOTH filter tab
     rows are list-pane chrome — they steered which threads are listed, and none of them
     act on the open thread. They were costing ~290px of a 812px viewport, i.e. more than
     a third of the screen, above a conversation. In the detail pane they step aside
     entirely and the thread takes the whole viewport; going Back restores them. */
  .hive-chat.chat:has(.chat-panel[data-pane=conv]) .chat__head,
  .hive-chat.chat:has(.chat-panel[data-pane=conv]) .chat__filters {
    display: none;
  }
  .hive-chat .conv__back {
    display: inline-flex;
  }
  /* Narrow header: the name keeps priority; the tools wrap under it when tight. */
  .hive-chat .conv__head {
    flex-wrap: wrap;
    row-gap: var(--space-1, 0.25rem);
  }
  .hive-chat .conv__id {
    min-width: 8rem;
  }
}
.hive-dash.dashboard h1 {
  margin: 0;
}

/* Whose figures these are, said once in the body. The chrome names the workspace in the
   switcher and the <title>, but the switcher is a control, not a caption — and on the
   overview the numbers are the WHOLE platform's while the chrome still reads JW HIVE. */
.hive-dash .dashboard__scope {
  margin: var(--space-1, 0.25rem) 0 0;
  color: var(--text-secondary, #555);
  font-size: var(--text-sm, 0.875rem);
}

/* auto-FIT, not auto-fill: four cards fill the row instead of leaving a phantom fifth
   track. The 150px floor keeps TWO tiles per row on a 375px phone, so the needs-attention
   queue lands near the fold instead of under four full-width tiles.
   A CEILING ON THE BAND, not on the track (item 2). Brands carry different numbers of
   figures — four on JW MUSIC, two on JW SHOP — and `1fr` tracks made JW SHOP's two stretch
   to half the window each: the same instrument read as a 466px slab on one brand and a
   225px tile on the next, which is exactly the recognition the per-brand split depends on.
   The cap is the width THIS MANY cards want (20rem each + the gaps), so a four-card strip
   is untouched at every width the console is used at and a short one simply ends early.
   It has to live on the container: `repeat(auto-fit, minmax(150px, 20rem))` would compute
   its repetition count from the definite 20rem MAX and drop a four-card row to two tracks;
   capping the CARD instead would leave the cards adrift inside stretched tracks. And it
   belongs on a MODIFIER, not on .stats itself — the no-figures render puts an empty state
   in this band instead of cards, and a sentence is not a strip of tiles to be capped. */
.hive-dash .stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-4, 1rem);
}

.hive-dash .stats--strip {
  max-width: calc(var(--stats-count, 4) * 20rem + (var(--stats-count, 4) - 1) * var(--space-4, 1rem));
}

/* EQUAL-HEIGHT CARDS (item 3) now come from the component itself: astra-stats-card binds
   its painted box to the host (height:100% + border-box on .sc, DS commit cd6987e), so the
   ::part(card){height:100%} patch this page used to carry would be a dead duplicate of the
   default — measured 110/110/110/110 at 1280 with no page rule. Do not re-add it. */
/* The "no figures" state is a statement about the whole band, so it spans every track
   instead of being squeezed into one 150px column. */
.hive-dash .stats astra-empty-state {
  grid-column: 1/-1;
}

@media (max-width: 600px) {
  /* The stats card's display-serif value is 36px — too wide for "£335.99" in a
     half-width tile. ::part(value) is the component's own styling API. */
  .hive-dash .stats astra-stats-card::part(value) {
    font-size: var(--text-2xl, 1.75rem);
  }
  /* heading-xl is a fixed 36px (the DS type scale has no responsive step), so the title
     would wrap under the header CTA on a 375px phone. Stepped down until the heading and
     the Create CTA share one line — the same treatment shop-order-detail gives its h1. */
  .hive-dash.dashboard h1 {
    font-size: var(--text-xl, 1.375rem);
  }
}
.hive-dash .attention {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

/* Count idiom (sweep item 19): the "how many" number is a bare astra-badge pill, never
   parenthesised text inheriting the heading's typography. The badge stays in the heading's
   INLINE flow — astra-badge is inline-flex + vertical-align:middle, so it centres itself
   against the title — and the &nbsp; glues it to the last word so both wrap together at
   375px. The per-section pills inside the cards are the same idiom, warning-toned. */
.hive-dash .attention h2 {
  margin: 0;
  font-size: var(--text-lg, 1.125rem);
}

.hive-dash .attention__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4, 1rem);
}

/* EQUAL-HEIGHT CARDS for the needs-attention row — the idiom the NineFive dashboard set.
   `align-items: start` here was the ragged desktop row: three cards, three bottom edges
   (measured 313.5 / 110.5 / 240.5 at 1280). The grid now stretches the HOSTS (default),
   and ::part(card) — astra-card's own styling API, the only selector that reaches the
   painted box inside its shadow root — stretches the surface with them. Content stays
   top-aligned: .card is a flex column whose body carries flex:1, so the extra height lands
   in the body and the "View all" footers line up across the row. border-box because a
   shadow root gets none of the page's reset. astra-card has NO equal-height default (a
   lone card in a form column must keep its natural height), so this page rule is the
   correct layer — only astra-stats-card equalises by itself. */
.hive-dash .attention__grid astra-card::part(card) {
  height: 100%;
  box-sizing: border-box;
}

.hive-dash .attention__head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  width: 100%;
  min-width: 0;
  color: var(--text-secondary, #555);
  font-size: var(--text-sm, 0.875rem);
  font-weight: var(--weight-semibold, 600);
}

.hive-dash .attention__head astra-icon {
  flex-shrink: 0;
}

.hive-dash .attention__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-dash .attention__head astra-badge {
  margin-inline-start: auto;
  flex-shrink: 0;
}

.hive-dash .attention__rows {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hive-dash .attention__row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem) 0;
  border-block-start: 1px solid var(--border-subtle, #eee);
  text-decoration: none;
  color: inherit;
  min-width: 0;
}

/* The card header already draws a rule above the first row. */
.hive-dash .attention__rows li:first-child .attention__row {
  border-block-start: 0;
  padding-block-start: 0;
}

/* --accent-ink, NOT --accent-500. The 500 step is a SURFACE colour — it is what a filled
   button is painted with — and the one thing it can never be used for is TEXT an operator
   has to read. Measured on this row in dark mode: 3.61:1 against the card, under WCAG's
   4.5:1 floor for this size — on the most-tapped control of the landing page, and only on
   HOVER, which is exactly when a link should become MORE legible. --accent-ink is the token
   that exists for accent-coloured text and clears the floor in both themes (6.25:1 here).
   The raw-hex fallback went with it: a hex fallback for an ink token is the same bug
   wearing a coat, since it cannot follow the workspace accent or the theme. */
.hive-dash .attention__row:hover .attention__label {
  color: var(--accent-ink);
  text-decoration: underline;
}

/* COARSE POINTERS GET A REAL TARGET. These rows measure ~27.5px tall on a phone — well under
   the 44px floor the platform holds every other control to — and they are the primary way
   into whatever needs attention today. The first row's border rule is removed above, which
   is what makes it the SHORTEST of them, so it gets its padding back here rather than being
   the one row that stays too small. */
@media (pointer: coarse) {
  .hive-dash .attention__row {
    min-block-size: 44px;
    align-items: center;
  }
  .hive-dash .attention__rows li:first-child .attention__row {
    padding-block-start: var(--space-2, 0.5rem);
  }
}
.hive-dash .attention__label {
  font-size: var(--text-sm, 0.875rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hive-dash .attention__meta {
  margin-inline-start: auto;
  flex-shrink: 0;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #888);
}

.media-usedon {
  display: grid;
  gap: var(--space-2);
}

.media-usedon__label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

.media-usedon__none {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

.media-fields__group {
  display: grid;
  gap: var(--space-4);
}

.hive-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.hive-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
}
.hive-link-row > astra-button {
  margin-block-start: calc(var(--type-ui-size) * var(--leading-snug) + var(--space-stack-xs));
}

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

.hive-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5, 0.375rem);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hive-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-5);
}
.hive-card-grid > astra-card::part(card) {
  height: 100%;
  box-sizing: border-box;
}

.hive-switch-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}
.hive-switch-row > astra-switch {
  flex: none;
}

.hive-switch-row__label {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.hive-access {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.hive-access__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hive-access__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-weight: var(--weight-medium);
}

.hive-bulk-roles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.hive-bulk-roles__label {
  flex-basis: 100%;
}

.hive-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-3);
}

.hive-role-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
}

.hive-role-brand__label {
  font-weight: var(--weight-semibold);
}

.hive-role-brand__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.hive-role-brand__opts label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5, 0.375rem);
  font-size: var(--text-sm);
}

.hive-role-brand__preview {
  min-height: 1lh;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.hive-role-brand__advanced {
  font-size: var(--text-sm);
}
.hive-role-brand__advanced astra-accordion-item:last-of-type {
  border-block-end: 0;
}

.hive-overrides {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5, 0.375rem);
  margin-block-start: var(--space-2);
}

.hive-overrides__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.hive-overrides__row label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.hive-overrides__label {
  flex: 1;
  min-width: 6rem;
}

.hive-editor {
  max-width: 48rem;
}

.hive-role-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-3);
}

.hive-role-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
.hive-role-card[data-editable] {
  cursor: pointer;
  transition: border-color var(--motion-hover), background-color var(--motion-hover);
}
.hive-role-card[data-editable]:hover {
  border-color: var(--border-strong);
  background: var(--surface-sunken);
}

.hive-role-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.hive-role-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1-5, 0.375rem);
  font-weight: var(--weight-semibold);
}

.hive-role-card__perms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
}

.hive-role-card__holders {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.hive-role-card__actions {
  display: flex;
  gap: var(--space-2);
  margin-block-start: var(--space-1);
}

.hive-perm-group {
  display: grid;
  gap: var(--space-3);
}

.hive-perm-group__title {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.hive-perm-matrix {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--space-2);
}

.hive-perm-key {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding-inline: var(--space-3);
}
.hive-perm-key astra-accordion-item:last-of-type {
  border-block-end: 0;
}

.hive-perm-key__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-3);
  padding-block-end: var(--space-3);
}

.hive-perm-key__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.demo-thread {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-raised);
  box-shadow: var(--elevation-2);
}

.demo-thread__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  background: var(--surface-sunken);
  border-inline-end: 1px solid var(--border-subtle);
  min-width: 0;
}

.demo-thread__who {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.demo-thread__name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}

.demo-thread__sub {
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  overflow-wrap: anywhere;
}

.demo-thread__facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.demo-thread__facts > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
}
.demo-thread__facts dt {
  color: var(--text-tertiary);
  margin: 0;
}
.demo-thread__facts dd {
  color: var(--text-primary);
  margin: 0;
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
  text-align: end;
}

.demo-thread__facts a,
.demo-thread__sub a {
  color: var(--accent-ink, inherit);
}

.demo-thread__convo {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  min-width: 0;
}

.demo-thread__history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-thread__entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
}

.demo-thread__entry-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.demo-thread__entry-body {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-primary);
}

.demo-thread__composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.demo-thread__composer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
}

@media (max-width: 820px) {
  .demo-thread {
    grid-template-columns: 1fr;
  }
  .demo-thread__aside {
    border-inline-end: 0;
    border-block-end: 1px solid var(--border-subtle);
  }
}
.music-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.music-card-title {
  margin: 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.music-card-title__meta {
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.music-fact {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.music-fact__value {
  margin-inline-start: var(--space-2);
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.mix-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1024px) {
  .mix-editor {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  }
}
.mix-editor__col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
}

.mix-editor__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.mix-editor__wide {
  grid-column: 1/-1;
  min-width: 0;
}

.mix-player {
  display: block;
  inline-size: 100%;
  min-inline-size: 0;
}

.mix-player::part(root) {
  background: transparent;
  border: 0;
  padding: 0;
}

.mix-player::part(artwork),
.mix-player::part(info) {
  display: none;
}

.mix-player::part(playcol) {
  flex-direction: row;
  align-items: center;
  gap: var(--space-inline);
}

.mix-tracklist {
  --repeater-columns: 5.5rem minmax(0, 1fr) minmax(0, 1fr) minmax(0, 16rem);
}

@media (max-width: 720px) {
  .mix-tracklist {
    --repeater-columns: 4.5rem minmax(0, 1fr);
  }
  .mix-tracklist [data-field=title],
  .mix-tracklist [data-field=release] {
    grid-column: 1/-1;
  }
  .mix-tracklist .repeater__row + .repeater__row {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
  }
}
.mix-list-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.mix-list-tools__sort {
  inline-size: 11rem;
}

.music-field {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.music-label {
  font-size: var(--type-ui-size, var(--text-sm));
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  line-height: var(--leading-snug, 1.35);
}

.music-pick-rows {
  --repeater-columns: minmax(10rem, 14rem) minmax(0, 1fr);
}

.music-pick {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.music-pick__new {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}
.music-pick__new[hidden] {
  display: none;
}
.music-pick__new [data-field]::part(label) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.music-pick__new--pair {
  grid-template-columns: minmax(0, 1fr) 6.5rem;
}

@media (max-width: 600px) {
  .music-pick-rows {
    --repeater-columns: minmax(0, 1fr);
  }
  .music-pick-rows .repeater__row + .repeater__row {
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--border-subtle);
  }
}
.tile-board.music-artist-tiles {
  --tile-ratio: 1 / 1;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr));
}

.music-artist-tiles__monogram {
  font-size: var(--text-3xl, 2rem);
  font-weight: var(--weight-semibold);
  color: var(--accent-ink, var(--text-secondary));
}

@media (max-width: 600px) {
  .tile-board.music-artist-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
}
.artist .artist__ident {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-inline-size: 0;
}
.artist .artist__thumb {
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--radius-control);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken);
  flex: none;
}
.artist .artist__thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.artist h2 {
  margin: 0;
  font-size: var(--text-md);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.artist h3.muted {
  font-weight: var(--weight-medium);
}

.artist__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 1024px) {
  .artist__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  }
}
.artist__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.artist__profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 720px) {
  .artist__profile {
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
  }
  .artist__profile > :is(.page-cta, .form-msg, .artist__socials) {
    grid-column: 1/-1;
  }
  .artist__profile > .artist__photo {
    align-self: stretch;
    padding-block-end: calc(var(--space-stack-xs) + var(--text-xs));
  }
  .artist__photo astra-media-picker {
    block-size: 100%;
  }
  .artist__photo astra-media-picker::part(root) {
    display: flex;
    flex-direction: column;
    block-size: 100%;
  }
  .artist__photo astra-media-picker::part(trigger) {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
  .artist__photo astra-media-picker::part(empty) {
    flex: 1 1 auto;
    box-sizing: border-box;
  }
}
.artist__photo {
  display: grid;
  min-inline-size: 0;
}

.artist__photo astra-media-picker {
  display: block;
}

.artist__photo-view {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}

.artist__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-inline-size: 0;
}

.artist__bio {
  white-space: pre-line;
  color: var(--text-primary);
}

.artist__links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.artist__links a {
  color: var(--accent-ink, inherit);
}

.artist .credit-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.artist .credit-list a {
  display: flex;
  flex-direction: column;
  min-block-size: 44px;
  justify-content: center;
  padding: var(--space-2);
  border-radius: var(--radius-control);
  color: inherit;
  text-decoration: none;
  min-inline-size: 0;
}
.artist .credit-list a:hover {
  background: var(--surface-sunken);
}
.artist .credit-list b {
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.artist .credit-list small {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
}
.artist .payee-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}
.artist .payee-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem auto;
  gap: var(--space-2);
  align-items: start;
}
.artist .payee-row__chip {
  grid-column: 1/-1;
  margin: 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}
.artist .payee-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-wrap: wrap;
  margin-block-start: var(--space-3);
}
.artist .payee-total {
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.artist .impact-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.artist .impact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
}
.artist .impact-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.artist .impact-row__moves {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.artist .muted {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.artist .modal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

@media (min-width: 720px) {
  .artist .credit-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
}
@media (max-width: 560px) {
  .artist .payee-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .artist .payee-row astra-number-input[name=percent] {
    grid-column: 1/2;
  }
}
.music-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

.music-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  inline-size: 100%;
  min-block-size: 2rem;
}

.music-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--space-4);
  align-items: start;
}

.music-meta__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.music-meta__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 40px;
  padding-block: var(--space-1);
  padding-inline: calc(var(--level, 0) * 1.25rem + var(--space-2)) var(--space-1);
  border-radius: var(--radius-control);
  transition: background-color var(--duration-fast, 120ms) ease;
}
.music-meta__row:hover {
  background: var(--surface-sunken);
}
.music-meta__row astra-dropdown {
  flex: none;
  margin-inline-start: auto;
}

.music-meta__name {
  flex: 1 1 auto;
  min-inline-size: 0;
  font-weight: var(--weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.music-meta__label {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: grid;
  gap: 2px;
}

.music-meta__count {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.music-meta__row astra-segmented {
  flex: none;
}

.music-releases .music__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-releases .music__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-releases .music__actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
}
.music-releases .music__tools {
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  align-items: center;
}
.music-releases .music__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 0.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .music-releases .music__filters {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
  }
}
.music-releases .art-thumb {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-control);
  object-fit: cover;
  display: block;
  background: var(--surface-sunken, #f5f5f5);
}
.music-releases .art-thumb--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary, #9ca3af);
}

.music-release .release__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-release h2 {
  margin: 0;
  font-size: var(--text-md, 1rem);
}
.music-release .section-title {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-release .release__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .music-release .release__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  }
}
.music-release form, .music-release .release__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.music-release .release__flags {
  display: flex;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}
.music-release .release__genres {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
  max-height: 20rem;
  overflow-y: auto;
}
.music-release .card-actions {
  margin-bottom: var(--space-2, 0.5rem);
}
.music-release .release__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.music-release .danger-row {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
}
.music-release .save-progress {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
}
.music-release .save-progress[hidden] {
  display: none;
}
.music-release .save-progress astra-progress-bar {
  flex: 1;
  min-width: 8rem;
}
.music-release .save-progress [data-progress-text] {
  font-variant-numeric: tabular-nums;
}
.music-release .stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}
.music-release .tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-sm);
}
.music-release .tracklist__row {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-inline-sm);
  padding: var(--space-inset-xs);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-control);
  background: var(--surface-raised, #fff);
}
.music-release .tracklist__row[draggable=true] {
  cursor: grab;
}
.music-release .tracklist__row.is-dragging {
  opacity: 0.4;
}
.music-release .tracklist__row.is-over {
  border-color: var(--accent-500, #6366f1);
}
.music-release .tracklist__grip {
  color: var(--text-tertiary, #9ca3af);
  display: inline-flex;
}
.music-release .tracklist__pos {
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--surface-sunken, #f5f5f5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
}
.music-release .tracklist__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.music-release .tracklist__title {
  font-weight: 500;
  overflow-wrap: anywhere;
  color: inherit;
  text-decoration: none;
}
.music-release .tracklist__title:hover, .music-release .tracklist__title:focus-visible {
  text-decoration: underline;
}
.music-release .tracklist__hint {
  color: var(--text-tertiary, #6b7280);
  font-size: var(--text-xs, 0.75rem);
  overflow-wrap: anywhere;
}
.music-release .tracklist__player {
  grid-column: 1/-1;
}
.music-release .tracklist__noaudio {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: var(--space-inline-sm);
  flex-wrap: wrap;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #6b7280);
}
.music-release .splits-block {
  margin-top: var(--space-stack-lg);
  gap: var(--space-stack-lg);
}
.music-release .attach-modal {
  display: grid;
  gap: var(--space-stack-lg);
}
.music-release .attach-modal__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-stack-sm);
}
.music-release .attach-modal__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-inline);
  padding: var(--space-inset-xs);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-control);
}
.music-release .attach-modal__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.music-release .money-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.music-release .money-table-wrap {
  overflow-x: auto;
}
.music-release .money-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm, 0.875rem);
}
.music-release .money-table th, .music-release .money-table td {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  text-align: end;
  white-space: nowrap;
}
.music-release .money-table th:first-child, .music-release .money-table td:first-child {
  text-align: start;
}
.music-release .money-table thead th {
  color: var(--text-secondary, #6b7280);
  font-weight: 600;
  border-bottom: 1px solid var(--border-default, #e5e7eb);
}
.music-release .money-table tbody td {
  border-bottom: 1px solid var(--border-subtle, #f0f0f0);
}
.music-release .money-table tfoot td {
  font-weight: 600;
}
.music-release .money-recoup {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary, #6b7280);
}
.music-release .money-cats {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
}
.music-release .money-cats b {
  color: var(--text-primary, #111827);
  font-weight: 600;
}

.music-create .create__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-create .create__head h1 {
  margin: 0;
}
.music-create h2 {
  margin: 0;
  font-size: var(--text-md, 1rem);
}
.music-create .create__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .music-create .create__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  }
}
.music-create .create__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.music-create .create__flags {
  display: flex;
  gap: var(--space-4, 1rem);
  flex-wrap: wrap;
}
.music-create .create__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.music-create .danger-row {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
}
.music-create .create__progress {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #6b7280);
}
.music-create .create__progress[hidden] {
  display: none;
}
.music-create .create__progress astra-progress-bar {
  flex: 1;
  min-width: 8rem;
}
.music-create .create__progress [data-progress-text] {
  font-variant-numeric: tabular-nums;
}
.music-create .tracklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1, 0.25rem);
}
.music-create .tracklist__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  padding: var(--space-2, 0.5rem);
  border: 1px solid var(--border-default, #e5e7eb);
  border-radius: var(--radius-control);
  background: var(--surface-raised, #fff);
  cursor: grab;
}
.music-create .tracklist__row.is-dragging {
  opacity: 0.4;
}
.music-create .tracklist__row.is-over {
  border-color: var(--accent-500, #6366f1);
}
.music-create .tracklist__grip {
  color: var(--text-tertiary, #9ca3af);
  display: inline-flex;
}
.music-create .tracklist__pos {
  min-width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--surface-sunken, #f5f5f5);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm, 0.875rem);
  font-weight: 600;
}
.music-create .tracklist__meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.music-create .tracklist__title {
  font-weight: 500;
  overflow-wrap: anywhere;
}
.music-create .tracklist__hint {
  color: var(--text-tertiary, #6b7280);
  font-size: var(--text-xs, 0.75rem);
  overflow-wrap: anywhere;
}
.music-create .tracklist__player {
  flex: 1 0 100%;
}
.music-create .tracklist__noaudio {
  flex: 1 0 100%;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-tertiary, #6b7280);
}

.music-track .track__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-track h2 {
  margin: 0;
  font-size: var(--text-md, 1rem);
}
.music-track .track__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
  align-items: start;
}
@media (min-width: 1024px) {
  .music-track .track__grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
  }
}
.music-track .track__side {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4, 1rem);
}
.music-track form, .music-track .track__fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.music-track .release-chips {
  display: flex;
  gap: var(--space-inline-sm);
  align-items: center;
  flex-wrap: wrap;
}
.music-track .muted {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}

.music-tracks .tracks__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-tracks .tracks__filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 0.75rem);
  align-items: start;
}
@media (min-width: 900px) {
  .music-tracks .tracks__filters {
    grid-template-columns: repeat(3, minmax(160px, 260px));
  }
}
.music-tracks .release-chips {
  display: flex;
  gap: var(--space-inline-sm);
  align-items: center;
  flex-wrap: wrap;
}
.music-tracks .tracks__unattached {
  color: var(--text-tertiary, #6b7280);
  font-size: var(--text-sm, 0.875rem);
}

.music-income .income__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-income .income__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-income .income__head-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.music-income .income__scope {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
}
.music-income .income__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.music-income .income__typecard {
  display: none;
}
.music-income .income__split {
  margin: 0;
  display: flex;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}
.music-income .income__split b {
  color: var(--text-primary);
  font-weight: 600;
}
@media (min-width: 720px) {
  .music-income .income__typecard {
    display: block;
  }
  .music-income .income__split {
    display: none;
  }
}
.music-income .income__filters {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: end;
  flex-wrap: wrap;
}
.music-income .income__filters astra-combobox {
  min-width: 180px;
  max-width: 280px;
  flex: 1 1 180px;
}
.music-income #income-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
}
.music-income #income-history {
  margin-top: var(--space-3, 0.75rem);
}
.music-income .rev-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
  margin: var(--space-2, 0.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.music-income .rev-row {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-control);
  background: var(--surface-sunken, #f5f5f5);
}
.music-income .rev-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
}
.music-income .rev-row__why {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary, #666);
}

.music-import .import__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-import .import__head h1 {
  margin: 0;
}
.music-import .import__intro {
  margin: 0;
  max-width: 68ch;
  color: var(--text-secondary, #555);
  font-size: var(--text-sm, 0.875rem);
}
.music-import .import__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.music-import .import__file {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
}
.music-import .import__file strong {
  overflow-wrap: anywhere;
}
.music-import .import__tools {
  display: flex;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
  align-items: center;
}
.music-import .import__commitbar {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: center;
  flex-wrap: wrap;
}
.music-import .import__commitbar span {
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary, #555);
}
.music-import #resolve-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3, 0.75rem);
}
.music-import .result-figures {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  font-size: var(--text-sm, 0.875rem);
}
.music-import .result-figures dt {
  color: var(--text-secondary, #555);
}
.music-import .result-figures dd {
  margin: 0;
  font-weight: 600;
}
.music-import .result-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  margin-top: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.music-costs .costs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-costs .costs__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-costs .costs__head-actions {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
}
.music-costs .costs__scope {
  display: flex;
  gap: var(--space-2, 0.5rem);
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
}
.music-costs .costs__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.music-costs .costs__catcard {
  display: none;
}
.music-costs .costs__split {
  margin: 0;
  display: flex;
  gap: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}
.music-costs .costs__split b {
  color: var(--text-primary);
  font-weight: 600;
}
@media (min-width: 720px) {
  .music-costs .costs__catcard {
    display: block;
  }
  .music-costs .costs__split {
    display: none;
  }
}
.music-costs .costs__filters {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: end;
  flex-wrap: wrap;
}
.music-costs .costs__filters astra-select {
  min-width: 160px;
  max-width: 240px;
  flex: 1 1 160px;
}
.music-costs #cost-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
}
.music-costs #cost-history {
  margin-top: var(--space-3, 0.75rem);
}
.music-costs .rev-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2, 0.5rem);
  margin: var(--space-2, 0.5rem) 0 0;
  padding: 0;
  list-style: none;
}
.music-costs .rev-row {
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  border-radius: var(--radius-control);
  background: var(--surface-sunken, #f5f5f5);
}
.music-costs .rev-row__head {
  display: flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  flex-wrap: wrap;
  font-size: var(--text-sm, 0.875rem);
}
.music-costs .rev-row__why {
  margin: var(--space-1, 0.25rem) 0 0;
  font-size: var(--text-xs, 0.75rem);
  color: var(--text-secondary, #666);
}

.music-payments .pay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-payments .pay__head h1 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}
.music-payments .pay__picker {
  display: flex;
  gap: var(--space-3, 0.75rem);
  align-items: end;
  flex-wrap: wrap;
}
.music-payments .pay__picker astra-combobox {
  min-width: 18rem;
  flex: 1 1 18rem;
}
.music-payments .pay__totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3, 0.75rem);
}
.music-payments .muted {
  margin: 0;
  font-size: var(--text-sm, 0.875rem);
  color: var(--text-secondary);
}
.music-payments #payment-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-stack);
}

.pixel-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-4) var(--space-5, 1.25rem);
}
.pixel-facts > div {
  display: grid;
  gap: 2px;
  min-inline-size: 0;
  align-content: start;
}
.pixel-facts dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}
.pixel-facts dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.pixel-facts dd a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.pixel-facts--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tile-board.pixel-library {
  --tile-ratio: 1 / 1;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.5rem), 1fr));
}
.tile-board.pixel-library .tile-board__media > :is(astra-audio, astra-video) {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.tile-board.pixel-library .tile-board__media + .tile-board__open {
  block-size: auto;
}
.tile-board.pixel-library .tile-board__badge {
  inset-inline-end: auto;
  inset-inline-start: var(--space-2);
}
.tile-board.pixel-library .tile-board__ph astra-icon {
  inline-size: 2rem;
  block-size: 2rem;
}
.tile-board.pixel-library .tile-board__title {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.pixel-library__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
}

.pixel-library__selects {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2) var(--space-3);
  margin-inline-start: auto;
}
.pixel-library__selects astra-select {
  min-inline-size: 10rem;
}
@media (max-width: 599.98px) {
  .pixel-library__selects {
    margin-inline-start: 0;
    inline-size: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }
  .pixel-library__selects astra-select {
    min-inline-size: 0;
  }
}

.pixel-item {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .pixel-item {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 21rem);
  }
}

.pixel-item__main,
.pixel-item__aside {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-inline-size: 0;
}

@media (min-width: 1024px) {
  .pixel-item__aside {
    position: sticky;
    inset-block-start: var(--space-4);
  }
}
.pixel-item__fact-action {
  margin-block-start: var(--space-4);
}

.pixel-facts > .pixel-facts__wide {
  grid-column: 1/-1;
}

.pixel-item__stage {
  margin: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--accent-500) 8%, transparent), transparent 70%), var(--surface-sunken);
  border: 1px solid var(--border-subtle);
}
.pixel-item__stage > img {
  display: block;
  max-inline-size: 100%;
  max-block-size: min(62vh, 36rem);
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
.pixel-item__stage > astra-video {
  display: block;
  inline-size: 100%;
}
.pixel-item__stage > astra-audio {
  display: block;
  inline-size: 100%;
}
.pixel-item__stage[data-kind=audio] {
  background: none;
  border: 0;
  border-radius: 0;
  overflow: visible;
}

.pixel-story {
  display: grid;
  gap: var(--space-5);
}

.pixel-story__lead {
  display: grid;
  gap: var(--space-4) var(--space-5);
  align-items: start;
}
@media (min-width: 840px) {
  .pixel-story__lead {
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
  }
}

.pixel-story__heads {
  align-content: start;
}

.pixel-story__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  inline-size: 100%;
  padding: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font: inherit;
  cursor: pointer;
  transition: border-color var(--motion-hover), box-shadow var(--motion-hover);
}
.pixel-story__cover img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out, ease);
}
.pixel-story__cover:hover {
  border-color: var(--border-default);
  box-shadow: var(--elevation-2);
}
.pixel-story__cover:hover img {
  transform: scale(1.03);
}
.pixel-story__cover:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}
.pixel-story__cover:disabled {
  cursor: default;
}
@media (prefers-reduced-motion: reduce) {
  .pixel-story__cover img, .pixel-story__cover:hover img {
    transition: none;
    transform: none;
  }
}

.pixel-story__cover-ph {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--accent-ink, var(--text-secondary));
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--accent-500) 14%, transparent), transparent 60%);
  inline-size: 100%;
  block-size: 100%;
  align-content: center;
  border: 1.5px dashed color-mix(in oklab, var(--accent-500) 45%, var(--border-default));
  border-radius: inherit;
  box-sizing: border-box;
}
.pixel-story__cover-ph astra-icon {
  inline-size: 2rem;
  block-size: 2rem;
}

.pixel-cover-lead {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 720px) {
  .pixel-cover-lead {
    grid-template-columns: minmax(12rem, 2fr) minmax(0, 3fr);
  }
}

.pixel-cover {
  margin: 0;
}

.pixel-cover__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  inline-size: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
  color: var(--text-tertiary);
}
.pixel-cover__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.pixel-board {
  display: grid;
  gap: var(--space-3);
}

.pixel-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
.pixel-board__head h2 {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.pixel-board__meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.tile-board.tile-board--single {
  grid-template-columns: minmax(0, 36rem);
}

.tile-board.pixel-tiles .tile-board__badge {
  --badge-fill: color-mix(in oklab, var(--badge-tone) 16%, var(--surface-raised));
  border-radius: var(--radius-pill);
  box-shadow: var(--elevation-1);
}
@media (max-width: 599.98px) {
  .tile-board.pixel-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .tile-board.pixel-tiles.tile-board--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .tile-board.pixel-tiles .tile-board__add {
    min-block-size: 8rem;
  }
  .tile-board.pixel-tiles .tile-board__body {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
}

.pixel-initial {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: var(--weight-semibold);
  line-height: 1;
  color: var(--accent-ink, var(--text-secondary));
}

.tile-board__open--static {
  cursor: default;
}

.tile-board__tile[data-drop] {
  outline: 2px dashed var(--accent-500);
  outline-offset: 2px;
}

.tile-board__tile[draggable=true] {
  cursor: grab;
}

.tile-board__tile[draggable=true]:active {
  cursor: grabbing;
}

.pixel-drawer__media {
  display: block;
}

.pixel-drawer__frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4/3;
  inline-size: 100%;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
}
.pixel-drawer__frame img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.pixel-creator {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}
@media (min-width: 1024px) {
  .pixel-creator {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem);
  }
}

.pixel-creator__main,
.pixel-creator__aside,
.pixel-creator__stack {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-inline-size: 0;
}

.pixel-application__checks {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  margin-block-start: var(--space-4);
}

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

.pixel-statement {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface-sunken);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.pixel-step {
  display: grid;
  gap: var(--space-1);
  justify-items: start;
}
.pixel-step .form-msg {
  margin: 0;
}

.pixel-settings__panel {
  display: grid;
  gap: var(--space-4);
  padding-block-start: var(--space-4);
}

.pixel-settings__form {
  display: grid;
  gap: var(--space-4);
  align-content: start;
}

.pixel-setting__head {
  flex: 1 1 auto;
  min-inline-size: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-block-size: 2rem;
}
.pixel-setting__head :is(h2, h3) {
  margin: 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.pixel-setting__foot {
  margin: var(--space-4) 0 0;
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.pixel-settings__panel :is(.pixel-facts, .pixel-prices) ~ .form-msg {
  margin-block-start: var(--space-3);
}

.pixel-setting__wide {
  grid-column: 1/-1;
}

.pixel-setting__quiet {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.pixel-stage__body {
  display: grid;
  gap: var(--space-3);
}

.pixel-readiness .item-list__row {
  align-items: flex-start;
}
.pixel-readiness .item-list__end {
  padding-block-start: 2px;
}

.pixel-readiness__details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-block-start: var(--space-1);
}
.pixel-readiness__details code {
  font-size: var(--text-xs);
  padding: 1px var(--space-1-5);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  overflow-wrap: anywhere;
}

.pixel-readiness__how {
  min-inline-size: 0;
  margin-block-start: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.pixel-readiness__how > summary {
  cursor: pointer;
  inline-size: fit-content;
  color: var(--accent-ink, var(--text-secondary));
  font-weight: var(--weight-medium);
}
.pixel-readiness__how > summary:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
.pixel-readiness__how > p {
  margin: var(--space-1-5) 0 0;
  max-inline-size: 60ch;
  line-height: 1.5;
}

.pixel-prices {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-5) var(--space-6);
}

.pixel-prices__group {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.pixel-prices__group h4 {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

.pixel-prices__list {
  margin: 0;
  display: grid;
}
.pixel-prices__list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-1-5);
}
.pixel-prices__list > div + div {
  border-block-start: 1px solid var(--border-subtle);
}
.pixel-prices__list dt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.pixel-prices__list dd {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.xtra-editor__sheet {
  display: grid;
  gap: var(--space-5);
  inline-size: 100%;
  max-inline-size: 56rem;
  margin-inline: auto;
}

.xtra-editor__head {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}
@media (max-width: 640px) {
  .xtra-editor__head {
    padding: var(--space-4);
  }
}

.xtra-editor__picture {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
}
.xtra-editor__picture > astra-media-picker {
  min-inline-size: 0;
}
@media (max-width: 720px) {
  .xtra-editor__picture {
    grid-template-columns: minmax(0, 1fr);
  }
}

.xtra-editor__picture-words {
  min-inline-size: 0;
}

.xtra-editor__points {
  margin-block-start: calc(var(--space-1) * -1);
}

.xtra-editor__readiness {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.xtra-editor__readiness > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.xtra-editor__notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-size: var(--text-sm);
}
.xtra-editor__notes > li {
  padding-block: var(--space-2);
  border-block-start: 1px solid var(--border-subtle);
}
.xtra-editor__notes:empty {
  display: none;
}

.xtra-stories__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}
.xtra-stories__filters > astra-select {
  flex: 1 1 10rem;
  min-inline-size: 0;
  max-inline-size: 14rem;
}
.xtra-stories__filters > astra-select[hidden] {
  display: none;
}

.xtra-stories > astra-segmented {
  justify-self: start;
}

.xtra-newsroom__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-inline-size: 0;
}
.xtra-newsroom__title > astra-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: none;
  color: var(--text-secondary);
}

.xtra-newsroom__body {
  display: grid;
  gap: var(--space-2);
  min-inline-size: 0;
}

.xtra-newsroom__group {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.xtra-newsroom__group:first-child {
  margin-block-start: 0;
}

.xtra-trends__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.xtra-trends__heading {
  margin: 0;
  font-size: var(--text-lg);
}

.xtra-round-up-edit__preview iframe {
  display: block;
  inline-size: 100%;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.xtra-record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1) var(--space-3);
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}
.xtra-record-meta > span {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.xtra-front__slot {
  display: grid;
  gap: var(--space-3);
  min-inline-size: 0;
}

.xtra-front__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  min-inline-size: 0;
}
.xtra-front__head > astra-button {
  margin-inline-start: auto;
  align-self: center;
}

.xtra-front__title {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

h3.xtra-front__title {
  font-size: var(--text-md);
}

.xtra-front__count {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.xtra-front__bands {
  display: grid;
  gap: var(--space-6);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
}

.xtra-front__tiles .tile-board__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  white-space: normal;
}

@media (max-width: 40rem) {
  .xtra-front__tiles:not(.tile-board--wide) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }
  .xtra-front__tiles:not(.tile-board--wide) .tile-board__body {
    padding: var(--space-2) var(--space-3) var(--space-3);
  }
  .xtra-front__tiles:not(.tile-board--wide) .tile-board__add {
    min-block-size: 8rem;
  }
}
.xtra-front__empty {
  margin: 0;
  grid-column: 1/-1;
}

.xtra-front__preview {
  display: grid;
  gap: var(--space-2);
}
.xtra-front__preview .tile-board__media,
.xtra-front__preview .tile-board__ph {
  aspect-ratio: 16/9;
  border-radius: var(--radius-card);
}
.xtra-front__preview .tile-board__body {
  padding: 0;
}
.xtra-front__preview .tile-board__title {
  white-space: normal;
}

.xtra-board__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3);
}
.xtra-board__filters > astra-select {
  flex: 1 1 9rem;
  min-inline-size: 0;
  max-inline-size: 13rem;
}

.xtra-settings > astra-card {
  max-inline-size: 52rem;
}

.xtra-settings__checks {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}
.xtra-settings__checks > legend {
  margin-block-end: var(--space-2);
  padding: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.review-layout {
  --review-layout-aside: 22rem;
  --review-layout-gap: var(--space-layout-sm);
  --review-layout-sticky-top: var(--space-4);
  --review-layout-chrome: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--review-layout-gap);
  align-items: start;
}

.review-layout > * {
  min-inline-size: 0;
}

.review-layout__main,
.review-layout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.review-layout__main > *,
.review-layout__aside > * {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .review-layout {
    grid-template-columns: minmax(0, 1fr) var(--review-layout-aside);
  }
  .review-layout__aside {
    box-sizing: border-box;
    position: sticky;
    top: calc(var(--review-layout-sticky-top) - var(--sh-main-pad-block-start, 0px));
    max-block-size: calc(100dvh - var(--review-layout-chrome) - 2 * var(--review-layout-sticky-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block-end: var(--space-1);
  }
}
.disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: color-mix(in oklab, var(--surface-raised) 88%, transparent);
  transition: border-color var(--duration-fast, 120ms) ease, box-shadow var(--duration-fast, 120ms) ease;
  interpolate-size: allow-keywords;
}
.disclosure:hover {
  border-color: var(--border-default);
}
.disclosure[open] {
  border-color: var(--border-default);
  box-shadow: var(--elevation-1);
}

.disclosure__summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  list-style: none;
  border-radius: inherit;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  user-select: none;
}
.disclosure__summary::-webkit-details-marker {
  display: none;
}
.disclosure__summary::marker {
  content: "";
}
.disclosure__summary::after {
  content: "";
  inline-size: 0.5rem;
  block-size: 0.5rem;
  margin-inline-start: auto;
  border-inline-end: 1.5px solid var(--text-tertiary);
  border-block-end: 1.5px solid var(--text-tertiary);
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease);
  flex-shrink: 0;
}
details[open] > .disclosure__summary::after {
  transform: translateY(1px) rotate(-135deg);
}
.disclosure__summary:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}
.disclosure__summary astra-icon {
  color: var(--text-tertiary);
  flex-shrink: 0;
}

.disclosure__title {
  white-space: nowrap;
}

.disclosure__meta {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-normal);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

.disclosure__body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-1) var(--space-4) var(--space-4);
}

.disclosure::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size var(--duration-normal, 200ms) var(--ease-out, ease), content-visibility var(--duration-normal, 200ms) allow-discrete;
}

.disclosure[open]::details-content {
  block-size: auto;
}

.disclosure[open] > .disclosure__body {
  animation: disclosure-in var(--duration-normal, 200ms) var(--ease-out, ease);
}

@keyframes disclosure-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .disclosure::details-content {
    transition: none;
  }
  .disclosure[open] > .disclosure__body {
    animation: none;
  }
}
.disclosure--quiet {
  border-color: transparent;
  background: transparent;
}
.disclosure--quiet:hover, .disclosure--quiet[open] {
  border-color: transparent;
  box-shadow: none;
}
.disclosure--quiet > .disclosure__summary {
  padding-inline: 0;
}
.disclosure--quiet > .disclosure__body {
  padding-inline: 0;
}

.disclosure-stack {
  display: grid;
  gap: var(--space-2);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  align-items: start;
  gap: var(--space-4) var(--space-4);
  min-inline-size: 0;
}
.form-grid > * {
  min-inline-size: 0;
}

.form-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.form-grid > *::part(label) {
  min-block-size: var(--form-grid-label, auto);
}

.form-grid__full {
  grid-column: 1/-1;
}

.form-grid__wide {
  grid-column: span 2;
}

.form-grid__action {
  align-self: start;
  margin-block-start: calc(var(--type-ui-size) * var(--leading-snug) + var(--space-stack-xs));
  justify-self: start;
}

astra-button.form-grid__action::part(button) {
  block-size: calc(2.75rem + 2px);
}

@media (max-width: 768px) {
  .form-grid--2, .form-grid--3, .form-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
  .form-grid__wide {
    grid-column: auto;
  }
  .form-grid__action {
    margin-block-start: 0;
    justify-self: stretch;
  }
}
astra-repeater {
  display: grid;
  gap: var(--space-2);
}

.repeater__rows {
  display: grid;
  gap: var(--space-2);
}
.repeater__rows:empty {
  display: none;
}

.repeater__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-2);
  animation: repeater-in var(--duration-normal, 200ms) var(--ease-out, ease);
}

.repeater__fields {
  display: grid;
  grid-template-columns: var(--repeater-columns, repeat(auto-fit, minmax(min(100%, 10rem), 1fr)));
  align-items: start;
  gap: var(--space-2) var(--space-3);
  min-inline-size: 0;
}
.repeater__fields > * {
  min-inline-size: 0;
}

.repeater__row + .repeater__row [data-field]::part(label) {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.repeater {
  --repeater-control-top: calc(var(--type-ui-size) * var(--leading-snug) + var(--space-stack-xs));
  --repeater-control-h: calc(2.75rem + 2px);
}

.repeater__handle {
  margin-block-start: var(--repeater-control-top);
}

.repeater__remove {
  margin-block-start: var(--repeater-control-top);
  align-self: start;
}

.repeater__remove::part(button) {
  inline-size: var(--repeater-control-h);
  block-size: var(--repeater-control-h);
}

.repeater__row + .repeater__row {
  --repeater-control-top: var(--space-stack-xs);
}

.repeater__handle {
  display: none;
  place-items: center;
  inline-size: 1.5rem;
  block-size: var(--repeater-control-h, 2.875rem);
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-tertiary);
  cursor: grab;
  touch-action: none;
}
.repeater__handle:hover {
  color: var(--text-primary);
  background: var(--surface-hover, color-mix(in oklab, var(--text-primary) 6%, transparent));
}
.repeater__handle:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 1px;
}

astra-repeater[data-sortable] .repeater__handle {
  display: grid;
}

astra-repeater:not([data-sortable]) .repeater__row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.repeater__row--dragging {
  opacity: 0.85;
}
.repeater__row--dragging .repeater__handle {
  cursor: grabbing;
}
.repeater__row--dragging .repeater__fields {
  filter: drop-shadow(0 6px 16px color-mix(in oklab, var(--neutral-1000, #000) 18%, transparent));
}

.repeater__row--leaving {
  animation: repeater-out 180ms var(--ease-in, ease) forwards;
}

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

.repeater__add {
  margin-inline-start: calc(-1 * var(--space-3));
}

@keyframes repeater-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}
@keyframes repeater-out {
  to {
    opacity: 0;
    transform: translateX(8px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .repeater__row, .repeater__row--leaving {
    animation: none;
  }
}
[data-lightbox] {
  cursor: zoom-in;
}

img[data-lightbox] {
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease), box-shadow var(--duration-normal, 200ms) ease;
}

img[data-lightbox]:hover {
  transform: scale(1.02);
  box-shadow: var(--elevation-2);
}

dialog.lightbox {
  inline-size: 100vw;
  block-size: 100dvh;
  max-inline-size: none;
  max-block-size: none;
  margin: 0;
  padding: var(--space-6);
  border: 0;
  background: transparent;
  display: none;
  place-items: center;
  cursor: zoom-out;
}
dialog.lightbox[open] {
  display: grid;
  animation: lightbox-in var(--duration-normal, 200ms) var(--ease-out, ease);
}
dialog.lightbox::backdrop {
  background: color-mix(in oklab, var(--neutral-1000, #000) 72%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.lightbox__img {
  max-inline-size: 100%;
  max-block-size: calc(100dvh - var(--space-6) * 2);
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-4);
}

.lightbox__close {
  position: fixed;
  inset-block-start: var(--space-4);
  inset-inline-end: var(--space-4);
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 0;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--surface-raised) 85%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  box-shadow: var(--elevation-2);
}
.lightbox__close:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}

@keyframes lightbox-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog.lightbox[open] {
    animation: none;
  }
  img[data-lightbox]:hover {
    transform: none;
  }
}
.tile-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-4);
  --tile-ratio: 4 / 3;
}

.tile-board--wide {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  --tile-ratio: 16 / 9;
}

.tile-board__tile,
.tile-board__add {
  position: relative;
  border-radius: var(--radius-card);
  align-self: stretch;
}

.tile-board__tile {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--elevation-1);
  overflow: hidden;
  transition: transform var(--duration-normal, 200ms) var(--ease-out, ease), box-shadow var(--duration-normal, 200ms) ease, border-color var(--duration-fast, 120ms) ease;
  animation: tile-board-in var(--duration-normal, 200ms) var(--ease-out, ease) both;
}
.tile-board__tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-3);
  border-color: var(--border-default);
}
.tile-board__tile[data-dragging] {
  transform: scale(1.02);
  box-shadow: var(--elevation-4);
  z-index: 1;
}
.tile-board__tile[data-muted] {
  opacity: 0.6;
}

.tile-board__open {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.tile-board__open:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: -2px;
  border-radius: inherit;
}

.tile-board__media,
.tile-board__ph {
  display: block;
  aspect-ratio: var(--tile-ratio);
  inline-size: 100%;
  background: var(--surface-sunken);
  overflow: hidden;
}
.tile-board__media img, .tile-board__media video,
.tile-board__ph img,
.tile-board__ph video {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  transition: transform 400ms var(--ease-out, ease);
}

.tile-board__tile:hover .tile-board__media img {
  transform: scale(1.04);
}

.tile-board__ph {
  display: grid;
  place-items: center;
  color: var(--text-tertiary);
  background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--accent-500) 14%, transparent), transparent 60%), var(--surface-sunken);
}

.tile-board__body {
  display: grid;
  gap: 2px;
  padding: var(--space-3) var(--space-4) var(--space-4);
}

.tile-board__kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--accent-ink, var(--text-secondary));
}

.tile-board__title {
  font-weight: var(--weight-semibold, 600);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-board__meta {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tile-board__badge {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-end: var(--space-2);
}

.tile-board__add {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-2);
  min-block-size: 10rem;
  padding: var(--space-4);
  border: 1.5px dashed color-mix(in oklab, var(--accent-500) 45%, var(--border-default));
  background: color-mix(in oklab, var(--accent-500) 5%, transparent);
  color: var(--accent-ink, var(--text-primary));
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background-color var(--duration-fast, 120ms) ease, border-color var(--duration-fast, 120ms) ease, transform var(--duration-normal, 200ms) var(--ease-out, ease);
}
.tile-board__add astra-icon {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0.5rem;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--accent-500) 14%, transparent);
}
.tile-board__add:hover {
  background: color-mix(in oklab, var(--accent-500) 10%, transparent);
  border-color: var(--accent-500);
  transform: translateY(-2px);
}
.tile-board__add:focus-visible {
  outline: 2px solid var(--focus-ring, var(--accent-500));
  outline-offset: 2px;
}

@keyframes tile-board-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tile-board__tile, .tile-board__add {
    animation: none;
    transition: none;
  }
  .tile-board__tile:hover, .tile-board__add:hover {
    transform: none;
  }
  .tile-board__tile:hover .tile-board__media img {
    transform: none;
  }
}
.rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.rank-list__row {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control);
}
.rank-list__row::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 2px;
  inset-inline-start: 0;
  inline-size: calc(var(--share, 0) * 1%);
  min-inline-size: 4px;
  border-radius: inherit;
  background: color-mix(in oklab, var(--accent-500) 13%, transparent);
  animation: rank-list-bar var(--duration-slow, 480ms) var(--ease-out, ease) both;
  transition: background-color var(--duration-fast, 120ms) ease;
}
.rank-list__row:hover::before {
  background: color-mix(in oklab, var(--accent-500) 20%, transparent);
}

.rank-list__row:has(.rank-list__aside) {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.rank-list__label {
  display: grid;
  gap: 1px;
  min-inline-size: 0;
}

.rank-list__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.rank-list__sub {
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.rank-list__value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.rank-list__aside {
  min-inline-size: 3.5rem;
  text-align: end;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

@keyframes rank-list-bar {
  from {
    inline-size: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rank-list__row::before {
    animation: none;
  }
}
:root {
  /* HOW LONG THE HOLD LASTS BEFORE THE PAGE GIVES UP AND SHOWS EVERYTHING.
     Not 3s-because-it-was-3s: measured. On the estate's own pages the module
     graph resolves in ~600ms on a warm desktop connection and 15.2s on Slow 4G,
     so no single number both "never fires on a good load" and "fires quickly on
     a broken one". Any number at all is only safe because the revealed state is
     now a labelled, correctly-laid-out page rather than a text dump — see the
     header. Measured at 4s, the reveal landed 7.4s into a 15.5s load and the
     operator lost the "this is loading" reading of the skeleton, getting a page
     that looked finished and empty for the eight seconds that followed. 8s keeps
     the skeleton through the first half of a genuinely slow load, never fires at
     all on a warm one, and still puts a page whose script is never coming in
     front of a reader inside eight seconds. */
  --astra-pre-upgrade-reveal: 8s;
  /* THE SECOND TIMER, AND WHY THERE ARE TWO. Putting a control's label back
     inside a box that was already reserved moves nothing (measured: 0.0001 of
     layout shift). Putting the SHELL CHROME back does — the nav is in normal
     flow, so revealing it pushes the page down 268px, which on a slow-but-working
     load would be a large shift for nothing, since the shell was going to arrive
     a few seconds later and place it properly anyway. So the chrome and the
     hidden tab panels — everything whose reveal costs the reader a jump — waits
     on a second, deliberately pessimistic timer.
     20s is chosen against the measurement rather than by feel: the slowest
     upgrade on the estate's own pages was 16,409ms with core.css applying at
     ~2,700ms, so anything under ~13.7s fires on a load that was going to succeed.
     Waiting is nearly free here: the page's own content is readable throughout,
     and only inert chrome and the non-first tab panels are behind this timer. */
  --astra-pre-upgrade-chrome-reveal: 20s;
  /* The plate the held controls paint. --surface-sunken is one step down from
     the page in light (neutral-100 on neutral-50) and one step up in dark
     (a well over neutral-900), so the placeholder reads as a recess in BOTH
     themes and can never come out page-on-page. */
  --astra-pre-upgrade-plate: var(--surface-sunken);
}

@keyframes astra-pre-upgrade-reveal {
  to {
    color: inherit;
    background: none;
  }
}
@keyframes astra-pre-upgrade-restore {
  to {
    max-height: none;
    content-visibility: visible;
    color: inherit;
    background: none;
  }
}
@keyframes astra-pre-upgrade-retire {
  to {
    opacity: 0;
  }
}
astra-shell-admin:not(:defined), astra-shell-ninefive:not(:defined), astra-shell-partner:not(:defined), astra-shell-identity:not(:defined), astra-shell-invoice:not(:defined), astra-shell-auth:not(:defined) {
  display: block;
  position: relative;
  box-sizing: border-box;
  min-height: 100dvh;
  background: var(--surface-page);
  color: var(--text-primary);
}

astra-shell-admin:not(:defined), astra-shell-ninefive:not(:defined), astra-shell-partner:not(:defined), astra-shell-identity:not(:defined) {
  /* 12 frame + 60 topbar + 12 gap, then the page gutter .sh__main applies. */
  padding: calc(84px + var(--gutter)) calc(12px + var(--gutter));
}

/* The receipt. Measured at 1280px: frame 16px, topbar 16,16 1248x70, main at
   y=102, and the document itself centred at .sh__main's 44rem — a customer-facing
   page whose own sheet is narrower than the window, so centring it here is what
   stops the invoice sliding sideways when the shell arrives. */
astra-shell-invoice:not(:defined) {
  padding: 102px 16px;
}

/* THE PLACEHOLDER AND THE SETTLED PAGE HAVE TO AGREE ON WIDTH, and 44rem is only the
   shell's DEFAULT — `.sh__main` is what a page overrides when its document is wider.
   The public invoice viewer does exactly that (52rem, because it carries a line-items
   table) and the not-found page goes the other way (32rem), and this rule outranks both:
   `astra-shell-invoice:not(:defined) > :not([slot])` is (0,2,1) against a bare class's
   (0,1,0). Measured on one throttled load at 1280px, the bill sat at left=288 w=704 for
   fifteen seconds and then jumped to left=224 w=832 when the shell upgraded — a 128px
   widening and a 64px slide, on the page a customer reads a bill on.
   AND CLS DOES NOT SEE IT. A custom-element upgrade re-slots the light DOM, so the
   layout-instability API scored 0.0001 across that reflow: the instrument that would
   normally catch this is blind to it, which is why the width is published as a property
   the page can state once instead of a number repeated in two places. */
astra-shell-invoice:not(:defined) > :not([slot]) {
  display: block;
  max-width: var(--astra-pre-upgrade-max, 44rem);
  margin-inline: auto;
}

/* THE AUTH SHELL IS NOT A FRAME AND MUST NOT BE GIVEN ONE. It is a two-column
   split — a brand panel beside the form, both full-bleed, no topbar card and no
   rail (measured: the form panel is x=640..1280, y=0..800). A 60px plate across
   the top of a login page is chrome the page does not have, so it is excluded
   from the reservation and from the plates below.
   It gets a reservation of its own instead, because a login page is where every
   session in the estate starts and it loads the same 2.7MB module graph as any
   other page. The numbers are the auth layout's own: two equal columns
   (`minmax(0,1fr) minmax(0,1fr)`), the form column centred both ways at
   `.sh__form-inner`'s 24rem, and the split collapsing at 767.98px — which puts
   the form at x=768 w=384 on a 1280px window, exactly where the shell puts it. */
astra-shell-auth:not(:defined) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  padding: var(--space-10) var(--space-8);
}

astra-shell-auth:not(:defined) > :not([slot]) {
  width: 100%;
  max-width: 24rem;
  margin-inline: auto;
}

@media (min-width: 768px) {
  astra-shell-auth:not(:defined) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  astra-shell-auth:not(:defined) > :not([slot]) {
    grid-column: 2;
  }
}
/* THE STACKED SHELLS PUT A NAV STRIP BETWEEN THE TOPBAR AND THE PAGE, and only
   when they were given one. astra-shell-partner's grid is `60px auto 1fr` — the
   `auto` row is the strip, which renders solely when the top-nav slot has
   content (`:host([data-has-nav])`, stamped by the shell on slotchange). The
   same shape carries `tabs` on astra-shell-identity.
   `:has()` reads exactly the condition the shell reads. Measured at 1280px:
   astra-shell-partner without a strip puts main at y=84, with one at y=142 — a
   46px card plus the frame's own 12px gap. Without this rule the payouts and
   dashboard pages travelled 58px on upgrade; with it they do not. */
astra-shell-partner:not(:defined):has(> [slot=top-nav]),
astra-shell-identity:not(:defined):has(> [slot=tabs]) {
  padding-block-start: calc(142px + var(--gutter));
}

/* The two sidebar shells also hold the rail column open. Below 1024px the rail
   becomes a drawer (`@media (max-width: 1023.98px)` in sidebar-shell-base) and
   the reservation goes with it. */
@media (min-width: 1024px) {
  astra-shell-admin:not(:defined),
  astra-shell-ninefive:not(:defined) {
    padding-inline-start: calc(256px + var(--gutter));
  }
}
/* The frame the operator recognises. Two neutral plates on the reserved space,
   so the pre-upgrade page reads as this application loading rather than as a
   document with strange margins. Drawn on the shell's own pseudo-elements: they
   cost no markup, they cannot be reached by a page, and they vanish the instant
   the element upgrades because the selector stops matching. They also retire on
   the failsafe — a permanent grey rail with no nav in it would be a lie. */
astra-shell-admin:not(:defined)::before, astra-shell-ninefive:not(:defined)::before, astra-shell-partner:not(:defined)::before, astra-shell-identity:not(:defined)::before,
astra-shell-admin:not(:defined)::after, astra-shell-ninefive:not(:defined)::after, astra-shell-partner:not(:defined)::after, astra-shell-identity:not(:defined)::after {
  content: "";
  position: absolute;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-surface);
  /* Retires on the CHROME timer, not the label one: the plates stand in for the
     chrome, so taking them away while the chrome is still held would leave a
     band of nothing where the topbar and rail should be. */
  animation: astra-pre-upgrade-retire 0s var(--astra-pre-upgrade-chrome-reveal) forwards;
}

astra-shell-admin:not(:defined)::before, astra-shell-ninefive:not(:defined)::before, astra-shell-partner:not(:defined)::before, astra-shell-identity:not(:defined)::before {
  inset: 12px 12px auto 12px;
  height: 60px;
}

astra-shell-admin:not(:defined)::after, astra-shell-ninefive:not(:defined)::after, astra-shell-partner:not(:defined)::after, astra-shell-identity:not(:defined)::after {
  /* Rail plate — OFF by default, and `content: none` rather than `width: 0`.
     A zero-width plate is not invisible: its 1px border still paints, which put
     a 2px hairline down the left edge of every stacked shell and of the sidebar
     shells under 1024px, where the rail is a drawer. The two shells that have a
     rail turn it back on below. */
  content: none;
  inset: 84px auto 12px 12px;
}

@media (min-width: 1024px) {
  astra-shell-admin:not(:defined)::after,
  astra-shell-ninefive:not(:defined)::after {
    content: "";
    width: 232px;
  }
}
/* THESE ARE THE ONE GROUP THAT IS NEVER PUT BACK, and that is deliberate rather
   than an oversight. A modal's body, the command palette's field, a dropdown's
   menu items, an <astra-option>, an <astra-table-column> — none of them is
   content an operator is missing. They are UI that has no place on the page until
   something opens it, or a declaration with nothing to read at all; dumping them
   into the middle of the document on a failed load reproduces exactly the text
   soup this file exists to remove. `display: none` with no failsafe is therefore
   the right treatment, and it is safe here because nothing in this list holds a
   sentence the page was trying to tell anyone. */
astra-modal:not(:defined), astra-command-palette:not(:defined), astra-toast-region:not(:defined), astra-toast:not(:defined), astra-tooltip:not(:defined), astra-table-column:not(:defined), astra-option:not(:defined), astra-option-group:not(:defined), astra-menu-item:not(:defined), astra-menu-divider:not(:defined), astra-nav-divider:not(:defined) {
  display: none;
}

/* An AI feature a page's AI menu opens (`no-trigger`) has no button to show, only
   its words for the dialog's title; before it upgrades those words would sit in
   the bar beside the menu. Upgraded, it is display: contents and draws nothing. */
astra-ai-assist[no-trigger]:not(:defined) {
  display: none;
}

astra-button:not(:defined), astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-checkbox:not(:defined), astra-radio:not(:defined), astra-loading:not(:defined), astra-notification-bell:not(:defined), astra-workspace-switcher:not(:defined), astra-progress-ring:not(:defined), astra-dropdown:not(:defined), astra-user-menu:not(:defined),
astra-input:not(:defined), astra-textarea:not(:defined), astra-select:not(:defined), astra-combobox:not(:defined), astra-number-input:not(:defined), astra-date-picker:not(:defined), astra-date-range-picker:not(:defined), astra-time-picker:not(:defined), astra-otp-input:not(:defined), astra-tag-input:not(:defined), astra-slider:not(:defined), astra-color-picker:not(:defined), astra-file-upload:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-progress-bar:not(:defined),
astra-table:not(:defined), astra-chart:not(:defined), astra-calendar:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined), astra-rich-text:not(:defined), astra-batch-progress:not(:defined), astra-batch-review:not(:defined), astra-empty-state:not(:defined), astra-pagination:not(:defined), astra-stats-card:not(:defined), astra-skeleton:not(:defined), astra-notification-item:not(:defined) {
  box-sizing: border-box;
  color: transparent;
  background: var(--astra-pre-upgrade-plate);
  border-radius: var(--radius-control);
  animation: astra-pre-upgrade-reveal 0s var(--astra-pre-upgrade-reveal) forwards;
}

astra-button:not(:defined), astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-checkbox:not(:defined), astra-radio:not(:defined), astra-loading:not(:defined), astra-notification-bell:not(:defined), astra-workspace-switcher:not(:defined), astra-progress-ring:not(:defined), astra-dropdown:not(:defined), astra-user-menu:not(:defined) {
  display: inline-block;
  vertical-align: middle;
  min-height: 2.75rem;
  min-width: 2.75rem;
}

/* The widgets are here too, and they were not at first — a reservation is only a
   reservation if the box can take it. `min-height` does not apply to a
   non-replaced INLINE box, and an un-upgraded custom element is inline by
   default, so `astra-empty-state { min-height: 12rem }` did nothing at all on the
   invoice not-found page: 0px where 192px was asked for. It looked correct
   everywhere else purely because `main.page-stack` is a flex container and flex
   blockifies its items. */
astra-input:not(:defined), astra-textarea:not(:defined), astra-select:not(:defined), astra-combobox:not(:defined), astra-number-input:not(:defined), astra-date-picker:not(:defined), astra-date-range-picker:not(:defined), astra-time-picker:not(:defined), astra-otp-input:not(:defined), astra-tag-input:not(:defined), astra-slider:not(:defined), astra-color-picker:not(:defined), astra-file-upload:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-progress-bar:not(:defined),
astra-table:not(:defined), astra-chart:not(:defined), astra-calendar:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined), astra-rich-text:not(:defined), astra-batch-progress:not(:defined), astra-batch-review:not(:defined), astra-empty-state:not(:defined), astra-pagination:not(:defined), astra-stats-card:not(:defined), astra-skeleton:not(:defined), astra-notification-item:not(:defined) {
  display: block;
  min-height: 2.75rem;
}

/* Sized controls reserve their own height. --control-height is set INSIDE each
   component (astra-input .control--sm etc.), so the ladder is repeated here for
   the one moment the component cannot answer for itself: xs 1.75 / sm 2.25 /
   md 2.75 / lg 3.25rem. A field carrying a `label` also reserves the label row
   above it (--text-sm line + --space-1 gap), which is what stops a labelled form
   from shifting every row down on upgrade. */
astra-button:not(:defined)[size=xs], astra-badge:not(:defined)[size=xs], astra-avatar:not(:defined)[size=xs], astra-switch:not(:defined)[size=xs], astra-checkbox:not(:defined)[size=xs], astra-radio:not(:defined)[size=xs], astra-loading:not(:defined)[size=xs], astra-notification-bell:not(:defined)[size=xs], astra-workspace-switcher:not(:defined)[size=xs], astra-progress-ring:not(:defined)[size=xs], astra-dropdown:not(:defined)[size=xs], astra-user-menu:not(:defined)[size=xs],
astra-input:not(:defined)[size=xs], astra-textarea:not(:defined)[size=xs], astra-select:not(:defined)[size=xs], astra-combobox:not(:defined)[size=xs], astra-number-input:not(:defined)[size=xs], astra-date-picker:not(:defined)[size=xs], astra-date-range-picker:not(:defined)[size=xs], astra-time-picker:not(:defined)[size=xs], astra-otp-input:not(:defined)[size=xs], astra-tag-input:not(:defined)[size=xs], astra-slider:not(:defined)[size=xs], astra-color-picker:not(:defined)[size=xs], astra-file-upload:not(:defined)[size=xs], astra-media-picker:not(:defined)[size=xs], astra-content-picker:not(:defined)[size=xs], astra-progress-bar:not(:defined)[size=xs] {
  min-height: 1.75rem;
}

astra-button:not(:defined)[size=sm], astra-badge:not(:defined)[size=sm], astra-avatar:not(:defined)[size=sm], astra-switch:not(:defined)[size=sm], astra-checkbox:not(:defined)[size=sm], astra-radio:not(:defined)[size=sm], astra-loading:not(:defined)[size=sm], astra-notification-bell:not(:defined)[size=sm], astra-workspace-switcher:not(:defined)[size=sm], astra-progress-ring:not(:defined)[size=sm], astra-dropdown:not(:defined)[size=sm], astra-user-menu:not(:defined)[size=sm],
astra-input:not(:defined)[size=sm], astra-textarea:not(:defined)[size=sm], astra-select:not(:defined)[size=sm], astra-combobox:not(:defined)[size=sm], astra-number-input:not(:defined)[size=sm], astra-date-picker:not(:defined)[size=sm], astra-date-range-picker:not(:defined)[size=sm], astra-time-picker:not(:defined)[size=sm], astra-otp-input:not(:defined)[size=sm], astra-tag-input:not(:defined)[size=sm], astra-slider:not(:defined)[size=sm], astra-color-picker:not(:defined)[size=sm], astra-file-upload:not(:defined)[size=sm], astra-media-picker:not(:defined)[size=sm], astra-content-picker:not(:defined)[size=sm], astra-progress-bar:not(:defined)[size=sm] {
  min-height: 2.25rem;
}

astra-button:not(:defined)[size=lg], astra-badge:not(:defined)[size=lg], astra-avatar:not(:defined)[size=lg], astra-switch:not(:defined)[size=lg], astra-checkbox:not(:defined)[size=lg], astra-radio:not(:defined)[size=lg], astra-loading:not(:defined)[size=lg], astra-notification-bell:not(:defined)[size=lg], astra-workspace-switcher:not(:defined)[size=lg], astra-progress-ring:not(:defined)[size=lg], astra-dropdown:not(:defined)[size=lg], astra-user-menu:not(:defined)[size=lg],
astra-input:not(:defined)[size=lg], astra-textarea:not(:defined)[size=lg], astra-select:not(:defined)[size=lg], astra-combobox:not(:defined)[size=lg], astra-number-input:not(:defined)[size=lg], astra-date-picker:not(:defined)[size=lg], astra-date-range-picker:not(:defined)[size=lg], astra-time-picker:not(:defined)[size=lg], astra-otp-input:not(:defined)[size=lg], astra-tag-input:not(:defined)[size=lg], astra-slider:not(:defined)[size=lg], astra-color-picker:not(:defined)[size=lg], astra-file-upload:not(:defined)[size=lg], astra-media-picker:not(:defined)[size=lg], astra-content-picker:not(:defined)[size=lg], astra-progress-bar:not(:defined)[size=lg] {
  min-height: 3.25rem;
}

astra-input:not(:defined)[label], astra-textarea:not(:defined)[label], astra-select:not(:defined)[label], astra-combobox:not(:defined)[label], astra-number-input:not(:defined)[label], astra-date-picker:not(:defined)[label], astra-date-range-picker:not(:defined)[label], astra-time-picker:not(:defined)[label], astra-otp-input:not(:defined)[label], astra-tag-input:not(:defined)[label], astra-slider:not(:defined)[label], astra-color-picker:not(:defined)[label], astra-file-upload:not(:defined)[label], astra-media-picker:not(:defined)[label], astra-content-picker:not(:defined)[label], astra-progress-bar:not(:defined)[label] {
  min-height: calc(4rem + var(--space-1));
}

/* Round things stay round. */
astra-badge:not(:defined),
astra-avatar:not(:defined),
astra-switch:not(:defined),
astra-progress-ring:not(:defined),
astra-loading:not(:defined) {
  border-radius: var(--radius-pill);
}

astra-badge:not(:defined) {
  min-height: 1.75rem;
  min-width: 1.75rem;
}

astra-avatar:not(:defined),
astra-progress-ring:not(:defined),
astra-loading:not(:defined),
astra-notification-bell:not(:defined) {
  min-height: 2.25rem;
  min-width: 2.25rem;
}

/* Checkbox and radio are a control the size of a glyph followed by a label the
   page needs to read. The plate is the control; the label keeps its ink. */
astra-checkbox:not(:defined),
astra-radio:not(:defined) {
  background: none;
  color: inherit;
  min-height: 1.5rem;
  min-width: 0;
}

/* An icon is a glyph-sized hole in a line of text. It paints nothing — a plate
   here would put grey chips through every notice and menu label — but it holds
   its box, off the SAME --icon-size-* tokens astra-icon's own :host reads, so
   there is one set of numbers rather than an approximation of one.
   THIS IS THE EARLIEST-SETTLING RESERVATION ON THE PAGE and it earns its keep:
   astra-icon is imported inline in every template's <head> (to hand it the
   sprite URL) so it upgrades on its own, ~30ms after first paint, hundreds of
   times before components.js finishes. Measured on portal-shop-product-edit,
   guessing 1.25em here instead of the token moved a whole card column 450px at
   3,449ms — 0.140 of layout shift from one wrong length. */
astra-icon:not(:defined) {
  display: inline-block;
  line-height: 0;
  vertical-align: middle;
  inline-size: var(--icon-size-md);
  block-size: var(--icon-size-md);
}

astra-icon:not(:defined)[size=xs] {
  inline-size: var(--icon-size-xs);
  block-size: var(--icon-size-xs);
}

astra-icon:not(:defined)[size=sm] {
  inline-size: var(--icon-size-sm);
  block-size: var(--icon-size-sm);
}

astra-icon:not(:defined)[size=lg] {
  inline-size: var(--icon-size-lg);
  block-size: var(--icon-size-lg);
}

astra-icon:not(:defined)[size=xl] {
  inline-size: var(--icon-size-xl);
  block-size: var(--icon-size-xl);
}

/* A table's rows arrive from script on most pages, so its light DOM is empty and
   its height pre-upgrade is zero while its height after is hundreds of pixels.
   16rem is roughly a header plus five rows — enough that the page below it does
   not travel, not so much that a three-row table leaves a hole. */
astra-table:not(:defined),
astra-chart:not(:defined),
astra-kanban:not(:defined),
astra-chat:not(:defined),
astra-calendar:not(:defined),
astra-batch-review:not(:defined),
astra-media-picker:not(:defined),
astra-content-picker:not(:defined),
astra-rich-text:not(:defined),
astra-file-upload:not(:defined) {
  min-height: 16rem;
  border-radius: var(--radius-card);
}

/* Server-rendered rows are the exception: those pages put the real data in the
   light DOM, so there is nothing to reserve and everything to show. */
astra-table:not(:defined):has(astra-table-row) {
  min-height: 0;
  background: none;
  color: inherit;
}

astra-empty-state:not(:defined) {
  min-height: 12rem;
  border-radius: var(--radius-card);
}

astra-pagination:not(:defined),
astra-stats-card:not(:defined),
astra-progress-bar:not(:defined),
astra-notification-item:not(:defined),
astra-batch-progress:not(:defined) {
  min-height: 3rem;
}

astra-audio:not(:defined),
astra-audio-trimmer:not(:defined),
astra-video:not(:defined) {
  min-height: 6rem;
  border-radius: var(--radius-card);
}

astra-card:not(:defined), astra-accordion:not(:defined), astra-tabs:not(:defined), astra-tab-panel:not(:defined), astra-timeline:not(:defined), astra-stepper:not(:defined), astra-breadcrumbs:not(:defined), astra-radio-group:not(:defined), astra-table-row:not(:defined) {
  display: block;
}

/* The one shape worth painting early. A card is the estate's commonest container
   and an unpainted one is a paragraph floating on the page background; giving it
   its own surface is the difference between "the page is loading" and "the page
   is broken". Matched to astra-card's own resting treatment, not invented. */
/* --space-inset, NOT --space-inset-base. The ladder's default rung has no suffix
   (xs / sm / <none> / lg / xl in tokens/_spacing.scss), and the first draft here
   wrote `--space-inset-base`, which does not exist: the declaration was invalid at
   computed-value time and every held card had ZERO padding. It still looked
   plausible in a screenshot, which is exactly why it is worth writing down.
   The values track astra-card's own `.card__body` rungs, and matching them is not
   cosmetic: the checkout pages mount Stripe Elements inside a card, and Stripe
   measures the box it is given. A card whose inner width changes when it upgrades
   would resize the field under a mounted iframe (docs/SPACING-WORKLIST.md §6.1). */
astra-card:not(:defined) {
  box-sizing: border-box;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  padding: var(--space-inset);
}

astra-card:not(:defined)[padding=none],
astra-card:not(:defined)[variant=flush] {
  padding: 0;
}

astra-card:not(:defined)[padding=sm] {
  padding: var(--space-inset-sm);
}

astra-card:not(:defined)[padding=lg] {
  padding: var(--space-inset-xl);
}

/* A tabbed page renders EVERY panel into the document; the upgrade then collapses
   it to one. On royalties/reports that is four panels' worth of page that vanishes
   — the single largest layout shift in the estate. Showing only the first panel
   pre-upgrade is not always the right panel (a page can open on another), but it
   is always the right AMOUNT of page, and the correct one arrives a moment later. */
astra-tab-panel:not(:defined) ~ astra-tab-panel:not(:defined) {
  min-height: 0;
  max-height: 0;
  overflow: hidden;
  content-visibility: hidden;
  contain-intrinsic-size: 0;
  animation: astra-pre-upgrade-restore 0s var(--astra-pre-upgrade-chrome-reveal) forwards;
}

/* Slotted card furniture reads in source order pre-upgrade, which is header,
   body, footer — already the right order. Nothing to do but keep it block. */
astra-card:not(:defined) > [slot] {
  display: block;
}

/* THE CHROME IS NOT WHERE IT LOOKS LIKE IT IS. Everything carrying a `slot`
   attribute is destined for the topbar or the rail; in the document it sits
   ahead of the page as a run of inline text and a 32px logo SVG. It is also
   INERT — an <astra-nav-item> is not an <a>, so revealing it early offers an
   operator navigation that cannot navigate. Held until the shell can place it,
   then restored by the failsafe so a page whose script never arrives still
   shows what its chrome said. Held to zero height rather than to `display: none`
   for exactly that reason — see the restore keyframe. */
astra-shell-admin:not(:defined) > [slot], astra-shell-ninefive:not(:defined) > [slot], astra-shell-partner:not(:defined) > [slot], astra-shell-identity:not(:defined) > [slot], astra-shell-invoice:not(:defined) > [slot], astra-shell-auth:not(:defined) > [slot] {
  /* !important, for the same reason base/_base.scss uses it on [hidden]: this
     rule has to beat markup it does not own. NineFive's topbar brand is written
     `<span slot="logo" style="display:inline-flex; …">`, and an inline style beats
     any author rule without it — so the span stayed inline-level, and although its
     own height was 0 the LINE BOX it sat on was not: every ninefive page started
     23px lower than it finished. Only `display` needs the escape; everything below
     is uncontested. */
  display: block !important;
  /* min-height: 0 IS LOAD-BEARING, not tidiness. The used height of a box is
     max(min-height, min(max-height, height)) — MIN WINS OVER MAX — so a slotted
     <astra-input> carrying the 2.75rem control reservation from section 3 stayed
     44px tall through `max-height: 0` and the four topbar controls stacked up
     into 168px of grey plates above the page. Measured, not reasoned: the shell
     children read 44/44/36/44px with this line missing. */
  min-height: 0;
  min-width: 0;
  max-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  content-visibility: hidden;
  contain-intrinsic-size: 0;
  animation: astra-pre-upgrade-restore 0s var(--astra-pre-upgrade-chrome-reveal) forwards;
}

/* SQUIRCLE (_shared/squircle.js): this stylesheet's own corners, mirrored rule
   for rule. Chromium draws the squircle; WebKit and Gecko cut the sliver
   between the companion circle and the curve, and a bordered box draws its
   line as a ring. */
@supports (corner-shape: squircle) {
  *::-webkit-scrollbar-thumb { corner-shape: round; }
  a:focus-visible { corner-shape: round; }
  .page-cta-split > astra-button:first-child::part(button), .page-cta-split > astra-dropdown:first-child > astra-button[slot=trigger]::part(button) { corner-top-right-shape: round; corner-bottom-right-shape: round; }
  .page-cta-split > astra-button:last-child::part(button), .page-cta-split > astra-dropdown:last-child > astra-button[slot=trigger]::part(button) { corner-top-left-shape: round; corner-bottom-left-shape: round; }
  .page-header--sticky { corner-shape: var(--corner-shape, round); }
@media (max-width: 768px) {
  .page-header--sticky { corner-shape: var(--corner-shape, round); }
}
@media (min-width: 769px) {
  [data-scrolled] .page-header--sticky { corner-shape: round; }
}
  .status-surface { corner-shape: var(--corner-shape, round); }
  .back-link { corner-shape: round; }
  .view-tabs > a::after { corner-top-left-shape: round; corner-top-right-shape: round; corner-bottom-right-shape: round; corner-bottom-left-shape: round; }
  .view-tabs > a:focus-visible { corner-shape: var(--corner-shape, round); }
  .view-tabs__count { corner-shape: round; }
  .filter-chips > a { corner-shape: round; }
  .item-list__row:is(a, button) { corner-shape: var(--corner-shape, round); }
  .item-list__icon { corner-shape: var(--corner-shape, round); }
  .copyval, .copyblock { corner-shape: round; }
  .ai-sheen-edge::after, .ai-landed::after { corner-shape: inherit; }
  .kbd { corner-shape: round; }
  .editor-canvas__drawer-cover, .xtra-canvas__drawer-cover { corner-shape: var(--corner-shape, round); }
  .website-row-link { corner-shape: round; }
  .website-wording__head code { corner-shape: round; }
  .website-points > li::before { corner-shape: round; }
  .studio-token { corner-shape: var(--corner-shape, round); }
  .studio-diff__code { corner-shape: var(--corner-shape, round); }
  summary.team-subhead { corner-shape: round; }
  .company-ticket .ticket__panel, .company-chat .chat-panel { corner-shape: var(--corner-shape, round); }
  .company-chat .thread { corner-shape: var(--corner-shape, round); }
  .company-chat .thread__dot { corner-shape: round; }
  .company-ticket .ticket__convo > .status-surface { corner-shape: round; }
  .company-disclosure { corner-shape: var(--corner-shape, round); }
  .company-disclosure > summary { corner-shape: inherit; }
  .company-client .price-edit { corner-shape: var(--corner-shape, round); }
  .shop-collections .assign { corner-shape: var(--corner-shape, round); }
  .shop-coupons .scope { corner-shape: var(--corner-shape, round); }
  .shop-coupons .chipset__chip { corner-shape: round; }
  .shop-coupons .chipset__chip button { corner-shape: round; }
  .shop-products .bulk__panel { corner-shape: var(--corner-shape, round); }
  .shop-order .note-item { corner-shape: var(--corner-shape, round); }
  .shop-order .trk-read { corner-shape: var(--corner-shape, round); }
  .shop-rd .rd__cards astra-card[data-dirty] { corner-shape: var(--corner-shape, round); }
  .shop-rd .rd__tracker { corner-shape: var(--corner-shape, round); }
  .shop-rd .trk-grp { corner-shape: var(--corner-shape, round); }
  .shop-pe__serp { corner-shape: var(--corner-shape, round); }
  .shop-pe__ro-thumb { corner-shape: var(--corner-shape, round); }
  .vx-axis { corner-shape: var(--corner-shape, round); }
  .vx-row { corner-shape: var(--corner-shape, round); }
  .pme__cover-view { corner-shape: var(--corner-shape, round); }
  .pme__cover-zoom { corner-shape: round; }
  .pme__cover-empty { corner-shape: var(--corner-shape, round); }
  .pme__row { corner-shape: var(--corner-shape, round); }
  .pme__pos { corner-shape: round; }
  .pme__still { corner-shape: var(--corner-shape, round); }
  .shop-meta2__open { corner-shape: var(--corner-shape, round); }
  .shop-meta2__chip { corner-shape: round; }
  .shop-meta2__tag { corner-shape: round; }
  .shop-jw-collections .tree__row { corner-shape: var(--corner-shape, round); }
  .shop-jw-coupons .scope { corner-shape: var(--corner-shape, round); }
  .shop-jw-coupons .chipset__chip { corner-shape: round; }
  .shop-jw-coupons .chipset__chip button { corner-shape: round; }
  .shop-jw-products .bulk-scope { corner-shape: var(--corner-shape, round); }
  .shop-jw-products .bulk__panel { corner-shape: var(--corner-shape, round); }
  .shop-jw-products .bulk__strip { corner-shape: var(--corner-shape, round); }
  .shop-jw-order .ret-row { corner-shape: var(--corner-shape, round); }
  .shop-jw-order .order-detail__delivery { corner-shape: var(--corner-shape, round); }
  .shop-jw-order .trk-error { corner-shape: var(--corner-shape, round); }
  .shop-jw-order .note-item { corner-shape: var(--corner-shape, round); }
  .shop-jw-order .copyval, .shop-jw-order .copyblock { corner-shape: round; }
  .shop-jw-order .trk-read { corner-shape: var(--corner-shape, round); }
  .shop-jw-rd .rd__cards astra-card[data-dirty] { corner-shape: var(--corner-shape, round); }
  .shop-jw-rd .rd__rejected { corner-shape: var(--corner-shape, round); }
  .shop-jw-rd .rd__tracker { corner-shape: var(--corner-shape, round); }
  .shop-jw-rd .trk-grp { corner-shape: var(--corner-shape, round); }
  .shop-jw-print .note { corner-shape: var(--corner-shape, round); }
  .finance-more > summary { corner-shape: var(--corner-shape, round); }
  .finance-email-preview { corner-shape: var(--corner-shape, round); }
  .finance-quotes .finance-quotes__more > summary { corner-shape: var(--corner-shape, round); }
  .finance-pub .pub__pay-msg { corner-shape: var(--corner-shape, round); }
  .finance-pub .pub__pending { corner-shape: var(--corner-shape, round); }
  .finance-pub .pub__alt summary { corner-shape: round; }
  .finance-media .chip { corner-shape: round; }
  .finance-media .card { corner-shape: var(--corner-shape, round); }
  .finance-media .card__play span { corner-shape: round; }
  .finance-media .drawer__asset { corner-shape: var(--corner-shape, round); }
  .finance-media .drawer__swatch { corner-shape: var(--corner-shape, round); }
  .finance-media .drawer__cover > .status-surface { corner-shape: round; }
  .finance-media .drawer__cover-thumb { corner-shape: var(--corner-shape, round); }
  .finance-media .usage__row { corner-shape: var(--corner-shape, round); }
  .finance-media__dropzone { corner-shape: var(--corner-shape, round); }
  .finance-media__dropzone-pill { corner-shape: round; }
  .finance-facts--sunken { corner-shape: var(--corner-shape, round); }
  .finance-facts--boxed { corner-shape: var(--corner-shape, round); }
  .finance-confirm { corner-shape: var(--corner-shape, round); }
  .finance-hive .po-preview { corner-shape: var(--corner-shape, round); }
  .finance-statement { corner-shape: var(--corner-shape, round); }
  .ads-campaign { corner-shape: var(--corner-shape, round); }
  .ads-campaign__media { corner-shape: var(--corner-shape, round); }
  .ads-campaign__name:focus-visible { corner-shape: round; }
  .ads-preview__slot--pickable { corner-shape: round; }
  .ads-drop__square { corner-shape: var(--corner-shape, round); }
  .ads-estimate { corner-shape: var(--corner-shape, round); }
  .ads-preview { corner-shape: var(--corner-shape, round); }
  .ads-native { corner-shape: var(--corner-shape, round); }
  .ads-native__cta { corner-shape: round; }
  .hive-words { corner-shape: var(--corner-shape, round); }
  .hive-live { corner-shape: var(--corner-shape, round); }
  .hive-live__dot { corner-shape: round; }
  .ins__live-toggle { corner-shape: var(--corner-shape, round); }
  .hive-raw { corner-shape: var(--corner-shape, round); }
  .hive-creative__plate { corner-shape: var(--corner-shape, round); }
  .hive-creative__plate img { corner-shape: var(--corner-shape, round); }
  .hive-review__art { corner-shape: var(--corner-shape, round); }
  .hive-bill__fact { corner-shape: var(--corner-shape, round); }
  .hive-bill__tier { corner-shape: var(--corner-shape, round); }
  .hive-bill__control { corner-shape: var(--corner-shape, round); }
  .hive-code { corner-shape: var(--corner-shape, round); }
  .hive-integ__origins code { corner-shape: round; }
  .hive-integ__ad { corner-shape: var(--corner-shape, round); }
  .hive-integ__ad img { corner-shape: var(--corner-shape, round); }
  .hive-doc code { corner-shape: round; }
  .hive-doc pre { corner-shape: var(--corner-shape, round); }
  .hive-doc blockquote { corner-shape: var(--corner-shape, round); }
  .hive-media .chip { corner-shape: round; }
  .hive-media .card { corner-shape: var(--corner-shape, round); }
  .hive-media .card__play span { corner-shape: round; }
  .media__dropzone { corner-shape: var(--corner-shape, round); }
  .media__dropzone-pill { corner-shape: round; }
  .hive-media .drawer__asset { corner-shape: var(--corner-shape, round); }
  .hive-media .drawer__swatch { corner-shape: var(--corner-shape, round); }
  .hive-media .drawer__cover > .status-surface { corner-shape: round; }
  .hive-media .drawer__cover-thumb { corner-shape: var(--corner-shape, round); }
  .hive-media .usage__row { corner-shape: var(--corner-shape, round); }
  .hive-asset .preview__img { corner-shape: var(--corner-shape, round); }
  .hive-asset .cover__frame { corner-shape: var(--corner-shape, round); }
  .hive-asset .swatch { corner-shape: var(--corner-shape, round); }
  .hive-asset .usage__row { corner-shape: var(--corner-shape, round); }
  .hive-item .usage__row { corner-shape: var(--corner-shape, round); }
  .hive-item .swatch__chip { corner-shape: round; }
  .hive-item .preview__img { corner-shape: var(--corner-shape, round); }
  .hive-item .cover-thumb { corner-shape: var(--corner-shape, round); }
  .hive-ticket .ticket__panel { corner-shape: var(--corner-shape, round); }
  .hive-chat .chat-panel { corner-shape: var(--corner-shape, round); }
  .hive-chat .thread { corner-shape: var(--corner-shape, round); }
  .hive-chat .thread__dot { corner-shape: round; }
  .hive-switch-row { corner-shape: var(--corner-shape, round); }
  .hive-role-brand { corner-shape: var(--corner-shape, round); }
  .hive-role-card { corner-shape: var(--corner-shape, round); }
  .hive-perm-key { corner-shape: var(--corner-shape, round); }
  .demo-thread { corner-shape: var(--corner-shape, round); }
  .demo-thread__entry { corner-shape: var(--corner-shape, round); }
  .artist .artist__thumb { corner-shape: var(--corner-shape, round); }
  .artist__photo-view { corner-shape: var(--corner-shape, round); }
  .artist .credit-list a { corner-shape: var(--corner-shape, round); }
  .artist .impact-row { corner-shape: var(--corner-shape, round); }
  .music-meta__row { corner-shape: var(--corner-shape, round); }
  .music-releases .art-thumb { corner-shape: var(--corner-shape, round); }
  .music-release .tracklist__row { corner-shape: var(--corner-shape, round); }
  .music-release .tracklist__pos { corner-shape: round; }
  .music-release .attach-modal__row { corner-shape: var(--corner-shape, round); }
  .music-create .tracklist__row { corner-shape: var(--corner-shape, round); }
  .music-create .tracklist__pos { corner-shape: round; }
  .music-income .rev-row { corner-shape: var(--corner-shape, round); }
  .music-costs .rev-row { corner-shape: var(--corner-shape, round); }
  .pixel-item__stage { corner-shape: var(--corner-shape, round); }
  .pixel-item__stage[data-kind=audio] { corner-shape: round; }
  .pixel-story__cover { corner-shape: var(--corner-shape, round); }
  .pixel-story__cover-ph { corner-shape: inherit; }
  .pixel-cover__frame { corner-shape: var(--corner-shape, round); }
  .tile-board.pixel-tiles .tile-board__badge { corner-shape: round; }
  .pixel-drawer__frame { corner-shape: var(--corner-shape, round); }
  .pixel-statement { corner-shape: var(--corner-shape, round); }
  .pixel-readiness__details code { corner-shape: round; }
  .pixel-readiness__how > summary:focus-visible { corner-shape: round; }
  .xtra-editor__head { corner-shape: var(--corner-shape, round); }
  .xtra-round-up-edit__preview iframe { corner-shape: var(--corner-shape, round); }
  .xtra-front__preview .tile-board__media, .xtra-front__preview .tile-board__ph { corner-shape: var(--corner-shape, round); }
  .disclosure { corner-shape: var(--corner-shape, round); }
  .disclosure__summary { corner-shape: inherit; }
  .repeater__handle { corner-shape: round; }
  .lightbox__img { corner-shape: var(--corner-shape, round); }
  .lightbox__close { corner-shape: round; }
  .tile-board__tile, .tile-board__add { corner-shape: var(--corner-shape, round); }
  .tile-board__open:focus-visible { corner-shape: inherit; }
  .tile-board__add astra-icon { corner-shape: round; }
  .rank-list__row { corner-shape: var(--corner-shape, round); }
  .rank-list__row::before { corner-shape: inherit; }
  astra-shell-admin:not(:defined)::before, astra-shell-ninefive:not(:defined)::before, astra-shell-partner:not(:defined)::before, astra-shell-identity:not(:defined)::before, astra-shell-admin:not(:defined)::after, astra-shell-ninefive:not(:defined)::after, astra-shell-partner:not(:defined)::after, astra-shell-identity:not(:defined)::after { corner-shape: var(--corner-shape, round); }
  astra-button:not(:defined), astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-checkbox:not(:defined), astra-radio:not(:defined), astra-loading:not(:defined), astra-notification-bell:not(:defined), astra-workspace-switcher:not(:defined), astra-progress-ring:not(:defined), astra-dropdown:not(:defined), astra-user-menu:not(:defined), astra-input:not(:defined), astra-textarea:not(:defined), astra-select:not(:defined), astra-combobox:not(:defined), astra-number-input:not(:defined), astra-date-picker:not(:defined), astra-date-range-picker:not(:defined), astra-time-picker:not(:defined), astra-otp-input:not(:defined), astra-tag-input:not(:defined), astra-slider:not(:defined), astra-color-picker:not(:defined), astra-file-upload:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-progress-bar:not(:defined), astra-table:not(:defined), astra-chart:not(:defined), astra-calendar:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined), astra-rich-text:not(:defined), astra-batch-progress:not(:defined), astra-batch-review:not(:defined), astra-empty-state:not(:defined), astra-pagination:not(:defined), astra-stats-card:not(:defined), astra-skeleton:not(:defined), astra-notification-item:not(:defined) { corner-shape: var(--corner-shape, round); }
  astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-progress-ring:not(:defined), astra-loading:not(:defined) { corner-shape: round; }
  astra-table:not(:defined), astra-chart:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-calendar:not(:defined), astra-batch-review:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-rich-text:not(:defined), astra-file-upload:not(:defined) { corner-shape: var(--corner-shape, round); }
  astra-empty-state:not(:defined) { corner-shape: var(--corner-shape, round); }
  astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined) { corner-shape: var(--corner-shape, round); }
  astra-card:not(:defined) { corner-shape: var(--corner-shape, round); }
}
@supports not (corner-shape: squircle) {
  @container style(--corner-shape: squircle) {
    :where(.page-header--sticky),
    :where(.status-surface),
    :where(.view-tabs > a:focus-visible),
    :where(.item-list__row:is(a, button)),
    :where(.item-list__icon),
    :where(.editor-canvas__drawer-cover),
    :where(.xtra-canvas__drawer-cover),
    :where(.studio-token),
    :where(.studio-diff__code),
    :where(.company-ticket .ticket__panel),
    :where(.company-chat .chat-panel),
    :where(.company-chat .thread),
    :where(.company-disclosure),
    :where(.company-client .price-edit),
    :where(.shop-collections .assign),
    :where(.shop-coupons .scope),
    :where(.shop-products .bulk__panel),
    :where(.shop-order .note-item),
    :where(.shop-order .trk-read),
    :where(.shop-rd .rd__cards astra-card[data-dirty]),
    :where(.shop-rd .rd__tracker),
    :where(.shop-rd .trk-grp),
    :where(.shop-pe__serp),
    :where(.shop-pe__ro-thumb),
    :where(.vx-axis),
    :where(.vx-row),
    :where(.pme__cover-view),
    :where(.pme__cover-empty),
    :where(.pme__row),
    :where(.pme__still),
    :where(.shop-meta2__open),
    :where(.shop-jw-collections .tree__row),
    :where(.shop-jw-coupons .scope),
    :where(.shop-jw-products .bulk-scope),
    :where(.shop-jw-products .bulk__panel),
    :where(.shop-jw-products .bulk__strip),
    :where(.shop-jw-order .ret-row),
    :where(.shop-jw-order .order-detail__delivery),
    :where(.shop-jw-order .trk-error),
    :where(.shop-jw-order .note-item),
    :where(.shop-jw-order .trk-read),
    :where(.shop-jw-rd .rd__cards astra-card[data-dirty]),
    :where(.shop-jw-rd .rd__rejected),
    :where(.shop-jw-rd .rd__tracker),
    :where(.shop-jw-rd .trk-grp),
    :where(.shop-jw-print .note),
    :where(.finance-more > summary),
    :where(.finance-email-preview),
    :where(.finance-quotes .finance-quotes__more > summary),
    :where(.finance-pub .pub__pay-msg),
    :where(.finance-pub .pub__pending),
    :where(.finance-media .card),
    :where(.finance-media .drawer__asset),
    :where(.finance-media .drawer__swatch),
    :where(.finance-media .drawer__cover-thumb),
    :where(.finance-media .usage__row),
    :where(.finance-media__dropzone),
    :where(.finance-facts--sunken),
    :where(.finance-facts--boxed),
    :where(.finance-confirm),
    :where(.finance-hive .po-preview),
    :where(.finance-statement),
    :where(.ads-campaign),
    :where(.ads-campaign__media),
    :where(.ads-drop__square),
    :where(.ads-estimate),
    :where(.ads-preview),
    :where(.ads-native),
    :where(.hive-words),
    :where(.hive-live),
    :where(.ins__live-toggle),
    :where(.hive-raw),
    :where(.hive-creative__plate),
    :where(.hive-creative__plate img),
    :where(.hive-review__art),
    :where(.hive-bill__fact),
    :where(.hive-bill__tier),
    :where(.hive-bill__control),
    :where(.hive-code),
    :where(.hive-integ__ad),
    :where(.hive-integ__ad img),
    :where(.hive-doc pre),
    :where(.hive-doc blockquote),
    :where(.hive-media .card),
    :where(.media__dropzone),
    :where(.hive-media .drawer__asset),
    :where(.hive-media .drawer__swatch),
    :where(.hive-media .drawer__cover-thumb),
    :where(.hive-media .usage__row),
    :where(.hive-asset .preview__img),
    :where(.hive-asset .cover__frame),
    :where(.hive-asset .swatch),
    :where(.hive-asset .usage__row),
    :where(.hive-item .usage__row),
    :where(.hive-item .preview__img),
    :where(.hive-item .cover-thumb),
    :where(.hive-ticket .ticket__panel),
    :where(.hive-chat .chat-panel),
    :where(.hive-chat .thread),
    :where(.hive-switch-row),
    :where(.hive-role-brand),
    :where(.hive-role-card),
    :where(.hive-perm-key),
    :where(.demo-thread),
    :where(.demo-thread__entry),
    :where(.artist .artist__thumb),
    :where(.artist__photo-view),
    :where(.artist .credit-list a),
    :where(.artist .impact-row),
    :where(.music-meta__row),
    :where(.music-releases .art-thumb),
    :where(.music-release .tracklist__row),
    :where(.music-release .attach-modal__row),
    :where(.music-create .tracklist__row),
    :where(.music-income .rev-row),
    :where(.music-costs .rev-row),
    :where(.pixel-item__stage),
    :where(.pixel-story__cover),
    :where(.pixel-cover__frame),
    :where(.pixel-drawer__frame),
    :where(.pixel-statement),
    :where(.xtra-editor__head),
    :where(.xtra-round-up-edit__preview iframe),
    :where(.xtra-front__preview .tile-board__media),
    :where(.xtra-front__preview .tile-board__ph),
    :where(.disclosure),
    :where(.lightbox__img),
    :where(.tile-board__tile),
    :where(.tile-board__add),
    :where(.rank-list__row),
    :where(astra-shell-admin:not(:defined))::before,
    :where(astra-shell-ninefive:not(:defined))::before,
    :where(astra-shell-partner:not(:defined))::before,
    :where(astra-shell-identity:not(:defined))::before,
    :where(astra-shell-admin:not(:defined))::after,
    :where(astra-shell-ninefive:not(:defined))::after,
    :where(astra-shell-partner:not(:defined))::after,
    :where(astra-shell-identity:not(:defined))::after,
    :where(astra-button:not(:defined)),
    :where(astra-badge:not(:defined)),
    :where(astra-avatar:not(:defined)),
    :where(astra-switch:not(:defined)),
    :where(astra-checkbox:not(:defined)),
    :where(astra-radio:not(:defined)),
    :where(astra-loading:not(:defined)),
    :where(astra-notification-bell:not(:defined)),
    :where(astra-workspace-switcher:not(:defined)),
    :where(astra-progress-ring:not(:defined)),
    :where(astra-dropdown:not(:defined)),
    :where(astra-user-menu:not(:defined)),
    :where(astra-input:not(:defined)),
    :where(astra-textarea:not(:defined)),
    :where(astra-select:not(:defined)),
    :where(astra-combobox:not(:defined)),
    :where(astra-number-input:not(:defined)),
    :where(astra-date-picker:not(:defined)),
    :where(astra-date-range-picker:not(:defined)),
    :where(astra-time-picker:not(:defined)),
    :where(astra-otp-input:not(:defined)),
    :where(astra-tag-input:not(:defined)),
    :where(astra-slider:not(:defined)),
    :where(astra-color-picker:not(:defined)),
    :where(astra-file-upload:not(:defined)),
    :where(astra-media-picker:not(:defined)),
    :where(astra-content-picker:not(:defined)),
    :where(astra-progress-bar:not(:defined)),
    :where(astra-table:not(:defined)),
    :where(astra-chart:not(:defined)),
    :where(astra-calendar:not(:defined)),
    :where(astra-kanban:not(:defined)),
    :where(astra-chat:not(:defined)),
    :where(astra-audio:not(:defined)),
    :where(astra-audio-trimmer:not(:defined)),
    :where(astra-video:not(:defined)),
    :where(astra-rich-text:not(:defined)),
    :where(astra-batch-progress:not(:defined)),
    :where(astra-batch-review:not(:defined)),
    :where(astra-empty-state:not(:defined)),
    :where(astra-pagination:not(:defined)),
    :where(astra-stats-card:not(:defined)),
    :where(astra-skeleton:not(:defined)),
    :where(astra-notification-item:not(:defined)),
    :where(astra-card:not(:defined)) {
      --_tl: min(var(--sq-tl, var(--sq-r, 0px)), 50%);
      --_tr: min(var(--sq-tr, var(--sq-r, 0px)), 50%);
      --_br: min(var(--sq-br, var(--sq-r, 0px)), 50%);
      --_bl: min(var(--sq-bl, var(--sq-r, 0px)), 50%);
      --_rtl: round(down, var(--_tl), 1px);
      --_rtr: round(down, var(--_tr), 1px);
      --_rbr: round(down, var(--_br), 1px);
      --_rbl: round(down, var(--_bl), 1px);
      --_rx: max(var(--sq-tl, var(--sq-r, 0px)), var(--sq-tr, var(--sq-r, 0px)), var(--sq-br, var(--sq-r, 0px)), var(--sq-bl, var(--sq-r, 0px)));
      --squircle-radius: calc(var(--_rtl) * 0.543) calc(var(--_rtr) * 0.543) calc(var(--_rbr) * 0.543) calc(var(--_rbl) * 0.543);
      --squircle-sliver: shape(evenodd from calc(-1 * 4096px) calc(-1 * 4096px), line to calc(100% + 4096px) calc(-1 * 4096px), line to calc(100% + 4096px) calc(100% + 4096px), line to calc(-1 * 4096px) calc(100% + 4096px), close, move to 0px var(--_rtl), curve to calc(var(--_rtl)*.1591) calc(var(--_rtl)*.1591) with 0 calc(var(--_rtl)*.625) / calc(var(--_rtl)*-.0109) calc(var(--_rtl)*.3291), curve to calc(var(--_rtl)*1) 0 with calc(var(--_rtl)*.3291) calc(var(--_rtl)*-.0109) / calc(var(--_rtl)*.625) 0, line to calc(var(--_rtl) * 0.543) 0px, curve to 0px calc(var(--_rtl) * 0.543) with calc(var(--_rtl) * .2431) 0px / 0px calc(var(--_rtl) * .2431), close, move to calc(100% - 0px) var(--_rtr), curve to calc(100% - var(--_rtr)*.1591) calc(var(--_rtr)*.1591) with 100% calc(var(--_rtr)*.625) / calc(100% - var(--_rtr)*-.0109) calc(var(--_rtr)*.3291), curve to calc(100% - var(--_rtr)*1) 0 with calc(100% - var(--_rtr)*.3291) calc(var(--_rtr)*-.0109) / calc(100% - var(--_rtr)*.625) 0, line to calc(100% - calc(var(--_rtr) * 0.543)) 0px, curve to calc(100% - 0px) calc(var(--_rtr) * 0.543) with calc(100% - calc(var(--_rtr) * .2431)) 0px / calc(100% - 0px) calc(var(--_rtr) * .2431), close, move to calc(100% - 0px) calc(100% - var(--_rbr)), curve to calc(100% - var(--_rbr)*.1591) calc(100% - var(--_rbr)*.1591) with 100% calc(100% - var(--_rbr)*.625) / calc(100% - var(--_rbr)*-.0109) calc(100% - var(--_rbr)*.3291), curve to calc(100% - var(--_rbr)*1) 100% with calc(100% - var(--_rbr)*.3291) calc(100% - var(--_rbr)*-.0109) / calc(100% - var(--_rbr)*.625) 100%, line to calc(100% - calc(var(--_rbr) * 0.543)) calc(100% - 0px), curve to calc(100% - 0px) calc(100% - calc(var(--_rbr) * 0.543)) with calc(100% - calc(var(--_rbr) * .2431)) calc(100% - 0px) / calc(100% - 0px) calc(100% - calc(var(--_rbr) * .2431)), close, move to 0px calc(100% - var(--_rbl)), curve to calc(var(--_rbl)*.1591) calc(100% - var(--_rbl)*.1591) with 0 calc(100% - var(--_rbl)*.625) / calc(var(--_rbl)*-.0109) calc(100% - var(--_rbl)*.3291), curve to calc(var(--_rbl)*1) 100% with calc(var(--_rbl)*.3291) calc(100% - var(--_rbl)*-.0109) / calc(var(--_rbl)*.625) 100%, line to calc(var(--_rbl) * 0.543) calc(100% - 0px), curve to 0px calc(100% - calc(var(--_rbl) * 0.543)) with calc(var(--_rbl) * .2431) calc(100% - 0px) / 0px calc(100% - calc(var(--_rbl) * .2431)), close);
    }
    :where(.page-header--sticky),
    :where(.status-surface),
    :where(.view-tabs > a:focus-visible),
    :where(.item-list__row:is(a, button)),
    :where(.item-list__icon),
    :where(.editor-canvas__drawer-cover),
    :where(.xtra-canvas__drawer-cover),
    :where(.studio-token),
    :where(.studio-diff__code),
    :where(.company-ticket .ticket__panel),
    :where(.company-chat .chat-panel),
    :where(.company-chat .thread),
    :where(.company-disclosure),
    :where(.company-client .price-edit),
    :where(.shop-collections .assign),
    :where(.shop-coupons .scope),
    :where(.shop-products .bulk__panel),
    :where(.shop-order .note-item),
    :where(.shop-order .trk-read),
    :where(.shop-rd .rd__cards astra-card[data-dirty]),
    :where(.shop-rd .rd__tracker),
    :where(.shop-rd .trk-grp),
    :where(.shop-pe__serp),
    :where(.shop-pe__ro-thumb),
    :where(.vx-axis),
    :where(.vx-row),
    :where(.pme__cover-view),
    :where(.pme__cover-empty),
    :where(.pme__row),
    :where(.pme__still),
    :where(.shop-meta2__open),
    :where(.shop-jw-collections .tree__row),
    :where(.shop-jw-coupons .scope),
    :where(.shop-jw-products .bulk-scope),
    :where(.shop-jw-products .bulk__panel),
    :where(.shop-jw-products .bulk__strip),
    :where(.shop-jw-order .ret-row),
    :where(.shop-jw-order .order-detail__delivery),
    :where(.shop-jw-order .trk-error),
    :where(.shop-jw-order .note-item),
    :where(.shop-jw-order .trk-read),
    :where(.shop-jw-rd .rd__cards astra-card[data-dirty]),
    :where(.shop-jw-rd .rd__rejected),
    :where(.shop-jw-rd .rd__tracker),
    :where(.shop-jw-rd .trk-grp),
    :where(.shop-jw-print .note),
    :where(.finance-more > summary),
    :where(.finance-email-preview),
    :where(.finance-quotes .finance-quotes__more > summary),
    :where(.finance-pub .pub__pay-msg),
    :where(.finance-pub .pub__pending),
    :where(.finance-media .card),
    :where(.finance-media .drawer__asset),
    :where(.finance-media .drawer__swatch),
    :where(.finance-media .drawer__cover-thumb),
    :where(.finance-media .usage__row),
    :where(.finance-media__dropzone),
    :where(.finance-facts--sunken),
    :where(.finance-facts--boxed),
    :where(.finance-confirm),
    :where(.finance-hive .po-preview),
    :where(.finance-statement),
    :where(.ads-campaign),
    :where(.ads-campaign__media),
    :where(.ads-drop__square),
    :where(.ads-estimate),
    :where(.ads-preview),
    :where(.ads-native),
    :where(.hive-words),
    :where(.hive-live),
    :where(.ins__live-toggle),
    :where(.hive-raw),
    :where(.hive-creative__plate),
    :where(.hive-creative__plate img),
    :where(.hive-review__art),
    :where(.hive-bill__fact),
    :where(.hive-bill__tier),
    :where(.hive-bill__control),
    :where(.hive-code),
    :where(.hive-integ__ad),
    :where(.hive-integ__ad img),
    :where(.hive-doc pre),
    :where(.hive-doc blockquote),
    :where(.hive-media .card),
    :where(.media__dropzone),
    :where(.hive-media .drawer__asset),
    :where(.hive-media .drawer__swatch),
    :where(.hive-media .drawer__cover-thumb),
    :where(.hive-media .usage__row),
    :where(.hive-asset .preview__img),
    :where(.hive-asset .cover__frame),
    :where(.hive-asset .swatch),
    :where(.hive-asset .usage__row),
    :where(.hive-item .usage__row),
    :where(.hive-item .preview__img),
    :where(.hive-item .cover-thumb),
    :where(.hive-ticket .ticket__panel),
    :where(.hive-chat .chat-panel),
    :where(.hive-chat .thread),
    :where(.hive-switch-row),
    :where(.hive-role-brand),
    :where(.hive-role-card),
    :where(.hive-perm-key),
    :where(.demo-thread),
    :where(.demo-thread__entry),
    :where(.artist .artist__thumb),
    :where(.artist__photo-view),
    :where(.artist .credit-list a),
    :where(.artist .impact-row),
    :where(.music-meta__row),
    :where(.music-releases .art-thumb),
    :where(.music-release .tracklist__row),
    :where(.music-release .attach-modal__row),
    :where(.music-create .tracklist__row),
    :where(.music-income .rev-row),
    :where(.music-costs .rev-row),
    :where(.pixel-item__stage),
    :where(.pixel-story__cover),
    :where(.pixel-cover__frame),
    :where(.pixel-drawer__frame),
    :where(.pixel-statement),
    :where(.xtra-editor__head),
    :where(.xtra-round-up-edit__preview iframe),
    :where(.xtra-front__preview .tile-board__media),
    :where(.xtra-front__preview .tile-board__ph),
    :where(.disclosure),
    :where(.lightbox__img),
    :where(.tile-board__tile),
    :where(.tile-board__add),
    :where(.rank-list__row),
    :where(astra-shell-admin:not(:defined))::before,
    :where(astra-shell-ninefive:not(:defined))::before,
    :where(astra-shell-partner:not(:defined))::before,
    :where(astra-shell-identity:not(:defined))::before,
    :where(astra-shell-admin:not(:defined))::after,
    :where(astra-shell-ninefive:not(:defined))::after,
    :where(astra-shell-partner:not(:defined))::after,
    :where(astra-shell-identity:not(:defined))::after,
    :where(astra-button:not(:defined)),
    :where(astra-badge:not(:defined)),
    :where(astra-avatar:not(:defined)),
    :where(astra-switch:not(:defined)),
    :where(astra-checkbox:not(:defined)),
    :where(astra-radio:not(:defined)),
    :where(astra-loading:not(:defined)),
    :where(astra-notification-bell:not(:defined)),
    :where(astra-workspace-switcher:not(:defined)),
    :where(astra-progress-ring:not(:defined)),
    :where(astra-dropdown:not(:defined)),
    :where(astra-user-menu:not(:defined)),
    :where(astra-input:not(:defined)),
    :where(astra-textarea:not(:defined)),
    :where(astra-select:not(:defined)),
    :where(astra-combobox:not(:defined)),
    :where(astra-number-input:not(:defined)),
    :where(astra-date-picker:not(:defined)),
    :where(astra-date-range-picker:not(:defined)),
    :where(astra-time-picker:not(:defined)),
    :where(astra-otp-input:not(:defined)),
    :where(astra-tag-input:not(:defined)),
    :where(astra-slider:not(:defined)),
    :where(astra-color-picker:not(:defined)),
    :where(astra-file-upload:not(:defined)),
    :where(astra-media-picker:not(:defined)),
    :where(astra-content-picker:not(:defined)),
    :where(astra-progress-bar:not(:defined)),
    :where(astra-table:not(:defined)),
    :where(astra-chart:not(:defined)),
    :where(astra-calendar:not(:defined)),
    :where(astra-kanban:not(:defined)),
    :where(astra-chat:not(:defined)),
    :where(astra-audio:not(:defined)),
    :where(astra-audio-trimmer:not(:defined)),
    :where(astra-video:not(:defined)),
    :where(astra-rich-text:not(:defined)),
    :where(astra-batch-progress:not(:defined)),
    :where(astra-batch-review:not(:defined)),
    :where(astra-empty-state:not(:defined)),
    :where(astra-pagination:not(:defined)),
    :where(astra-stats-card:not(:defined)),
    :where(astra-skeleton:not(:defined)),
    :where(astra-notification-item:not(:defined)),
    :where(astra-card:not(:defined)) {
      clip-path: var(--squircle-sliver);
    }
    :where(.page-header--sticky, .status-surface, .view-tabs > a:focus-visible, .item-list__row:is(a, button), .item-list__icon, .editor-canvas__drawer-cover, .xtra-canvas__drawer-cover, .studio-token, .studio-diff__code, .company-ticket .ticket__panel, .company-chat .chat-panel, .company-chat .thread, .company-disclosure, .company-client .price-edit, .shop-collections .assign, .shop-coupons .scope, .shop-products .bulk__panel, .shop-order .note-item, .shop-order .trk-read, .shop-rd .rd__cards astra-card[data-dirty], .shop-rd .rd__tracker, .shop-rd .trk-grp, .shop-pe__serp, .shop-pe__ro-thumb, .vx-axis, .vx-row, .pme__cover-view, .pme__cover-empty, .pme__row, .pme__still, .shop-meta2__open, .shop-jw-collections .tree__row, .shop-jw-coupons .scope, .shop-jw-products .bulk-scope, .shop-jw-products .bulk__panel, .shop-jw-products .bulk__strip, .shop-jw-order .ret-row, .shop-jw-order .order-detail__delivery, .shop-jw-order .trk-error, .shop-jw-order .note-item, .shop-jw-order .trk-read, .shop-jw-rd .rd__cards astra-card[data-dirty], .shop-jw-rd .rd__rejected, .shop-jw-rd .rd__tracker, .shop-jw-rd .trk-grp, .shop-jw-print .note, .finance-more > summary, .finance-email-preview, .finance-quotes .finance-quotes__more > summary, .finance-pub .pub__pay-msg, .finance-pub .pub__pending, .finance-media .card, .finance-media .drawer__asset, .finance-media .drawer__swatch, .finance-media .drawer__cover-thumb, .finance-media .usage__row, .finance-media__dropzone, .finance-facts--sunken, .finance-facts--boxed, .finance-confirm, .finance-hive .po-preview, .finance-statement, .ads-campaign, .ads-campaign__media, .ads-drop__square, .ads-estimate, .ads-preview, .ads-native, .hive-words, .hive-live, .ins__live-toggle, .hive-raw, .hive-creative__plate, .hive-creative__plate img, .hive-review__art, .hive-bill__fact, .hive-bill__tier, .hive-bill__control, .hive-code, .hive-integ__ad, .hive-integ__ad img, .hive-doc pre, .hive-doc blockquote, .hive-media .card, .media__dropzone, .hive-media .drawer__asset, .hive-media .drawer__swatch, .hive-media .drawer__cover-thumb, .hive-media .usage__row, .hive-asset .preview__img, .hive-asset .cover__frame, .hive-asset .swatch, .hive-asset .usage__row, .hive-item .usage__row, .hive-item .preview__img, .hive-item .cover-thumb, .hive-ticket .ticket__panel, .hive-chat .chat-panel, .hive-chat .thread, .hive-switch-row, .hive-role-brand, .hive-role-card, .hive-perm-key, .demo-thread, .demo-thread__entry, .artist .artist__thumb, .artist__photo-view, .artist .credit-list a, .artist .impact-row, .music-meta__row, .music-releases .art-thumb, .music-release .tracklist__row, .music-release .attach-modal__row, .music-create .tracklist__row, .music-income .rev-row, .music-costs .rev-row, .pixel-item__stage, .pixel-story__cover, .pixel-cover__frame, .pixel-drawer__frame, .pixel-statement, .xtra-editor__head, .xtra-round-up-edit__preview iframe, .xtra-front__preview .tile-board__media, .xtra-front__preview .tile-board__ph, .disclosure, .lightbox__img, .tile-board__tile, .tile-board__add, .rank-list__row, astra-button:not(:defined), astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-checkbox:not(:defined), astra-radio:not(:defined), astra-loading:not(:defined), astra-notification-bell:not(:defined), astra-workspace-switcher:not(:defined), astra-progress-ring:not(:defined), astra-dropdown:not(:defined), astra-user-menu:not(:defined), astra-input:not(:defined), astra-textarea:not(:defined), astra-select:not(:defined), astra-combobox:not(:defined), astra-number-input:not(:defined), astra-date-picker:not(:defined), astra-date-range-picker:not(:defined), astra-time-picker:not(:defined), astra-otp-input:not(:defined), astra-tag-input:not(:defined), astra-slider:not(:defined), astra-color-picker:not(:defined), astra-file-upload:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-progress-bar:not(:defined), astra-table:not(:defined), astra-chart:not(:defined), astra-calendar:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined), astra-rich-text:not(:defined), astra-batch-progress:not(:defined), astra-batch-review:not(:defined), astra-empty-state:not(:defined), astra-pagination:not(:defined), astra-stats-card:not(:defined), astra-skeleton:not(:defined), astra-notification-item:not(:defined), astra-card:not(:defined)):has(astra-combobox, astra-date-picker, astra-date-range-picker, astra-time-picker, astra-date-time, astra-tag-input, astra-color-picker, astra-content-picker, astra-media-picker, astra-notification-bell, astra-command-palette, astra-rich-text) { clip-path: none; }
    :where(.status-surface),
    :where(.tile-board__add),
    :where(.shop-meta2__open) { position: relative; }
    .status-surface {
      --_e: 1px;
      border-image: var(--_ring-image, none);
    }
    .tile-board__add {
      --_e: 1px;
      border-image: var(--_ring-image, none);
    }
    .shop-meta2__open {
      --_e: 1px;
      border-image: var(--_ring-image, none);
    }
    .status-surface::after,
    .tile-board__add::after,
    .shop-meta2__open::after {
      content: var(--_ring, none);
      position: absolute;
      inset: calc(-1 * var(--_e));
      box-sizing: border-box;
      border-style: inherit;
      border-color: inherit;
      border-width: calc(2 * var(--_e) + 0.2 * var(--_rx));
      border-image: none;
      border-radius: 0;
      background: none;
      box-shadow: none;
      outline: none;
      clip-path: none;
      transform: none;
      pointer-events: none;
      mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform=''%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(1 0) scale(-1 1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(1 1) scale(-1 -1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(0 1) scale(1 -1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000 0 0), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform=''%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(1 0) scale(-1 1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(1 1) scale(-1 -1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'%3E%3Cg transform='translate(0 1) scale(1 -1)'%3E%3Cpath d='M0 1C0 .625-.0109 .3291 .1591 .1591C.3291-.0109 .625 0 1 0L0 0Z' fill='%23000'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000 0 0);
      mask-size: max(0px, var(--_rtl) - 1.84 * var(--_e)) max(0px, var(--_rtl) - 1.84 * var(--_e)), max(0px, var(--_rtr) - 1.84 * var(--_e)) max(0px, var(--_rtr) - 1.84 * var(--_e)), max(0px, var(--_rbr) - 1.84 * var(--_e)) max(0px, var(--_rbr) - 1.84 * var(--_e)), max(0px, var(--_rbl) - 1.84 * var(--_e)) max(0px, var(--_rbl) - 1.84 * var(--_e)), calc(100% - 2 * var(--_e)) calc(100% - 2 * var(--_e)), var(--_rtl) var(--_rtl), var(--_rtr) var(--_rtr), var(--_rbr) var(--_rbr), var(--_rbl) var(--_rbl), 100% 100%;
      mask-position: left var(--_e) top var(--_e), right var(--_e) top var(--_e), right var(--_e) bottom var(--_e), left var(--_e) bottom var(--_e), center, left top, right top, right bottom, left bottom, center;
      mask-composite: exclude, exclude, exclude, exclude, exclude, exclude, exclude, exclude, exclude, add;
      mask-repeat: no-repeat;
      mask-origin: border-box;
      mask-clip: border-box;
    }
    *::-webkit-scrollbar-thumb { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    a:focus-visible { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-xs); }
    .page-cta-split > astra-button:first-child::part(button), .page-cta-split > astra-dropdown:first-child > astra-button[slot=trigger]::part(button) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tr: 0px; --sq-br: 0px; border-top-right-radius: 0; border-bottom-right-radius: 0; }
    .page-cta-split > astra-button:last-child::part(button), .page-cta-split > astra-dropdown:last-child > astra-button[slot=trigger]::part(button) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-bl: 0px; border-top-left-radius: 0; border-bottom-left-radius: 0; }
    .page-header--sticky { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
@media (max-width: 768px) {
    .page-header--sticky { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
}
@media (min-width: 769px) {
    [data-scrolled] .page-header--sticky { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 0; }
}
    .status-surface { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .back-link { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .view-tabs > a::after { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-top-left-radius: 2px; border-top-right-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; }
    .view-tabs > a:focus-visible { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .view-tabs__count { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .filter-chips > a { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-pill); }
    .item-list__row:is(a, button) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .item-list__icon { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .copyval, .copyblock { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .ai-sheen-edge::after, .ai-landed::after { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    .kbd { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .editor-canvas__drawer-cover, .xtra-canvas__drawer-cover { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .website-row-link { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .website-wording__head code { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .website-points > li::before { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .studio-token { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .studio-diff__code { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    summary.team-subhead { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .company-ticket .ticket__panel, .company-chat .chat-panel { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .company-chat .thread { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .company-chat .thread__dot { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 50%; }
    .company-ticket .ticket__convo > .status-surface { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 0; }
    .company-disclosure { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .company-disclosure > summary { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    .company-client .price-edit { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-collections .assign { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-coupons .scope { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-coupons .chipset__chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .shop-coupons .chipset__chip button { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .shop-products .bulk__panel { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-order .note-item { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-order .trk-read { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-rd .rd__cards astra-card[data-dirty] { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-rd .rd__tracker { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-rd .trk-grp { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-pe__serp { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-pe__ro-thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .vx-axis { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .vx-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .pme__cover-view { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pme__cover-zoom { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .pme__cover-empty { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pme__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .pme__pos { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .pme__still { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-meta2__open { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-meta2__chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .shop-meta2__tag { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .shop-jw-collections .tree__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-jw-coupons .scope { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-coupons .chipset__chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .shop-jw-coupons .chipset__chip button { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .shop-jw-products .bulk-scope { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-products .bulk__panel { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-products .bulk__strip { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-jw-order .ret-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-jw-order .order-detail__delivery { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-order .trk-error { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-jw-order .note-item { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .shop-jw-order .copyval, .shop-jw-order .copyblock { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .shop-jw-order .trk-read { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-rd .rd__cards astra-card[data-dirty] { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-rd .rd__rejected { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-rd .rd__tracker { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-rd .trk-grp { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .shop-jw-print .note { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-more > summary { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .finance-email-preview { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-quotes .finance-quotes__more > summary { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .finance-pub .pub__pay-msg { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-pub .pub__pending { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-pub .pub__alt summary { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .finance-media .chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-pill); }
    .finance-media .card { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-media .card__play span { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .finance-media .drawer__asset { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-media .drawer__swatch { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .finance-media .drawer__cover > .status-surface { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 0; }
    .finance-media .drawer__cover-thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .finance-media .usage__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .finance-media__dropzone { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-media__dropzone-pill { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .finance-facts--sunken { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-facts--boxed { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-confirm { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-hive .po-preview { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .finance-statement { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-campaign { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card, var(--radius-lg)); --sq-tr: var(--radius-card, var(--radius-lg)); --sq-br: var(--radius-card, var(--radius-lg)); --sq-bl: var(--radius-card, var(--radius-lg)); border-radius: var(--squircle-radius); }
    .ads-campaign__media { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-campaign__name:focus-visible { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .ads-preview__slot--pickable { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .ads-drop__square { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-estimate { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-preview { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-native { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .ads-native__cta { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .hive-words { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-live { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-live__dot { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 50%; }
    .ins__live-toggle { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-raw { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-creative__plate { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-creative__plate img { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-review__art { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-bill__fact { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-bill__tier { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-bill__control { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-code { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-integ__origins code { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .hive-integ__ad { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-integ__ad img { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-doc code { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-xs, 4px); }
    .hive-doc pre { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-doc blockquote { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-media .chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .hive-media .card { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-media .card__play span { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .media__dropzone { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .media__dropzone-pill { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .hive-media .drawer__asset { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-media .drawer__swatch { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-media .drawer__cover > .status-surface { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 0; }
    .hive-media .drawer__cover-thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-media .usage__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-asset .preview__img { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-asset .cover__frame { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-asset .swatch { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-asset .usage__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-item .usage__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-item .swatch__chip { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm, 4px); }
    .hive-item .preview__img { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-item .cover-thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-ticket .ticket__panel { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card, 0.75rem); --sq-tr: var(--radius-card, 0.75rem); --sq-br: var(--radius-card, 0.75rem); --sq-bl: var(--radius-card, 0.75rem); border-radius: var(--squircle-radius); }
    .hive-chat .chat-panel { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card, 0.75rem); --sq-tr: var(--radius-card, 0.75rem); --sq-br: var(--radius-card, 0.75rem); --sq-bl: var(--radius-card, 0.75rem); border-radius: var(--squircle-radius); }
    .hive-chat .thread { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .hive-chat .thread__dot { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 50%; }
    .hive-switch-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-role-brand { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-role-card { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .hive-perm-key { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .demo-thread { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .demo-thread__entry { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .artist .artist__thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .artist__photo-view { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .artist .credit-list a { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .artist .impact-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .music-meta__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-releases .art-thumb { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-release .tracklist__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-release .tracklist__pos { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .music-release .attach-modal__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-create .tracklist__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-create .tracklist__pos { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 999px; }
    .music-income .rev-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .music-costs .rev-row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .pixel-item__stage { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pixel-item__stage[data-kind=audio] { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: 0; }
    .pixel-story__cover { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pixel-story__cover-ph { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    .pixel-cover__frame { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .tile-board.pixel-tiles .tile-board__badge { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-pill); }
    .pixel-drawer__frame { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pixel-statement { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .pixel-readiness__details code { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .pixel-readiness__how > summary:focus-visible { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .xtra-editor__head { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .xtra-round-up-edit__preview iframe { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .xtra-front__preview .tile-board__media, .xtra-front__preview .tile-board__ph { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .disclosure { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .disclosure__summary { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    .repeater__handle { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-sm); }
    .lightbox__img { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .lightbox__close { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .tile-board__tile, .tile-board__add { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    .tile-board__open:focus-visible { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    .tile-board__add astra-icon { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-full); }
    .rank-list__row { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    .rank-list__row::before { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: inherit; }
    astra-shell-admin:not(:defined)::before, astra-shell-ninefive:not(:defined)::before, astra-shell-partner:not(:defined)::before, astra-shell-identity:not(:defined)::before, astra-shell-admin:not(:defined)::after, astra-shell-ninefive:not(:defined)::after, astra-shell-partner:not(:defined)::after, astra-shell-identity:not(:defined)::after { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-surface); --sq-tr: var(--radius-surface); --sq-br: var(--radius-surface); --sq-bl: var(--radius-surface); border-radius: var(--squircle-radius); }
    astra-button:not(:defined), astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-checkbox:not(:defined), astra-radio:not(:defined), astra-loading:not(:defined), astra-notification-bell:not(:defined), astra-workspace-switcher:not(:defined), astra-progress-ring:not(:defined), astra-dropdown:not(:defined), astra-user-menu:not(:defined), astra-input:not(:defined), astra-textarea:not(:defined), astra-select:not(:defined), astra-combobox:not(:defined), astra-number-input:not(:defined), astra-date-picker:not(:defined), astra-date-range-picker:not(:defined), astra-time-picker:not(:defined), astra-otp-input:not(:defined), astra-tag-input:not(:defined), astra-slider:not(:defined), astra-color-picker:not(:defined), astra-file-upload:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-progress-bar:not(:defined), astra-table:not(:defined), astra-chart:not(:defined), astra-calendar:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined), astra-rich-text:not(:defined), astra-batch-progress:not(:defined), astra-batch-review:not(:defined), astra-empty-state:not(:defined), astra-pagination:not(:defined), astra-stats-card:not(:defined), astra-skeleton:not(:defined), astra-notification-item:not(:defined) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-control); --sq-tr: var(--radius-control); --sq-br: var(--radius-control); --sq-bl: var(--radius-control); border-radius: var(--squircle-radius); }
    astra-badge:not(:defined), astra-avatar:not(:defined), astra-switch:not(:defined), astra-progress-ring:not(:defined), astra-loading:not(:defined) { --_ring: none; --_ring-image: none; --sq-tl: 0px; --sq-tr: 0px; --sq-br: 0px; --sq-bl: 0px; border-radius: var(--radius-pill); }
    astra-table:not(:defined), astra-chart:not(:defined), astra-kanban:not(:defined), astra-chat:not(:defined), astra-calendar:not(:defined), astra-batch-review:not(:defined), astra-media-picker:not(:defined), astra-content-picker:not(:defined), astra-rich-text:not(:defined), astra-file-upload:not(:defined) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    astra-empty-state:not(:defined) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    astra-audio:not(:defined), astra-audio-trimmer:not(:defined), astra-video:not(:defined) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
    astra-card:not(:defined) { --_ring: ""; --_ring-image: linear-gradient(#0000 0 0) 1; --sq-tl: var(--radius-card); --sq-tr: var(--radius-card); --sq-br: var(--radius-card); --sq-bl: var(--radius-card); border-radius: var(--squircle-radius); }
  }
}