/*! snth-ui v1.6.0 — the snth design system. Single source of truth for snth surfaces. Consume, don't fork. */

/* =========================================================================
   snth-ui
   A faithful distillation of the established snth design language:
   the marketing site (styles/site.css), the admin app (styles/newsroom.css),
   the shared nav (styles/shared-nav.css), and the owner-approved media kit
   (src/remotion/*.css). No new fonts, no new palette — the alphabet already
   in production, made portable for every snth surface.

   Layers, in order:
     1. TOKENS      — :root custom properties, all --sui-* prefixed.
                      Dark is the default theme. [data-theme="light"] on any
                      ancestor flips the SEMANTIC tokens only.
     2. BASE        — .sui-reset, .sui-canvas, :focus-visible ring,
                      reduced-motion kill-switch.
     3. COMPONENTS  — .sui-* building blocks, referencing ONLY semantic tokens.
     4. LAYOUT      — a small set of deliberate utilities.

   Rule for authors: components must never reference a raw color literal or a
   primitive token directly — always a semantic token — so both themes work
   automatically. If you need a new semantic token, define it in BOTH themes.
   ========================================================================= */

/* =========================================================================
   1. TOKENS
   ========================================================================= */

:root {
  /* ---- font stacks (no new fonts — SF Pro family, Inter substitute) ---- */
  --sui-font-text:
    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --sui-font-display:
    -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
    "Helvetica Neue", Arial, sans-serif;
  --sui-font-mono:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ---- primitive palette (owner-approved, do not extend) ----
     These are the raw hues. Components must NOT use these directly;
     they exist so the semantic tokens below (and both themes) can map onto
     a single, canonical set of values. */
  --sui-c-black: #000;
  --sui-c-near-black: #050506;
  --sui-c-ink: #1d1d1f;
  --sui-c-ink-pink: #1d1018;      /* accent-pink-ink — text on pink pills */
  --sui-c-graphite: #161617;      /* deep-graphite raised surface */
  --sui-c-card-dark: #0b0b0d;
  --sui-c-storm: #333336;
  --sui-c-light: #f5f5f7;
  --sui-c-white: #fff;
  --sui-c-muted-dark: #86868b;    /* cool gray, muted on dark */
  --sui-c-muted-light: #6e6e73;   /* muted on light */
  --sui-c-hairline-light: #d2d2d7;

  /* pink family — the restrained snth signal */
  --sui-c-pink: #f4b8d1;          /* accent-pink */
  --sui-c-pink-strong: #ff8fbd;   /* accent-pink-strong — CTA hover */
  --sui-c-pink-tint: #fbe4ef;     /* light pink text on dark pink washes */

  /* blue family */
  --sui-c-blue: #0071e3;          /* interactive-blue — primary action (light contexts) */
  --sui-c-blue-bright: #0a84ff;   /* action blue on pure-dark app chrome */
  --sui-c-blue-link: #0066cc;     /* highlight-blue — text links on light */
  --sui-c-blue-link-dark: #2997ff;/* link on pure black */
  --sui-c-blue-quiet: #8fb7c9;    /* quiet secondary blue */

  /* status hues (from the admin badge set) */
  --sui-c-review: #8fb7c9;        /* in-review / proposed — quiet blue */
  --sui-c-review-ink: #bcd9e8;
  --sui-c-warn: #ed6300;          /* changes requested — orange */
  --sui-c-warn-ink: #f0b48b;
  --sui-c-ok: #28c840;            /* approved / accepted — green */
  --sui-c-ok-ink: #9be6c3;
  --sui-c-danger: #ff453a;        /* rejected / destructive — red */
  --sui-c-danger-ink: #f2a09a;

  /* ---- radius scale ---- */
  --sui-radius-card: 28px;        /* cards */
  --sui-radius-nested: 20px;      /* nested tiles */
  --sui-radius-inner: 14px;       /* inputs, small tiles */
  --sui-radius-sm: 10px;
  --sui-radius-pill: 999px;       /* pills, toggles, chips */

  /* ---- spacing scale (4px base, comfortable density) ---- */
  --sui-space-1: 4px;
  --sui-space-2: 8px;
  --sui-space-3: 12px;
  --sui-space-4: 16px;
  --sui-space-5: 20px;
  --sui-space-6: 24px;
  --sui-space-7: 28px;
  --sui-space-8: 32px;
  --sui-space-10: 40px;
  --sui-space-11: 44px;

  /* ---- type scale (as used in production) ---- */
  --sui-text-caption: 12px;
  --sui-text-sm: 14px;
  --sui-text-body: 17px;
  --sui-text-lg: 20px;
  --sui-text-eyebrow: 13px;       /* pink caps labels */
  --sui-text-lede: clamp(21px, 2.7vw, 32px);
  --sui-text-title: clamp(28px, 3vw, 42px);
  --sui-text-display: clamp(44px, 4.6vw, 64px);

  --sui-leading-tight: 1.05;
  --sui-leading-snug: 1.2;
  --sui-leading-body: 1.4;

  /* weight vocabulary: 400 body, 600 headings, 700–800 small bold labels */
  --sui-weight-regular: 400;
  --sui-weight-medium: 600;
  --sui-weight-bold: 700;
  --sui-weight-heavy: 800;

  /* ---- motion ---- */
  --sui-dur-hover: 170ms;         /* 160–180ms band for hovers */
  --sui-dur-move: 340ms;          /* larger transitions */
  --sui-ease: ease;
  --sui-ease-move: cubic-bezier(0.2, 0, 0, 1);

  /* ---- signature gradients ---- */
  /* THE recurring hero-treatment dark card: pink-radial over dark-linear */
  --sui-gradient-glow:
    radial-gradient(circle at 78% 18%, rgba(244, 184, 209, 0.16), transparent 36%),
    linear-gradient(145deg, #1d1d1f, #0b0b0d);
  /* hero headline / progress text gradient */
  --sui-gradient-headline:
    linear-gradient(96deg, #fff7fb 0%, var(--sui-c-pink) 42%, var(--sui-c-blue-quiet) 100%);
  /* Mia avatar radial (pink → dusk) */
  --sui-gradient-mia:
    radial-gradient(circle at 32% 26%, #ffdfee 0%, #f4b8d1 46%, #a67ba4 100%);

  /* =======================================================================
     SEMANTIC TOKENS — DARK THEME (default)
     Components reference ONLY these. The light block below re-maps the same
     names; anything a component uses must be defined in BOTH places.
     ======================================================================= */

  --sui-canvas: var(--sui-c-near-black);       /* page background */
  --sui-canvas-pure: var(--sui-c-black);       /* full-bleed hero black */
  --sui-surface: var(--sui-c-graphite);        /* cards / panels */
  --sui-surface-2: var(--sui-c-card-dark);     /* deeper nested surface */
  --sui-raised: rgba(255, 255, 255, 0.05);     /* raised fill (inputs, tiles) */
  --sui-raised-2: rgba(255, 255, 255, 0.09);   /* stronger raised fill */
  --sui-overlay: rgba(29, 29, 31, 0.76);       /* blurred floating chrome */

  --sui-ink: var(--sui-c-light);               /* primary text */
  --sui-ink-strong: var(--sui-c-white);        /* max-contrast text/headings */
  --sui-muted: var(--sui-c-muted-dark);        /* secondary text */
  --sui-faint: rgba(245, 245, 247, 0.52);      /* tertiary / meta text */

  --sui-line: rgba(255, 255, 255, 0.14);       /* hairline separators */
  --sui-ring: rgba(245, 245, 247, 0.10);       /* inset 1px ring (elevation) */
  --sui-ring-strong: rgba(245, 245, 247, 0.16);

  /* pink signal, resolved for this theme */
  --sui-pink: var(--sui-c-pink);
  --sui-pink-strong: var(--sui-c-pink-strong);
  --sui-pink-ink: var(--sui-c-ink-pink);       /* text ON a pink fill */
  --sui-pink-ring: rgba(244, 184, 209, 0.24);  /* chip / accent inset ring */
  --sui-pink-wash: rgba(244, 184, 209, 0.13);  /* faint pink surface tint */
  --sui-pink-text: var(--sui-c-pink-tint);     /* pink-family text on dark */

  /* action colors */
  --sui-action: var(--sui-c-blue-bright);      /* primary action on dark chrome */
  --sui-action-ink: var(--sui-c-white);
  --sui-link: var(--sui-c-blue-link-dark);     /* text links on dark */

  /* focus ring */
  --sui-focus: rgba(244, 184, 209, 0.55);
  --sui-focus-ring: 0 0 0 3px var(--sui-focus);

  /* app-shell layering: bottom nav < scrim < drawer; sticky content stays local */
  --sui-z-sticky: 1;
  --sui-z-bottom-nav: 40;
  --sui-z-scrim: 45;
  --sui-z-drawer: 50;

  /* status, resolved (wash background + readable ink, on dark) */
  --sui-neutral-wash: rgba(245, 245, 247, 0.10);
  --sui-neutral-ink: rgba(245, 245, 247, 0.72);
  --sui-review-wash: rgba(143, 183, 201, 0.20);
  --sui-review-ink: var(--sui-c-review-ink);
  --sui-warn-wash: rgba(237, 99, 0, 0.20);
  --sui-warn-ink: var(--sui-c-warn-ink);
  --sui-ok-wash: rgba(40, 200, 64, 0.16);
  --sui-ok-ink: var(--sui-c-ok-ink);
  --sui-danger-wash: rgba(255, 69, 58, 0.16);
  --sui-danger-ink: var(--sui-c-danger-ink);
  --sui-published-wash: rgba(244, 184, 209, 0.20);
  --sui-published-ink: var(--sui-c-pink-tint);

  /* mac window traffic lights (fixed, theme-independent) */
  --sui-mac-close: #ff5f57;
  --sui-mac-min: #febc2e;
  --sui-mac-max: #28c840;
}

/* =======================================================================
   SEMANTIC TOKENS — LIGHT THEME
   Flip only the semantic layer. Same token names, light-canvas values.
   ======================================================================= */

[data-theme="light"] {
  --sui-canvas: var(--sui-c-light);
  --sui-canvas-pure: var(--sui-c-white);
  --sui-surface: var(--sui-c-white);
  --sui-surface-2: #fbfbfd;
  --sui-raised: rgba(29, 29, 31, 0.05);
  --sui-raised-2: rgba(29, 29, 31, 0.08);
  --sui-overlay: rgba(255, 255, 255, 0.84);

  --sui-ink: var(--sui-c-ink);
  --sui-ink-strong: var(--sui-c-ink);
  --sui-muted: var(--sui-c-muted-light);
  --sui-faint: rgba(29, 29, 31, 0.52);

  --sui-line: rgba(29, 29, 31, 0.12);
  --sui-ring: rgba(29, 29, 31, 0.08);
  --sui-ring-strong: rgba(29, 29, 31, 0.14);

  --sui-pink: var(--sui-c-pink);
  --sui-pink-strong: var(--sui-c-pink-strong);
  --sui-pink-ink: var(--sui-c-ink-pink);
  --sui-pink-ring: rgba(244, 184, 209, 0.30);
  --sui-pink-wash: rgba(244, 184, 209, 0.16);
  --sui-pink-text: #b0517e;                    /* pink-family text, legible on light */

  --sui-action: var(--sui-c-blue);             /* interactive-blue on light */
  --sui-action-ink: var(--sui-c-white);
  --sui-link: var(--sui-c-blue-link);          /* highlight-blue text links */

  --sui-focus: rgba(0, 113, 227, 0.30);
  --sui-focus-ring: 0 0 0 3px var(--sui-focus);

  --sui-z-sticky: 1;
  --sui-z-bottom-nav: 40;
  --sui-z-scrim: 45;
  --sui-z-drawer: 50;

  --sui-neutral-wash: rgba(29, 29, 31, 0.06);
  --sui-neutral-ink: rgba(29, 29, 31, 0.62);
  --sui-review-wash: rgba(143, 183, 201, 0.22);
  --sui-review-ink: #3d6b80;
  --sui-warn-wash: rgba(237, 99, 0, 0.14);
  --sui-warn-ink: #b64400;
  --sui-ok-wash: rgba(40, 160, 64, 0.16);
  --sui-ok-ink: #1c7a3e;
  --sui-danger-wash: rgba(255, 69, 58, 0.14);
  --sui-danger-ink: #c22a20;
  --sui-published-wash: rgba(244, 184, 209, 0.22);
  --sui-published-ink: #b0517e;

  --sui-mac-close: #ff5f57;
  --sui-mac-min: #febc2e;
  --sui-mac-max: #28c840;
}

/* =========================================================================
   2. BASE
   ========================================================================= */

/* Opt-in minimal reset for embedded surfaces. Scope it to the subtree that
   consumes the kit; it never touches the host page globally. */
.sui-reset,
.sui-reset * {
  box-sizing: border-box;
}

.sui-reset {
  margin: 0;
  color: var(--sui-ink);
  font-family: var(--sui-font-text);
  font-size: var(--sui-text-body);
  line-height: var(--sui-leading-body);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.sui-reset a {
  color: inherit;
  text-decoration: none;
}

.sui-reset img {
  display: block;
  max-width: 100%;
}

.sui-reset button {
  font: inherit;
}

/* Body / full-surface helper: paints the themed canvas + default text color. */
.sui-canvas {
  background: var(--sui-canvas);
  color: var(--sui-ink);
  font-family: var(--sui-font-text);
  letter-spacing: 0;
}

/* One consistent focus ring on every interactive kit element.
   Elevation = ring, never a drifting shadow. */
[class*="sui-"]:focus-visible {
  outline: none;
  box-shadow: var(--sui-focus-ring);
}

/* Motion kill-switch. Any kit motion must survive this. */
@media (prefers-reduced-motion: reduce) {
  [class*="sui-"],
  [class*="sui-"]::before,
  [class*="sui-"]::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbars are hidden on every snth surface — scrolling itself is untouched
   (wheel, trackpad, touch, keyboard). Owner decision 2026-07-08. */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* =========================================================================
   3. COMPONENTS
   ========================================================================= */

/* -------------------------------------------------------------------------
   .sui-icon — deterministic inline SVG icon frame.
   Glyph paths come from the local `snth-icons.js` catalog. The frame inherits
   the surrounding text color, never captures pointer input, and stays crisp
   without relying on an icon font or platform-specific symbol set.

   .sui-disclosure-indicator — host-controlled right chevron. Put it inside an
   element with `aria-expanded`; the indicator rotates down when expanded.
   ------------------------------------------------------------------------- */
.sui-icon {
  display: inline-block;
  flex: none;
  width: 1em;
  height: 1em;
  overflow: visible;
  color: inherit;
  vertical-align: -0.125em;
  pointer-events: none;
}

.sui-icon--xs {
  width: var(--sui-space-2);
  height: var(--sui-space-2);
}

.sui-icon--sm {
  width: var(--sui-space-3);
  height: var(--sui-space-3);
}

.sui-icon--md {
  width: var(--sui-space-4);
  height: var(--sui-space-4);
}

.sui-icon--lg {
  width: var(--sui-space-5);
  height: var(--sui-space-5);
}

.sui-icon--xl {
  width: var(--sui-space-8);
  height: var(--sui-space-8);
}

.sui-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.sui-disclosure-indicator {
  display: inline-grid;
  flex: none;
  width: var(--sui-space-4);
  height: var(--sui-space-4);
  place-items: center;
  color: inherit;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform var(--sui-dur-hover) var(--sui-ease-move);
}

.sui-disclosure-indicator > .sui-icon {
  width: var(--sui-space-3);
  height: var(--sui-space-3);
}

[aria-expanded="true"] > .sui-disclosure-indicator,
.sui-disclosure-indicator.is-expanded {
  transform: rotate(90deg);
}

/* -------------------------------------------------------------------------
   .sui-button — pill actions
   --primary : pink CTA pill (site-nav-cta / preview-access-button)
   --blue    : filled action pill (.button)
   --ghost   : quiet raised pill
   --danger  : destructive
   --small   : compact
   States: hover / active / disabled / focus
   ------------------------------------------------------------------------- */
.sui-button {
  display: inline-flex;
  min-height: var(--sui-space-11);
  align-items: center;
  justify-content: center;
  gap: var(--sui-space-2);
  padding: 0 22px;
  border: 0;
  border-radius: var(--sui-radius-pill);
  background: var(--sui-raised-2);
  color: var(--sui-ink);
  font-family: inherit;
  font-size: var(--sui-text-body);
  font-weight: var(--sui-weight-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    color var(--sui-dur-hover) var(--sui-ease),
    transform var(--sui-dur-hover) var(--sui-ease);
}

.sui-button:hover {
  background: var(--sui-ring-strong);
}

.sui-button:active {
  transform: translateY(1px);
}

.sui-button:disabled,
.sui-button[aria-disabled="true"] {
  opacity: 0.42;
  pointer-events: none;
}

.sui-button--primary {
  background: var(--sui-pink);
  color: var(--sui-pink-ink);
}

.sui-button--primary:hover {
  background: var(--sui-pink-strong);
  color: var(--sui-pink-ink);
}

.sui-button--blue {
  background: var(--sui-action);
  color: var(--sui-action-ink);
}

.sui-button--blue:hover {
  background: var(--sui-action);
  filter: brightness(1.08);
}

.sui-button--ghost {
  background: var(--sui-raised);
  color: var(--sui-ink);
}

.sui-button--ghost:hover {
  background: var(--sui-raised-2);
}

.sui-button--danger {
  background: var(--sui-danger-wash);
  color: var(--sui-danger-ink);
}

.sui-button--danger:hover {
  background: var(--sui-danger-wash);
  filter: brightness(1.1);
}

/* Ghost-danger — a quiet destructive affordance: reads as a ghost at rest,
   warms to the danger wash + ink on hover/focus. For inline "Forget" / "Delete"
   / "Revoke" row actions where a solid --danger would be too loud. */
.sui-button--ghost-danger {
  background: transparent;
  color: var(--sui-muted);
  box-shadow: inset 0 0 0 1px var(--sui-ring);
}
.sui-button--ghost-danger:hover,
.sui-button--ghost-danger:focus-visible {
  background: var(--sui-danger-wash);
  color: var(--sui-danger-ink);
  box-shadow: inset 0 0 0 1px var(--sui-danger-wash);
}

.sui-button--small {
  min-height: 28px;
  padding: 0 14px;
  font-size: var(--sui-text-sm);
}

/* Text link — blue, with the auto arrow motif. */
.sui-link {
  color: var(--sui-link);
  font-size: var(--sui-text-body);
  text-decoration: none;
  cursor: pointer;
}

.sui-link:hover {
  text-decoration: underline;
}

.sui-link::after {
  content: " ›";
}

.sui-link--plain::after {
  content: "";
}

/* -------------------------------------------------------------------------
   .sui-chip — outcome pill with pink inset ring (.outcome-stack span)
   --quiet : neutral ring, no pink
   ------------------------------------------------------------------------- */
.sui-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sui-space-2);
  padding: 12px 18px;
  border-radius: var(--sui-radius-pill);
  background: var(--sui-raised);
  color: var(--sui-ink);
  box-shadow: inset 0 0 0 1px var(--sui-pink-ring);
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
  line-height: 1;
}

.sui-chip--quiet {
  box-shadow: inset 0 0 0 1px var(--sui-ring);
  color: var(--sui-muted);
}

/* -------------------------------------------------------------------------
   .sui-badge — status pill (admin badge set)
   modifiers: --draft --review --changes --approved --published --archived --preview
   ------------------------------------------------------------------------- */
.sui-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--sui-radius-pill);
  background: var(--sui-neutral-wash);
  color: var(--sui-neutral-ink);
  font-size: 11px;
  font-weight: var(--sui-weight-heavy);
  letter-spacing: 0.4px;
  line-height: 1.5;
  text-transform: uppercase;
}

.sui-badge--draft {
  background: var(--sui-neutral-wash);
  color: var(--sui-neutral-ink);
}

.sui-badge--review {
  background: var(--sui-review-wash);
  color: var(--sui-review-ink);
}

.sui-badge--changes {
  background: var(--sui-warn-wash);
  color: var(--sui-warn-ink);
}

.sui-badge--approved {
  background: var(--sui-ok-wash);
  color: var(--sui-ok-ink);
}

.sui-badge--published {
  background: var(--sui-published-wash);
  color: var(--sui-published-ink);
}

.sui-badge--archived {
  background: var(--sui-neutral-wash);
  color: var(--sui-faint);
  opacity: 0.8;
}

.sui-badge--preview {
  background: var(--sui-pink-wash);
  color: var(--sui-pink-text);
  box-shadow: inset 0 0 0 1px var(--sui-pink-ring);
}

/* -------------------------------------------------------------------------
   .sui-card — 28px surface card with inset ring
   --glow   : signature pink-radial-over-dark-linear treatment
   --raised : slightly lifted fill
   Works in light theme automatically via semantic tokens.
   ------------------------------------------------------------------------- */
.sui-card {
  display: block;
  padding: var(--sui-space-8);
  border-radius: var(--sui-radius-card);
  background: var(--sui-surface);
  color: var(--sui-ink);
  box-shadow: inset 0 0 0 1px var(--sui-ring);
}

.sui-card--raised {
  background: var(--sui-raised);
}

/* The signature hero-treatment card. The pink-radial gradient is a fixed,
   owner-approved dark visual and stays dark in both themes by design — pink
   is a restrained signal, never a broad light background. */
.sui-card--glow {
  background: var(--sui-gradient-glow);
  color: var(--sui-c-light);
  box-shadow: inset 0 0 0 1px rgba(245, 245, 247, 0.08);
}

/* -------------------------------------------------------------------------
   .sui-avatar — round identity mark with palette radials from the media kit
   sizes: --sm / (default) / --lg
   palettes: --mia --atlas --scout --emma --alex
   ------------------------------------------------------------------------- */
.sui-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sui-gradient-mia);
  color: #422836;
  font-family: var(--sui-font-display);
  font-size: 17px;
  font-weight: var(--sui-weight-bold);
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.sui-avatar--sm {
  width: 30px;
  height: 30px;
  font-size: 13px;
}

.sui-avatar--lg {
  width: 84px;
  height: 84px;
  font-size: 33px;
}

.sui-avatar--mia {
  background: var(--sui-gradient-mia);
  color: #422836;
}

.sui-avatar--atlas {
  background: radial-gradient(circle at 32% 26%, #cfe9f4 0%, #8fb7c9 52%, #4d6b7c 100%);
  color: #17313d;
}

.sui-avatar--scout {
  background: radial-gradient(circle at 32% 26%, #efe6cf 0%, #cbb98a 52%, #77683f 100%);
  color: #372f18;
}

.sui-avatar--emma {
  background: radial-gradient(circle at 32% 26%, #f4ead0 0%, #d9bd85 52%, #8a7440 100%);
  color: #3c3014;
}

.sui-avatar--alex {
  background: radial-gradient(circle at 32% 26%, #cfe3ff 0%, #7fa4e0 52%, #46618f 100%);
  color: #1c2c4a;
}

/* Optional pink glow halo behind an avatar (vs-glow-avatar). */
.sui-avatar-glow {
  position: relative;
  display: inline-flex;
}

.sui-avatar-glow::before {
  content: "";
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 184, 209, 0.22), transparent 62%);
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   Form controls — .sui-field / .sui-input / .sui-textarea / .sui-select
   44px height, 14px radius, focus ring like the access form.
   ------------------------------------------------------------------------- */
.sui-field {
  display: grid;
  gap: var(--sui-space-2);
}

.sui-field > .sui-label,
.sui-label {
  color: var(--sui-muted);
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-medium);
}

.sui-input,
.sui-select,
.sui-textarea {
  /* Self-contained sizing: width:100% + padding must fit the parent even on
     pages that don't opt into .sui-reset (register/waitlist funnel). */
  box-sizing: border-box;
  width: 100%;
  min-height: var(--sui-space-11);
  padding: 0 var(--sui-space-4);
  border: 1px solid var(--sui-line);
  border-radius: var(--sui-radius-inner);
  background: var(--sui-raised);
  color: var(--sui-ink);
  font-family: inherit;
  font-size: var(--sui-text-body);
  line-height: 1.35;
  outline: none;
  transition:
    border-color var(--sui-dur-hover) var(--sui-ease),
    box-shadow var(--sui-dur-hover) var(--sui-ease);
}

.sui-textarea {
  min-height: 96px;
  padding: var(--sui-space-3) var(--sui-space-4);
  resize: vertical;
}

.sui-select {
  padding-right: var(--sui-space-8);
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) center,
    calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Host-controlled select menu. Use when the operating system's native select
   popup cannot carry the product language. The host owns value + keyboard
   behavior; the kit owns the trigger, floating surface, and option states. */
.sui-picker {
  position: relative;
  min-width: 0;
}

.sui-picker__button {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: 100%;
  min-height: var(--sui-space-11);
  align-items: center;
  gap: var(--sui-space-3);
  padding: 0 var(--sui-space-4);
  border: 1px solid var(--sui-line);
  border-radius: var(--sui-radius-inner);
  background: var(--sui-raised);
  color: var(--sui-ink);
  font: inherit;
  font-size: var(--sui-text-body);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  outline: none;
  touch-action: manipulation;
  transform-origin: center;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    border-color var(--sui-dur-hover) var(--sui-ease),
    box-shadow var(--sui-dur-hover) var(--sui-ease),
    transform 100ms ease-out;
}

.sui-picker__button:hover { background: var(--sui-raised-2); }
.sui-picker__button:active { transform: scale(0.98); }
.sui-picker__button:focus-visible,
.sui-picker__button[aria-expanded="true"] {
  border-color: var(--sui-action);
  box-shadow: var(--sui-focus-ring);
}

.sui-picker__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sui-picker__chevron {
  width: var(--sui-space-2);
  height: var(--sui-space-2);
  margin-top: calc(-1 * var(--sui-space-1));
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: var(--sui-muted);
  transform: rotate(45deg);
  transition: transform var(--sui-dur-hover) var(--sui-ease-move);
}

.sui-picker__button[aria-expanded="true"] .sui-picker__chevron {
  margin-top: var(--sui-space-1);
  transform: rotate(225deg);
}

.sui-picker__menu {
  position: absolute;
  z-index: calc(var(--sui-z-drawer) + 1);
  top: calc(100% + var(--sui-space-1));
  left: 0;
  display: grid;
  width: max-content;
  min-width: 100%;
  max-width: min(320px, calc(100vw - var(--sui-space-5)));
  max-height: min(320px, 48vh);
  overflow-y: auto;
  padding: var(--sui-space-1);
  border-radius: var(--sui-radius-inner);
  background: var(--sui-surface);
  box-shadow:
    inset 0 0 0 1px var(--sui-ring-strong),
    0 var(--sui-space-3) var(--sui-space-8) color-mix(in srgb, var(--sui-ink) 18%, transparent);
  overscroll-behavior: contain;
  transform-origin: top left;
}

.sui-picker__menu[hidden] { display: none; }
.sui-picker__menu:not([hidden]) { animation: sui-picker-enter var(--sui-dur-hover) var(--sui-ease-move); }

@keyframes sui-picker-enter {
  from { opacity: 0; transform: translateY(calc(-1 * var(--sui-space-1))) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.sui-picker__option {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sui-space-4);
  width: 100%;
  min-height: 38px;
  align-items: center;
  gap: var(--sui-space-3);
  padding: var(--sui-space-2) var(--sui-space-3);
  border: 0;
  border-radius: var(--sui-radius-sm);
  background: transparent;
  color: var(--sui-ink);
  font: inherit;
  font-size: var(--sui-text-sm);
  line-height: var(--sui-leading-body);
  text-align: left;
  cursor: pointer;
  outline: none;
}

.sui-picker__option:hover,
.sui-picker__option:focus-visible { background: var(--sui-raised); }
.sui-picker__option:focus-visible { box-shadow: inset 0 0 0 1px var(--sui-ring-strong); }
.sui-picker__option[aria-selected="true"] {
  background: var(--sui-raised-2);
  color: var(--sui-ink-strong);
  font-weight: var(--sui-weight-medium);
}

.sui-picker__option::after {
  content: "";
  justify-self: center;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  opacity: 0;
  transform: translateY(-1px) rotate(45deg);
}

.sui-picker__option[aria-selected="true"]::after { opacity: 1; }

.sui-input::placeholder,
.sui-textarea::placeholder {
  color: var(--sui-faint);
  opacity: 1;
}

.sui-input:focus,
.sui-select:focus,
.sui-textarea:focus {
  border-color: var(--sui-action);
  box-shadow: var(--sui-focus-ring);
}

.sui-input:disabled,
.sui-select:disabled,
.sui-textarea:disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* -------------------------------------------------------------------------
   .sui-toggle — the vs-toggle from the viewer trust scene
   add --on for the checked state
   ------------------------------------------------------------------------- */
.sui-toggle {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 28px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: var(--sui-radius-pill);
  background: var(--sui-ring-strong);
  cursor: pointer;
  transition: background var(--sui-dur-hover) var(--sui-ease);
}

.sui-toggle::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transition: left var(--sui-dur-hover) var(--sui-ease-move);
}

.sui-toggle--on,
.sui-toggle[aria-checked="true"] {
  background: var(--sui-pink);
}

.sui-toggle--on::after,
.sui-toggle[aria-checked="true"]::after {
  left: 21px;
}

/* -------------------------------------------------------------------------
   .sui-tabs — pill tabs like admin-tabs; .is-active gets the pink tint
   ------------------------------------------------------------------------- */
.sui-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sui-space-2);
}

.sui-tab {
  border: 0;
  border-radius: var(--sui-radius-pill);
  padding: 9px 18px;
  background: transparent;
  color: var(--sui-muted);
  font-family: inherit;
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
  line-height: 1;
  cursor: pointer;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    color var(--sui-dur-hover) var(--sui-ease);
}

.sui-tab:hover {
  color: var(--sui-ink);
}

.sui-tab.is-active,
.sui-tab[aria-selected="true"] {
  background: var(--sui-pink-wash);
  color: var(--sui-pink-text);
}

/* -------------------------------------------------------------------------
   .sui-row — list row: title + em meta, trailing badge/toggle, hairline rule
   (the dev-status / trust-row pattern)
   ------------------------------------------------------------------------- */
.sui-row {
  display: flex;
  align-items: center;
  gap: var(--sui-space-4);
  padding: 17px 0;
  box-shadow: 0 1px 0 var(--sui-line);
}

.sui-row:last-child {
  box-shadow: none;
}

.sui-row__body {
  min-width: 0;
  flex: 1;
}

.sui-row__title {
  display: block;
  color: var(--sui-ink);
  font-size: 16.5px;
  font-weight: var(--sui-weight-bold);
  line-height: 1.2;
}

.sui-row__meta {
  display: block;
  margin-top: 2px;
  color: var(--sui-faint);
  font-size: var(--sui-text-eyebrow);
  font-style: normal;
  line-height: 1.3;
}

.sui-row__trail {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sui-space-3);
  color: var(--sui-muted);
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
}

/* -------------------------------------------------------------------------
   .sui-bubble — chat bubbles (cc-bubble / sequence-bubble)
   --in    : incoming gray
   --out   : user / outgoing action-blue
   --synth : synth reply, pink-ring gradient
   ------------------------------------------------------------------------- */
.sui-bubble {
  max-width: 80%;
  padding: 14px 18px;
  border-radius: 24px;
  font-size: var(--sui-text-body);
  line-height: 1.35;
}

.sui-bubble__name {
  display: block;
  margin-bottom: 4px;
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
}

.sui-bubble--in {
  align-self: flex-start;
  border-bottom-left-radius: 8px;
  background: var(--sui-raised);
  color: var(--sui-ink);
}

.sui-bubble--in .sui-bubble__name {
  color: var(--sui-muted);
}

.sui-bubble--out {
  align-self: flex-end;
  border-bottom-right-radius: 8px;
  background: var(--sui-action);
  color: var(--sui-action-ink);
}

.sui-bubble--out .sui-bubble__name {
  color: rgba(255, 255, 255, 0.78);
}

.sui-bubble--synth {
  align-self: flex-end;
  border-bottom-right-radius: 8px;
  background: linear-gradient(140deg, rgba(244, 184, 209, 0.2), rgba(143, 183, 201, 0.12));
  box-shadow: inset 0 0 0 1.5px var(--sui-pink-ring);
  color: var(--sui-pink-text);
}

.sui-bubble--synth .sui-bubble__name {
  color: var(--sui-pink);
}

/* -------------------------------------------------------------------------
   .sui-note — comment / event card (admin-comment)
   --resolved : dimmed
   ------------------------------------------------------------------------- */
.sui-note {
  display: grid;
  gap: var(--sui-space-1);
  padding: 12px 14px;
  border-radius: var(--sui-radius-inner);
  background: var(--sui-raised);
  color: var(--sui-ink);
  font-size: 13.5px;
}

.sui-note__head {
  display: flex;
  align-items: baseline;
  gap: var(--sui-space-2);
}

.sui-note__author {
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-bold);
}

.sui-note__time {
  color: var(--sui-faint);
  font-size: 11.5px;
  font-style: normal;
}

.sui-note p {
  margin: 0;
  line-height: 1.4;
}

.sui-note--resolved {
  opacity: 0.5;
}

/* -------------------------------------------------------------------------
   .sui-window — mac window chrome (cf-window): bar with three dots + title
   works in light + dark via semantic surface/ink tokens
   ------------------------------------------------------------------------- */
.sui-window {
  position: relative;
  overflow: hidden;
  border-radius: var(--sui-radius-inner);
  background: var(--sui-surface);
  box-shadow:
    inset 0 0 0 1px var(--sui-ring),
    0 26px 60px rgba(0, 0, 0, 0.5);
}

.sui-window__bar {
  display: flex;
  align-items: center;
  gap: var(--sui-space-2);
  height: 46px;
  padding: 0 18px;
  background: var(--sui-raised);
  box-shadow: 0 1px 0 var(--sui-line);
}

.sui-window__dots {
  display: inline-flex;
  gap: var(--sui-space-2);
}

.sui-window__dots i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.sui-window__dots i:nth-child(1) { background: var(--sui-mac-close); }
.sui-window__dots i:nth-child(2) { background: var(--sui-mac-min); }
.sui-window__dots i:nth-child(3) { background: var(--sui-mac-max); }

.sui-window__title {
  flex: 1;
  padding-right: 52px;
  color: var(--sui-muted);
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-medium);
  text-align: center;
}

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

/* -------------------------------------------------------------------------
   Inline text bits — .sui-kbd, .sui-code, .sui-hr, .sui-empty
   ------------------------------------------------------------------------- */
.sui-kbd {
  display: inline-flex;
  align-items: center;
  min-width: 20px;
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--sui-raised);
  box-shadow: inset 0 0 0 1px var(--sui-ring);
  color: var(--sui-ink);
  font-family: var(--sui-font-mono);
  font-size: var(--sui-text-caption);
  line-height: 1.6;
}

/* Inline code — pink on dark, matching the admin event code tokens. */
.sui-code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--sui-pink-wash);
  color: var(--sui-pink-text);
  font-family: var(--sui-font-mono);
  font-size: var(--sui-text-caption);
}

.sui-hr {
  height: 1px;
  margin: var(--sui-space-6) 0;
  border: 0;
  background: var(--sui-line);
}

.sui-empty {
  margin: var(--sui-space-2) 0;
  color: var(--sui-faint);
  font-size: 13.5px;
  line-height: 1.5;
}

/* -------------------------------------------------------------------------
   Typographic trio — .sui-eyebrow / .sui-title / .sui-lede
   ------------------------------------------------------------------------- */
.sui-eyebrow {
  margin: 0 0 var(--sui-space-3);
  color: var(--sui-pink);
  font-family: var(--sui-font-text);
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-heavy);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.sui-title {
  margin: 0;
  color: var(--sui-ink-strong);
  font-family: var(--sui-font-display);
  font-size: var(--sui-text-display);
  font-weight: var(--sui-weight-medium);
  letter-spacing: 0;
  line-height: var(--sui-leading-tight);
}

/* Gradient headline variant — the snth pastel signal on the display heading. */
.sui-title--gradient {
  background: var(--sui-gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sui-lede {
  margin: 0;
  color: var(--sui-muted);
  font-size: var(--sui-text-lede);
  font-weight: var(--sui-weight-medium);
  line-height: 1.26;
}

/* -------------------------------------------------------------------------
   .sui-sidebar — grouped left-nav for app shells (the customer portal).
   A vertical rail of labelled groups, each a stack of nav items. An item is
   a full-width pill row: title on the left, an optional trailing badge on the
   right. The active item gets a raised fill + a restrained pink text tint
   (pink as signal, never a broad background). Disabled items dim and lock —
   for "arrives later" surfaces — and still show their badge.
   Re-themes automatically: every rule references semantic tokens only.
   ------------------------------------------------------------------------- */
.sui-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sui-space-6);
}

.sui-sidebar-group {
  display: flex;
  flex-direction: column;
  gap: var(--sui-space-1);
}

.sui-sidebar-group__label {
  margin: 0 0 var(--sui-space-1);
  padding: 0 var(--sui-space-3);
  color: var(--sui-faint);
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-heavy);
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.sui-sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--sui-space-3);
  width: 100%;
  padding: 9px var(--sui-space-3);
  border: 0;
  border-radius: var(--sui-radius-pill);
  background: transparent;
  color: var(--sui-muted);
  font-family: inherit;
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    color var(--sui-dur-hover) var(--sui-ease);
}

.sui-sidebar-item:hover {
  background: var(--sui-raised);
  color: var(--sui-ink);
}

/* Title takes the row; a trailing element (badge / count) sits at the end. */
.sui-sidebar-item__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sui-sidebar-item__trail {
  flex: none;
  display: inline-flex;
  align-items: center;
}

/* Active route — raised fill, pink text tint, faint pink inset ring. */
.sui-sidebar-item.is-active,
.sui-sidebar-item[aria-current="page"] {
  background: var(--sui-raised-2);
  color: var(--sui-pink-text);
  box-shadow: inset 0 0 0 1px var(--sui-pink-ring);
}

.sui-sidebar-item.is-active:hover,
.sui-sidebar-item[aria-current="page"]:hover {
  color: var(--sui-pink-text);
}

/* Disabled / not-yet-shipped item — dimmed, non-interactive, badge still shown. */
.sui-sidebar-item:disabled,
.sui-sidebar-item.is-disabled {
  color: var(--sui-faint);
  cursor: not-allowed;
  opacity: 0.72;
}

.sui-sidebar-item:disabled:hover,
.sui-sidebar-item.is-disabled:hover {
  background: transparent;
  color: var(--sui-faint);
}

/* Accordion variant for route-dense app rails. The host owns interaction and
   keeps `aria-expanded`, `[hidden]`, and (optionally) `.is-collapsed` in sync. */
.sui-sidebar--accordion {
  gap: var(--sui-space-2);
}

.sui-sidebar--accordion .sui-sidebar-group {
  gap: var(--sui-space-1);
}

.sui-sidebar-group__toggle {
  display: flex;
  align-items: center;
  gap: var(--sui-space-2);
  width: 100%;
  min-height: var(--sui-space-8);
  padding: var(--sui-space-2) var(--sui-space-3);
  border: 0;
  border-radius: var(--sui-radius-pill);
  background: transparent;
  color: var(--sui-faint);
  font-family: inherit;
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-heavy);
  letter-spacing: 0.06em;
  line-height: var(--sui-leading-tight);
  text-align: left;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    color var(--sui-dur-hover) var(--sui-ease);
}

.sui-sidebar-group__toggle:hover {
  background: var(--sui-raised);
  color: var(--sui-ink);
}

.sui-sidebar-group__indicator {
  flex: none;
  width: var(--sui-space-2);
  height: var(--sui-space-2);
  margin-left: auto;
  border-right: calc(var(--sui-space-1) / 2) solid currentColor;
  border-bottom: calc(var(--sui-space-1) / 2) solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--sui-dur-hover) var(--sui-ease-move);
}

.sui-sidebar-group__toggle[aria-expanded="false"] .sui-sidebar-group__indicator,
.sui-sidebar-group.is-collapsed .sui-sidebar-group__indicator {
  transform: rotate(-45deg);
}

.sui-sidebar-group__items {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--sui-space-1);
}

.sui-sidebar-group__items[hidden],
.sui-sidebar-group.is-collapsed .sui-sidebar-group__items {
  display: none;
}

.sui-sidebar__empty {
  margin: 0;
  padding: var(--sui-space-5) var(--sui-space-3);
  color: var(--sui-faint);
  font-size: var(--sui-text-sm);
  line-height: var(--sui-leading-body);
  text-align: center;
  overflow-wrap: anywhere;
}

.sui-sidebar__empty[hidden] {
  display: none;
}

/* Compact heading for the off-canvas rail. It stays out of desktop rails and
   becomes a sticky close/title row only at the canonical mobile breakpoint. */
.sui-sidebar-drawer__head {
  position: sticky;
  top: 0;
  z-index: var(--sui-z-sticky);
  flex: none;
  display: none;
  min-height: var(--sui-space-11);
  align-items: center;
  justify-content: space-between;
  gap: var(--sui-space-3);
  padding-bottom: var(--sui-space-3);
  background: var(--sui-surface);
  box-shadow: 0 1px 0 var(--sui-line);
  color: var(--sui-ink-strong);
  font-size: var(--sui-text-sm);
  font-weight: var(--sui-weight-bold);
}

/* Five-cell mobile primary navigation. The fixed bar is hidden on desktop;
   its side and bottom padding absorb device safe-area insets. */
.sui-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--sui-z-bottom-nav);
  display: none;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sui-space-1);
  padding:
    var(--sui-space-2)
    max(var(--sui-space-2), env(safe-area-inset-right))
    max(var(--sui-space-2), env(safe-area-inset-bottom))
    max(var(--sui-space-2), env(safe-area-inset-left));
  background: var(--sui-overlay);
  box-shadow: 0 -1px 0 var(--sui-line);
  -webkit-backdrop-filter: blur(var(--sui-space-5));
  backdrop-filter: blur(var(--sui-space-5));
}

.sui-bottom-nav__item {
  display: flex;
  min-width: 0;
  min-height: var(--sui-space-11);
  align-items: center;
  justify-content: center;
  padding: var(--sui-space-2) var(--sui-space-1);
  border: 0;
  border-radius: var(--sui-radius-inner);
  background: transparent;
  color: var(--sui-muted);
  font-family: inherit;
  font-size: var(--sui-text-caption);
  font-weight: var(--sui-weight-bold);
  line-height: var(--sui-leading-tight);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  cursor: pointer;
  transition:
    background var(--sui-dur-hover) var(--sui-ease),
    color var(--sui-dur-hover) var(--sui-ease);
}

.sui-bottom-nav__item:hover {
  background: var(--sui-raised);
  color: var(--sui-ink);
}

.sui-bottom-nav__item.is-active,
.sui-bottom-nav__item[aria-current="page"] {
  background: var(--sui-raised-2);
  color: var(--sui-pink-text);
  box-shadow: inset 0 0 0 1px var(--sui-pink-ring);
}

/* =========================================================================
   4. LAYOUT UTILITIES
   ========================================================================= */

/* Vertical grid stack. Override --sui-gap inline to retune the rhythm. */
.sui-stack {
  display: grid;
  gap: var(--sui-gap, var(--sui-space-4));
}

/* Horizontal wrap cluster. */
.sui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sui-gap, var(--sui-space-3));
}

.sui-grid-2,
.sui-grid-3 {
  display: grid;
  gap: var(--sui-gap, var(--sui-space-5));
}

.sui-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sui-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Single, canonical breakpoint — matches the site's 900px pass. */
@media (max-width: 900px) {
  .sui-sidebar-drawer__head {
    display: flex;
  }

  .sui-bottom-nav {
    display: grid;
  }

  .sui-grid-2,
  .sui-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================================
   5. APP SHELL — a real full-viewport app frame (portal / companion-grade).
   The sidebar pins to the LEFT EDGE, full height, sticky; the main area
   takes ALL remaining width. This is deliberately NOT a centered column —
   inner content may cap its own text measure, but boards/tables/grids get
   the full width. Below the 900px breakpoint the sidebar becomes an
   off-canvas drawer the host toggles with `.is-open` + a `.sui-app__scrim`.
   ========================================================================= */
.sui-app {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 100%;
}

/* The rail. Pinned to the left edge, sticky under any host top bar (host
   sets --sui-app-top), full remaining height, own scroll. A single hairline
   on the inner edge separates it from the content — no floating card gap. */
.sui-app__sidebar {
  position: sticky;
  top: var(--sui-app-top, 0px);
  align-self: flex-start;
  flex: none;
  width: var(--sui-app-rail, 264px);
  height: calc(100vh - var(--sui-app-top, 0px));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sui-space-5);
  padding: var(--sui-space-5);
  background: var(--sui-surface);
  box-shadow: inset -1px 0 0 var(--sui-line);
}

/* The content area — takes every remaining pixel. Its own vertical scroll is
   optional (the host may scroll the page instead); it never caps its width. */
.sui-app__main {
  flex: 1;
  min-width: 0;
  padding: var(--sui-app-pad, clamp(20px, 3vw, 40px));
}

/* A readability measure a route opts into for prose-heavy sections. Boards,
   tables and grids simply don't use it, so they stretch to the full main. */
.sui-app__measure {
  max-width: var(--sui-app-measure, 860px);
}

/* Mobile: the rail leaves flow and becomes an off-canvas drawer. */
@media (max-width: 900px) {
  .sui-app__sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--sui-z-drawer);
    width: min(300px, 86vw);
    height: 100vh;
    border-radius: 0;
    box-shadow: 0 0 0 1px var(--sui-ring), 12px 0 40px rgba(0, 0, 0, 0.4);
    transform: translateX(-102%);
    transition: transform var(--sui-dur-panel, 220ms) var(--sui-ease);
  }
  .sui-app__sidebar.is-open { transform: translateX(0); }
  .sui-app__main { padding: var(--sui-app-pad-mobile, clamp(16px, 5vw, 24px)); }
}

.sui-app__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--sui-z-scrim);
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
@media (min-width: 901px) {
  .sui-app__scrim { display: none !important; }
}

/* =========================================================================
   6. BOARD — a horizontal-scroll Kanban of fixed-width columns, each with
   its OWN vertical scroll so a tall column never stretches the row. Cards
   are self-contained tiles that never overflow their column. Below 900px
   it degrades to a stacked list (columns full-width, one under the next).
   ========================================================================= */
.sui-board {
  display: flex;
  align-items: flex-start;
  gap: var(--sui-space-4);
  overflow-x: auto;
  padding-bottom: var(--sui-space-3);
  scroll-snap-type: x proximity;
}

.sui-board-col {
  flex: 0 0 var(--sui-board-col, 288px);
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: var(--sui-board-h, 62vh);
  padding: var(--sui-space-3);
  border-radius: var(--sui-radius-inner);
  background: var(--sui-raised);
  box-shadow: inset 0 0 0 1px var(--sui-ring);
  scroll-snap-align: start;
}

.sui-board-col__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sui-space-2);
  padding: 0 var(--sui-space-2) var(--sui-space-2);
}

.sui-board-col__label {
  color: var(--sui-faint);
  font-size: var(--sui-text-eyebrow);
  font-weight: var(--sui-weight-heavy);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.sui-board-col__n {
  color: var(--sui-faint);
  font-size: var(--sui-text-caption);
  font-variant-numeric: tabular-nums;
}

/* The scrolling body of a column — cards stack here; this is what scrolls. */
.sui-board-col__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sui-space-2);
  padding: var(--sui-space-1) var(--sui-space-1) 0;
}

.sui-board-col__empty {
  color: var(--sui-faint);
  font-size: var(--sui-text-caption);
  padding: var(--sui-space-2);
}

/* A card tile. Full column width, never overflows; text wraps. */
.sui-board-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  cursor: pointer;
  padding: var(--sui-space-3) var(--sui-space-4);
  border-radius: var(--sui-radius-sm);
  background: var(--sui-surface);
  box-shadow: inset 0 0 0 1px var(--sui-ring);
  color: var(--sui-ink);
  font-family: inherit;
  font-size: var(--sui-text-sm);
  transition: background var(--sui-dur-hover) var(--sui-ease);
}
.sui-board-card:hover { background: var(--sui-raised-2); }

.sui-board-card__title {
  display: block;
  color: var(--sui-ink-strong);
  font-weight: var(--sui-weight-bold);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.sui-board-card__meta {
  display: block;
  margin-top: var(--sui-space-1);
  color: var(--sui-faint);
  font-size: var(--sui-text-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Stacked-list degrade on mobile: columns become full-width sections. */
@media (max-width: 900px) {
  .sui-board {
    display: block;
    overflow-x: visible;
  }
  .sui-board-col {
    flex: none;
    max-height: none;
    margin-bottom: var(--sui-space-4);
  }
  .sui-board-col__body { overflow-y: visible; }
}

/* =========================================================================
   7. SKELETON — a shimmer placeholder shown while a section's data loads,
   in place of a blank pane or a spinner. `.sui-skeleton` is a stack of
   `.sui-skeleton-row` shimmer bars; `--w` sets a row's width. Honors
   prefers-reduced-motion (the sweep stops; the muted bar remains).
   ========================================================================= */
.sui-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--sui-space-3);
}

.sui-skeleton-row {
  height: var(--sui-skel-h, 16px);
  width: var(--w, 100%);
  border-radius: var(--sui-radius-sm);
  background: var(--sui-raised);
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--sui-raised-2) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: sui-shimmer 1.25s ease-in-out infinite;
}

/* A taller block skeleton (card / tile placeholder). */
.sui-skeleton-block {
  height: var(--sui-skel-block, 72px);
  border-radius: var(--sui-radius-inner);
}

@keyframes sui-shimmer {
  0% { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sui-skeleton-row { animation: none; }
}