/*! Sassly UI 0.1.4 (css) | https://uiux.sassly.ai | 141 items | built 2026-11-02T02:24:08.552Z */

/* ==========================================================================
   Sassly UI — design tokens
   Themes:   [data-theme="neutral" | "onix"]
   Modes:    [data-mode="light" | "dark"]
   Surfaces: [data-surface="flat" | "tray"]
   Detail:   [data-detail="simple" | "informative"] (base.css: hides what items mark data-sx-extra)
   Put the attributes on <html>, or on any element to scope a preview.
   Components only ever read the semantic --sx-* tokens below.
   ========================================================================== */

/* ---------- Shared scale (all themes) ---------- */
:root {
  --sx-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sx-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --sx-fs-2xs: 10.5px;
  --sx-fs-xs: 11px;
  --sx-fs-sm: 12px;
  --sx-fs-base: 13px;
  --sx-fs-md: 14px;
  --sx-fs-lg: 15px;
  --sx-fs-xl: 18px;
  --sx-fs-2xl: 24px;
  --sx-fs-3xl: 32px;
  --sx-fs-4xl: 44px;

  --sx-lh-tight: 1.2;
  --sx-lh: 1.5;

  --sx-space-1: 4px;
  --sx-space-2: 8px;
  --sx-space-3: 12px;
  --sx-space-4: 16px;
  --sx-space-5: 20px;
  --sx-space-6: 24px;
  --sx-space-8: 32px;

  --sx-h-xs: 24px;
  --sx-h-sm: 28px;
  --sx-h-md: 34px;
  --sx-h-lg: 40px;

  --sx-r-pill: 999px;

  /* Motion. One curve family everywhere; durations scale with distance. */
  --sx-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --sx-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --sx-ease-in: cubic-bezier(0.55, 0, 0.75, 0.2);
  --sx-ease-spring: cubic-bezier(0.34, 1.32, 0.64, 1);
  --sx-dur-1: 120ms;
  --sx-dur-2: 180ms;
  --sx-dur-3: 260ms;
  --sx-dur-4: 420ms;
  --sx-dur-5: 640ms;

  /* Overlay layers, low to high: a confirm from inside a panel covers the panel, a toast covers both. */
  --sx-z-pop: 40;
  --sx-z-panel: 60;
  --sx-z-modal: 80;
  --sx-z-tour: 90;
  --sx-z-toast: 100;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sx-dur-3: 160ms;
    --sx-dur-4: 200ms;
    --sx-dur-5: 240ms;
    --sx-ease-spring: var(--sx-ease-out);
  }
}

/* ==========================================================================
   NEUTRAL — quiet greys, hairline rings, blue focus, magenta marks
   ========================================================================== */
:root,
[data-theme="neutral"] {
  color-scheme: light;

  --sx-shell: #f5f5f5;
  --sx-panel: #fcfcfc;
  --sx-panel-wash: none;
  --sx-surface: #ffffff;
  --sx-surface-2: #fafafa;
  --sx-surface-3: #f3f3f4;
  --sx-raised: #ffffff;
  --sx-raised-hover: #f4f4f5;
  --sx-tray: #efeff0;
  --sx-fill: rgba(10, 10, 10, 0.04);
  --sx-fill-strong: rgba(10, 10, 10, 0.075);
  --sx-overlay: rgba(10, 10, 10, 0.28);

  --sx-ink: #0a0a0a;
  --sx-ink-2: #404040;
  --sx-muted: #707070;
  --sx-faint: #a3a3a3;

  --sx-line: rgba(10, 10, 10, 0.085);
  --sx-line-soft: rgba(10, 10, 10, 0.055);
  --sx-line-strong: rgba(10, 10, 10, 0.15);

  --sx-primary: #0a0a0a;
  --sx-primary-bg: linear-gradient(180deg, #2b2b2b 0%, #0a0a0a 100%);
  --sx-primary-hover: linear-gradient(180deg, #3a3a3a 0%, #161616 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #2f6bff;
  --sx-accent-bg: linear-gradient(180deg, #4a7fff 0%, #2f6bff 100%);
  --sx-accent-ink: #1f5ae8;
  --sx-accent-soft: rgba(47, 107, 255, 0.09);
  --sx-accent-line: rgba(47, 107, 255, 0.28);
  --sx-on-accent: #ffffff;

  --sx-mark: #dd0674;
  --sx-mark-ink: #c20566;
  --sx-mark-soft: #fdf2f8;
  --sx-mark-line: rgba(221, 6, 116, 0.18);

  --sx-success: #13a35c;
  --sx-success-ink: #0b7a43;
  --sx-success-soft: rgba(19, 163, 92, 0.09);
  --sx-success-line: rgba(19, 163, 92, 0.25);
  --sx-warning: #d38b06;
  --sx-warning-ink: #8a5800;
  --sx-warning-soft: rgba(234, 160, 0, 0.11);
  --sx-warning-line: rgba(211, 139, 6, 0.28);
  --sx-danger: #e5484d;
  --sx-danger-ink: #c62f35;
  --sx-danger-soft: rgba(229, 72, 77, 0.08);
  --sx-danger-line: rgba(229, 72, 77, 0.26);
  --sx-on-success: #ffffff;
  --sx-on-danger: #ffffff;
  --sx-on-warning: #1a1300;
  --sx-info: #2f6bff;
  --sx-info-ink: #1f5ae8;
  --sx-info-soft: rgba(47, 107, 255, 0.09);
  --sx-info-line: rgba(47, 107, 255, 0.26);

  --sx-c1: #2f6bff;
  --sx-c2: #e8950c;
  --sx-c3: #12a594;
  --sx-c4: #e5488f;
  --sx-c5: #8b5cf6;
  --sx-c6: #a3a3a3;
  --sx-c-track: rgba(10, 10, 10, 0.06);

  --sx-glow-1: rgba(236, 72, 153, 0.22);
  --sx-glow-2: rgba(139, 92, 246, 0.22);
  --sx-glow-3: rgba(47, 107, 255, 0.2);

  --sx-focus: rgba(47, 107, 255, 0.5);
  --sx-focus-ring: 0 0 0 3px rgba(47, 107, 255, 0.18), 0 0 0 1px rgba(47, 107, 255, 0.55);
  --sx-selection: rgba(47, 107, 255, 0.18);

  --sx-ring: 0 0 0 1px var(--sx-line);
  --sx-shadow-1: 0 0 0 0.5px rgba(0, 0, 0, 0.09), 0 1px 1px -0.5px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.04);
  --sx-shadow-2: 0 0 0 1px rgba(10, 10, 10, 0.065), 0 1px 2px rgba(10, 10, 10, 0.05), 0 6px 16px -6px rgba(10, 10, 10, 0.1);
  --sx-shadow-3: 0 0 0 1px rgba(10, 10, 10, 0.07), 0 4px 8px -2px rgba(10, 10, 10, 0.07), 0 18px 36px -10px rgba(10, 10, 10, 0.2);
  --sx-shadow-pop: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.08), 0 14px 30px -10px rgba(0, 0, 0, 0.28);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.22), 0 3px 8px -3px rgba(0, 0, 0, 0.3);
  --sx-shadow-accent: 0 1px 2px rgba(31, 90, 232, 0.3), 0 3px 8px -3px rgba(47, 107, 255, 0.42);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.14);

  --sx-r-xs: 4px;
  --sx-r-sm: 6px;
  --sx-r-md: 8px;
  --sx-r-lg: 10px;
  --sx-r-xl: 14px;
  --sx-r-2xl: 18px;

  --sx-heading-weight: 600;
  --sx-heading-tracking: -0.011em;
  --sx-display-weight: 500;
  --sx-display-tracking: -0.018em;
  --sx-text-weight: 400;
  --sx-strong-weight: 500;

  /* Card surface defaults (Flat). Tray overrides below. */
  --sx-canvas: var(--sx-surface-2);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-ring), 0 1px 2px rgba(10, 10, 10, 0.03);
  --sx-card-radius: var(--sx-r-xl);
}

[data-theme="neutral"][data-mode="dark"] {
  color-scheme: dark;

  --sx-shell: #0c0c0d;
  --sx-panel: #121213;
  --sx-surface: #19191b;
  --sx-surface-2: #161618;
  --sx-surface-3: #222225;
  --sx-raised: #26262a;
  --sx-raised-hover: #2e2e33;
  --sx-tray: #0f0f10;
  --sx-fill: rgba(255, 255, 255, 0.05);
  --sx-fill-strong: rgba(255, 255, 255, 0.09);
  --sx-overlay: rgba(0, 0, 0, 0.55);

  --sx-ink: #ededed;
  --sx-ink-2: #c8c8cc;
  --sx-muted: #8f8f96;
  --sx-faint: #5c5c63;

  --sx-line: rgba(255, 255, 255, 0.085);
  --sx-line-soft: rgba(255, 255, 255, 0.055);
  --sx-line-strong: rgba(255, 255, 255, 0.15);

  --sx-primary: #ededed;
  --sx-primary-bg: linear-gradient(180deg, #ffffff 0%, #e4e4e6 100%);
  --sx-primary-hover: linear-gradient(180deg, #ffffff 0%, #f1f1f2 100%);
  --sx-on-primary: #0c0c0d;

  --sx-accent: #4d8dff;
  --sx-accent-bg: linear-gradient(180deg, #5f99ff 0%, #3f80f7 100%);
  --sx-accent-ink: #80adff;
  --sx-accent-soft: rgba(77, 141, 255, 0.14);
  --sx-accent-line: rgba(77, 141, 255, 0.34);

  --sx-mark: #f2559f;
  --sx-mark-ink: #ff7ab8;
  --sx-mark-soft: rgba(242, 85, 159, 0.13);
  --sx-mark-line: rgba(242, 85, 159, 0.3);

  --sx-success: #4cc38a;
  --sx-success-ink: #6fd6a3;
  --sx-success-soft: rgba(76, 195, 138, 0.13);
  --sx-success-line: rgba(76, 195, 138, 0.3);
  --sx-warning: #f0b443;
  --sx-warning-ink: #f5c86f;
  --sx-warning-soft: rgba(240, 180, 67, 0.13);
  --sx-warning-line: rgba(240, 180, 67, 0.3);
  --sx-danger: #ff6369;
  --sx-danger-ink: #ff8a8e;
  --sx-danger-soft: rgba(255, 99, 105, 0.13);
  --sx-danger-line: rgba(255, 99, 105, 0.32);
  --sx-on-success: #0c0c0d;
  --sx-on-danger: #0c0c0d;
  --sx-on-warning: #0c0c0d;
  --sx-info: #4d8dff;
  --sx-info-ink: #80adff;
  --sx-info-soft: rgba(77, 141, 255, 0.14);
  --sx-info-line: rgba(77, 141, 255, 0.32);

  --sx-c1: #5b95ff;
  --sx-c2: #f5b13d;
  --sx-c3: #2cc9b4;
  --sx-c4: #f472b6;
  --sx-c5: #a78bfa;
  --sx-c6: #6b6b73;
  --sx-c-track: rgba(255, 255, 255, 0.08);

  --sx-glow-1: rgba(236, 72, 153, 0.26);
  --sx-glow-2: rgba(139, 92, 246, 0.28);
  --sx-glow-3: rgba(77, 141, 255, 0.24);

  --sx-focus: rgba(77, 141, 255, 0.6);
  --sx-focus-ring: 0 0 0 3px rgba(77, 141, 255, 0.24), 0 0 0 1px rgba(77, 141, 255, 0.7);
  --sx-selection: rgba(77, 141, 255, 0.3);

  --sx-shadow-1: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.45);
  --sx-shadow-2: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 18px -8px rgba(0, 0, 0, 0.55);
  --sx-shadow-3: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 4px 10px -2px rgba(0, 0, 0, 0.45), 0 18px 36px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-pop: 0 0 0 0.5px rgba(255, 255, 255, 0.13), 0 14px 30px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -3px rgba(0, 0, 0, 0.6);
  --sx-shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 10px -3px rgba(77, 141, 255, 0.5);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.06);

  --sx-card-shadow: var(--sx-ring);
}

/* ==========================================================================
   ONIX — slate primary, orange accent, warm paper neutrals (onix.sassly.ai)
   ========================================================================== */
[data-theme="onix"] {
  color-scheme: light;

  --sx-shell: #f3f2ed;
  --sx-panel: #fbfaf7;
  --sx-panel-wash:
    radial-gradient(900px 420px at 6% -8%, rgba(97, 155, 138, 0.08), transparent 64%),
    radial-gradient(760px 380px at 100% -4%, rgba(254, 127, 45, 0.055), transparent 60%);
  --sx-surface: #ffffff;
  --sx-surface-2: #fbfaf7;
  --sx-surface-3: #f3f2ed;
  --sx-raised: #ffffff;
  --sx-raised-hover: #f7f6f2;
  --sx-tray: #efede6;
  --sx-fill: rgba(27, 35, 41, 0.045);
  --sx-fill-strong: rgba(27, 35, 41, 0.08);
  --sx-overlay: rgba(23, 42, 53, 0.3);

  --sx-ink: #1b2329;
  --sx-ink-2: #4b5660;
  --sx-muted: #66717a;
  --sx-faint: #a0a9b0;

  --sx-line: #e5e3dc;
  --sx-line-soft: #eeede7;
  --sx-line-strong: #d6d4cb;

  --sx-primary: #233d4d;
  --sx-primary-bg: linear-gradient(180deg, #2f5064 0%, #233d4d 100%);
  --sx-primary-hover: linear-gradient(180deg, #365a70 0%, #284556 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #fe7f2d;
  --sx-accent-bg: linear-gradient(180deg, #ff9150 0%, #fe7f2d 100%);
  --sx-accent-ink: #a3480f;
  --sx-accent-soft: #fff1e7;
  --sx-accent-line: #fad7bf;
  --sx-on-accent: #2a1406;

  --sx-mark: #fe7f2d;
  --sx-mark-ink: #a3480f;
  --sx-mark-soft: #fff1e7;
  --sx-mark-line: #fad7bf;

  --sx-success: #5b8f45;
  --sx-success-ink: #3b6a2b;
  --sx-success-soft: #f0f6ea;
  --sx-success-line: #d8e7c8;
  --sx-warning: #d99a1e;
  --sx-warning-ink: #7f5700;
  --sx-warning-soft: #fff7de;
  --sx-warning-line: #f5e2a4;
  --sx-danger: #c2463c;
  --sx-danger-ink: #a8392f;
  --sx-danger-soft: #fceeec;
  --sx-danger-line: #f3d6d2;
  --sx-on-success: #ffffff;
  --sx-on-danger: #ffffff;
  --sx-on-warning: #2a1d00;
  --sx-info: #619b8a;
  --sx-info-ink: #2b6455;
  --sx-info-soft: #eaf4f1;
  --sx-info-line: #cde2db;

  --sx-c1: #233d4d;
  --sx-c2: #fe7f2d;
  --sx-c3: #619b8a;
  --sx-c4: #fcca46;
  --sx-c5: #a1c181;
  --sx-c6: #a9a69b;
  --sx-c-track: #eceae3;

  --sx-glow-1: rgba(254, 127, 45, 0.2);
  --sx-glow-2: rgba(252, 202, 70, 0.22);
  --sx-glow-3: rgba(97, 155, 138, 0.2);

  --sx-focus: rgba(35, 61, 77, 0.45);
  --sx-focus-ring: 0 0 0 3px rgba(35, 61, 77, 0.14), 0 0 0 1px rgba(35, 61, 77, 0.5);
  --sx-selection: rgba(254, 127, 45, 0.22);

  --sx-ring: 0 0 0 1px rgba(27, 35, 41, 0.075);
  --sx-shadow-1: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 1px 1.5px rgba(27, 35, 41, 0.05);
  --sx-shadow-2: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 1px 2px rgba(27, 35, 41, 0.05), 0 4px 10px -3px rgba(27, 35, 41, 0.08);
  --sx-shadow-3: 0 0 0 1px rgba(27, 35, 41, 0.075), 0 2px 4px rgba(27, 35, 41, 0.06), 0 12px 28px -6px rgba(27, 35, 41, 0.18);
  --sx-shadow-pop: 0 0 0 1px rgba(27, 35, 41, 0.08), 0 4px 10px -2px rgba(27, 35, 41, 0.08), 0 16px 34px -10px rgba(27, 35, 41, 0.26);
  --sx-shadow-primary: 0 1px 2px rgba(23, 42, 53, 0.3), 0 3px 8px -2px rgba(23, 42, 53, 0.26);
  --sx-shadow-accent: 0 1px 2px rgba(163, 72, 15, 0.28), 0 3px 8px -2px rgba(254, 127, 45, 0.32);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  --sx-r-xs: 3px;
  --sx-r-sm: 7px;
  --sx-r-md: 9px;
  --sx-r-lg: 11px;
  --sx-r-xl: 13px;
  --sx-r-2xl: 16px;

  --sx-heading-weight: 650;
  --sx-heading-tracking: -0.02em;
  --sx-display-weight: 700;
  --sx-display-tracking: -0.035em;
  --sx-text-weight: 400;
  --sx-strong-weight: 600;

  --sx-ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --sx-canvas: var(--sx-surface-2);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-shadow-1);
  --sx-card-radius: var(--sx-r-xl);
}

[data-theme="onix"][data-mode="dark"] {
  color-scheme: dark;

  --sx-shell: #0d1418;
  --sx-panel: #10191e;
  --sx-panel-wash:
    radial-gradient(900px 420px at 6% -8%, rgba(97, 155, 138, 0.1), transparent 64%),
    radial-gradient(760px 380px at 100% -4%, rgba(254, 127, 45, 0.07), transparent 60%);
  --sx-surface: #162128;
  --sx-surface-2: #131d23;
  --sx-surface-3: #1d2a32;
  --sx-raised: #1f2d35;
  --sx-raised-hover: #273943;
  --sx-tray: #0e171c;
  --sx-fill: rgba(214, 232, 240, 0.05);
  --sx-fill-strong: rgba(214, 232, 240, 0.09);
  --sx-overlay: rgba(4, 10, 13, 0.6);

  --sx-ink: #e7ecee;
  --sx-ink-2: #bac5cb;
  --sx-muted: #8b9aa3;
  --sx-faint: #5e6d76;

  --sx-line: rgba(214, 232, 240, 0.09);
  --sx-line-soft: rgba(214, 232, 240, 0.06);
  --sx-line-strong: rgba(214, 232, 240, 0.16);

  --sx-primary: #3a5f74;
  --sx-primary-bg: linear-gradient(180deg, #46697e 0%, #335466 100%);
  --sx-primary-hover: linear-gradient(180deg, #507590 0%, #3a5f74 100%);
  --sx-on-primary: #ffffff;

  --sx-accent: #ff8a3d;
  --sx-accent-bg: linear-gradient(180deg, #ff9d5c 0%, #ff8a3d 100%);
  --sx-accent-ink: #ffb07a;
  --sx-accent-soft: rgba(255, 138, 61, 0.13);
  --sx-accent-line: rgba(255, 138, 61, 0.32);
  --sx-on-accent: #2a1406;

  --sx-mark: #ff8a3d;
  --sx-mark-ink: #ffb07a;
  --sx-mark-soft: rgba(255, 138, 61, 0.13);
  --sx-mark-line: rgba(255, 138, 61, 0.3);

  --sx-success: #86b874;
  --sx-success-ink: #a9d39a;
  --sx-success-soft: rgba(134, 184, 116, 0.13);
  --sx-success-line: rgba(134, 184, 116, 0.3);
  --sx-warning: #e9b949;
  --sx-warning-ink: #f2cf7a;
  --sx-warning-soft: rgba(233, 185, 73, 0.13);
  --sx-warning-line: rgba(233, 185, 73, 0.3);
  --sx-danger: #e06a5f;
  --sx-danger-ink: #f29a90;
  --sx-danger-soft: rgba(224, 106, 95, 0.14);
  --sx-danger-line: rgba(224, 106, 95, 0.32);
  --sx-on-success: #0d1418;
  --sx-on-danger: #0d1418;
  --sx-on-warning: #0d1418;
  --sx-info: #7db8a6;
  --sx-info-ink: #a5d3c5;
  --sx-info-soft: rgba(125, 184, 166, 0.13);
  --sx-info-line: rgba(125, 184, 166, 0.3);

  --sx-c1: #a8c3d4;
  --sx-c2: #ff8a3d;
  --sx-c3: #4f9b84;
  --sx-c4: #f2cf5b;
  --sx-c5: #a9cc8a;
  --sx-c6: #6f7f88;
  --sx-c-track: rgba(214, 232, 240, 0.08);

  --sx-glow-1: rgba(255, 138, 61, 0.22);
  --sx-glow-2: rgba(242, 207, 91, 0.16);
  --sx-glow-3: rgba(125, 184, 166, 0.2);

  --sx-focus: rgba(255, 138, 61, 0.55);
  --sx-focus-ring: 0 0 0 3px rgba(255, 138, 61, 0.2), 0 0 0 1px rgba(255, 138, 61, 0.6);
  --sx-selection: rgba(255, 138, 61, 0.3);

  --sx-ring: 0 0 0 1px rgba(214, 232, 240, 0.08);
  --sx-shadow-1: 0 0 0 1px rgba(214, 232, 240, 0.08), 0 1px 2px rgba(0, 0, 0, 0.4);
  --sx-shadow-2: 0 0 0 1px rgba(214, 232, 240, 0.08), 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 18px -6px rgba(0, 0, 0, 0.5);
  --sx-shadow-3: 0 0 0 1px rgba(214, 232, 240, 0.1), 0 4px 10px -2px rgba(0, 0, 0, 0.4), 0 16px 34px -8px rgba(0, 0, 0, 0.65);
  --sx-shadow-pop: 0 0 0 1px rgba(214, 232, 240, 0.12), 0 16px 34px -10px rgba(0, 0, 0, 0.7);
  --sx-shadow-primary: 0 1px 2px rgba(0, 0, 0, 0.5), 0 3px 8px -2px rgba(0, 0, 0, 0.5);
  --sx-shadow-accent: 0 1px 2px rgba(0, 0, 0, 0.45), 0 3px 10px -2px rgba(255, 138, 61, 0.4);
  --sx-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);

  --sx-card-shadow: var(--sx-shadow-1);
}

/* ==========================================================================
   SURFACES — Flat (default above): one flat card with a hairline ring.
              Tray: cards lifted onto a recessed grey tray.
   ========================================================================== */
[data-surface="tray"],
[data-theme][data-mode][data-surface="tray"] {
  --sx-canvas: var(--sx-tray);
  --sx-card-bg: var(--sx-surface);
  --sx-card-shadow: var(--sx-shadow-2);
}

/* ==========================================================================
   Sassly UI — base: reset, browser surfaces, shared primitives
   Requires tokens.css. Every component stylesheet builds on these classes.
   ========================================================================== */

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--sx-line-strong) transparent;
  scrollbar-width: thin;
}

body {
  margin: 0;
  font-family: var(--sx-font);
  font-size: var(--sx-fs-base);
  line-height: var(--sx-lh);
  color: var(--sx-ink);
  background: var(--sx-shell);
  font-weight: var(--sx-text-weight);
  font-optical-sizing: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, pre {
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: var(--sx-lh-tight);
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:disabled {
  cursor: not-allowed;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

:where(ul, ol)[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

[hidden] {
  display: none !important;
}

/* ---------- Browser surfaces ---------- */
::selection {
  background: var(--sx-selection);
  color: inherit;
}

input,
textarea,
[contenteditable] {
  caret-color: var(--sx-accent);
}

::placeholder {
  color: var(--sx-muted);
  opacity: 1;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: 2px;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--sx-line-strong);
  border: 3px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}

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

/* ---------- Utilities ---------- */
.sx-tabular {
  font-variant-numeric: tabular-nums;
}

.sx-mono {
  font-family: var(--sx-font-mono);
  font-size: 0.94em;
  letter-spacing: 0;
}

.sx-muted {
  color: var(--sx-muted);
}

.sx-truncate {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.sx-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

/* ---------- Icon ---------- */
.sx-icon {
  width: var(--sx-icon-size, 1em);
  height: var(--sx-icon-size, 1em);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--sx-icon-stroke, 1.75);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}

/* ---------- Card: the standard component container ---------- */
.sx-card {
  position: relative;
  background: var(--sx-card-bg);
  color: var(--sx-ink);
  border-radius: var(--sx-card-radius);
  box-shadow: var(--sx-card-shadow);
  transition: box-shadow var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Button ----------
   The .sx-btn family.
   <button type="button" class="sx-btn sx-btn--primary"><span>Publish</span></button>

   Variants  (none) secondary, --primary, --ghost, --accent, --danger
   Sizes     --sm, (none), --lg   (heights from --sx-h-sm / md / lg: 28, 34, 40px)
   Shapes    --icon square, icon only (give it an aria-label); --pill; --block full width
   Icons     <svg class="sx-icon"> before or after the label <span>
   States    :hover, :active or [data-pressed], :focus-visible,
             :disabled or [aria-disabled="true"],
             [aria-busy="true"]: the label fades and a .sx-spinner child spins
   Neutral tints are mixed from the label colour, so outline and ghost buttons follow
   every theme and mode without extra tokens. */

.sx-btn {
  /* Geometry, set per size */
  --_h: var(--sx-h-md, 34px);
  --_px: 13px;
  --_fs: var(--sx-fs-base, 13px);
  --_gap: 6px;
  --_icon: 15px;
  --_spin: 14px;
  --_r: var(--sx-r-md, 8px);

  /* Colour, set per variant. These base values are the secondary (outline) button. */
  --_bg: transparent;
  --_bg-hover: color-mix(in srgb, currentColor 4%, transparent);
  --_bg-active: color-mix(in srgb, currentColor 7%, transparent);
  --_border: var(--sx-line, color-mix(in srgb, currentColor 14%, transparent));
  --_border-hover: color-mix(in srgb, currentColor 24%, transparent);
  --_shadow: 0 1px 2px -1px rgb(0 0 0 / 0.08);
  --_ring: var(--sx-focus, var(--sx-accent, #5b48e0));

  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--_gap);
  box-sizing: border-box;
  height: var(--_h);
  margin: 0;
  padding: 0 var(--_px);
  border: 1px solid var(--_border);
  border-radius: var(--_r);
  outline: 2px solid transparent;
  outline-offset: 2px;
  background-color: var(--_bg);
  box-shadow: var(--_shadow);
  color: inherit;
  font: inherit;
  font-size: var(--_fs);
  font-weight: max(500, var(--sx-text-weight));
  line-height: 1;
  letter-spacing: -0.005em;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  appearance: none;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease,
    opacity 0.15s ease,
    transform 0.12s ease;
}

/* States */
@media (hover: hover) {
  .sx-btn:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
    background-color: var(--_bg-hover);
    border-color: var(--_border-hover);
  }
}

.sx-btn:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--_bg-active);
  transform: scale(0.98);
}

.sx-btn:focus-visible {
  outline-color: var(--_ring);
}

.sx-btn:is(:disabled, [aria-disabled="true"]) {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

/* Loading: the content keeps its width but fades, the spinner takes its place. */
.sx-btn[aria-busy="true"] {
  cursor: progress;
}

.sx-btn > * {
  transition: opacity 0.16s ease;
}

.sx-btn[aria-busy="true"] > :not(.sx-spinner) {
  opacity: 0;
}

.sx-btn > .sx-spinner {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  width: var(--_spin);
  height: var(--_spin);
  margin: auto;
  border: 1.5px solid color-mix(in srgb, currentColor 30%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: sx-btn-spin 0.7s linear infinite;
}

.sx-btn[aria-busy="true"] > .sx-spinner {
  opacity: 1;
}

@keyframes sx-btn-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Icons */
.sx-btn > .sx-icon {
  flex: none;
  width: var(--_icon);
  height: var(--_icon);
  stroke-width: 1.75;
}

/* An icon at the edge reads as more padding than text does, so trim 2px there. */
.sx-btn:not(.sx-btn--icon):has(> .sx-icon:first-child) {
  padding-inline-start: calc(var(--_px) - 2px);
}

.sx-btn:not(.sx-btn--icon):has(> .sx-icon:last-child) {
  padding-inline-end: calc(var(--_px) - 2px);
}

/* Sizes and shapes */
.sx-btn--sm {
  --_h: var(--sx-h-sm, 28px);
  --_px: 10px;
  --_fs: var(--sx-fs-sm, 12px);
  --_gap: 5px;
  --_icon: 14px;
  --_spin: 12px;
  --_r: var(--sx-r-sm, 7px);
}

.sx-btn--lg {
  --_h: var(--sx-h-lg, 40px);
  --_px: 16px;
  --_fs: var(--sx-fs-md, 14px);
  --_gap: 7px;
  --_icon: 16px;
  --_spin: 16px;
  --_r: var(--sx-r-lg, 10px);
}

.sx-btn--icon {
  width: var(--_h);
  padding: 0;
}

.sx-btn--pill {
  --_r: 999px;
}

.sx-btn--pill:not(.sx-btn--icon) {
  padding-inline: calc(var(--_px) + 3px);
}

.sx-btn--block {
  display: flex;
  width: 100%;
}

/* Variants */

/* Solid ink for the main action. Hover moves the fill toward the label colour. */
.sx-btn--primary {
  --_tone: var(--sx-primary, #1b1b21);
  --_on: var(--sx-on-primary, #fbfbfc);
  --_bg: var(--_tone);
  --_bg-hover: color-mix(in oklab, var(--_tone), var(--_on) 9%);
  --_bg-active: color-mix(in oklab, var(--_tone), black 8%);
  --_border: transparent;
  --_border-hover: transparent;
  --_shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 1px 2px rgb(0 0 0 / 0.14);
  color: var(--_on);
}

/* The one coloured action, kept for upgrades and moments that need pull. */
.sx-btn--accent {
  --_tone: var(--sx-accent, #5b48e0);
  --_on: var(--sx-on-accent, #ffffff);
  --_bg: var(--_tone);
  --_bg-hover: color-mix(in oklab, var(--_tone), var(--_on) 10%);
  --_bg-active: color-mix(in oklab, var(--_tone), black 8%);
  --_border: transparent;
  --_border-hover: transparent;
  --_shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.14),
    0 1px 2px color-mix(in srgb, var(--_tone) 40%, transparent);
  color: var(--_on);
}

/* Text only until hovered; the label steps up from muted to full colour. */
.sx-btn--ghost {
  --_bg: transparent;
  --_bg-hover: color-mix(in srgb, currentColor 6%, transparent);
  --_bg-active: color-mix(in srgb, currentColor 9%, transparent);
  --_border: transparent;
  --_border-hover: transparent;
  --_shadow: none;
  color: var(--sx-muted, color-mix(in srgb, currentColor 62%, transparent));
}

@media (hover: hover) {
  .sx-btn--ghost:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
    color: var(--sx-ink, inherit);
  }
}

.sx-btn--ghost:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  color: var(--sx-ink, inherit);
}

/* Soft red: tinted fill, hairline and label. The label is mixed with the text
   colour so it stays readable on both light and dark surfaces. */
.sx-btn--danger {
  --_tone: var(--sx-danger, #d93a3a);
  --_bg: color-mix(in srgb, var(--_tone) 6%, transparent);
  --_bg-hover: color-mix(in srgb, var(--_tone) 11%, transparent);
  --_bg-active: color-mix(in srgb, var(--_tone) 15%, transparent);
  --_border: var(--sx-danger-line, color-mix(in srgb, var(--_tone) 28%, transparent));
  --_border-hover: color-mix(in srgb, var(--_tone) 44%, transparent);
  --_shadow: none;
  color: color-mix(in oklab, var(--_tone) 78%, var(--sx-ink, currentColor));
}

/* Preferences */
@media (prefers-reduced-motion: reduce) {
  .sx-btn {
    transition-property: background-color, border-color, color, box-shadow, outline-color, opacity;
  }

  .sx-btn:is(:active, [data-pressed]):not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
    transform: none;
  }

  .sx-btn > .sx-spinner {
    animation-duration: 1.6s;
  }
}

/* Filled buttons have transparent borders; give every button an edge in high-contrast mode. */
@media (forced-colors: active) {
  .sx-btn {
    border-color: ButtonBorder;
  }

  .sx-btn:focus-visible {
    outline-color: Highlight;
  }
}

/* ---------- Chip / badge ---------- */
.sx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  line-height: 1;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-chip > .sx-icon {
  --sx-icon-size: 12px;
}

.sx-chip--soft {
  background: var(--sx-fill);
  box-shadow: none;
}

.sx-chip--accent {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-chip--mark {
  color: var(--sx-mark-ink);
  background: var(--sx-mark-soft);
  box-shadow: inset 0 0 0 1px var(--sx-mark-line);
}

.sx-chip--success {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-chip--warning {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-chip--danger {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-chip--info {
  color: var(--sx-info-ink);
  background: var(--sx-info-soft);
  box-shadow: inset 0 0 0 1px var(--sx-info-line);
}

.sx-dot {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: currentColor;
}

.sx-dot--live {
  animation: sx-pulse 1.8s var(--sx-ease-in-out) infinite;
}

.sx-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

/* ---------- Keyboard hint ---------- */
.sx-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: var(--sx-r-xs);
  font: 500 var(--sx-fs-2xs) / 1 var(--sx-font);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

/* ---------- Avatar ---------- */
.sx-avatar {
  --sx-avatar-size: 24px;
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--sx-avatar-size);
  height: var(--sx-avatar-size);
  flex: none;
  border-radius: 50%;
  font-size: calc(var(--sx-avatar-size) * 0.4);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  color: var(--sx-avatar-ink, var(--sx-ink-2));
  background: var(--sx-avatar-bg, var(--sx-surface-3));
  box-shadow: inset 0 0 0 1px var(--sx-line);
  user-select: none;
}

.sx-avatar--sm {
  --sx-avatar-size: 20px;
}

.sx-avatar--lg {
  --sx-avatar-size: 32px;
}

.sx-avatar-stack {
  display: inline-flex;
}

.sx-avatar-stack > .sx-avatar {
  box-shadow: 0 0 0 2px var(--sx-card-bg), inset 0 0 0 1px var(--sx-line);
}

.sx-avatar-stack > .sx-avatar + .sx-avatar {
  margin-left: -6px;
}

/* ---------- Detail mode ----------
   data-detail="simple" on <html> (or any wrapper) hides what an item marks as extra information with
   data-sx-extra, for a quieter screen. "informative", or no attribute, shows everything passed in. */
[data-detail="simple"] [data-sx-extra] {
  display: none !important;
}

/* ---------- Form controls ---------- */
.sx-field {
  display: grid;
  gap: 6px;
}

.sx-label {
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink-2);
}

/* Required mark and the quiet "Optional" beside a label. */
.sx-label__req {
  margin-inline-start: 2px;
  color: var(--sx-danger-ink);
}

.sx-label__opt {
  margin-inline-start: 6px;
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-hint {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-error-text {
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
}

.sx-input {
  width: 100%;
  height: var(--sx-h-md);
  padding: 0 10px;
  border: 0;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

textarea.sx-input {
  height: auto;
  min-height: 72px;
  padding: 8px 10px;
  resize: vertical;
  line-height: var(--sx-lh);
}

.sx-input:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-input:focus,
.sx-input:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sx-input[readonly] {
  background: var(--sx-surface-2);
}

.sx-input--sm {
  height: var(--sx-h-sm);
  padding: 0 8px;
  font-size: var(--sx-fs-sm);
}

.sx-input--lg {
  height: var(--sx-h-lg);
  padding: 0 12px;
  font-size: var(--sx-fs-md);
}

/* Select: <span class="sx-select"><select class="sx-input">...</select><svg class="sx-icon sx-select__icon">chevron-down</svg></span> */
.sx-select {
  position: relative;
  display: block;
  min-width: 0;
}

.sx-select .sx-input {
  appearance: none;
  padding-inline-end: calc(var(--sx-space-3) + 20px);
  text-overflow: ellipsis;
  cursor: pointer;
}

.sx-select .sx-input:disabled {
  cursor: not-allowed;
}

.sx-select__icon {
  --sx-icon-size: 16px;
  position: absolute;
  top: 50%;
  inset-inline-end: var(--sx-space-3);
  color: var(--sx-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

.sx-select .sx-input:disabled + .sx-select__icon {
  opacity: 0.5;
}

/* Radio: <label class="sx-radio"><input type="radio" name="x"><span class="sx-radio__dot"></span> Label</label> */
.sx-radio {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.sx-radio > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sx-radio__dot {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-radio__dot::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sx-on-primary);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-radio:hover > input:not(:checked):not(:disabled) + .sx-radio__dot {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-radio > input:checked + .sx-radio__dot {
  background: var(--sx-primary);
  box-shadow: none;
}

.sx-radio > input:checked + .sx-radio__dot::after {
  opacity: 1;
  transform: none;
}

.sx-radio > input:focus-visible + .sx-radio__dot {
  box-shadow: var(--sx-focus-ring);
}

.sx-radio > input:disabled + .sx-radio__dot {
  opacity: 0.55;
}

.sx-radio:has(> input:disabled) {
  color: var(--sx-muted);
  cursor: not-allowed;
}

/* Checkbox: <label class="sx-check"><input type="checkbox"><span class="sx-check__box"><svg class="sx-icon">check</svg></span> Label</label> */
.sx-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.sx-check > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sx-check__box {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 5px;
  color: var(--sx-on-primary);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-check__box > .sx-icon {
  --sx-icon-size: 12px;
  --sx-icon-stroke: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-check > input:checked + .sx-check__box,
.sx-check > input:indeterminate + .sx-check__box {
  background: var(--sx-primary);
  box-shadow: none;
}

.sx-check > input:checked + .sx-check__box > .sx-icon {
  opacity: 1;
  transform: scale(1);
}

.sx-check__box {
  position: relative;
}

.sx-check__box::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: var(--sx-on-primary);
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-check > input:indeterminate + .sx-check__box::after {
  opacity: 1;
  transform: none;
}

.sx-check > input:indeterminate + .sx-check__box > .sx-icon {
  opacity: 0;
}

.sx-check > input:focus-visible + .sx-check__box {
  box-shadow: var(--sx-focus-ring);
}

/* Switch: <button class="sx-switch" role="switch" aria-checked="false"></button> */
.sx-switch {
  --sx-switch-w: 28px;
  --sx-switch-h: 16px;
  position: relative;
  width: var(--sx-switch-w);
  height: var(--sx-switch-h);
  flex: none;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill-strong);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--sx-switch-h) - 4px);
  height: calc(var(--sx-switch-h) - 4px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(0, 0, 0, 0.06);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-switch[aria-checked="true"] {
  background: var(--sx-accent);
}

[data-theme="onix"] .sx-switch[aria-checked="true"],
.sx-switch[aria-checked="true"][data-tone="primary"] {
  background: var(--sx-primary);
}

.sx-switch[aria-checked="true"]::after {
  transform: translateX(calc(var(--sx-switch-w) - var(--sx-switch-h)));
}

/* ---------- Spinner ---------- */
.sx-spinner {
  width: var(--sx-spinner-size, 14px);
  height: var(--sx-spinner-size, 14px);
  flex: none;
  border-radius: 50%;
  border: 1.6px solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  animation: sx-spin 0.7s linear infinite;
}

/* ---------- Progress ---------- */
.sx-progress {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-progress__bar {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sx-progress-color, var(--sx-accent));
  transform-origin: left center;
  transform: scaleX(var(--sx-progress, 0));
  transition: transform var(--sx-dur-4) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Menu / popover ---------- */
.sx-menu {
  min-width: 180px;
  padding: 4px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  color: var(--sx-ink);
}

.sx-menu__label {
  padding: 8px 8px 4px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-base);
  text-align: left;
  color: var(--sx-ink-2);
  cursor: pointer;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-menu__item > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
}

.sx-menu__item:hover,
.sx-menu__item[data-active="true"] {
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-menu__item[aria-selected="true"],
.sx-menu__item[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-menu__sep {
  height: 1px;
  margin: 4px -4px;
  background: var(--sx-line-soft);
}

/* Pop: shared enter/exit for menus, popovers, panels. Toggle data-state="open". */
.sx-pop {
  transform-origin: var(--sx-pop-origin, top center);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-pop:not([data-state="open"]) {
  opacity: 0;
  transform: translateY(-4px) scale(0.97);
  visibility: hidden;
  pointer-events: none;
}

.sx-pop[data-state="open"] {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition-delay: 0s;
}

/* ---------- Text shimmer (in-progress status labels only) ---------- */
.sx-shimmer-text {
  color: transparent;
  background: linear-gradient(90deg, var(--sx-muted) 0%, var(--sx-muted) 35%, var(--sx-ink) 50%, var(--sx-muted) 65%, var(--sx-muted) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sx-shimmer 1.8s linear infinite;
}

/* ---------- Skeleton ---------- */
.sx-skeleton {
  position: relative;
  overflow: hidden;
  border-radius: var(--sx-r-sm);
  background: var(--sx-fill);
}

.sx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--sx-fill-strong), transparent);
  animation: sx-sweep 1.4s var(--sx-ease-in-out) infinite;
}

/* ---------- Keyframes ---------- */
@keyframes sx-spin {
  to { transform: rotate(360deg); }
}

@keyframes sx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

@keyframes sx-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -150% 0; }
}

@keyframes sx-sweep {
  to { transform: translateX(100%); }
}

@keyframes sx-fade-in {
  from { opacity: 0; }
}

@keyframes sx-rise-in {
  from { opacity: 0; transform: translateY(6px); }
}

@keyframes sx-pop-in {
  from { opacity: 0; transform: scale(0.94); }
}

@keyframes sx-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

@keyframes sx-blink {
  0%, 45% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-dot--live,
  .sx-skeleton::after {
    animation: none;
  }

  .sx-shimmer-text {
    animation-duration: 4s;
  }
}


/* ---- Text Input (text-input) ---- */
/* ==========================================================================
   Text Input — the everyday single-line field
   Root: .sx-field with data-size="sm | md | lg", data-state="error | success", data-focused (previews).
   Box: optional icon and addons around the real .sx-input, then a status mark and buttons.
   Foot: message and counter; it opens with the grid trick when it has something to say.
   lg is 44px tall with 44px hit areas, so it lines up with the other Basics fields on touch.
   ========================================================================== */

.sx-text-input {
  --ti-h: var(--sx-h-md);
  --ti-pad: 10px;
  --ti-btn: 26px;
  --ti-icon: 15px;
  --ti-fs: var(--sx-fs-base);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-text-input[data-size="sm"] {
  --ti-h: var(--sx-h-sm);
  --ti-pad: 8px;
  --ti-btn: 22px;
  --ti-icon: 14px;
  --ti-fs: var(--sx-fs-sm);
}

.sx-text-input[data-size="lg"] {
  --ti-h: 44px;
  --ti-pad: 12px;
  --ti-btn: 36px;
  --ti-icon: 17px;
  --ti-fs: var(--sx-fs-md);
}

.sx-text-input > .sx-label {
  margin-bottom: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Box: draws the field; the input inside is transparent ---------- */
.sx-text-input__box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--ti-h);
  border-radius: var(--sx-r-md);
  font-size: var(--ti-fs);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-input__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-text-input__box:focus-within,
.sx-text-input[data-focused] .sx-text-input__box {
  box-shadow: var(--sx-focus-ring);
}

.sx-text-input__box > .sx-input,
.sx-text-input__box > .sx-input:is(:hover, :focus, :focus-visible, [aria-invalid="true"], [readonly], :disabled) {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--ti-pad);
  border-radius: inherit;
  font-size: var(--ti-fs);
  text-overflow: ellipsis;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.sx-text-input__box > .sx-input:disabled {
  cursor: not-allowed;
}

/* Browser extras that would double our own buttons, and autofill's painted background. */
.sx-text-input__box > .sx-input::-webkit-search-decoration,
.sx-text-input__box > .sx-input::-webkit-search-cancel-button,
.sx-text-input__box > .sx-input::-ms-clear,
.sx-text-input__box > .sx-input::-ms-reveal {
  display: none;
  appearance: none;
}

.sx-text-input__box > .sx-input:-webkit-autofill,
.sx-text-input__box > .sx-input:-webkit-autofill:hover,
.sx-text-input__box > .sx-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--sx-ink);
  transition: background-color 600000s linear, color 600000s linear;
}

.sx-text-input__icon {
  --sx-icon-size: var(--ti-icon);
  margin-inline-start: var(--ti-pad);
  color: var(--sx-muted);
  pointer-events: none;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-input__box:focus-within > .sx-text-input__icon,
.sx-text-input[data-focused] .sx-text-input__icon {
  color: var(--sx-ink-2);
}

.sx-text-input__icon + .sx-input,
.sx-text-input__icon + .sx-input:is(:hover, :focus, :focus-visible, [aria-invalid="true"], [readonly], :disabled) {
  padding-inline-start: 8px;
}

/* ---------- Addons: fixed text such as +62, https:// or kg ---------- */
.sx-text-input__addon {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  flex: none;
  margin-block: 1px;
  padding-inline: var(--ti-pad);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  user-select: none;
}

.sx-text-input__addon[data-side="start"] {
  margin-inline-start: 1px;
  border-inline-end: 1px solid var(--sx-line);
  border-start-start-radius: calc(var(--sx-r-md) - 1px);
  border-end-start-radius: calc(var(--sx-r-md) - 1px);
}

.sx-text-input__addon[data-side="end"] {
  margin-inline-end: 1px;
  border-inline-start: 1px solid var(--sx-line);
  border-start-end-radius: calc(var(--sx-r-md) - 1px);
  border-end-end-radius: calc(var(--sx-r-md) - 1px);
}

/* ---------- Status mark and buttons at the end of the box ---------- */
.sx-text-input__status {
  --sx-icon-size: var(--ti-icon);
  --sx-spinner-size: calc(var(--ti-icon) - 1px);
  display: inline-grid;
  place-items: center;
  flex: none;
  margin-inline-end: 8px;
  color: var(--sx-muted);
}

.sx-text-input__status:empty {
  display: none;
}

.sx-text-input__status[data-kind="error"] {
  color: var(--sx-danger-ink);
}

.sx-text-input__status[data-kind="success"] {
  color: var(--sx-success-ink);
}

.sx-text-input__status > .sx-icon {
  animation: ti-mark-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-text-input__status + .sx-text-input__action {
  margin-inline-start: -4px;
}

.sx-text-input__action.sx-btn {
  --_h: var(--ti-btn);
  --_icon: var(--ti-icon);
  margin-inline-end: 4px;
}

/* lg: the button stays 36px to look calm, its hit area reaches 44px. */
.sx-text-input[data-size="lg"] .sx-text-input__action::after {
  content: "";
  position: absolute;
  inset: -4px;
}

.sx-text-input__action[aria-pressed="true"] {
  color: var(--sx-ink);
}

.sx-text-input__action:disabled {
  visibility: hidden;
}

/* ---------- Foot: message and counter ---------- */
.sx-text-input__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-text-input__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-text-input__foot-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.sx-text-input__msg {
  flex: 1;
  min-width: 0;
  margin-top: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-input__msg-text {
  display: block;
  animation: ti-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-text-input__count {
  flex: none;
  margin-top: 6px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-input__count[data-tone="warning"] {
  color: var(--sx-warning-ink);
}

.sx-text-input__count[data-tone="danger"] {
  color: var(--sx-danger-ink);
}

/* ---------- States ---------- */
.sx-text-input[data-state="error"] .sx-text-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-text-input[data-state="error"] .sx-text-input__box:focus-within,
.sx-text-input[data-state="error"][data-focused] .sx-text-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-text-input[data-state="error"] .sx-input {
  caret-color: var(--sx-danger);
}

.sx-text-input[data-state="success"] .sx-text-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-success);
}

.sx-text-input[data-state="success"] .sx-text-input__box:focus-within,
.sx-text-input[data-state="success"][data-focused] .sx-text-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-text-input[data-state="success"] .sx-text-input__msg {
  color: var(--sx-success-ink);
}

.sx-text-input__box:has(> .sx-input[readonly]) {
  background: var(--sx-surface-2);
  cursor: default;
}

.sx-text-input__box:has(> .sx-input[readonly]):not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-text-input__box:has(> .sx-input:disabled) {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  color: var(--sx-muted);
  opacity: 0.6;
  cursor: not-allowed;
}

.sx-text-input:has(.sx-input:disabled) > .sx-label {
  color: var(--sx-muted);
}

@keyframes ti-mark-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes ti-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* iOS zooms the page into any field under 16px; touch screens get 16px. */
@media (hover: none) and (pointer: coarse) {
  .sx-text-input__box > .sx-input {
    font-size: 16px;
  }
}

/* ---------- Demo layout (sign-up form; every state stays in view) ---------- */
.sx-text-input-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 12px;
  width: 420px;
  max-width: 100%;
  padding: 14px 18px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-text-input__foot {
    transition: none;
  }

  .sx-text-input__status > .sx-icon {
    animation-name: sx-fade-in;
  }

  .sx-text-input__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Text Area (text-area) ---- */
/* ==========================================================================
   Text Area — the plain multi-line form field
   Root: .sx-field with data-size="sm | md | lg", data-state="error | success", data-focused (previews).
   Box: draws the field around a transparent .sx-input. With data-auto it grows with its content:
   a hidden ghost measures the text, the textarea takes the new height at once and the box slides
   open around it, so the text never moves. data-scroll turns the scrollbar on past maxRows.
   Line heights are whole pixels so a measured height never rounds below the text.
   ========================================================================== */

.sx-text-area {
  --ta-lh: 20px;
  --ta-py: 7px;
  --ta-px: 10px;
  --ta-fs: var(--sx-fs-base);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-text-area[data-size="sm"] {
  --ta-lh: 18px;
  --ta-py: 5px;
  --ta-px: 8px;
  --ta-fs: var(--sx-fs-sm);
}

.sx-text-area[data-size="lg"] {
  --ta-lh: 22px;
  --ta-py: 11px;
  --ta-px: 12px;
  --ta-fs: var(--sx-fs-md);
}

.sx-text-area > .sx-label {
  margin-bottom: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Box ---------- */
.sx-text-area__box {
  position: relative;
  display: block;
  min-width: 0;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-area__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-text-area__box:focus-within,
.sx-text-area[data-focused] .sx-text-area__box {
  box-shadow: var(--sx-focus-ring);
}

textarea.sx-input.sx-text-area__input,
textarea.sx-input.sx-text-area__input:is(:hover, :focus, :focus-visible, [aria-invalid="true"], [readonly], :disabled) {
  display: block;
  width: 100%;
  height: auto;
  min-height: 0;
  padding: var(--ta-py) var(--ta-px);
  border-radius: inherit;
  font-size: var(--ta-fs);
  line-height: var(--ta-lh);
  background: transparent;
  box-shadow: none;
  opacity: 1;
  resize: vertical;
  overflow-wrap: break-word;
  scrollbar-width: thin;
}

.sx-text-area__box[data-resize="none"] > textarea.sx-input.sx-text-area__input {
  resize: none;
}

textarea.sx-input.sx-text-area__input:disabled {
  cursor: not-allowed;
}

/* The native corner, redrawn as two quiet strokes. */
.sx-text-area__input::-webkit-resizer {
  background:
    linear-gradient(135deg, transparent 0 58%, var(--sx-faint) 58% 64%, transparent 64% 74%, var(--sx-faint) 74% 80%, transparent 80%);
}

/* ---------- Auto-grow ---------- */
.sx-text-area__box[data-auto] {
  overflow: hidden;
}

.sx-text-area__box[data-auto][data-ready] {
  transition:
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out),
    height var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-area__box[data-auto] > textarea.sx-input.sx-text-area__input {
  overflow-y: hidden;
  resize: none;
}

.sx-text-area__box[data-auto][data-scroll] > textarea.sx-input.sx-text-area__input {
  overflow-y: auto;
}

/* Same box model and type as the textarea, invisible; only its height is read. */
.sx-text-area__ghost {
  position: absolute;
  inset: 0 0 auto;
  padding: var(--ta-py) var(--ta-px);
  font-size: var(--ta-fs);
  line-height: var(--ta-lh);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  visibility: hidden;
  pointer-events: none;
}

/* ---------- Foot: message and counter ---------- */
.sx-text-area__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-text-area__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-text-area__foot-in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 0;
  overflow: hidden;
}

.sx-text-area__msg {
  flex: 1;
  min-width: 0;
  margin-top: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-area__msg-text {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  animation: ta-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* The box has no room for a status mark, so it sits with the message. */
.sx-text-area__msg-text > .sx-icon {
  --sx-icon-size: 13px;
  margin-top: 2.5px;
}

.sx-text-area__count {
  flex: none;
  margin-top: 6px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-text-area__count[data-tone="warning"] {
  color: var(--sx-warning-ink);
}

.sx-text-area__count[data-tone="danger"] {
  color: var(--sx-danger-ink);
}

/* ---------- States ---------- */
.sx-text-area[data-state="error"] .sx-text-area__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-text-area[data-state="error"] .sx-text-area__box:focus-within,
.sx-text-area[data-state="error"][data-focused] .sx-text-area__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-text-area[data-state="error"] .sx-input {
  caret-color: var(--sx-danger);
}

.sx-text-area[data-state="success"] .sx-text-area__box {
  box-shadow: inset 0 0 0 1px var(--sx-success);
}

.sx-text-area[data-state="success"] .sx-text-area__box:focus-within,
.sx-text-area[data-state="success"][data-focused] .sx-text-area__box {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-text-area[data-state="success"] .sx-text-area__msg {
  color: var(--sx-success-ink);
}

.sx-text-area__box:has(> .sx-input[readonly]) {
  background: var(--sx-surface-2);
}

.sx-text-area__box:has(> .sx-input[readonly]):not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-text-area__box:has(> .sx-input:disabled) {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  opacity: 0.6;
}

.sx-text-area:has(.sx-input:disabled) > .sx-label {
  color: var(--sx-muted);
}

@keyframes ta-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* iOS zooms the page into any field under 16px; touch screens get 16px. */
@media (hover: none) and (pointer: coarse) {
  textarea.sx-input.sx-text-area__input,
  .sx-text-area__ghost {
    font-size: 16px;
  }
}

/* ---------- Demo layout (returns desk; the height leaves room for the note to grow) ---------- */
.sx-text-area-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 14px 12px;
  width: 420px;
  max-width: 100%;
  min-height: 362px;
  padding: 14px 18px;
}

.sx-text-area-demo > .sx-text-area:first-child {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .sx-text-area__foot {
    transition: none;
  }

  .sx-text-area__box[data-auto][data-ready] {
    transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-text-area__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Radio Button (radio-button) ---- */
/* ==========================================================================
   Radio Button — native radios, one option or a whole group
   Group root: .sx-field role="radiogroup" with data-size="sm | md | lg",
   data-orientation="vertical | horizontal", data-state="error | success", data-readonly,
   data-focused (previews: rings the chosen dot). Options: .sx-radio labels around native inputs.
   lg rows are 44px tall for touch. Base draws the dot and its spring.
   ========================================================================== */

.sx-radio-button {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-radio-button > .sx-label {
  margin-bottom: 6px;
}

.sx-radio-button__list {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-radio-button[data-orientation="horizontal"] > .sx-radio-button__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 18px;
}

/* ---------- One option ---------- */
.sx-radio-button__option {
  --rb-dot: 16px;
  --rb-line: 20px;
  --rb-fs: var(--sx-fs-base);
  --rb-py: 4px;
  position: relative;
  align-items: flex-start;
  min-width: 0;
  padding-block: var(--rb-py);
}

.sx-radio-button__option[data-size="sm"] {
  --rb-dot: 14px;
  --rb-line: 18px;
  --rb-fs: var(--sx-fs-sm);
  --rb-py: 3px;
}

.sx-radio-button__option[data-size="lg"] {
  --rb-dot: 20px;
  --rb-line: 22px;
  --rb-fs: var(--sx-fs-md);
  --rb-py: 11px;
}

.sx-radio-button__option > .sx-radio__dot {
  width: var(--rb-dot);
  height: var(--rb-dot);
  margin-top: calc((var(--rb-line) - var(--rb-dot)) / 2);
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-radio-button__option > .sx-radio__dot::after {
  inset: calc((var(--rb-dot) - 6px) / 2);
}

.sx-radio-button__option:active > input:not(:disabled) + .sx-radio__dot {
  transform: scale(0.88);
}

.sx-radio-button__text {
  display: grid;
  min-width: 0;
}

.sx-radio-button__label {
  font-size: var(--rb-fs);
  line-height: var(--rb-line);
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-radio-button__option:hover > .sx-radio-button__text > .sx-radio-button__label,
.sx-radio-button__option > input:checked ~ .sx-radio-button__text > .sx-radio-button__label {
  color: var(--sx-ink);
}

.sx-radio-button__desc {
  font-size: var(--sx-fs-sm);
  line-height: 18px;
  color: var(--sx-muted);
}

.sx-radio-button__option:has(> input:disabled) .sx-radio-button__label {
  color: var(--sx-muted);
}

.sx-radio-button__option:has(> input:disabled) .sx-radio-button__desc {
  color: var(--sx-faint);
}

.sx-radio-button[data-focused] .sx-radio-button__option > input:checked + .sx-radio__dot {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Foot: message under the group ---------- */
.sx-radio-button__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-radio-button__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-radio-button__foot-in {
  min-height: 0;
  overflow: hidden;
}

.sx-radio-button__msg {
  margin-top: 4px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radio-button__msg-text {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  animation: rb-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* A group has no box for a status mark, so it sits with the message. */
.sx-radio-button__msg-text > .sx-icon {
  --sx-icon-size: 13px;
  margin-top: 2.5px;
}

/* ---------- States ---------- */
.sx-radio-button[data-state="error"] .sx-radio-button__option > input:not(:checked):not(:disabled) + .sx-radio__dot {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-radio-button[data-state="error"] .sx-radio-button__option > input:focus-visible + .sx-radio__dot {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-radio-button[data-state="success"] .sx-radio-button__msg {
  color: var(--sx-success-ink);
}

.sx-radio-button[data-readonly] .sx-radio-button__option {
  cursor: default;
}

.sx-radio-button[data-readonly] .sx-radio-button__option > input:not(:checked) + .sx-radio__dot {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-radio-button[data-readonly] .sx-radio-button__option:active > input + .sx-radio__dot {
  transform: none;
}

.sx-radio-button[data-readonly] .sx-radio-button__option:hover > input:not(:checked) ~ .sx-radio-button__text > .sx-radio-button__label {
  color: var(--sx-ink-2);
}

@keyframes rb-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* ---------- Demo layout (checkout settings) ---------- */
.sx-radio-button-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 16px 12px;
  width: 420px;
  max-width: 100%;
  padding: 16px 18px;
}

.sx-radio-button-demo > .sx-radio-button[data-orientation="horizontal"] {
  grid-column: 1 / -1;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sx-radio-button__foot {
    transition: none;
  }

  .sx-radio-button__option:active > input:not(:disabled) + .sx-radio__dot {
    transform: none;
  }

  .sx-radio-button__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Toggle Switch (toggle-switch) ---- */
/* ==========================================================================
   Toggle Switch — on and off, with a label beside it and a saving state
   Root: .sx-field with data-size="sm | md | lg", data-side="start | end", data-state="error | success",
   data-busy (saving: the thumb carries a spinner), data-readonly.
   The control is base .sx-switch (role="switch", aria-checked). The whole text is its label.
   lg gives the switch a 44px hit area.
   ========================================================================== */

.sx-toggle-switch {
  --ts-w: 32px;
  --ts-h: 18px;
  --ts-line: 20px;
  --ts-fs: var(--sx-fs-base);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-toggle-switch[data-size="sm"] {
  --ts-w: 26px;
  --ts-h: 14px;
  --ts-line: 18px;
  --ts-fs: var(--sx-fs-sm);
}

.sx-toggle-switch[data-size="lg"] {
  --ts-w: 44px;
  --ts-h: 26px;
  --ts-line: 26px;
  --ts-fs: var(--sx-fs-md);
}

.sx-toggle-switch__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.sx-toggle-switch[data-side="start"] .sx-toggle-switch__row {
  flex-direction: row-reverse;
}

/* ---------- Label and description ---------- */
.sx-toggle-switch__text {
  display: grid;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.sx-toggle-switch__text > .sx-label {
  font-size: var(--ts-fs);
  line-height: var(--ts-line);
  color: var(--sx-ink);
}

.sx-toggle-switch__desc {
  font-size: var(--sx-fs-sm);
  line-height: 18px;
  color: var(--sx-muted);
}

/* ---------- Switch: the sizes, the press and the spinner sit on base .sx-switch ---------- */
.sx-switch.sx-toggle-switch__switch {
  --sx-switch-w: var(--ts-w);
  --sx-switch-h: var(--ts-h);
  --ts-stretch: 0px;
  margin-top: calc((var(--ts-line) - var(--ts-h)) / 2);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* A wider thumb while pressed, so the flip feels held. */
.sx-toggle-switch__switch::after {
  width: calc(var(--sx-switch-h) - 4px + var(--ts-stretch));
  transition:
    transform var(--sx-dur-3) var(--sx-ease-spring),
    width var(--sx-dur-2) var(--sx-ease-out);
}

.sx-toggle-switch__switch[aria-checked="true"]::after {
  transform: translateX(calc(var(--sx-switch-w) - var(--sx-switch-h) - var(--ts-stretch)));
}

.sx-toggle-switch:not([data-readonly], [data-busy]) .sx-toggle-switch__switch:hover:not(:disabled):not([aria-checked="true"]) {
  background: var(--sx-line-strong);
}

.sx-toggle-switch__switch:active:not(:disabled) {
  --ts-stretch: 3px;
}

.sx-toggle-switch__switch:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

/* lg: the hit area reaches 44px; ::after is the thumb. */
.sx-toggle-switch[data-size="lg"] .sx-toggle-switch__switch::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

/* Rides on the thumb: same box, same slide. */
.sx-toggle-switch__spin {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(var(--sx-switch-h) - 4px);
  height: calc(var(--sx-switch-h) - 4px);
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-toggle-switch__switch[aria-checked="true"] .sx-toggle-switch__spin {
  transform: translateX(calc(var(--sx-switch-w) - var(--sx-switch-h)));
}

.sx-toggle-switch__spin > .sx-spinner {
  --sx-spinner-size: calc(var(--sx-switch-h) - 8px);
  border-width: 1.4px;
}

/* ---------- Foot: message under the row ---------- */
.sx-toggle-switch__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-toggle-switch__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-toggle-switch__foot-in {
  min-height: 0;
  overflow: hidden;
}

.sx-toggle-switch__msg {
  margin-top: 4px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-toggle-switch__msg-text {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  animation: ts-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* A switch has no box for a status mark, so it sits with the message. */
.sx-toggle-switch__msg-text > .sx-icon {
  --sx-icon-size: 13px;
  margin-top: 2.5px;
}

/* ---------- States ---------- */
.sx-toggle-switch[data-state="error"] .sx-toggle-switch__switch {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-toggle-switch[data-state="error"] .sx-toggle-switch__switch:focus-visible {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-toggle-switch[data-state="success"] .sx-toggle-switch__msg {
  color: var(--sx-success-ink);
}

.sx-toggle-switch[data-busy] .sx-toggle-switch__switch,
.sx-toggle-switch[data-busy] .sx-toggle-switch__text {
  cursor: progress;
}

.sx-toggle-switch[data-readonly] .sx-toggle-switch__switch,
.sx-toggle-switch[data-readonly] .sx-toggle-switch__text {
  cursor: default;
}

.sx-toggle-switch[data-readonly] .sx-toggle-switch__switch {
  opacity: 0.7;
}

.sx-toggle-switch[data-readonly] .sx-toggle-switch__switch,
.sx-toggle-switch[data-busy] .sx-toggle-switch__switch {
  --ts-stretch: 0px;
}

.sx-toggle-switch__switch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sx-toggle-switch:has(.sx-toggle-switch__switch:disabled) .sx-toggle-switch__text {
  cursor: not-allowed;
}

.sx-toggle-switch:has(.sx-toggle-switch__switch:disabled) .sx-label {
  color: var(--sx-muted);
}

.sx-toggle-switch:has(.sx-toggle-switch__switch:disabled) .sx-toggle-switch__desc {
  color: var(--sx-faint);
}

@keyframes ts-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* ---------- Demo layout (a settings list; the height leaves room for a save that fails) ---------- */
.sx-toggle-switch-demo {
  display: grid;
  align-content: start;
  width: 400px;
  max-width: 100%;
  min-height: 344px;
  padding: 6px 18px;
}

.sx-toggle-switch-demo > .sx-toggle-switch {
  padding-block: 11px;
}

.sx-toggle-switch-demo > .sx-toggle-switch + .sx-toggle-switch {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sx-toggle-switch__foot {
    transition: none;
  }

  .sx-toggle-switch__switch::after,
  .sx-toggle-switch__spin {
    transition-property: none;
  }

  .sx-toggle-switch__switch:active:not(:disabled) {
    --ts-stretch: 0px;
  }

  .sx-toggle-switch__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Select Input (select-input) ---- */
/* ==========================================================================
   Select Input — a native select on the base .sx-select wrapper
   Root: .sx-field with data-size="sm | md | lg", data-state="error | success", data-focused (previews),
   data-readonly. The select takes data-empty while the placeholder shows, in the muted colour.
   A status mark sits beside the chevron. lg is 44px tall for touch.
   ========================================================================== */

.sx-select-input {
  --si-h: var(--sx-h-md);
  --si-end: 12px;
  --si-icon: 15px;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-select-input[data-size="sm"] {
  --si-h: var(--sx-h-sm);
  --si-end: 8px;
  --si-icon: 14px;
}

.sx-select-input[data-size="lg"] {
  --si-h: 44px;
  --si-end: 14px;
  --si-icon: 17px;
}

.sx-select-input > .sx-label {
  margin-bottom: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- The select ---------- */
.sx-select-input__box .sx-input {
  height: var(--si-h);
  padding-inline-end: calc(var(--si-end) + 20px);
  white-space: nowrap;
  transition:
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-select-input[data-state] .sx-select-input__box .sx-input {
  padding-inline-end: calc(var(--si-end) + 42px);
}

.sx-select-input__box .sx-input[data-empty] {
  color: var(--sx-muted);
}

/* The list keeps normal colours whatever the closed field shows. */
.sx-select-input__box .sx-input option,
.sx-select-input__box .sx-input optgroup {
  color: var(--sx-ink);
  background: var(--sx-surface);
}

.sx-select-input__box .sx-input option:disabled {
  color: var(--sx-muted);
}

.sx-select-input__box .sx-select__icon {
  --sx-icon-size: var(--si-icon);
  inset-inline-end: var(--si-end);
  transition: color var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-select-input__box:hover .sx-select__icon,
.sx-select-input__box .sx-input:focus + .sx-select__icon,
.sx-select-input[data-focused] .sx-select__icon {
  color: var(--sx-ink-2);
}

.sx-select-input[data-focused] .sx-input {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Status mark, beside the chevron ---------- */
.sx-select-input__status {
  --sx-icon-size: var(--si-icon);
  position: absolute;
  top: 50%;
  inset-inline-end: calc(var(--si-end) + 20px);
  display: inline-grid;
  place-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.sx-select-input__status:empty {
  display: none;
}

.sx-select-input__status[data-kind="error"] {
  color: var(--sx-danger-ink);
}

.sx-select-input__status[data-kind="success"] {
  color: var(--sx-success-ink);
}

.sx-select-input__status > .sx-icon {
  animation: si-mark-in var(--sx-dur-3) var(--sx-ease-spring);
}

/* ---------- Foot: message under the field ---------- */
.sx-select-input__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-select-input__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-select-input__foot-in {
  min-height: 0;
  overflow: hidden;
}

.sx-select-input__msg {
  margin-top: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-select-input__msg-text {
  display: block;
  animation: si-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- States ---------- */
.sx-select-input[data-state="error"] .sx-input,
.sx-select-input[data-state="error"] .sx-input:hover {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-select-input[data-state="error"] .sx-input:focus,
.sx-select-input[data-state="error"][data-focused] .sx-input {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-select-input[data-state="success"] .sx-input,
.sx-select-input[data-state="success"] .sx-input:hover {
  box-shadow: inset 0 0 0 1px var(--sx-success);
}

.sx-select-input[data-state="success"] .sx-input:focus,
.sx-select-input[data-state="success"][data-focused] .sx-input {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-select-input[data-state="success"] .sx-select-input__msg {
  color: var(--sx-success-ink);
}

/* Native selects have no read-only: it stays focusable, and script blocks every way of changing it. */
.sx-select-input[data-readonly] .sx-input {
  padding-inline-end: var(--si-end);
  background: var(--sx-surface-2);
  cursor: default;
}

.sx-select-input[data-readonly] .sx-input:not(:focus) {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-select-input[data-readonly] .sx-select__icon {
  display: none;
}

.sx-select-input__box .sx-input:disabled {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  opacity: 0.6;
}

.sx-select-input:has(.sx-input:disabled) > .sx-label {
  color: var(--sx-muted);
}

@keyframes si-mark-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes si-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* iOS zooms the page into any field under 16px; touch screens get 16px. */
@media (hover: none) and (pointer: coarse) {
  .sx-select-input__box .sx-input {
    font-size: 16px;
  }
}

/* ---------- Demo layout (new stock order; every state stays in view) ---------- */
.sx-select-input-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 14px 12px;
  width: 420px;
  max-width: 100%;
  padding: 18px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-select-input__foot {
    transition: none;
  }

  .sx-select-input__status > .sx-icon,
  .sx-select-input__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Number Input (number-input) ---- */
/* ==========================================================================
   Number Input — a stepper field for quantities and amounts
   Root: .sx-field with data-size="sm | md | lg", data-state="error | success", data-focused (previews).
   Box: minus, then the centred group of prefix, real .sx-input (role="spinbutton") and unit, then plus.
   The input is as wide as its text (--ni-ch), so prefix and unit stay next to the figure.
   The message takes data-tone="warning" after a value was clamped to its limits.
   Step buttons use aria-disabled at a limit, so a held press or keyboard focus is never dropped.
   lg is 44px tall with 44px step buttons for touch.
   ========================================================================== */

.sx-number-input {
  --ni-h: var(--sx-h-md);
  --ni-btn: 34px;
  --ni-icon: 15px;
  --ni-fs: var(--sx-fs-base);
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-number-input[data-size="sm"] {
  --ni-h: var(--sx-h-sm);
  --ni-btn: 28px;
  --ni-icon: 14px;
  --ni-fs: var(--sx-fs-sm);
}

.sx-number-input[data-size="lg"] {
  --ni-h: 44px;
  --ni-btn: 48px;
  --ni-icon: 18px;
  --ni-fs: var(--sx-fs-lg);
}

.sx-number-input > .sx-label {
  margin-bottom: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Box ---------- */
.sx-number-input__box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--ni-h);
  border-radius: var(--sx-r-md);
  font-size: var(--ni-fs);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-number-input__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-number-input__box:focus-within,
.sx-number-input[data-focused] .sx-number-input__box {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Step buttons ---------- */
.sx-number-input__step.sx-btn {
  --_h: calc(var(--ni-h) - 2px);
  --_icon: var(--ni-icon);
  --_r: calc(var(--sx-r-md) - 1px);
  width: var(--ni-btn);
  margin: 1px;
  color: var(--sx-ink-2);
  -webkit-touch-callout: none;
}

/* The 1px margin keeps the box's ring clear; the hit area still fills the box. */
.sx-number-input__step::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.sx-number-input__step.sx-btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--sx-faint);
}

.sx-number-input__step > .sx-icon {
  transition: transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-number-input__step:active:not([aria-disabled="true"]) > .sx-icon {
  transform: scale(0.8);
}

/* ---------- Prefix, figure and unit, centred together ---------- */
.sx-number-input__value {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  border-inline: 1px solid var(--sx-line-soft);
  cursor: text;
}

.sx-number-input__value > .sx-input,
.sx-number-input__value > .sx-input:is(:hover, :focus, :focus-visible, [aria-invalid="true"], [readonly], :disabled) {
  flex: 0 1 auto;
  width: calc((var(--ni-ch, 1) + 0.6) * 1ch);
  min-width: 2ch;
  max-width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  font-size: var(--ni-fs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.sx-number-input__value > .sx-input:disabled {
  cursor: not-allowed;
}

.sx-number-input__affix {
  flex: none;
  white-space: nowrap;
  color: var(--sx-muted);
  user-select: none;
}

/* ---------- Foot: message under the field ---------- */
.sx-number-input__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-number-input__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-number-input__foot-in {
  min-height: 0;
  overflow: hidden;
}

.sx-number-input__msg {
  margin-top: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-number-input__msg[data-tone="warning"] {
  color: var(--sx-warning-ink);
}

.sx-number-input__msg-text {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  animation: ni-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* The box is full with its steppers, so a status mark sits with the message. */
.sx-number-input__msg-text > .sx-icon {
  --sx-icon-size: 13px;
  margin-top: 2.5px;
}

/* ---------- States ---------- */
.sx-number-input[data-state="error"] .sx-number-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-number-input[data-state="error"] .sx-number-input__box:focus-within,
.sx-number-input[data-state="error"][data-focused] .sx-number-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-number-input[data-state="error"] .sx-input {
  caret-color: var(--sx-danger);
}

.sx-number-input[data-state="success"] .sx-number-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-success);
}

.sx-number-input[data-state="success"] .sx-number-input__box:focus-within,
.sx-number-input[data-state="success"][data-focused] .sx-number-input__box {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-number-input[data-state="success"] .sx-number-input__msg {
  color: var(--sx-success-ink);
}

.sx-number-input__box:has(.sx-input[readonly]) {
  background: var(--sx-surface-2);
}

.sx-number-input__box:has(.sx-input[readonly]):not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-number-input__box:has(.sx-input:disabled) {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  opacity: 0.6;
}

.sx-number-input:has(.sx-input:disabled) > .sx-label {
  color: var(--sx-muted);
}

@keyframes ni-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* iOS zooms the page into any field under 16px; touch screens get 16px. */
@media (hover: none) and (pointer: coarse) {
  .sx-number-input__value > .sx-input {
    font-size: 16px;
  }
}

/* ---------- Demo layout (order settings; every state stays in view) ---------- */
.sx-number-input-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 12px;
  width: 420px;
  max-width: 100%;
  padding: 16px 18px;
}

.sx-number-input-demo > .sx-number-input[data-size="lg"] {
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .sx-number-input__foot {
    transition: none;
  }

  .sx-number-input__step:active:not([aria-disabled="true"]) > .sx-icon {
    transform: none;
  }

  .sx-number-input__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Time Field (time-field) ---- */
/* ==========================================================================
   Time Field — type a time or pick a slot from the list
   Root: .sx-field with data-size="sm | md | lg", data-state="error | success", data-focused (previews).
   Box: clock icon, real .sx-input (role="combobox"), status mark, list toggle.
   Pop: .sx-menu.sx-pop role="listbox", data-state="open". Slots: role="option" with aria-selected,
   aria-disabled and data-active="true" (the keyboard position, on base .sx-menu__item).
   lg is 44px tall with 44px slots and toggle hit area.
   ========================================================================== */

.sx-time-field {
  --tf-h: var(--sx-h-md);
  --tf-pad: 10px;
  --tf-btn: 26px;
  --tf-icon: 15px;
  --tf-fs: var(--sx-fs-base);
  --tf-slot: 30px;
  --tf-rows: 6;
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 0;
  min-width: 0;
}

.sx-time-field[data-size="sm"] {
  --tf-h: var(--sx-h-sm);
  --tf-pad: 8px;
  --tf-btn: 22px;
  --tf-icon: 14px;
  --tf-fs: var(--sx-fs-sm);
  --tf-slot: 26px;
}

.sx-time-field[data-size="lg"] {
  --tf-h: 44px;
  --tf-pad: 12px;
  --tf-btn: 36px;
  --tf-icon: 17px;
  --tf-fs: var(--sx-fs-md);
  --tf-slot: 44px;
}

.sx-time-field > .sx-label {
  margin-bottom: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* The anchor for the list */
.sx-time-field__control {
  position: relative;
  min-width: 0;
}

/* ---------- Box ---------- */
.sx-time-field__box {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: var(--tf-h);
  border-radius: var(--sx-r-md);
  font-size: var(--tf-fs);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-time-field__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-time-field__box:focus-within,
.sx-time-field[data-focused] .sx-time-field__box {
  box-shadow: var(--sx-focus-ring);
}

.sx-time-field__box > .sx-input,
.sx-time-field__box > .sx-input:is(:hover, :focus, :focus-visible, [aria-invalid="true"], [readonly], :disabled) {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 var(--tf-pad) 0 8px;
  border-radius: inherit;
  font-size: var(--tf-fs);
  font-variant-numeric: tabular-nums;
  background: transparent;
  box-shadow: none;
  opacity: 1;
}

.sx-time-field__box > .sx-input:disabled {
  cursor: not-allowed;
}

.sx-time-field__icon {
  --sx-icon-size: var(--tf-icon);
  margin-inline-start: var(--tf-pad);
  color: var(--sx-muted);
  pointer-events: none;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-time-field__box:focus-within > .sx-time-field__icon,
.sx-time-field[data-focused] .sx-time-field__icon {
  color: var(--sx-ink-2);
}

/* ---------- Status mark and list toggle ---------- */
.sx-time-field__status {
  --sx-icon-size: var(--tf-icon);
  display: inline-grid;
  place-items: center;
  flex: none;
  margin-inline-end: 4px;
}

.sx-time-field__status:empty {
  display: none;
}

.sx-time-field__status[data-kind="error"] {
  color: var(--sx-danger-ink);
}

.sx-time-field__status[data-kind="success"] {
  color: var(--sx-success-ink);
}

.sx-time-field__status > .sx-icon {
  animation: tf-mark-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-time-field__toggle.sx-btn {
  --_h: var(--tf-btn);
  --_icon: var(--tf-icon);
  margin-inline-end: 4px;
}

.sx-time-field__toggle > .sx-icon {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-time-field__toggle[aria-expanded="true"] {
  color: var(--sx-ink);
}

.sx-time-field__toggle[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

/* lg: the button stays 36px to look calm, its hit area reaches 44px. */
.sx-time-field[data-size="lg"] .sx-time-field__toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
}

/* ---------- List of slots ---------- */
.sx-time-field__pop {
  --sx-pop-origin: top left;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline: 0;
  z-index: var(--sx-z-pop);
  min-width: 0;
  max-height: calc(var(--tf-slot) * var(--tf-rows) + 8px);
  margin: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
}

.sx-time-field__pop:empty {
  display: none;
}

.sx-time-field__slot.sx-menu__item {
  justify-content: space-between;
  min-height: var(--tf-slot);
  font-size: var(--tf-fs);
  font-variant-numeric: tabular-nums;
}

.sx-time-field__slot[aria-selected="true"] {
  font-weight: max(500, var(--sx-text-weight));
}

.sx-time-field__slot[aria-selected="true"] > .sx-icon {
  --sx-icon-size: var(--tf-icon);
  color: var(--sx-accent-ink);
}

.sx-time-field__slot[aria-disabled="true"],
.sx-time-field__slot[aria-disabled="true"]:hover {
  color: var(--sx-faint);
  background: none;
  cursor: not-allowed;
}

.sx-time-field__slot-note {
  font-size: var(--sx-fs-xs);
  color: var(--sx-faint);
}

/* ---------- Foot: message under the field ---------- */
.sx-time-field__foot {
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: minmax(0, 1fr);
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-time-field__foot[data-open] {
  grid-template-rows: 1fr;
}

.sx-time-field__foot-in {
  min-height: 0;
  overflow: hidden;
}

.sx-time-field__msg {
  margin-top: 6px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* The open list sits over the message; its top edge must not show the text through the corners. */
.sx-time-field:has(.sx-time-field__pop[data-state="open"]) .sx-time-field__msg {
  opacity: 0;
}

.sx-time-field__msg-text {
  display: block;
  animation: tf-msg-in var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- States ---------- */
.sx-time-field[data-state="error"] .sx-time-field__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-time-field[data-state="error"] .sx-time-field__box:focus-within,
.sx-time-field[data-state="error"][data-focused] .sx-time-field__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-line);
}

.sx-time-field[data-state="error"] .sx-input {
  caret-color: var(--sx-danger);
}

.sx-time-field[data-state="success"] .sx-time-field__box {
  box-shadow: inset 0 0 0 1px var(--sx-success);
}

.sx-time-field[data-state="success"] .sx-time-field__box:focus-within,
.sx-time-field[data-state="success"][data-focused] .sx-time-field__box {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-time-field[data-state="success"] .sx-time-field__msg {
  color: var(--sx-success-ink);
}

.sx-time-field__box:has(> .sx-input[readonly]) {
  background: var(--sx-surface-2);
  cursor: default;
}

.sx-time-field__box:has(> .sx-input[readonly]):not(:focus-within) {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-time-field__box:has(> .sx-input:disabled) {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  opacity: 0.6;
  cursor: not-allowed;
}

.sx-time-field:has(.sx-input:disabled) > .sx-label {
  color: var(--sx-muted);
}

@keyframes tf-mark-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes tf-msg-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* iOS zooms the page into any field under 16px; touch screens get 16px. */
@media (hover: none) and (pointer: coarse) {
  .sx-time-field__box > .sx-input {
    font-size: 16px;
  }
}

/* ---------- Demo layout (branch hours; the height keeps the open list inside the box) ---------- */
.sx-time-field-demo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr));
  align-content: start;
  gap: 14px 12px;
  width: 420px;
  max-width: 100%;
  height: 344px;
  padding: 16px 18px;
}

/* The pickup field: its list opens over the row below and stays inside the card. */
.sx-time-field-demo > .sx-time-field:nth-child(3) {
  --tf-rows: 5;
  grid-column: 1 / -1;
}

@media (prefers-reduced-motion: reduce) {
  .sx-time-field__foot {
    transition: none;
  }

  .sx-time-field__toggle > .sx-icon {
    transition-property: none;
  }

  .sx-time-field__status > .sx-icon,
  .sx-time-field__msg-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Date Range Picker (date-range-picker) ---- */
/* ==========================================================================
   Date Range Picker — a field that opens presets, typed dates, two months and compare
   Root: .sx-field; data-state="error | success", data-size="sm | md | lg", data-open, data-inline,
         data-readonly, data-no-presets. Trigger: aria-haspopup="dialog" aria-expanded.
   Popover: .sx-menu.sx-pop role="dialog", data-state="open", data-side="top | bottom"; placed by
   script with offset metrics through --drp-x, --drp-y, --drp-w and --drp-max-h. It is a size
   container, so one month and the chip row of presets follow its width, not the viewport's.
   Days (role="gridcell" buttons) carry:
     data-range="start | mid | end | single"   the working range (single alone while picking)
     data-preview="start | mid | end | single" the range under the pointer or a hovered preset
     data-compare="start | mid | end | single" the second band
     data-hover                                the end date being previewed
     data-row-start / data-row-end             first and last day of a week row or month (band ends)
     data-off, data-closed, data-limit         outside min and max, isDateDisabled, past maxDays
     aria-disabled                             any of those three
     aria-current="date"                       today
   --drp-i on a day staggers the band as a range sweeps in.
   ========================================================================== */

.sx-date-range-picker {
  --drp-cell: 36px;
  --drp-rail: 148px;
  --drp-natural: 708px;
  --drp-trigger-h: var(--sx-h-md);
  --drp-trigger-fs: var(--sx-fs-base);
  --drp-step: 9ms;
  --drp-band: color-mix(in oklab, var(--sx-ink) 8%, var(--sx-surface));
  --drp-compare: color-mix(in oklab, var(--sx-accent) 15%, var(--sx-surface));
  position: relative;
  align-content: start;
  width: 100%;
  min-width: 0;
}

.sx-date-range-picker[data-size="sm"] {
  --drp-trigger-h: var(--sx-h-sm);
  --drp-trigger-fs: var(--sx-fs-sm);
}

.sx-date-range-picker[data-size="lg"] {
  --drp-trigger-h: 44px;
  --drp-trigger-fs: var(--sx-fs-md);
}

.sx-date-range-picker[data-no-presets] {
  --drp-natural: 560px;
}

.sx-date-range-picker[data-open]:not([data-inline]) {
  z-index: var(--sx-z-pop);
}

.sx-date-range-picker__control {
  position: relative;
  min-width: 0;
}

/* ---------- Trigger ---------- */
.sx-date-range-picker__trigger {
  container: drp-trigger / inline-size;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--drp-trigger-h);
  padding: 0 34px 0 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--drp-trigger-fs);
  text-align: start;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-range-picker__trigger:hover:not(:disabled) {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-date-range-picker__trigger:focus-visible,
.sx-date-range-picker[data-open] .sx-date-range-picker__trigger {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-date-range-picker__trigger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sx-date-range-picker[data-readonly] .sx-date-range-picker__trigger {
  background: var(--sx-surface-2);
  cursor: default;
}

.sx-date-range-picker[data-state="error"] .sx-date-range-picker__trigger {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-date-range-picker[data-state="success"] .sx-date-range-picker__trigger {
  box-shadow: inset 0 0 0 1px var(--sx-success), 0 0 0 3px var(--sx-success-soft);
}

.sx-date-range-picker__trigger-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
}

.sx-date-range-picker__value {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
  font-weight: max(500, var(--sx-text-weight));
}

.sx-date-range-picker__value[data-empty] {
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-date-range-picker__days {
  flex: none;
  font-variant-numeric: tabular-nums;
}

@container drp-trigger (max-width: 190px) {
  .sx-date-range-picker__days {
    display: none;
  }
}

.sx-date-range-picker__clear,
.sx-date-range-picker__caret {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  --sx-icon-size: 14px;
}

.sx-date-range-picker__caret {
  pointer-events: none;
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-date-range-picker[data-open] .sx-date-range-picker__caret {
  transform: rotate(180deg);
}

.sx-date-range-picker__clear {
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__clear:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-date-range-picker__clear:focus-visible {
  outline-offset: -1px;
}

.sx-date-range-picker__hint {
  display: flex;
  align-items: center;
  gap: 5px;
  --sx-icon-size: 13px;
}

.sx-date-range-picker[data-state="error"] .sx-date-range-picker__hint {
  color: var(--sx-danger-ink);
}

.sx-date-range-picker[data-state="success"] .sx-date-range-picker__hint {
  color: var(--sx-success-ink);
}

.sx-date-range-picker__swatch {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--drp-compare);
  box-shadow: inset 0 0 0 1.5px var(--sx-accent);
}

/* ---------- Popover surface; a container so the panel adapts to its own width ---------- */
.sx-date-range-picker__pop {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: var(--drp-y, calc(100% + 6px));
  left: var(--drp-x, 0px);
  width: var(--drp-w, var(--drp-natural));
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  container: drp-panel / inline-size;
}

.sx-date-range-picker__pop[data-inline] {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
  width: 100%;
  max-width: var(--drp-natural);
  background: var(--sx-surface);
  box-shadow: var(--sx-card-shadow);
}

.sx-date-range-picker__panel {
  display: grid;
  grid-template-columns: var(--drp-rail) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  max-height: var(--drp-max-h, none);
}

.sx-date-range-picker[data-no-presets] .sx-date-range-picker__panel {
  grid-template-columns: minmax(0, 1fr);
}

/* ---------- Presets ---------- */
.sx-date-range-picker__presets {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1px;
  min-height: 0;
  padding: 10px 8px;
  overflow-y: auto;
  scrollbar-width: none;
  background: var(--sx-surface-2);
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-date-range-picker__preset {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-base);
  text-align: start;
  white-space: nowrap;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__preset:hover:not(:disabled) {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-date-range-picker__preset[aria-pressed="true"] {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
  background: transparent !important;
}

.sx-date-range-picker__preset:disabled {
  color: var(--sx-faint);
  cursor: not-allowed;
}

.sx-date-range-picker__preset:focus-visible {
  outline-offset: -2px;
}

.sx-date-range-picker__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--drp-tw, 0px);
  height: var(--drp-th, 0px);
  border-radius: var(--sx-r-sm);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  opacity: 0;
  transform: translate(var(--drp-tx, 0px), var(--drp-ty, 0px));
  pointer-events: none;
}

.sx-date-range-picker__thumb[data-show] {
  opacity: 1;
}

.sx-date-range-picker__presets[data-ready] > .sx-date-range-picker__thumb {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Main column ---------- */
.sx-date-range-picker__main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 12px 16px 10px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ---------- Typed dates ---------- */
.sx-date-range-picker__inputs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sx-date-range-picker__date {
  display: flex;
  flex: 0 1 158px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 8px 0 9px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-range-picker__date:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-date-range-picker__date[data-active] {
  box-shadow: inset 0 0 0 1px var(--sx-ink-2);
}

.sx-date-range-picker__date:focus-within {
  box-shadow: var(--sx-focus-ring);
}

.sx-date-range-picker__date[data-invalid] {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-date-range-picker__date-label {
  flex: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-date-range-picker__input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: transparent;
}

.sx-date-range-picker__input::placeholder {
  font-weight: var(--sx-text-weight);
  color: var(--sx-faint);
}

.sx-date-range-picker__arrow {
  --sx-icon-size: 13px;
  flex: none;
  color: var(--sx-faint);
}

.sx-date-range-picker__msg {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: 1.25;
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-date-range-picker__msg:empty {
  display: none;
}

.sx-date-range-picker__msg[data-tone="error"] {
  color: var(--sx-danger-ink);
}

/* ---------- Calendar ---------- */
.sx-date-range-picker__cal {
  position: relative;
  min-width: 0;
}

.sx-date-range-picker__nav {
  position: absolute;
  z-index: 2;
  top: 1px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.sx-date-range-picker__nav > .sx-btn {
  pointer-events: auto;
}

.sx-date-range-picker__viewport {
  position: relative;
  margin: -3px;
  padding: 3px;
  overflow: hidden;
}

.sx-date-range-picker__months {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--drp-cell) * 7));
  justify-content: center;
  gap: 24px;
}

.sx-date-range-picker__ghost {
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  pointer-events: none;
}

.sx-date-range-picker__month {
  min-width: 0;
}

.sx-date-range-picker__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: calc(100% - 64px);
  height: 28px;
  margin: 0 auto 2px;
  padding: 0 6px 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-date-range-picker__title > .sx-icon {
  color: var(--sx-muted);
}

.sx-date-range-picker__title:hover,
.sx-date-range-picker__title[aria-expanded="true"] {
  background: var(--sx-fill);
}

.sx-date-range-picker__grid {
  display: grid;
  row-gap: 2px;
}

.sx-date-range-picker__row {
  display: grid;
  grid-template-columns: repeat(7, var(--drp-cell));
}

.sx-date-range-picker__wd {
  display: grid;
  place-items: center;
  height: 22px;
  font-size: var(--sx-fs-2xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
}

.sx-date-range-picker__pad {
  height: var(--drp-cell);
}

.sx-date-range-picker__day {
  position: relative;
  display: block;
  height: var(--drp-cell);
  isolation: isolate;
  outline: none;
  font-size: var(--sx-fs-base);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-date-range-picker__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: var(--sx-r-md);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-range-picker__day:hover:not([aria-disabled="true"]) .sx-date-range-picker__num {
  background-color: var(--sx-fill-strong);
}

.sx-date-range-picker__day:focus-visible .sx-date-range-picker__num {
  box-shadow: var(--sx-focus-ring);
}

/* Main band sits above the compare band; both sit behind the number. */
.sx-date-range-picker__day::before,
.sx-date-range-picker__day::after {
  content: "";
  position: absolute;
  inset: 0 -0.5px;
  opacity: 0;
  pointer-events: none;
}

.sx-date-range-picker__day::before {
  z-index: -1;
  background: var(--drp-band);
  transform: scaleX(0.6);
  transform-origin: left center;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__day::after {
  z-index: -2;
  background: var(--drp-compare);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-date-range-picker__day:is([data-range="start"], [data-range="mid"], [data-range="end"])::before {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) calc(min(var(--drp-i, 0), 40) * var(--drp-step)),
    transform var(--sx-dur-3) var(--sx-ease-out) calc(min(var(--drp-i, 0), 40) * var(--drp-step));
}

.sx-date-range-picker__day[data-compare]::after {
  opacity: 1;
}

/* The live preview is drawn as an outline, so it never reads as chosen. */
.sx-date-range-picker__day[data-preview]:not([data-range="mid"])::before {
  opacity: 1;
  transform: none;
  background: color-mix(in oklab, var(--sx-ink) 3%, var(--sx-surface));
  box-shadow: inset 0 1px 0 var(--sx-line-strong), inset 0 -1px 0 var(--sx-line-strong);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__day[data-preview][data-row-start]:not([data-preview="start"], [data-range="mid"])::before {
  box-shadow: inset 0 1px 0 var(--sx-line-strong), inset 0 -1px 0 var(--sx-line-strong), inset 1px 0 0 var(--sx-line-strong);
}

.sx-date-range-picker__day[data-preview][data-row-end]:not([data-preview="end"], [data-range="mid"])::before {
  box-shadow: inset 0 1px 0 var(--sx-line-strong), inset 0 -1px 0 var(--sx-line-strong), inset -1px 0 0 var(--sx-line-strong);
}

.sx-date-range-picker__day:is([data-range="start"], [data-preview="start"]:not([data-range="mid"]))::before,
.sx-date-range-picker__day[data-compare="start"]::after {
  left: 50%;
}

.sx-date-range-picker__day:is([data-range="end"], [data-preview="end"]:not([data-range="mid"]))::before,
.sx-date-range-picker__day[data-compare="end"]::after {
  right: 50%;
}

.sx-date-range-picker__day[data-preview="single"]::before,
.sx-date-range-picker__day[data-compare="single"]::after {
  inset: 0;
  border-radius: var(--sx-r-md);
}

.sx-date-range-picker__day[data-row-start]::before,
.sx-date-range-picker__day[data-row-start]::after {
  left: 0;
  border-top-left-radius: var(--sx-r-md);
  border-bottom-left-radius: var(--sx-r-md);
}

.sx-date-range-picker__day[data-row-end]::before,
.sx-date-range-picker__day[data-row-end]::after {
  right: 0;
  border-top-right-radius: var(--sx-r-md);
  border-bottom-right-radius: var(--sx-r-md);
}

.sx-date-range-picker__day:is([data-range="start"], [data-preview="start"]:not([data-range="mid"]))[data-row-start]::before,
.sx-date-range-picker__day[data-compare="start"][data-row-start]::after {
  left: 50%;
  border-radius: 0;
}

.sx-date-range-picker__day:is([data-range="end"], [data-preview="end"]:not([data-range="mid"]))[data-row-end]::before,
.sx-date-range-picker__day[data-compare="end"][data-row-end]::after {
  right: 50%;
  border-radius: 0;
}

.sx-date-range-picker__day[data-compare] {
  color: var(--sx-accent-ink);
}

.sx-date-range-picker__day:is([data-compare="start"], [data-compare="end"], [data-compare="single"]) .sx-date-range-picker__num {
  font-weight: max(500, var(--sx-text-weight));
  background-color: var(--drp-compare);
  box-shadow: inset 0 0 0 1.5px var(--sx-accent);
}

/* Caps: the first and last day of the range */
.sx-date-range-picker__day:is([data-range="start"], [data-range="end"], [data-range="single"]) {
  color: var(--sx-on-primary);
}

.sx-date-range-picker__day[data-range="mid"] {
  color: var(--sx-ink);
}

.sx-date-range-picker__day:is([data-range="start"], [data-range="end"], [data-range="single"]) .sx-date-range-picker__num {
  font-weight: max(500, var(--sx-text-weight));
  background-color: var(--sx-primary) !important;
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  animation: drp-cap-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-date-range-picker__day:is([data-range="start"], [data-range="end"], [data-range="single"]):focus-visible .sx-date-range-picker__num {
  box-shadow: var(--sx-focus-ring), var(--sx-shadow-primary);
}

/* Simple detail: no compare band, whatever was applied */
[data-detail="simple"] .sx-date-range-picker__day::after {
  display: none;
}

[data-detail="simple"] .sx-date-range-picker__day[data-compare]:not([data-range], [aria-disabled="true"]) {
  color: var(--sx-ink);
}

[data-detail="simple"] .sx-date-range-picker__day[data-compare]:not([data-range]) .sx-date-range-picker__num {
  font-weight: inherit;
  background-color: transparent;
  box-shadow: none;
}

/* The end date being previewed */
.sx-date-range-picker__day[data-hover]:not([data-range], [aria-disabled="true"]) .sx-date-range-picker__num {
  background-color: var(--sx-surface);
  box-shadow: inset 0 0 0 1.5px var(--sx-primary);
}

/* Today */
.sx-date-range-picker__day[aria-current="date"] .sx-date-range-picker__num {
  font-weight: 600;
}

.sx-date-range-picker__day[aria-current="date"] .sx-date-range-picker__num::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sx-accent);
}

.sx-date-range-picker__day[aria-current="date"]:is([data-range="start"], [data-range="end"], [data-range="single"]) .sx-date-range-picker__num::after {
  background: var(--sx-on-primary);
}

/* Unavailable */
.sx-date-range-picker__day[aria-disabled="true"] {
  color: var(--sx-faint);
  cursor: not-allowed;
}

.sx-date-range-picker__day[data-closed] .sx-date-range-picker__num {
  text-decoration: line-through;
  text-decoration-color: var(--sx-line-strong);
}

/* ---------- Month and year jump ---------- */
.sx-date-range-picker__jump {
  position: absolute;
  z-index: 3;
  inset: -3px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  padding: 3px;
  background: var(--sx-surface);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-date-range-picker__jump[data-open] {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sx-date-range-picker__jump-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sx-date-range-picker__jump-years {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  min-width: 0;
}

.sx-date-range-picker__jump-year {
  height: 28px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__jump-year:hover:not(:disabled) {
  background: var(--sx-fill);
}

.sx-date-range-picker__jump-year[aria-pressed="true"] {
  font-weight: 600;
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-date-range-picker__jump-year:disabled {
  color: var(--sx-faint);
  cursor: not-allowed;
}

.sx-date-range-picker__jump-months {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 44px;
  align-content: center;
  gap: 6px;
  min-height: 0;
}

.sx-date-range-picker__jump-month {
  position: relative;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__jump-month:hover:not(:disabled) {
  background: var(--sx-fill-strong);
}

.sx-date-range-picker__jump-month:focus-visible {
  outline-offset: -2px;
}

.sx-date-range-picker__jump-month[data-range] {
  background: var(--drp-band);
}

.sx-date-range-picker__jump-month[aria-current="true"] {
  font-weight: 500;
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-date-range-picker__jump-month:disabled {
  color: var(--sx-faint);
  cursor: not-allowed;
}

/* ---------- Footer ---------- */
.sx-date-range-picker__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  min-width: 0;
  padding: 10px 12px 10px 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-date-range-picker__summary {
  flex: 1 1 180px;
  display: grid;
  gap: 1px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-date-range-picker__summary strong {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

.sx-date-range-picker__versus {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-accent-ink);
}

.sx-date-range-picker__compare {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sx-date-range-picker__compare-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
}

.sx-date-range-picker__modes-wrap {
  display: grid;
  grid-template-columns: 0fr;
  opacity: 0;
  transition: grid-template-columns var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-range-picker__compare[data-on] .sx-date-range-picker__modes-wrap {
  grid-template-columns: 1fr;
  opacity: 1;
}

.sx-date-range-picker__modes {
  display: flex;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sx-r-sm);
  background: var(--sx-fill);
}

.sx-date-range-picker__mode {
  position: relative;
  display: grid;
  place-items: center;
  height: 26px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  color: var(--sx-muted);
  cursor: pointer;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-date-range-picker__mode:hover {
  color: var(--sx-ink-2);
}

.sx-date-range-picker__mode:has(input:checked) {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-date-range-picker__mode:has(input:focus-visible) {
  outline: 2px solid var(--sx-focus);
  outline-offset: -2px;
}

.sx-date-range-picker__mode > input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.sx-date-range-picker__actions {
  display: flex;
  flex: none;
  gap: 6px;
  margin-inline-start: auto;
}

/* ---------- Narrow: one month, presets as a chip row ---------- */
@container drp-panel (max-width: 640px) {
  .sx-date-range-picker__panel {
    --drp-cell: min(44px, calc((100cqw - 28px) / 7));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .sx-date-range-picker__presets {
    display: flex;
    gap: 2px;
    padding: 8px 10px;
    overflow: auto hidden;
    box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  }

  .sx-date-range-picker__preset {
    flex: none;
    height: 28px;
    border-radius: var(--sx-r-pill);
    font-size: var(--sx-fs-sm);
  }

  .sx-date-range-picker__thumb {
    border-radius: var(--sx-r-pill);
  }

  .sx-date-range-picker__main {
    padding: 10px 14px 8px;
  }

  .sx-date-range-picker__months {
    grid-template-columns: calc(var(--drp-cell) * 7);
  }

  .sx-date-range-picker__month:nth-child(2) {
    display: none;
  }

  .sx-date-range-picker__date {
    flex: 1 1 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: 44px;
    justify-content: center;
  }

  .sx-date-range-picker__date-label {
    font-size: var(--sx-fs-2xs);
  }

  .sx-date-range-picker__input {
    flex: none;
    font-size: 16px;
    line-height: 1.2;
  }

  .sx-date-range-picker__msg {
    flex-basis: 100%;
    justify-content: flex-start;
  }

  .sx-date-range-picker__foot {
    padding: 10px 14px 12px;
  }

  .sx-date-range-picker__summary {
    flex-basis: 100%;
  }

  .sx-date-range-picker__compare {
    flex: 1 1 100%;
    flex-wrap: wrap;
  }

  .sx-date-range-picker__compare[data-on] .sx-date-range-picker__modes-wrap {
    flex: 1 1 auto;
  }

  .sx-date-range-picker__mode {
    flex: 1 1 auto;
  }

  .sx-date-range-picker__actions {
    flex: 1 1 100%;
  }

  .sx-date-range-picker__actions > .sx-btn {
    flex: 1 1 0;
    height: 40px;
  }
}

@container drp-panel (max-width: 300px) {
  .sx-date-range-picker__arrow {
    display: none;
  }

  .sx-date-range-picker__date {
    flex-basis: 100%;
  }
}

@keyframes drp-cap-in {
  from {
    transform: scale(0.72);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-date-range-picker {
    --drp-step: 0ms;
  }

  .sx-date-range-picker__day::before {
    transform: none;
  }

  .sx-date-range-picker__day:is([data-range="start"], [data-range="end"], [data-range="single"]) .sx-date-range-picker__num {
    animation: none;
  }

  .sx-date-range-picker__jump {
    transform: none;
  }

  .sx-date-range-picker__presets[data-ready] > .sx-date-range-picker__thumb {
    transition-property: opacity;
  }

  .sx-date-range-picker__caret {
    transition: none;
  }
}

/* ---------- Demo: a sales report header above a figure that follows the applied range ---------- */
.sx-date-range-picker-demo {
  container: drp-demo / inline-size;
  display: grid;
  gap: 20px;
  width: 780px;
  max-width: 100%;
  min-width: 0;
}

.sx-stage--fluid .sx-date-range-picker-demo {
  width: min(780px, calc(100vw - 80px));
}

.sx-pageview .sx-date-range-picker-demo,
.sx-pageview--react .sx-date-range-picker-demo {
  width: 100%;
  max-height: 100dvh;
  padding: 16px;
  overflow-y: auto;
}

.sx-date-range-picker-demo__box {
  position: relative;
  height: 540px;
  min-width: 0;
}

.sx-date-range-picker-demo__report {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 16px;
  height: 100%;
  padding: 18px 20px 16px;
}

.sx-date-range-picker-demo__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  min-height: 88px;
}

.sx-date-range-picker-demo__title {
  font-size: var(--sx-fs-xl);
}

.sx-date-range-picker-demo__sub {
  margin-top: 3px;
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
}

.sx-date-range-picker-demo__field {
  flex: 0 1 330px;
  min-width: 0;
}

.sx-date-range-picker-demo__figures {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.sx-date-range-picker-demo__figure + .sx-date-range-picker-demo__figure {
  padding-inline-start: 16px;
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

.sx-date-range-picker-demo__figure-label {
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
}

.sx-date-range-picker-demo__figure-value {
  margin-top: 3px;
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.15;
}

.sx-date-range-picker-demo__figure-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 6px;
  min-height: 20px;
  margin-top: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-date-range-picker-demo__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  padding: 0 5px 0 3px;
  border-radius: var(--sx-r-xs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2.25;
}

.sx-date-range-picker-demo__delta[data-tone="good"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-date-range-picker-demo__delta[data-tone="bad"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-date-range-picker-demo__chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 6px;
  min-height: 0;
  padding-top: 18px;
}

.sx-date-range-picker-demo__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-items: center;
  gap: 4px;
  min-height: 0;
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-date-range-picker-demo__slot {
  position: relative;
  width: 100%;
  max-width: 56px;
  min-width: 0;
}

.sx-date-range-picker-demo__bar,
.sx-date-range-picker-demo__was {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  border-radius: 2px 2px 0 0;
  transform-origin: center bottom;
  transform: scaleY(var(--v, 0));
  transition: transform var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-date-range-picker-demo__bar {
  background: color-mix(in oklab, var(--sx-primary) 20%, var(--sx-card-bg));
}

.sx-date-range-picker-demo__bar[data-peak] {
  background: var(--sx-primary);
}

/* With compare on, the bars use the same two tones as the calendar bands. */
.sx-date-range-picker-demo__was {
  background: color-mix(in oklab, var(--sx-accent) 42%, var(--sx-card-bg));
  opacity: 0;
}

.sx-date-range-picker-demo__bars[data-compare] .sx-date-range-picker-demo__bar {
  right: 46%;
  background: var(--sx-primary);
}

.sx-date-range-picker-demo__bars[data-compare] .sx-date-range-picker-demo__was {
  left: 54%;
  opacity: 1;
}

.sx-date-range-picker-demo__tip {
  position: absolute;
  left: 50%;
  bottom: calc(var(--v, 0) * 100% + 4px);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
  transform: translateX(-50%);
  transition: bottom var(--sx-dur-4) var(--sx-ease-out);
}

.sx-date-range-picker-demo__bars[data-compare] .sx-date-range-picker-demo__tip {
  display: none;
}

[data-detail="simple"] .sx-date-range-picker-demo__bars[data-compare] .sx-date-range-picker-demo__bar {
  right: 0;
}

[data-detail="simple"] .sx-date-range-picker-demo__bars[data-compare] .sx-date-range-picker-demo__was {
  opacity: 0;
}

.sx-date-range-picker-demo__axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-date-range-picker-demo__more {
  display: none;
  gap: 8px;
  min-width: 0;
}

.sx-stage--fluid .sx-date-range-picker-demo__more,
.sx-pageview .sx-date-range-picker-demo__more,
.sx-pageview--react .sx-date-range-picker-demo__more {
  display: grid;
}

.sx-date-range-picker-demo__caption {
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
}

@container drp-demo (max-width: 640px) {
  .sx-date-range-picker-demo__box {
    height: 780px;
  }

  .sx-date-range-picker-demo__head {
    flex-direction: column;
    gap: 12px;
  }

  .sx-date-range-picker-demo__field {
    flex: none;
    width: 100%;
  }

  .sx-date-range-picker-demo__figures {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .sx-date-range-picker-demo__figure + .sx-date-range-picker-demo__figure {
    padding-inline-start: 0;
    padding-block-start: 10px;
    box-shadow: inset 0 1px 0 var(--sx-line-soft);
  }
}


/* ---- Tab Bar (tab-bar) ---- */
/* ==========================================================================
   Tab Bar — six tab styles driven by one sliding indicator
   Root .sx-tab-bar and its .sx-tab-bar__head carry:
     data-variant="line | pill | segment | folder | detail | metric"
     data-orientation="horizontal | vertical"   data-size="sm | md | lg"   data-block (equal widths)
   Rail: data-more-start / data-more-end show the edge fades and chevrons, data-axis="x | y".
   Indicator: --tb-ix, --tb-iy, --tb-iw, --tb-ih from the selected tab's offset box; the slide turns
   on with data-ready after the first measurement, so it never flies in from zero.
   Panels: data-active on the open one, data-side="before | after" on the rest gives the slide its
   direction from the tab order. data-moving clips the wrapper while its height eases.
   ========================================================================== */

@property --tb-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --tb-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

.sx-tab-bar {
  --tb-tab-h: 38px;
  --tb-pill-cut: 6px;
  --tb-segment-cut: 8px;
  --tb-folder-cut: 2px;
  --tb-px: 12px;
  --tb-fs: var(--sx-fs-base);
  --tb-gap: 2px;
  --tb-value: 26px;
  --tb-slide: 12px;
  --tb-panel-pad: 14px 0 0;
  --tb-rail-w: 248px;
  container: sx-tab-bar / inline-size;
  width: 100%;
  min-width: 0;
}

.sx-tab-bar[data-size="sm"] {
  --tb-tab-h: 32px;
  --tb-px: 10px;
  --tb-fs: var(--sx-fs-sm);
  --tb-value: 20px;
}

.sx-tab-bar[data-size="lg"] {
  --tb-tab-h: 44px;
  --tb-pill-cut: 0px;
  --tb-segment-cut: 0px;
  --tb-folder-cut: 0px;
  --tb-px: 16px;
  --tb-fs: var(--sx-fs-md);
  --tb-value: 32px;
}

.sx-tab-bar__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  border-radius: inherit;
}

.sx-tab-bar__head {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* ---------- Rail: the scrolling list with its fades and chevrons ---------- */
.sx-tab-bar__rail {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: inherit;
}

.sx-tab-bar__list {
  --tb-fade-start: 0px;
  --tb-fade-end: 0px;
  position: relative;
  display: flex;
  flex: 0 1 auto;
  gap: var(--tb-gap);
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  isolation: isolate;
  border-radius: inherit;
  -webkit-mask-image: linear-gradient(90deg, transparent, black var(--tb-fade-start), black calc(100% - var(--tb-fade-end)), transparent);
  mask-image: linear-gradient(90deg, transparent, black var(--tb-fade-start), black calc(100% - var(--tb-fade-end)), transparent);
  transition: --tb-fade-start var(--sx-dur-2) var(--sx-ease-out), --tb-fade-end var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tab-bar__list::-webkit-scrollbar {
  display: none;
}

.sx-tab-bar__rail[data-more-start] > .sx-tab-bar__list {
  --tb-fade-start: 44px;
}

.sx-tab-bar__rail[data-more-end] > .sx-tab-bar__list {
  --tb-fade-end: 44px;
}

.sx-tab-bar__chev {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.82);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
  --sx-icon-size: 14px;
}

.sx-tab-bar__chev:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-tab-bar__chev:active {
  transform: scale(0.94);
}

.sx-tab-bar__chev--prev {
  left: 2px;
}

.sx-tab-bar__chev--next {
  right: 2px;
}

.sx-tab-bar__rail[data-more-start] > .sx-tab-bar__chev--prev,
.sx-tab-bar__rail[data-more-end] > .sx-tab-bar__chev--next {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.sx-tab-bar__aside {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* ---------- Tab ---------- */
.sx-tab-bar__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tb-tab-h);
  padding: 0 var(--tb-px);
  border-radius: var(--sx-r-md);
  font-size: var(--tb-fs);
  font-weight: max(500, var(--sx-text-weight));
  line-height: var(--sx-lh-tight);
  white-space: nowrap;
  color: var(--sx-muted);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-tab-bar__tab:hover:not(:disabled) {
  color: var(--sx-ink-2);
}

.sx-tab-bar__tab:active:not(:disabled) {
  color: var(--sx-ink);
}

.sx-tab-bar__tab[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-tab-bar__tab:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: -2px;
}

.sx-tab-bar__tab:disabled {
  color: var(--sx-faint);
  cursor: not-allowed;
}

.sx-tab-bar__icon {
  --sx-icon-size: 15px;
}

.sx-tab-bar__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-tab-bar__label {
  min-width: 0;
}

.sx-tab-bar__desc {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  line-height: 1.35;
  color: var(--sx-muted);
}

.sx-tab-bar__tab:disabled .sx-tab-bar__desc {
  color: var(--sx-faint);
}

.sx-tab-bar__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sx-muted);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tab-bar__tab[aria-selected="true"] .sx-tab-bar__count {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-tab-bar__tab .sx-tab-bar__count[data-tone="accent"] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-tab-bar__tab .sx-tab-bar__count[data-tone="success"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-tab-bar__tab .sx-tab-bar__count[data-tone="warning"] {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
}

.sx-tab-bar__tab .sx-tab-bar__count[data-tone="danger"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-tab-bar__tab:disabled .sx-tab-bar__count {
  color: var(--sx-faint);
  background: var(--sx-fill);
}

.sx-tab-bar__status[data-status="live"] {
  color: var(--sx-success);
}

.sx-tab-bar__status[data-status="done"] {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-success);
}

.sx-tab-bar__status[data-status="warning"] {
  color: var(--sx-warning);
}

.sx-tab-bar__status[data-status="danger"] {
  color: var(--sx-danger);
}

/* ---------- Indicator: one element, measured, for every variant ---------- */
.sx-tab-bar__indicator {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--tb-iw, 0px);
  height: var(--tb-ih, 0px);
  transform: translate(var(--tb-ix, 0px), var(--tb-iy, 0px));
  pointer-events: none;
}

.sx-tab-bar[data-ready] > .sx-tab-bar__frame > .sx-tab-bar__head .sx-tab-bar__indicator {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out),
    height var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Line ---------- */
.sx-tab-bar__head[data-variant="line"] {
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-tab-bar__head[data-variant="line"] .sx-tab-bar__list {
  --tb-gap: 18px;
}

.sx-tab-bar__head[data-variant="line"] .sx-tab-bar__tab {
  padding-inline: 1px;
}

.sx-tab-bar__head[data-variant="line"] .sx-tab-bar__tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sx-line-strong);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-tab-bar__head[data-variant="line"] .sx-tab-bar__tab:hover:not(:disabled, [aria-selected="true"])::after {
  opacity: 1;
}

.sx-tab-bar__head[data-variant="line"] .sx-tab-bar__indicator {
  top: auto;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sx-ink);
  transform: translateX(var(--tb-ix, 0px));
}

/* ---------- Pill ---------- */
.sx-tab-bar__head[data-variant="pill"] .sx-tab-bar__tab {
  min-height: calc(var(--tb-tab-h) - var(--tb-pill-cut));
  border-radius: var(--sx-r-pill);
}

.sx-tab-bar__head[data-variant="pill"] .sx-tab-bar__tab:hover:not(:disabled, [aria-selected="true"]) {
  background: var(--sx-fill);
}

.sx-tab-bar__head[data-variant="pill"] .sx-tab-bar__tab[aria-selected="true"] .sx-tab-bar__count {
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-tab-bar__head[data-variant="pill"] .sx-tab-bar__indicator {
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill-strong);
}

/* ---------- Segment: a track with a raised thumb ---------- */
.sx-tab-bar__head[data-variant="segment"] .sx-tab-bar__list {
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-tab-bar__head[data-variant="segment"] .sx-tab-bar__tab {
  min-height: calc(var(--tb-tab-h) - var(--tb-segment-cut));
  border-radius: calc(var(--sx-r-md) - 2px);
}

.sx-tab-bar__head[data-variant="segment"] .sx-tab-bar__indicator {
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

/* ---------- Folder: the active tab is cut from the same sheet as the panel ---------- */
.sx-tab-bar[data-variant="folder"] {
  --tb-panel-pad: 16px;
  --tb-ear: var(--sx-r-md);
}

.sx-tab-bar__head[data-variant="folder"] {
  padding-top: 6px;
  border-radius: var(--sx-card-radius) var(--sx-card-radius) 0 0;
  background: var(--sx-surface-3);
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__list {
  padding-inline: calc(var(--tb-ear) + 4px);
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__tab {
  min-height: calc(var(--tb-tab-h) - var(--tb-folder-cut));
  padding-inline: 14px;
  border-radius: var(--tb-ear) var(--tb-ear) 0 0;
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__tab:hover:not(:disabled, [aria-selected="true"]) {
  background: var(--sx-fill);
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__indicator {
  border-radius: var(--tb-ear) var(--tb-ear) 0 0;
  background: var(--sx-card-bg);
  box-shadow: inset 1px 1px 0 var(--sx-line), inset -1px 0 0 var(--sx-line);
}

/* Concave corners where the tab flows into the panel */
.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__indicator::before,
.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__indicator::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: var(--tb-ear);
  height: var(--tb-ear);
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__indicator::before {
  right: 100%;
  margin-right: -1px;
  background: radial-gradient(circle at 0 0, transparent calc(var(--tb-ear) - 1px), var(--sx-line) calc(var(--tb-ear) - 1px), var(--sx-line) var(--tb-ear), var(--sx-card-bg) calc(var(--tb-ear) + 0.5px));
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__indicator::after {
  left: 100%;
  margin-left: -1px;
  background: radial-gradient(circle at 100% 0, transparent calc(var(--tb-ear) - 1px), var(--sx-line) calc(var(--tb-ear) - 1px), var(--sx-line) var(--tb-ear), var(--sx-card-bg) calc(var(--tb-ear) + 0.5px));
}

.sx-tab-bar__head[data-variant="folder"] .sx-tab-bar__aside {
  padding-inline-end: 10px;
}

/* ---------- Detail: two lines, an icon tile and a trailing count or status ---------- */
.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__list {
  flex: 1 1 auto;
  padding: 4px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__tab {
  flex: 1 0 0;
  justify-content: flex-start;
  gap: 10px;
  min-width: 188px;
  min-height: 54px;
  padding: 8px 12px 8px 10px;
  text-align: start;
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__tab:hover:not(:disabled, [aria-selected="true"]) {
  background: var(--sx-fill);
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__desc {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__text {
  flex: 1 1 0;
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__icon {
  --sx-icon-size: 32px;
  padding: 8px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__tab[aria-selected="true"] .sx-tab-bar__icon {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__indicator {
  border-radius: var(--sx-r-md);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

/* ---------- Metric: one strip of figures, joined to the panel by the active cell ---------- */
.sx-tab-bar[data-variant="metric"] {
  --tb-panel-pad: 16px;
}

.sx-tab-bar__head[data-variant="metric"] {
  gap: 0;
  align-items: stretch;
  border-radius: var(--sx-card-radius) var(--sx-card-radius) 0 0;
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__list {
  --tb-gap: 0px;
  flex: 1 1 auto;
}

.sx-tab-bar__head[data-variant="metric"]:has(> .sx-tab-bar__aside) .sx-tab-bar__list {
  border-top-right-radius: 0;
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab {
  display: grid;
  flex: 1 0 0;
  align-content: start;
  justify-content: stretch;
  justify-items: start;
  gap: 0;
  min-width: var(--tb-cell-min, 150px);
  padding: 12px 16px 13px;
  border-radius: 0;
  text-align: start;
  font-weight: var(--sx-text-weight);
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab + .sx-tab-bar__tab {
  box-shadow: inset 1px 0 0 var(--sx-line);
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab:hover:not(:disabled, [aria-selected="true"]) {
  background: var(--sx-fill);
}

.sx-tab-bar__top {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-tab-bar__value {
  display: block;
  margin-top: 5px;
  font-size: var(--tb-value);
  font-weight: var(--sx-display-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.12;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tab-bar__tab[aria-selected="true"] .sx-tab-bar__value {
  color: var(--sx-ink);
}

.sx-tab-bar__tab:disabled .sx-tab-bar__value {
  color: var(--sx-faint);
}

.sx-tab-bar__value-skeleton {
  display: block;
  width: 72%;
  height: calc(var(--tb-value) * 0.82);
  margin-block: 7px 3px;
}

.sx-tab-bar__change {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-top: 7px;
  max-width: 100%;
}

.sx-tab-bar__delta {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 18px;
  padding: 0 5px 0 3px;
  border-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2.25;
}

.sx-tab-bar__delta[data-tone="good"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-tab-bar__delta[data-tone="bad"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-tab-bar__delta[data-tone="flat"] {
  color: var(--sx-muted);
  background: var(--sx-fill);
}

.sx-tab-bar__note {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__indicator {
  background: var(--sx-card-bg);
  box-shadow: inset 0 2px 0 var(--sx-ink), 0 -6px 16px -8px var(--sx-overlay);
}

.sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__aside {
  padding-inline: 12px;
  box-shadow: inset 1px 0 0 var(--sx-line), inset 0 -1px 0 var(--sx-line);
}

/* ---------- Vertical: the indicator slides on the Y axis ---------- */
.sx-tab-bar[data-orientation="vertical"] > .sx-tab-bar__frame {
  grid-template-columns: var(--tb-rail-w) minmax(0, 1fr);
  align-items: start;
  gap: 20px;
}

.sx-tab-bar[data-orientation="vertical"] {
  --tb-slide-y: 10px;
  --tb-panel-pad: 0;
}

.sx-tab-bar__head[data-orientation="vertical"] {
  flex-direction: column;
  align-items: stretch;
  box-shadow: none;
}

.sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__list {
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  overflow: hidden auto;
  overscroll-behavior-y: contain;
  -webkit-mask-image: none;
  mask-image: none;
}

.sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__tab {
  flex: none;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  text-align: start;
}

.sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__chev {
  display: none;
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] {
  box-shadow: inset -1px 0 0 var(--sx-line);
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] .sx-tab-bar__list {
  --tb-gap: 2px;
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] .sx-tab-bar__indicator {
  top: 0;
  left: auto;
  right: 0;
  bottom: auto;
  width: 2px;
  height: var(--tb-ih, 0px);
  border-radius: 2px 0 0 2px;
  transform: translateY(var(--tb-iy, 0px));
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] .sx-tab-bar__tab::after {
  display: none;
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__list {
  gap: 2px;
  padding: 2px;
  background: none;
  box-shadow: none;
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__tab {
  white-space: normal;
  min-height: 58px;
}

[data-detail="simple"] .sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__tab {
  min-height: var(--tb-tab-h);
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__desc {
  overflow: visible;
}

.sx-tab-bar__head[data-orientation="vertical"][data-variant="segment"] .sx-tab-bar__tab {
  min-height: var(--tb-tab-h);
}

/* Soft raised surface on the white card, so the selected row reads without a border. */
.sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__indicator {
  background: var(--sx-surface-2);
}

/* ---------- Simple detail: labels only, and every variant still looks finished ---------- */
[data-detail="simple"] .sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab {
  align-content: center;
  min-height: var(--tb-tab-h);
  padding-block: 0;
}

[data-detail="simple"] .sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__top {
  font-size: var(--tb-fs);
}

[data-detail="simple"] .sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__tab {
  gap: 8px;
  min-width: 120px;
  min-height: var(--tb-tab-h);
  padding-block: 4px;
}

[data-detail="simple"] .sx-tab-bar__head[data-variant="detail"] .sx-tab-bar__icon {
  --sx-icon-size: 26px;
  padding: 6px;
}

/* ---------- Equal widths ---------- */
.sx-tab-bar__head[data-block] .sx-tab-bar__list {
  flex: 1 1 auto;
}

.sx-tab-bar__head[data-block] .sx-tab-bar__tab {
  flex: 1 0 0;
  min-width: max-content;
}

.sx-tab-bar__head[data-block][data-variant="line"] .sx-tab-bar__list {
  --tb-gap: 0px;
}

/* ---------- Panels: crossfade, a short slide in tab order, eased height ---------- */
.sx-tab-bar__panels {
  position: relative;
  min-width: 0;
}

.sx-tab-bar__panels[data-moving] {
  overflow: hidden;
}

.sx-tab-bar__panel {
  min-width: 0;
  padding: var(--tb-panel-pad);
  border-radius: inherit;
}

.sx-tab-bar__panel:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: -2px;
  border-radius: var(--sx-r-md);
}

.sx-tab-bar__panel:not([data-active]) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sx-tab-bar__panel[data-side="before"] {
  transform: translateX(calc(var(--tb-slide) * -1));
}

.sx-tab-bar__panel[data-side="after"] {
  transform: translateX(var(--tb-slide));
}

.sx-tab-bar[data-orientation="vertical"] > .sx-tab-bar__frame > .sx-tab-bar__panels > .sx-tab-bar__panel[data-side="before"] {
  transform: translateY(calc(var(--tb-slide-y) * -1));
}

.sx-tab-bar[data-orientation="vertical"] > .sx-tab-bar__frame > .sx-tab-bar__panels > .sx-tab-bar__panel[data-side="after"] {
  transform: translateY(var(--tb-slide-y));
}

.sx-tab-bar[data-ready] > .sx-tab-bar__frame > .sx-tab-bar__panels > .sx-tab-bar__panel {
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-tab-bar[data-ready] > .sx-tab-bar__frame > .sx-tab-bar__panels > .sx-tab-bar__panel[data-active] {
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 40ms,
    transform var(--sx-dur-3) var(--sx-ease-out) 40ms;
}

/* ---------- Narrow containers ---------- */
@container sx-tab-bar (max-width: 560px) {
  .sx-tab-bar__frame {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .sx-tab-bar__head:has(> .sx-tab-bar__aside):not([data-orientation="vertical"]) {
    flex-wrap: wrap;
    gap: 6px;
  }

  .sx-tab-bar__head:not([data-orientation="vertical"]) > .sx-tab-bar__aside {
    order: -1;
    justify-content: flex-end;
    width: 100%;
    padding-block: 6px 0;
    box-shadow: none;
  }

  .sx-tab-bar__head[data-variant="metric"]:has(> .sx-tab-bar__aside) {
    gap: 0;
  }

  .sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__list {
    scroll-snap-type: x proximity;
  }

  .sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab {
    flex: 0 0 auto;
    width: 148px;
    padding: 11px 14px 12px;
    scroll-snap-align: start;
  }

  /* A vertical bar becomes a horizontal, scrolling one on top of its panel. */
  .sx-tab-bar__head[data-orientation="vertical"] {
    margin-bottom: 12px;
  }

  .sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__list {
    flex-direction: row;
    overflow: auto hidden;
    overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(90deg, transparent, black var(--tb-fade-start), black calc(100% - var(--tb-fade-end)), transparent);
    mask-image: linear-gradient(90deg, transparent, black var(--tb-fade-start), black calc(100% - var(--tb-fade-end)), transparent);
  }

  .sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__tab {
    flex: none;
    width: auto;
  }

  .sx-tab-bar__head[data-orientation="vertical"] .sx-tab-bar__chev {
    display: grid;
  }

  .sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__tab {
    flex: 0 0 218px;
    width: 218px;
    white-space: nowrap;
  }

  .sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__desc {
    overflow: hidden;
  }

  [data-detail="simple"] .sx-tab-bar__head[data-orientation="vertical"][data-variant="detail"] .sx-tab-bar__tab {
    flex: none;
    width: auto;
  }

  [data-detail="simple"] .sx-tab-bar__head[data-variant="metric"] .sx-tab-bar__tab {
    flex: 1 0 auto;
    width: auto;
    padding-block: 0;
  }

  .sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] {
    box-shadow: inset 0 -1px 0 var(--sx-line);
  }

  .sx-tab-bar__head[data-orientation="vertical"][data-variant="line"] .sx-tab-bar__indicator {
    top: auto;
    left: 0;
    right: auto;
    bottom: 0;
    width: var(--tb-iw, 0px);
    height: 2px;
    border-radius: 2px 2px 0 0;
    transform: translateX(var(--tb-ix, 0px));
  }

  .sx-tab-bar[data-variant="metric"],
  .sx-tab-bar[data-variant="folder"] {
    --tb-panel-pad: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-tab-bar[data-ready] > .sx-tab-bar__frame > .sx-tab-bar__head .sx-tab-bar__indicator {
    transition-property: opacity;
  }

  .sx-tab-bar__panel[data-side] {
    transform: none !important;
  }

  .sx-tab-bar__chev {
    transform: none;
  }
}

/* ---------- Demo: a real sales screen in a stack of variants ---------- */
.sx-tab-bar-demo {
  display: grid;
  gap: 12px;
  width: 720px;
  max-width: 100%;
  min-width: 0;
}

.sx-stage--fluid .sx-tab-bar-demo {
  gap: 20px;
  width: min(720px, calc(100vw - 80px));
}

.sx-pageview .sx-tab-bar-demo,
.sx-pageview--react .sx-tab-bar-demo {
  width: 100%;
  max-height: 100dvh;
  padding: 16px;
  overflow-y: auto;
}

.sx-tab-bar-demo__item {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sx-tab-bar-demo__caption {
  display: none;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
}

.sx-stage--fluid .sx-tab-bar-demo__caption,
.sx-pageview .sx-tab-bar-demo__caption,
.sx-pageview--react .sx-tab-bar-demo__caption {
  display: block;
}

.sx-tab-bar-demo__card {
  min-width: 0;
  padding: 2px 14px 12px;
}

.sx-tab-bar-demo__card--tight {
  padding: 10px 12px 12px;
}

.sx-tab-bar-demo__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.sx-tab-bar-demo__more {
  display: none;
  gap: 20px;
  min-width: 0;
}

.sx-stage--fluid .sx-tab-bar-demo__more,
.sx-pageview .sx-tab-bar-demo__more,
.sx-pageview--react .sx-tab-bar-demo__more {
  display: grid;
}

.sx-tab-bar-demo__narrow {
  max-width: 340px;
}

/* Metric panel: a daily chart and the breakdown behind the figure */
.sx-tab-bar-demo__figure {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 196px;
  gap: 24px;
  align-items: stretch;
}

.sx-tab-bar-demo__chart {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 6px;
  min-width: 0;
}

.sx-tab-bar-demo__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tab-bar-demo__chart-head strong {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

.sx-tab-bar-demo__bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 4px;
  height: 56px;
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-stage--fluid .sx-tab-bar-demo__bars,
.sx-pageview .sx-tab-bar-demo__bars,
.sx-pageview--react .sx-tab-bar-demo__bars {
  height: 66px;
}

.sx-tab-bar-demo__bar {
  display: block;
  height: calc(var(--v) * 100%);
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  background: color-mix(in oklab, var(--sx-c1) 30%, transparent);
}

.sx-tab-bar-demo__bar[data-peak] {
  background: var(--sx-c1);
}

.sx-tab-bar-demo__figure[data-tone="bad"] .sx-tab-bar-demo__bar {
  background: color-mix(in oklab, var(--sx-danger) 28%, transparent);
}

.sx-tab-bar-demo__figure[data-tone="bad"] .sx-tab-bar-demo__bar[data-peak] {
  background: var(--sx-danger);
}

.sx-tab-bar-demo__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-tab-bar-demo__rows {
  display: grid;
  align-content: start;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-tab-bar-demo__rows-title {
  margin-bottom: 4px;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

.sx-tab-bar-demo__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-block: 3px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-tab-bar-demo__row b {
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* Orders list under the line tabs */
.sx-tab-bar-demo__orders {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-tab-bar-demo__order {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto 76px;
  align-items: center;
  gap: 12px;
  min-height: 29px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-tab-bar-demo__order + .sx-tab-bar-demo__order {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* Two rows in the gallery frame, all three at full size. */
.sx-tab-bar-demo__order:nth-child(3) {
  display: none;
}

.sx-stage--fluid .sx-tab-bar-demo__order:nth-child(3),
.sx-pageview .sx-tab-bar-demo__order:nth-child(3),
.sx-pageview--react .sx-tab-bar-demo__order:nth-child(3) {
  display: grid;
}

.sx-tab-bar-demo__order-id {
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-tab-bar-demo__order-who {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink);
}

.sx-tab-bar-demo__order-total {
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--sx-ink);
}

.sx-tab-bar-demo__empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  font-size: var(--sx-fs-sm);
  text-align: center;
  color: var(--sx-muted);
  --sx-icon-size: 18px;
}

.sx-stage--fluid .sx-tab-bar-demo__empty,
.sx-pageview .sx-tab-bar-demo__empty,
.sx-pageview--react .sx-tab-bar-demo__empty {
  min-height: 87px;
}

.sx-tab-bar-demo__empty strong {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink-2);
}

/* Compact readout under the pill and segment tabs */
.sx-tab-bar-demo__readout {
  display: grid;
  gap: 2px;
}

.sx-tab-bar-demo__readout-figure {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tab-bar-demo__readout-figure b {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--sx-display-tracking);
  color: var(--sx-ink);
}

.sx-tab-bar-demo__readout .sx-progress {
  margin-top: 4px;
}

/* Folder and settings panels */
.sx-tab-bar-demo__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 20px;
  margin: 0;
}

.sx-tab-bar-demo__facts dt {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tab-bar-demo__facts dd {
  margin: 0;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

.sx-tab-bar-demo__settings {
  padding: 8px;
}

.sx-tab-bar-demo__setting-title {
  margin-bottom: 2px;
  font-size: var(--sx-fs-md);
}

.sx-tab-bar-demo__setting-lead {
  margin-bottom: 10px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tab-bar-demo__setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 9px;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-tab-bar-demo__setting b {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
  text-align: end;
}

@container sx-tab-bar (max-width: 560px) {
  .sx-tab-bar-demo__figure {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .sx-tab-bar-demo__order {
    grid-template-columns: 56px minmax(0, 1fr) 68px;
  }

  .sx-tab-bar-demo__order > .sx-chip {
    display: none;
  }

  .sx-tab-bar-demo__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.sx-stage--fluid .sx-tab-bar-demo__pair,
.sx-pageview .sx-tab-bar-demo__pair,
.sx-pageview--react .sx-tab-bar-demo__pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}


/* ---- Status Badge (status-badge) ---- */
/* ==========================================================================
   Status Badge — the small label a product repeats everywhere. Builds on .sx-chip.
   Root attributes: data-tone="neutral | accent | success | warning | danger | info | mark",
   data-variant="soft | solid | outline", data-size="sm | lg" (default 20px), data-live,
   data-disabled, data-state="leaving" (the short exit before removal).
   ========================================================================== */

.sx-status-badge {
  --sb-ink: var(--sx-ink-2);
  --sb-soft: var(--sx-fill);
  --sb-line: var(--sx-line);
  position: relative;
  max-width: 100%;
  min-width: 0;
  flex: none;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  color: var(--sb-ink);
  background: var(--sb-soft);
  box-shadow: inset 0 0 0 1px var(--sb-line);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Tones: every variant reads these three ---------- */
.sx-status-badge[data-tone="accent"] {
  --sb-ink: var(--sx-accent-ink);
  --sb-soft: var(--sx-accent-soft);
  --sb-line: var(--sx-accent-line);
}

.sx-status-badge[data-tone="success"] {
  --sb-ink: var(--sx-success-ink);
  --sb-soft: var(--sx-success-soft);
  --sb-line: var(--sx-success-line);
}

.sx-status-badge[data-tone="warning"] {
  --sb-ink: var(--sx-warning-ink);
  --sb-soft: var(--sx-warning-soft);
  --sb-line: var(--sx-warning-line);
}

.sx-status-badge[data-tone="danger"] {
  --sb-ink: var(--sx-danger-ink);
  --sb-soft: var(--sx-danger-soft);
  --sb-line: var(--sx-danger-line);
}

.sx-status-badge[data-tone="info"] {
  --sb-ink: var(--sx-info-ink);
  --sb-soft: var(--sx-info-soft);
  --sb-line: var(--sx-info-line);
}

.sx-status-badge[data-tone="mark"] {
  --sb-ink: var(--sx-mark-ink);
  --sb-soft: var(--sx-mark-soft);
  --sb-line: var(--sx-mark-line);
}

/* ---------- Variants ---------- */
/* Solid uses the ink colour as the fill: inks are tuned for contrast against the surface in every theme. */
.sx-status-badge[data-variant="solid"] {
  color: var(--sx-surface);
  background: var(--sb-ink);
  box-shadow: none;
}

.sx-status-badge[data-variant="outline"] {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sb-line);
}

.sx-status-badge[data-tone="neutral"][data-variant="outline"] {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

/* ---------- Sizes ---------- */
.sx-status-badge[data-size="sm"] {
  height: 18px;
  padding: 0 6px;
  font-size: var(--sx-fs-2xs);
}

.sx-status-badge[data-size="lg"] {
  height: var(--sx-h-xs);
  padding: 0 9px;
  gap: 5px;
  font-size: var(--sx-fs-sm);
}

.sx-status-badge[data-size="lg"] > .sx-icon {
  --sx-icon-size: 13px;
}

/* ---------- Parts ---------- */
.sx-status-badge__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.sx-status-badge__dot {
  position: relative;
}

/* The live ring grows out of the dot and fades; the dot itself stays steady. */
.sx-status-badge[data-live] .sx-status-badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: sx-status-badge-ping 1.8s var(--sx-ease-out) infinite;
}

.sx-status-badge__spinner {
  --sx-spinner-size: 10px;
}

.sx-status-badge__count {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  margin-inline: 1px -3px;
  padding: 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  line-height: 1;
  background: color-mix(in srgb, currentColor 13%, transparent);
}

.sx-status-badge[data-size="sm"] .sx-status-badge__count {
  height: 13px;
  min-width: 13px;
  padding: 0 3px;
  font-size: 9.5px;
}

.sx-status-badge[data-size="lg"] .sx-status-badge__count {
  height: 16px;
  min-width: 16px;
  font-size: var(--sx-fs-xs);
}

/* The button keeps its small look; the hit area grows past it and reaches 44px on lg. */
.sx-status-badge__remove {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
  margin-inline: 1px -3px;
  border-radius: 50%;
  color: inherit;
  opacity: 0.68;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-status-badge__remove > .sx-icon {
  --sx-icon-size: 10px;
  --sx-icon-stroke: 2.25;
}

.sx-status-badge__remove::after {
  content: "";
  position: absolute;
  inset: -5px;
}

.sx-status-badge__remove:hover {
  opacity: 1;
  background: color-mix(in srgb, currentColor 15%, transparent);
}

.sx-status-badge__remove:active {
  transform: scale(0.88);
}

.sx-status-badge__remove:focus-visible {
  opacity: 1;
  outline-offset: 0;
}

.sx-status-badge[data-size="lg"] .sx-status-badge__remove {
  width: 18px;
  height: 18px;
  margin-inline-end: -5px;
}

.sx-status-badge[data-size="lg"] .sx-status-badge__remove > .sx-icon {
  --sx-icon-size: 12px;
}

.sx-status-badge[data-size="lg"] .sx-status-badge__remove::after {
  inset: -13px;
}

/* ---------- States ---------- */
.sx-status-badge[data-disabled] {
  opacity: 0.55;
}

.sx-status-badge[data-disabled] .sx-status-badge__remove {
  pointer-events: none;
}

.sx-status-badge[data-state="leaving"] {
  pointer-events: none;
  animation: sx-status-badge-leave var(--sx-dur-1) var(--sx-ease-out) forwards;
}

@keyframes sx-status-badge-ping {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }

  70%,
  100% {
    opacity: 0;
    transform: scale(2.8);
  }
}

@keyframes sx-status-badge-leave {
  to {
    opacity: 0;
    transform: scale(0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-status-badge[data-live] .sx-status-badge__dot {
    animation: sx-pulse 1.8s var(--sx-ease-in-out) infinite;
  }

  .sx-status-badge[data-live] .sx-status-badge__dot::after {
    content: none;
  }

  .sx-status-badge[data-state="leaving"] {
    animation-name: sx-status-badge-fade;
  }

  @keyframes sx-status-badge-fade {
    to {
      opacity: 0;
    }
  }
}

/* ---------- Demo layout: an orders card with status, stock and filters ---------- */
.sx-status-badge-demo {
  display: grid;
  gap: 12px;
  width: 480px;
  padding: 16px 18px 16px;
}

.sx-pageview .sx-status-badge-demo,
.sx-pageview--react .sx-status-badge-demo {
  width: min(480px, calc(100vw - 24px));
  margin: 12px;
}

.sx-status-badge-demo__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sx-status-badge-demo__title {
  font-size: var(--sx-fs-md);
}

.sx-status-badge-demo__head > .sx-status-badge:last-child {
  margin-inline-start: auto;
}

.sx-status-badge-demo__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 20px;
}

.sx-status-badge-demo__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sx-fs-base);
}

.sx-status-badge-demo__table td {
  height: 34px;
  padding: 0 8px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-status-badge-demo__table td:first-child {
  padding-inline-start: 0;
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-status-badge-demo__table td:last-child {
  width: 108px;
  padding-inline-end: 0;
}

.sx-status-badge-demo__amount {
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-status-badge-demo__stock {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-status-badge-demo__item {
  display: grid;
  justify-items: start;
  gap: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}


/* ---- Avatar (avatar) ---- */
/* ==========================================================================
   Avatar — extends the .sx-avatar primitive from base.css
   Detail mode: the presence dot carries data-sx-extra, so data-detail="simple" hides it.
   Root attributes: data-size="xs | sm | md | lg | xl", data-shape="square", data-tone="1..6"
   (a steady colour from the name). Parts: __img, __initials, __presence (data-presence="online |
   away | busy | offline"). Stack: .sx-avatar-stack with __more, __list (data-state, data-side,
   data-align), __row.
   ========================================================================== */

.sx-avatar[data-size="xs"] {
  --sx-avatar-size: 20px;
  font-size: 9.5px;
}

.sx-avatar[data-size="sm"] {
  --sx-avatar-size: 24px;
  font-size: 10px;
}

.sx-avatar[data-size="md"] {
  --sx-avatar-size: 32px;
}

.sx-avatar[data-size="lg"] {
  --sx-avatar-size: 44px;
}

.sx-avatar[data-size="xl"] {
  --sx-avatar-size: 64px;
}

.sx-avatar[data-shape="square"] {
  border-radius: calc(var(--sx-avatar-size) * 0.24);
}

/* A soft wash of the series colour, with text pulled most of the way to ink so it stays readable. */
.sx-avatar[data-tone] {
  --sx-avatar-bg: color-mix(in srgb, var(--sx-avatar-c) 20%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in oklab, var(--sx-avatar-c) 42%, var(--sx-ink));
}

.sx-avatar[data-tone="1"] { --sx-avatar-c: var(--sx-c1); }
.sx-avatar[data-tone="2"] { --sx-avatar-c: var(--sx-c2); }
.sx-avatar[data-tone="3"] { --sx-avatar-c: var(--sx-c3); }
.sx-avatar[data-tone="4"] { --sx-avatar-c: var(--sx-c4); }
.sx-avatar[data-tone="5"] { --sx-avatar-c: var(--sx-c5); }
.sx-avatar[data-tone="6"] { --sx-avatar-c: var(--sx-c6); }

.sx-avatar__initials {
  line-height: 1;
}

/* The picture fades in over the initials, which stay underneath as the fallback. */
.sx-avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-avatar__img[data-loaded] {
  opacity: 1;
}

/* Hairline over the picture, so a pale photo keeps its edge. */
.sx-avatar:has(> .sx-avatar__img[data-loaded])::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--sx-line);
  pointer-events: none;
}

/* ---------- Presence: the shape says it as well as the colour ---------- */
.sx-avatar__presence {
  --sx-avatar-p: clamp(8px, calc(var(--sx-avatar-size) * 0.26), 14px);
  position: absolute;
  right: -1px;
  bottom: -1px;
  z-index: 1;
  width: var(--sx-avatar-p);
  height: var(--sx-avatar-p);
  overflow: hidden;
  border-radius: 50%;
  background: var(--sx-success);
  box-shadow: 0 0 0 1.5px var(--sx-card-bg);
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-avatar[data-shape="square"] > .sx-avatar__presence {
  right: -2px;
  bottom: -2px;
}

/* Away: a crescent cut by a disc in the card colour. */
.sx-avatar__presence[data-presence="away"] {
  background: var(--sx-warning);
}

.sx-avatar__presence[data-presence="away"]::after {
  content: "";
  position: absolute;
  top: -12%;
  left: -12%;
  width: 66%;
  height: 66%;
  border-radius: 50%;
  background: var(--sx-card-bg);
}

/* Busy: a bar across the middle. */
.sx-avatar__presence[data-presence="busy"] {
  background: var(--sx-danger);
}

.sx-avatar__presence[data-presence="busy"]::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 1px;
  background: var(--sx-card-bg);
}

/* Offline: a hollow ring. */
.sx-avatar__presence[data-presence="offline"] {
  background: var(--sx-card-bg);
  box-shadow: inset 0 0 0 1.5px var(--sx-faint), 0 0 0 1.5px var(--sx-card-bg);
}

/* ---------- Stack ---------- */
.sx-avatar-stack {
  position: relative;
  align-items: center;
}

.sx-avatar-stack > .sx-avatar {
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-avatar-stack > .sx-avatar + .sx-avatar {
  margin-left: calc(var(--sx-avatar-size) * -0.125);
}

/* Overlapped avatars have no room for a dot; presence shows in the full list and is read aloud. */
.sx-avatar-stack > .sx-avatar > .sx-avatar__presence {
  display: none;
}

@media (hover: hover) {
  .sx-avatar-stack > .sx-avatar:hover {
    z-index: 1;
    transform: translateY(-2px);
  }
}

.sx-avatar-stack__more {
  font-size: calc(var(--sx-avatar-size) * 0.38);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-surface-3);
  cursor: pointer;
}

.sx-avatar-stack__more > span {
  display: block;
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-avatar-stack__more:hover,
.sx-avatar-stack__more[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-avatar-stack__more:focus-visible {
  z-index: 1;
}

.sx-avatar-stack__list {
  position: absolute;
  z-index: var(--sx-z-pop);
  width: max-content;
  min-width: 224px;
  max-width: min(280px, 92vw);
  cursor: default;
}

.sx-avatar-stack__list[data-side="bottom"] {
  top: calc(100% + 8px);
}

.sx-avatar-stack__list[data-side="top"] {
  bottom: calc(100% + 8px);
  --sx-pop-origin: bottom left;
}

.sx-avatar-stack__list[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-avatar-stack__list[data-align="start"] {
  left: 0;
}

.sx-avatar-stack__list[data-align="end"] {
  right: 0;
}

.sx-avatar-stack__rows {
  display: grid;
  max-height: 188px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.sx-avatar-stack__row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
}

.sx-avatar-stack__name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink);
}

.sx-avatar-stack__status {
  flex: none;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sx-avatar__presence,
  .sx-avatar-stack__more > span {
    animation-name: sx-fade-in;
  }

  .sx-avatar-stack > .sx-avatar:hover {
    transform: none;
  }
}

/* ---------- Demo layout: an outlet team card ---------- */
.sx-avatar-demo {
  display: grid;
  gap: 12px;
  width: 470px;
  padding: 16px 18px 16px;
  container: sx-avatar-demo / inline-size;
}

.sx-pageview .sx-avatar-demo,
.sx-pageview--react .sx-avatar-demo {
  width: min(470px, calc(100vw - 24px));
  margin: 12px;
}

.sx-avatar-demo__profile {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sx-avatar-demo__profile > .sx-btn {
  margin-inline-start: auto;
}

.sx-avatar-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-avatar-demo__line {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-avatar-demo__line + .sx-avatar-demo__line {
  margin-top: 2px;
}

.sx-avatar-demo__row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-avatar-demo__label {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-avatar-demo__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.sx-avatar-demo__grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 8px;
}

.sx-avatar-demo__person {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.3;
}

.sx-avatar-demo__who {
  display: grid;
  min-width: 0;
}

.sx-avatar-demo__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-avatar-demo__note {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-avatar-demo__shift {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

@container sx-avatar-demo (max-width: 400px) {
  .sx-avatar-demo__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
}


/* ---- Progress Bar (progress-bar) ---- */
/* ==========================================================================
   Progress Bar — bar, segments, ring or indeterminate
   Root attributes: data-variant="bar | segments | ring | indeterminate", data-tone, data-size="sm | lg",
   data-status="success | danger". --pb (0..1) on the root drives every fill.
   Bar and segments move with transform. The ring sweeps with stroke-dashoffset on its circle,
   the one thing a transform cannot do to an arc.
   ========================================================================== */

.sx-progress-bar {
  --pb-color: var(--sx-accent);
  --pb-h: 6px;
  --pb-ring: 52px;
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

.sx-progress-bar[data-size="sm"] {
  --pb-h: 4px;
  --pb-ring: 36px;
}

.sx-progress-bar[data-size="lg"] {
  --pb-h: 8px;
  --pb-ring: 72px;
}

.sx-progress-bar[data-tone="neutral"] { --pb-color: var(--sx-ink-2); }
.sx-progress-bar[data-tone="success"] { --pb-color: var(--sx-success); }
.sx-progress-bar[data-tone="warning"] { --pb-color: var(--sx-warning); }
.sx-progress-bar[data-tone="danger"] { --pb-color: var(--sx-danger); }
.sx-progress-bar[data-tone="info"] { --pb-color: var(--sx-info); }
.sx-progress-bar[data-tone="mark"] { --pb-color: var(--sx-mark); }

.sx-progress-bar[data-status="success"] { --pb-color: var(--sx-success); }
.sx-progress-bar[data-status="danger"] { --pb-color: var(--sx-danger); }

/* ---------- Text ---------- */
.sx-progress-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  min-height: 20px;
}

.sx-progress-bar__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-base);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

/* Reserved width, so the row does not twitch as the figure grows from 9% to 10%. */
.sx-progress-bar__value {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: none;
  min-width: 4ch;
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-progress-bar[data-status="success"] .sx-progress-bar__value {
  color: var(--sx-success-ink);
}

.sx-progress-bar[data-status="danger"] .sx-progress-bar__value {
  color: var(--sx-danger-ink);
}

.sx-progress-bar__icon {
  --sx-icon-size: 14px;
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-progress-bar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  min-height: 18px;
}

.sx-progress-bar__hint {
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-progress-bar[data-status="danger"] .sx-progress-bar__hint {
  color: var(--sx-danger-ink);
}

.sx-progress-bar__action {
  flex: none;
}

/* A row with an action keeps its height, so the button appearing moves nothing. */
.sx-progress-bar__foot:has(> .sx-progress-bar__action) {
  min-height: var(--sx-h-sm);
}

/* ---------- Bar: the fill slides in from the left, so its round end never squashes ---------- */
.sx-progress-bar__track.sx-progress {
  height: var(--pb-h);
}

.sx-progress-bar__fill.sx-progress__bar {
  background: var(--pb-color);
  transform: translateX(calc((var(--pb, 0) - 1) * 101%));
  transition: transform var(--sx-dur-4) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Indeterminate ---------- */
.sx-progress-bar[data-variant="indeterminate"] .sx-progress-bar__fill.sx-progress__bar {
  right: auto;
  width: 38%;
  transform: translateX(-100%);
  transition: none;
  animation: sx-progress-bar-slide 1.5s var(--sx-ease-in-out) infinite;
}

@keyframes sx-progress-bar-slide {
  to {
    transform: translateX(280%);
  }
}

/* ---------- Segments ---------- */
.sx-progress-bar__segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 3px;
}

.sx-progress-bar__segment {
  position: relative;
  height: var(--pb-h);
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-progress-bar__segment-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pb-color);
  transform: translateX(calc((var(--pb-part, 0) - 1) * 101%));
  transition: transform var(--sx-dur-4) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Ring ---------- */
.sx-progress-bar[data-variant="ring"] {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.sx-progress-bar__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--pb-ring);
  height: var(--pb-ring);
}

.sx-progress-bar__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.sx-progress-bar__ring-track,
.sx-progress-bar__ring-fill {
  fill: none;
  stroke-width: 3.6;
}

.sx-progress-bar__ring-track {
  stroke: var(--sx-c-track);
}

.sx-progress-bar__ring-fill {
  stroke: var(--pb-color);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--pb, 0)) * 100);
  transition: stroke-dashoffset var(--sx-dur-4) var(--sx-ease-out), stroke var(--sx-dur-2) var(--sx-ease-out);
}

.sx-progress-bar[data-variant="ring"] .sx-progress-bar__value {
  justify-content: center;
  min-width: 0;
  font-size: calc(var(--pb-ring) * 0.235);
  letter-spacing: -0.01em;
  color: var(--sx-ink);
}

.sx-progress-bar[data-variant="ring"][data-status] .sx-progress-bar__value {
  color: var(--pb-color);
}

.sx-progress-bar[data-variant="ring"] .sx-progress-bar__icon {
  --sx-icon-size: calc(var(--pb-ring) * 0.38);
}

.sx-progress-bar__text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sx-progress-bar[data-variant="indeterminate"] .sx-progress-bar__fill.sx-progress__bar {
    width: 100%;
    transform: none;
    animation: sx-pulse 1.8s var(--sx-ease-in-out) infinite;
  }

  .sx-progress-bar__icon {
    animation-name: sx-fade-in;
  }
}

/* ---------- Demo layout: an imports panel ---------- */
.sx-progress-bar-demo {
  display: grid;
  gap: 14px;
  width: 440px;
  padding: 18px 20px 18px;
  container: sx-progress-bar-demo / inline-size;
}

.sx-pageview .sx-progress-bar-demo,
.sx-pageview--react .sx-progress-bar-demo {
  width: min(440px, calc(100vw - 24px));
  margin: 12px;
}

.sx-progress-bar-demo__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-progress-bar-demo__row > * {
  align-self: center;
}

@container sx-progress-bar-demo (max-width: 360px) {
  .sx-progress-bar-demo__row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* ---- Accordion List (accordion-list) ---- */
/* ==========================================================================
   Accordion List — sections that fold open, each saying what is inside before it opens
   Root .sx-accordion-list (.sx-card by default; --flush drops the card when it sits inside one).
   Item: __item[data-open]. Trigger: button aria-expanded aria-controls. Panel: role="region".
   Height uses the grid trick: __panel goes from 0fr to 1fr and __clip hides the overflow.
   Detail mode: the summary and the status carry data-sx-extra, so data-detail="simple" hides them.
   ========================================================================== */

.sx-accordion-list {
  --al-pad: 14px;
  --al-icon: 28px;
  --al-gap: 12px;
  width: 100%;
  min-width: 0;
  container: sx-accordion-list / inline-size;
}

.sx-accordion-list--flush {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.sx-accordion-list__item + .sx-accordion-list__item {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-accordion-list__heading {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.sx-accordion-list__trigger {
  display: flex;
  align-items: center;
  gap: var(--al-gap);
  width: 100%;
  min-height: 52px;
  padding: 8px var(--al-pad);
  text-align: start;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

/* Match the card's corners, so the hover fill does not poke out. */
.sx-accordion-list:not(.sx-accordion-list--flush) .sx-accordion-list__item:first-child .sx-accordion-list__trigger {
  border-top-left-radius: var(--sx-card-radius);
  border-top-right-radius: var(--sx-card-radius);
}

.sx-accordion-list:not(.sx-accordion-list--flush) .sx-accordion-list__item:last-child:not([data-open]) .sx-accordion-list__trigger {
  border-bottom-left-radius: var(--sx-card-radius);
  border-bottom-right-radius: var(--sx-card-radius);
}

.sx-accordion-list__trigger:hover:not(:disabled) {
  background: var(--sx-fill);
}

.sx-accordion-list__trigger:active:not(:disabled) {
  background: var(--sx-fill-strong);
}

.sx-accordion-list__trigger:focus-visible {
  outline-offset: -2px;
}

.sx-accordion-list__trigger:disabled {
  color: var(--sx-muted);
}

.sx-accordion-list__icon {
  display: grid;
  place-items: center;
  width: var(--al-icon);
  height: var(--al-icon);
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 15px;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-accordion-list__item[data-open] .sx-accordion-list__icon {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-accordion-list__text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sx-accordion-list__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-base);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-accordion-list__summary {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-accordion-list__status {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.sx-accordion-list__chevron {
  --sx-icon-size: 16px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-accordion-list__trigger:hover:not(:disabled) .sx-accordion-list__chevron {
  color: var(--sx-ink-2);
}

.sx-accordion-list__trigger:disabled .sx-accordion-list__chevron {
  opacity: 0.4;
}

.sx-accordion-list__item[data-open] .sx-accordion-list__chevron {
  transform: rotate(180deg);
}

/* Simple detail: one line per header, so the rows close up. */
[data-detail="simple"] .sx-accordion-list__trigger,
.sx-accordion-list[data-detail="simple"] .sx-accordion-list__trigger {
  min-height: 44px;
}

/* ---------- Panel ---------- */
.sx-accordion-list__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-2) var(--sx-ease-out);
}

.sx-accordion-list__item[data-open] .sx-accordion-list__panel {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

/* Hidden once folded, so nothing inside stays in the tab order. */
.sx-accordion-list__clip {
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear var(--sx-dur-2);
}

.sx-accordion-list__item[data-open] .sx-accordion-list__clip {
  visibility: visible;
  transition-delay: 0s;
}

.sx-accordion-list__content {
  padding: 2px var(--al-pad) 16px calc(var(--al-pad) + var(--al-icon) + var(--al-gap));
  color: var(--sx-ink-2);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-accordion-list__item[data-open] .sx-accordion-list__content {
  opacity: 1;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 40ms;
}

/* Narrow containers: the content takes the full width instead of hanging under the title. */
@container sx-accordion-list (max-width: 400px) {
  .sx-accordion-list__content {
    padding-inline-start: var(--al-pad);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-accordion-list__panel,
  .sx-accordion-list__item[data-open] .sx-accordion-list__panel {
    transition: none;
  }

  .sx-accordion-list__clip {
    transition: none;
  }

  .sx-accordion-list__chevron {
    transition: color var(--sx-dur-2) var(--sx-ease-out);
  }
}

/* ---------- Demo layout: outlet settings ---------- */
.sx-accordion-list-demo {
  width: 480px;
}

.sx-pageview .sx-accordion-list-demo,
.sx-pageview--react .sx-accordion-list-demo {
  width: min(480px, calc(100vw - 24px));
  margin: 12px;
}

.sx-accordion-list-demo__checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.sx-accordion-list-demo__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.sx-accordion-list-demo__rows {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-accordion-list-demo__rows > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}


/* ---- Breadcrumb Trail (breadcrumb-trail) ---- */
/* ==========================================================================
   Breadcrumb Trail — where you are, and the way back
   Root: nav.sx-breadcrumb-trail, a size container. data-collapse="sm | md | lg | none" sets the width
   below which the middle levels fold into the __more menu, in CSS with nothing measured:
   every middle level is written twice, inline (__item[data-fold]) and in the menu
   (__menu-item[data-fold]), and the container query shows one or the other.
   Levels cut by maxItems have no inline copy and __more[data-always] stays visible.
   Menus: __menu is a .sx-pop .sx-menu; open with data-state="open"; data-side="top" flips it.
   ========================================================================== */

.sx-breadcrumb-trail {
  position: relative;
  width: 100%;
  min-width: 0;
  container: sx-breadcrumb-trail / inline-size;
  font-size: var(--sx-fs-sm);
}

/* A container is its own layer in some browsers; lift it while a menu is open. */
.sx-breadcrumb-trail:has([aria-expanded="true"]) {
  z-index: var(--sx-z-pop);
}

.sx-breadcrumb-trail__list {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: var(--sx-h-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-breadcrumb-trail__item {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
}

.sx-breadcrumb-trail__item[data-first] {
  flex-shrink: 0;
}


/* The huge shrink factor makes the current page give way first, down to a readable width. The middle
   levels get a share too small to round to a pixel until it stops, so they truncate only as a last resort. */
.sx-breadcrumb-trail__item[data-current] {
  flex: 0 100000 auto;
  min-width: min(12ch, 45cqi);
}

.sx-breadcrumb-trail__item--more {
  display: none;
  flex: none;
}

.sx-breadcrumb-trail__item--more[data-always] {
  display: flex;
}

.sx-breadcrumb-trail__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  max-width: 22ch;
  padding: 3px 5px;
  border-radius: var(--sx-r-sm);
  font-weight: var(--sx-text-weight);
  text-decoration: none;
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-breadcrumb-trail__link > .sx-icon {
  --sx-icon-size: 14px;
}

a.sx-breadcrumb-trail__link:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

a.sx-breadcrumb-trail__link:active {
  background: var(--sx-fill-strong);
}

.sx-breadcrumb-trail__link:focus-visible,
.sx-breadcrumb-trail__more:focus-visible,
.sx-breadcrumb-trail__toggle:focus-visible {
  outline-offset: 0;
}

.sx-breadcrumb-trail__text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-breadcrumb-trail__current {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 5px;
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

.sx-breadcrumb-trail__current > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-breadcrumb-trail__sep {
  display: grid;
  place-items: center;
  width: 14px;
  flex: none;
  color: var(--sx-faint);
  --sx-icon-size: 12px;
}

/* A chevron that is also a button: same look as the separator until it is hovered. */
.sx-breadcrumb-trail__toggle {
  position: relative;
  display: grid;
  place-items: center;
  width: 18px;
  height: 22px;
  flex: none;
  border-radius: var(--sx-r-xs);
  color: var(--sx-muted);
  --sx-icon-size: 12px;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-breadcrumb-trail__toggle::after {
  content: "";
  position: absolute;
  inset: -4px -2px;
}

.sx-breadcrumb-trail__toggle > .sx-icon {
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-breadcrumb-trail__toggle:hover,
.sx-breadcrumb-trail__toggle[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-breadcrumb-trail__toggle[aria-expanded="true"] > .sx-icon {
  transform: rotate(90deg);
}

.sx-breadcrumb-trail__more {
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  --sx-icon-size: 14px;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-breadcrumb-trail__more:hover,
.sx-breadcrumb-trail__more[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

/* ---------- Menus ---------- */
.sx-breadcrumb-trail__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: var(--bt-menu-x, 0px);
  z-index: var(--sx-z-pop);
  width: max-content;
  min-width: 168px;
  max-width: min(280px, 100cqi);
  --sx-pop-origin: top left;
}

.sx-breadcrumb-trail__menu[data-side="top"] {
  top: auto;
  bottom: calc(100% + 4px);
  --sx-pop-origin: bottom left;
}

.sx-breadcrumb-trail__menu[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-breadcrumb-trail__menu-item {
  text-decoration: none;
  font-weight: var(--sx-text-weight);
}

.sx-breadcrumb-trail__menu-item[data-fold] {
  display: none;
}

.sx-breadcrumb-trail__menu-item:focus-visible {
  outline-offset: -2px;
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-breadcrumb-trail__menu-item[aria-current] {
  color: var(--sx-ink);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-breadcrumb-trail__menu-item > .sx-breadcrumb-trail__check {
  margin-inline-start: auto;
  color: var(--sx-accent-ink);
}

/* ---------- Collapse by container width: one set of rules per threshold ---------- */
.sx-breadcrumb-trail[data-collapse="always"] .sx-breadcrumb-trail__item[data-fold] {
  display: none;
}

.sx-breadcrumb-trail[data-collapse="always"] .sx-breadcrumb-trail__item--more {
  display: flex;
}

.sx-breadcrumb-trail[data-collapse="always"] .sx-breadcrumb-trail__menu-item[data-fold] {
  display: flex;
}

@container sx-breadcrumb-trail (max-width: 319.98px) {
  .sx-breadcrumb-trail[data-collapse="sm"] .sx-breadcrumb-trail__item[data-fold] {
    display: none;
  }

  .sx-breadcrumb-trail[data-collapse="sm"] .sx-breadcrumb-trail__item--more {
    display: flex;
  }

  .sx-breadcrumb-trail[data-collapse="sm"] .sx-breadcrumb-trail__menu-item[data-fold] {
    display: flex;
  }
}

@container sx-breadcrumb-trail (max-width: 419.98px) {
  .sx-breadcrumb-trail[data-collapse="md"] .sx-breadcrumb-trail__item[data-fold] {
    display: none;
  }

  .sx-breadcrumb-trail[data-collapse="md"] .sx-breadcrumb-trail__item--more {
    display: flex;
  }

  .sx-breadcrumb-trail[data-collapse="md"] .sx-breadcrumb-trail__menu-item[data-fold] {
    display: flex;
  }
}

@container sx-breadcrumb-trail (max-width: 559.98px) {
  .sx-breadcrumb-trail[data-collapse="lg"] .sx-breadcrumb-trail__item[data-fold] {
    display: none;
  }

  .sx-breadcrumb-trail[data-collapse="lg"] .sx-breadcrumb-trail__item--more {
    display: flex;
  }

  .sx-breadcrumb-trail[data-collapse="lg"] .sx-breadcrumb-trail__menu-item[data-fold] {
    display: flex;
  }
}

/* Very narrow: the first level keeps only its icon, and its name stays for screen readers. */
@container sx-breadcrumb-trail (max-width: 279.98px) {
  .sx-breadcrumb-trail__item[data-first][data-icon] .sx-breadcrumb-trail__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-breadcrumb-trail__toggle > .sx-icon {
    transition: none;
  }
}

/* ---------- Demo layout: three page headers ---------- */
.sx-breadcrumb-trail-demo {
  display: grid;
  justify-items: start;
  gap: 10px;
  width: 480px;
}

.sx-pageview .sx-breadcrumb-trail-demo,
.sx-pageview--react .sx-breadcrumb-trail-demo {
  width: min(480px, calc(100vw - 24px));
  margin: 12px;
}

.sx-breadcrumb-trail-demo__page {
  display: grid;
  gap: 6px;
  width: var(--bt-demo-w, 100%);
  padding: 12px 14px 14px;
  transition: width var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-breadcrumb-trail-demo__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-inline: 5px;
}

.sx-breadcrumb-trail-demo__title h3 {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-lg);
}

.sx-breadcrumb-trail-demo__meta {
  padding-inline: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}


/* ---- KPI Strip (kpi-strip) ---- */
/* ==========================================================================
   KPI Strip — one connected row of headline numbers
   Root .sx-card .sx-kpi-strip; __cells is the hairline: a 1px gap over --sx-line-soft.
   Cells wrap with flex: each row shares its width, so columns follow the card like auto-fit and
   the last row stretches instead of leaving a hole where the line colour would show.
   Nothing here clips, so a popover from the info slot can leave the strip. The outer corners
   of the cells are rounded by data-corners ("tl tr bl br"), set by script from offset metrics.
   Min column width: --sx-kpi-strip-min. .sx-kpi-strip--sm is the compact size.
   Detail mode: the note and the info slot carry data-sx-extra, so data-detail="simple" hides them.
   ========================================================================== */

.sx-kpi-strip {
  --kpi-value: 26px;
  --kpi-min-h: 92px;
  --kpi-radius: var(--sx-card-radius);
  width: 100%;
  min-width: 0;
}

.sx-kpi-strip--sm {
  --kpi-value: 20px;
  --kpi-min-h: 76px;
}

.sx-kpi-strip__cells {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  border-radius: inherit;
  background: var(--sx-line-soft);
}

.sx-kpi-strip__cell {
  position: relative;
  flex: 1 1 var(--sx-kpi-strip-min, 132px);
  min-width: 0;
  background: var(--sx-card-bg);
}

.sx-kpi-strip__cell[data-corners~="tl"] { border-top-left-radius: var(--kpi-radius); }
.sx-kpi-strip__cell[data-corners~="tr"] { border-top-right-radius: var(--kpi-radius); }
.sx-kpi-strip__cell[data-corners~="bl"] { border-bottom-left-radius: var(--kpi-radius); }
.sx-kpi-strip__cell[data-corners~="br"] { border-bottom-right-radius: var(--kpi-radius); }

.sx-kpi-strip__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  height: 100%;
  min-height: var(--kpi-min-h);
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: inherit;
  text-align: start;
  color: inherit;
  text-decoration: none;
}

a.sx-kpi-strip__body,
button.sx-kpi-strip__body {
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

a.sx-kpi-strip__body:hover,
button.sx-kpi-strip__body:hover {
  background: var(--sx-fill);
}

a.sx-kpi-strip__body:active,
button.sx-kpi-strip__body:active {
  background: var(--sx-fill-strong);
}

a.sx-kpi-strip__body:focus-visible,
button.sx-kpi-strip__body:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: -2px;
}

.sx-kpi-strip__label {
  font-size: var(--sx-fs-sm);
  line-height: 1.35;
  color: var(--sx-muted);
}

.sx-kpi-strip__cell[data-has-info] .sx-kpi-strip__label {
  padding-inline-end: var(--sx-space-4);
}

.sx-kpi-strip__value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
  font-size: var(--kpi-value);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-kpi-strip__value[data-tone="warning"] { color: var(--sx-warning-ink); }
.sx-kpi-strip__value[data-tone="danger"] { color: var(--sx-danger-ink); }
.sx-kpi-strip__value[data-tone="success"] { color: var(--sx-success-ink); }
.sx-kpi-strip__value[data-tone="accent"] { color: var(--sx-accent-ink); }

.sx-kpi-strip__value[data-empty] {
  min-height: calc(var(--kpi-value) * 1.1);
  align-items: center;
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-text-weight);
  letter-spacing: 0;
  color: var(--sx-muted);
}

/* A new figure settles in, one short rise. */
.sx-kpi-strip__figure {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-kpi-strip__unit {
  flex: none;
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-kpi-strip--sm .sx-kpi-strip__unit {
  font-size: var(--sx-fs-sm);
}

.sx-kpi-strip__note {
  font-size: var(--sx-fs-xs);
  line-height: 1.35;
  text-wrap: pretty;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-kpi-strip__skeleton {
  display: block;
  width: 56%;
  height: calc(var(--kpi-value) * 1.1);
}

.sx-kpi-strip__arrow {
  position: absolute;
  right: var(--sx-space-3);
  bottom: var(--sx-space-3);
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

a.sx-kpi-strip__body:hover .sx-kpi-strip__arrow,
button.sx-kpi-strip__body:hover .sx-kpi-strip__arrow,
.sx-kpi-strip__body:focus-visible .sx-kpi-strip__arrow {
  opacity: 1;
  transform: translateX(2px);
}

@media (hover: none) {
  .sx-kpi-strip__arrow {
    opacity: 0.6;
  }
}

/* Outside the link, because a link must not contain a button. */
.sx-kpi-strip__info {
  position: absolute;
  top: var(--sx-space-2);
  right: var(--sx-space-2);
}

/* Simple detail: no note and no info button, so the cells close up around the figure. */
[data-detail="simple"] .sx-kpi-strip,
.sx-kpi-strip[data-detail="simple"] {
  --kpi-min-h: 0px;
}

[data-detail="simple"] .sx-kpi-strip__cell[data-has-info] .sx-kpi-strip__label,
.sx-kpi-strip[data-detail="simple"] .sx-kpi-strip__cell[data-has-info] .sx-kpi-strip__label {
  padding-inline-end: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sx-kpi-strip__figure {
    animation-name: sx-fade-in;
  }

  a.sx-kpi-strip__body:hover .sx-kpi-strip__arrow,
  button.sx-kpi-strip__body:hover .sx-kpi-strip__arrow,
  .sx-kpi-strip__body:focus-visible .sx-kpi-strip__arrow {
    transform: none;
  }
}

/* ---------- Demo layout: a home page summary, wide and narrow ---------- */
.sx-kpi-strip-demo {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 680px;
  container: sx-kpi-strip-demo / inline-size;
}

.sx-pageview .sx-kpi-strip-demo,
.sx-pageview--react .sx-kpi-strip-demo {
  width: min(680px, calc(100vw - 24px));
  margin: 12px;
}

.sx-kpi-strip-demo__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sx-fs-md);
  margin-top: 8px;
}

.sx-kpi-strip-demo__title:first-child {
  margin-top: 0;
}

.sx-kpi-strip-demo__title > .sx-dot {
  color: var(--sx-success);
}

.sx-kpi-strip-demo__narrow {
  width: 62%;
}

@container sx-kpi-strip-demo (max-width: 500px) {
  .sx-kpi-strip-demo__narrow {
    width: 100%;
  }
}


/* ---- Export Menu (export-menu) ---- */
/* ==========================================================================
   Export Menu — a download button with Excel and CSV options (.sx-btn + .sx-menu + .sx-pop)
   Root .sx-export-menu (position: relative) holds the trigger, the menu and a status line.
   Trigger: aria-haspopup="menu" aria-expanded, aria-busy while the file builds,
            data-state="idle | loading | done | error" (the confirmation lives on the button).
   Menu:    data-state="open | closed", data-side="bottom | top", data-align="end | start"
   Items:   role="menuitem"; the highlighted item carries data-active="true".
   ========================================================================== */

.sx-export-menu {
  position: relative;
  display: inline-flex;
}

/* ---------- Trigger ---------- */
.sx-export-menu__trigger[aria-expanded="true"] {
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
}

/* All labels share one cell, so the button keeps the width of the longest one. */
.sx-export-menu__label {
  display: inline-grid;
  justify-items: center;
}

.sx-export-menu__text {
  grid-area: 1 / 1;
  visibility: hidden;
}

.sx-export-menu__trigger[data-state="idle"] .sx-export-menu__text[data-for="idle"],
.sx-export-menu__trigger[data-state="loading"] .sx-export-menu__text[data-for="idle"],
.sx-export-menu__trigger[data-state="done"] .sx-export-menu__text[data-for="done"],
.sx-export-menu__trigger[data-state="error"] .sx-export-menu__text[data-for="error"] {
  visibility: visible;
}

.sx-export-menu__chevron {
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-export-menu__trigger[aria-expanded="true"] .sx-export-menu__chevron {
  transform: rotate(180deg);
}

.sx-export-menu__trigger[data-state="done"] {
  --_bg: var(--sx-success-soft);
  --_bg-hover: var(--sx-success-soft);
  --_border: var(--sx-success-line);
  --_border-hover: var(--sx-success-line);
  color: var(--sx-success-ink);
}

.sx-export-menu__trigger[data-state="error"] {
  --_bg: var(--sx-danger-soft);
  --_bg-hover: var(--sx-danger-soft);
  --_border: var(--sx-danger-line);
  --_border-hover: var(--sx-danger-line);
  color: var(--sx-danger-ink);
}

.sx-export-menu__trigger:is([data-state="done"], [data-state="error"]) .sx-export-menu__chevron {
  color: inherit;
}

.sx-export-menu__trigger[data-state="done"] > .sx-icon:first-child {
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

/* The large size meets the 44px touch target. */
.sx-export-menu__trigger.sx-btn--lg {
  --_h: 44px;
}

/* ---------- Menu ---------- */
.sx-export-menu__menu {
  --sx-pop-origin: top right;
  position: absolute;
  z-index: var(--sx-z-pop);
  width: 216px;
}

.sx-export-menu__menu:focus {
  outline: none;
}

/* Closed menus line up with the trigger's right edge, so they never widen a scrolling parent. */
.sx-export-menu__menu[data-align="end"] {
  right: 0;
}

.sx-export-menu__menu[data-align="start"] {
  --sx-pop-origin: top left;
  left: 0;
}

.sx-export-menu__menu[data-side="bottom"] {
  top: calc(100% + 6px);
}

.sx-export-menu__menu[data-side="top"] {
  --sx-pop-origin: bottom right;
  bottom: calc(100% + 6px);
}

.sx-export-menu__menu[data-side="top"][data-align="start"] {
  --sx-pop-origin: bottom left;
}

.sx-export-menu__menu[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-export-menu__menu .sx-menu__label {
  font-variant-numeric: tabular-nums;
}

.sx-export-menu__menu .sx-menu__item:focus-visible {
  outline-offset: -2px;
}

.sx-export-menu__menu .sx-menu__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.sx-export-menu__name {
  flex: 1 1 auto;
  min-width: 0;
}

.sx-export-menu__ext {
  flex: none;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

@media (pointer: coarse) {
  .sx-export-menu__menu .sx-menu__item {
    min-height: 44px;
  }
}

/* ---------- Demo layout: a table with the button in its head ---------- */
.sx-export-menu-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 520px;
  max-width: 100%;
}

.sx-export-menu-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-3);
  padding: 14px 16px;
}

.sx-export-menu-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-export-menu-demo__sub {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-export-menu-demo__scroll {
  overflow-x: auto;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-export-menu-demo__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sx-fs-base);
  white-space: nowrap;
}

.sx-export-menu-demo__table th {
  height: 32px;
  padding: 0 16px;
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  text-align: start;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
}

.sx-export-menu-demo__table td {
  height: 38px;
  padding: 0 16px;
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-export-menu-demo__table td:first-child {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
}

.sx-export-menu-demo__table :is(th, td):nth-child(4) {
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.sx-export-menu-demo__note {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 0 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  --sx-icon-size: 13px;
}

.sx-export-menu-demo__note strong {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

@media (prefers-reduced-motion: reduce) {
  .sx-export-menu__trigger[data-state="done"] > .sx-icon:first-child {
    animation-name: sx-fade-in;
  }
}


/* ---- Code Block (code-block) ---- */
/* ==========================================================================
   Code Block — code with its language, a copy button and a small highlighter
   Root .sx-code-block: data-language, data-line-numbers, data-wrap, data-state="ready | empty | loading"
   Lines: .sx-code-block__line, data-highlight marks a line. Tokens carry data-token:
          comment, key, string, number, keyword, tag. Colours come from the --sx-*-ink tokens.
   Copy:  .sx-code-block__copy, data-state="idle | copied | failed"
   The block follows its container. Long lines scroll inside .sx-code-block__pre unless data-wrap
   is set; --cb-max-h limits the height.
   ========================================================================== */

.sx-code-block {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-surface);
}

/* ---------- Head ---------- */
.sx-code-block__head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sx-space-2);
  min-height: 34px;
  padding: 0 6px 0 12px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-code-block__lang {
  flex: none;
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink-2);
}

.sx-code-block__title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--sx-font-mono);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-code-block__copy {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: var(--sx-h-xs);
  margin-inline-start: auto;
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-code-block__copy:hover:not(:disabled) {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-code-block__copy:active:not(:disabled) {
  background: var(--sx-fill);
}

.sx-code-block__copy:disabled {
  opacity: 0.45;
}

.sx-code-block__copy[data-state="copied"] {
  color: var(--sx-success-ink);
}

.sx-code-block__copy[data-state="failed"] {
  color: var(--sx-danger-ink);
}

.sx-code-block__copy[data-state="copied"] > .sx-icon {
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

/* The button stays small in the head, and fingers still get a 44px target. */
@media (pointer: coarse) {
  .sx-code-block__copy::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
  }
}

/* ---------- Code ---------- */
.sx-code-block__pre {
  max-height: var(--cb-max-h, none);
  padding: 10px 0;
  overflow: auto;
  overscroll-behavior: contain;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-base);
  font-variant-ligatures: none;
  line-height: 1.65;
  tab-size: 2;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-code-block__pre:focus-visible {
  outline-offset: -2px;
}

.sx-code-block__code {
  display: grid;
  width: max-content;
  min-width: 100%;
  font: inherit;
}

.sx-code-block[data-wrap] .sx-code-block__code {
  width: 100%;
}

.sx-code-block__line {
  display: flex;
  padding-inline-end: 14px;
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-code-block__num {
  position: sticky;
  left: 0;
  z-index: 1;
  flex: none;
  min-width: calc(var(--cb-digits, 2) * 1ch + 26px);
  padding-inline: 12px 14px;
  font-variant-numeric: tabular-nums;
  text-align: end;
  color: var(--sx-muted);
  background: var(--sx-surface);
  user-select: none;
  -webkit-user-select: none;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-code-block__text {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline-start: 14px;
  white-space: pre;
}

.sx-code-block[data-line-numbers] .sx-code-block__text {
  padding-inline-start: 0;
}

.sx-code-block[data-wrap] .sx-code-block__text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sx-code-block__line[data-highlight] {
  background: var(--sx-accent-soft);
}

/* The sticky number needs an opaque back so scrolled code never shows through it. */
.sx-code-block__line[data-highlight] .sx-code-block__num {
  color: var(--sx-accent-ink);
  background: linear-gradient(var(--sx-accent-soft), var(--sx-accent-soft)), var(--sx-surface);
}

/* ---------- Tokens ---------- */
.sx-code-block [data-token="comment"] {
  color: var(--sx-muted);
}

.sx-code-block [data-token="key"] {
  color: var(--sx-accent-ink);
}

.sx-code-block [data-token="string"] {
  color: var(--sx-success-ink);
}

.sx-code-block [data-token="number"] {
  color: var(--sx-mark-ink);
}

.sx-code-block [data-token="keyword"] {
  color: var(--sx-info-ink);
}

.sx-code-block [data-token="tag"] {
  color: var(--sx-warning-ink);
}

/* ---------- Empty and loading ---------- */
.sx-code-block__empty {
  padding: 18px 14px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-code-block__skeleton {
  display: grid;
  gap: 10px;
  padding: 16px 14px;
}

.sx-code-block__skeleton > .sx-skeleton {
  height: 10px;
}

.sx-code-block__skeleton > .sx-skeleton:nth-child(1) {
  width: 62%;
}

.sx-code-block__skeleton > .sx-skeleton:nth-child(2) {
  width: 84%;
}

.sx-code-block__skeleton > .sx-skeleton:nth-child(3) {
  width: 46%;
}

/* ---------- Demo layout ---------- */
.sx-code-block-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  width: 580px;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .sx-code-block__copy[data-state="copied"] > .sx-icon {
    animation-name: sx-fade-in;
  }
}


/* ---- Flow Diagram (flow-diagram) ---- */
/* ==========================================================================
   Flow Diagram — a flow chart drawn as SVG from a few lines of plain text
   Root .sx-flow-diagram (figure): data-layout="flat | tall", data-state="ready | error"
   Nodes: .sx-flow-diagram__node data-tone="default | muted | info | accent | success | warning | danger"
          and data-active on the current one.
   Edges: .sx-flow-diagram__edge data-tone="default | danger | success" and data-active on the way in.
   The figure follows its container and swaps to the tall layout when the flat one would have to
   shrink below a readable size.
   ========================================================================== */

.sx-flow-diagram {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-2);
  width: 100%;
  min-width: 0;
  padding: var(--sx-space-4);
}

.sx-flow-diagram__scroll {
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-flow-diagram__svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-flow-diagram__caption {
  font-size: var(--sx-fs-sm);
  text-align: center;
  color: var(--sx-muted);
}

/* ---------- Edges ---------- */
.sx-flow-diagram__line {
  fill: none;
  stroke: var(--sx-muted);
  stroke-width: 1.4;
  transition: stroke var(--sx-dur-2) var(--sx-ease-out), stroke-width var(--sx-dur-2) var(--sx-ease-out);
}

.sx-flow-diagram__arrow {
  fill: var(--sx-muted);
  stroke: none;
  transition: fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-flow-diagram__edge[data-tone="danger"] .sx-flow-diagram__line {
  stroke: var(--sx-danger);
}

.sx-flow-diagram__edge[data-tone="danger"] .sx-flow-diagram__arrow {
  fill: var(--sx-danger);
}

.sx-flow-diagram__edge[data-tone="success"] .sx-flow-diagram__line {
  stroke: var(--sx-success);
}

.sx-flow-diagram__edge[data-tone="success"] .sx-flow-diagram__arrow {
  fill: var(--sx-success);
}

.sx-flow-diagram__edge[data-active] .sx-flow-diagram__line {
  stroke-width: 2;
}

.sx-flow-diagram__edge[data-active][data-tone="default"] .sx-flow-diagram__line {
  stroke: var(--sx-ink);
}

.sx-flow-diagram__edge[data-active][data-tone="default"] .sx-flow-diagram__arrow {
  fill: var(--sx-ink);
}

/* ---------- Nodes ---------- */
.sx-flow-diagram__box {
  rx: var(--sx-r-lg);
  fill: var(--sx-surface-2);
  stroke: var(--sx-line-strong);
  transition: stroke var(--sx-dur-2) var(--sx-ease-out), stroke-width var(--sx-dur-2) var(--sx-ease-out), fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-flow-diagram__node[data-tone="muted"] .sx-flow-diagram__box {
  fill: var(--sx-fill);
  stroke: var(--sx-line);
}

.sx-flow-diagram__node[data-tone="info"] .sx-flow-diagram__box {
  fill: var(--sx-info-soft);
  stroke: var(--sx-info-line);
}

.sx-flow-diagram__node[data-tone="accent"] .sx-flow-diagram__box {
  fill: var(--sx-accent-soft);
  stroke: var(--sx-accent-line);
}

.sx-flow-diagram__node[data-tone="success"] .sx-flow-diagram__box {
  fill: var(--sx-success-soft);
  stroke: var(--sx-success-line);
}

.sx-flow-diagram__node[data-tone="warning"] .sx-flow-diagram__box {
  fill: var(--sx-warning-soft);
  stroke: var(--sx-warning-line);
}

.sx-flow-diagram__node[data-tone="danger"] .sx-flow-diagram__box {
  fill: var(--sx-danger-soft);
  stroke: var(--sx-danger-line);
}

.sx-flow-diagram__node[data-active] .sx-flow-diagram__box {
  stroke: var(--sx-ink);
  stroke-width: 2;
}

.sx-flow-diagram__label {
  font-family: var(--sx-font);
  font-size: var(--sx-fs-base);
  font-weight: max(600, var(--sx-text-weight));
  fill: var(--sx-ink);
}

.sx-flow-diagram__sub {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-2xs);
  fill: var(--sx-muted);
}

/* A halo in the card colour keeps a label readable if it happens to cross a line. */
.sx-flow-diagram__edge-label {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-2xs);
  fill: var(--sx-muted);
  paint-order: stroke;
  stroke: var(--sx-card-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.sx-flow-diagram__edge-label[data-tone="danger"] {
  fill: var(--sx-danger-ink);
}

.sx-flow-diagram__edge-label[data-tone="success"] {
  fill: var(--sx-success-ink);
}

/* ---------- Error ---------- */
.sx-flow-diagram__error {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
  --sx-icon-size: 14px;
}

/* ---------- Demo layout: the frame narrows so the diagram stands up by itself ---------- */
.sx-flow-diagram-demo {
  display: grid;
  place-items: center;
  width: 696px;
  max-width: 100%;
  height: 450px;
}

.sx-flow-diagram-demo__frame {
  width: 100%;
  max-width: 100%;
  transition: width var(--sx-dur-5) var(--sx-ease-in-out);
}

.sx-flow-diagram-demo[data-narrow] .sx-flow-diagram-demo__frame {
  width: 396px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-flow-diagram-demo__frame {
    transition: none;
  }
}


/* ---- API Reference (api-reference) ---- */
/* ==========================================================================
   API Reference — endpoint rows that open into parameters, fields and JSON examples
   Root .sx-api-reference holds an optional head and one .sx-api-reference__op per endpoint.
   Row:     .sx-api-reference__toggle aria-expanded aria-controls; .sx-api-reference__op data-open
   Method:  .sx-api-reference__method data-method="get | post | put | patch | delete"
   Status:  .sx-api-reference__status data-kind="ok | error"
   Copy:    .sx-api-reference__copy data-state="idle | copied | failed"
   Tokens in examples carry data-token: comment, key, string, number, keyword.
   The rows follow their container; wide tables scroll inside .sx-api-reference__scroll.
   ========================================================================== */

.sx-api-reference {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-2);
  width: 100%;
  min-width: 0;
  container: sx-api-reference / inline-size;
}

/* ---------- Head ---------- */
.sx-api-reference__head {
  display: grid;
  gap: 2px;
  padding-bottom: 6px;
}

.sx-api-reference__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px var(--sx-space-3);
}

.sx-api-reference__title {
  font-size: var(--sx-fs-lg);
}

.sx-api-reference__count {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-api-reference__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px var(--sx-space-2);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-api-reference__base code {
  font-family: var(--sx-font-mono);
  color: var(--sx-ink-2);
  overflow-wrap: anywhere;
}

/* ---------- Row ---------- */
.sx-api-reference__op {
  min-width: 0;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  scroll-margin-top: var(--sx-space-4);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-api-reference__op[data-open] {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-api-reference__row {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
}

.sx-api-reference__toggle {
  display: flex;
  align-items: flex-start;
  gap: var(--sx-space-3);
  width: 100%;
  min-height: 44px;
  padding: 11px var(--sx-space-3);
  border-radius: var(--sx-r-lg);
  text-align: start;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-api-reference__toggle:hover {
  background: var(--sx-fill);
}

.sx-api-reference__toggle:active {
  background: var(--sx-fill-strong);
}

.sx-api-reference__toggle:focus-visible {
  outline-offset: -2px;
}

.sx-api-reference__method {
  flex: none;
  min-width: 56px;
  padding: 2px 6px;
  border-radius: var(--sx-r-xs);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-xs);
  font-weight: max(600, var(--sx-text-weight));
  line-height: 18px;
  text-align: center;
  color: var(--sx-info-ink);
  background: var(--sx-info-soft);
}

.sx-api-reference__method[data-method="post"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-api-reference__method[data-method="patch"],
.sx-api-reference__method[data-method="put"] {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
}

.sx-api-reference__method[data-method="delete"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-api-reference__main {
  display: grid;
  flex: 1 1 auto;
  gap: 2px;
  min-width: 0;
}

.sx-api-reference__path {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-base);
  line-height: 22px;
  overflow-wrap: anywhere;
  color: var(--sx-ink);
}

.sx-api-reference__param {
  color: var(--sx-accent-ink);
}

.sx-api-reference__text {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-text-weight);
  line-height: 1.45;
  color: var(--sx-muted);
}

.sx-api-reference__chevron {
  flex: none;
  margin-top: 3px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-api-reference__op[data-open] .sx-api-reference__chevron {
  transform: rotate(180deg);
}

/* ---------- Panel: opens with the grid trick ---------- */
.sx-api-reference__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-api-reference__op[data-open] .sx-api-reference__panel {
  grid-template-rows: 1fr;
}

.sx-api-reference__clip {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.sx-api-reference__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-5);
  padding: var(--sx-space-3) var(--sx-space-4) var(--sx-space-5);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* ---------- Access ---------- */
.sx-api-reference__access {
  display: grid;
  gap: 6px;
  font-size: var(--sx-fs-base);
  line-height: 1.5;
}

.sx-api-reference__access-row {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: var(--sx-space-3);
  color: var(--sx-ink-2);
}

.sx-api-reference__label {
  color: var(--sx-muted);
}

.sx-api-reference__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sx-api-reference__codes code {
  padding: 1px 6px;
  border-radius: var(--sx-r-xs);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  background: var(--sx-fill);
}

/* ---------- Sections and tables ---------- */
.sx-api-reference__section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-2);
  min-width: 0;
}

.sx-api-reference__heading {
  font-size: var(--sx-fs-base);
  letter-spacing: 0;
}

.sx-api-reference__hint {
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
}

.sx-api-reference__scroll {
  overflow-x: auto;
  border-radius: var(--sx-r-md);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-api-reference__scroll:focus-visible {
  outline-offset: -2px;
}

.sx-api-reference__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
}

.sx-api-reference__table th {
  padding: 7px 10px;
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  text-align: start;
  white-space: nowrap;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
}

.sx-api-reference__table td {
  padding: 7px 10px;
  vertical-align: top;
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-api-reference__field {
  display: inline-block;
  margin-inline-start: calc(var(--ar-depth, 0) * 14px);
  font-family: var(--sx-font-mono);
  color: var(--sx-ink);
  white-space: nowrap;
}

.sx-api-reference__type {
  font-family: var(--sx-font-mono);
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-api-reference__required {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink);
}

/* ---------- Example ---------- */
.sx-api-reference__example {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-md);
}

.sx-api-reference__example-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-2);
  min-height: 32px;
  padding: 0 5px 0 10px;
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-api-reference__copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--sx-h-xs);
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-api-reference__copy:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-api-reference__copy:active {
  background: var(--sx-fill);
}

.sx-api-reference__copy[data-state="copied"] {
  color: var(--sx-success-ink);
}

.sx-api-reference__copy[data-state="failed"] {
  color: var(--sx-danger-ink);
}

.sx-api-reference__copy[data-state="copied"] > .sx-icon {
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

@media (pointer: coarse) {
  .sx-api-reference__copy::after {
    content: "";
    position: absolute;
    inset: -10px -4px;
  }
}

.sx-api-reference__pre {
  padding: 10px 12px;
  overflow: auto;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  font-variant-ligatures: none;
  line-height: 1.6;
  color: var(--sx-ink);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-api-reference__pre:focus-visible {
  outline-offset: -2px;
}

.sx-api-reference__pre code {
  font: inherit;
}

.sx-api-reference__pre [data-token="comment"] {
  color: var(--sx-muted);
}

.sx-api-reference__pre [data-token="key"] {
  color: var(--sx-accent-ink);
}

.sx-api-reference__pre [data-token="string"] {
  color: var(--sx-success-ink);
}

.sx-api-reference__pre [data-token="number"] {
  color: var(--sx-mark-ink);
}

.sx-api-reference__pre [data-token="keyword"] {
  color: var(--sx-info-ink);
}

/* ---------- Responses ---------- */
.sx-api-reference__response {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-2);
  min-width: 0;
}

.sx-api-reference__response + .sx-api-reference__response {
  margin-top: var(--sx-space-3);
}

.sx-api-reference__response-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px var(--sx-space-2);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
}

.sx-api-reference__status {
  display: inline-block;
  padding: 1px 7px;
  border-radius: var(--sx-r-xs);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  font-weight: max(600, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
}

.sx-api-reference__status[data-kind="ok"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-api-reference__status[data-kind="error"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-api-reference__errors {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sx-space-2);
  margin-top: var(--sx-space-3);
  font-size: var(--sx-fs-base);
}

.sx-api-reference__errors a {
  color: var(--sx-accent-ink);
  border-radius: var(--sx-r-xs);
}

/* ---------- Empty, loading and error ---------- */
.sx-api-reference__state {
  display: grid;
  justify-items: start;
  gap: var(--sx-space-2);
  padding: var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-api-reference__state[data-kind="error"] {
  color: var(--sx-danger-ink);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-api-reference__skeleton {
  height: 44px;
  border-radius: var(--sx-r-lg);
}

@container sx-api-reference (max-width: 480px) {
  .sx-api-reference__toggle {
    gap: var(--sx-space-2);
    padding-inline: 10px;
  }

  .sx-api-reference__body {
    padding-inline: var(--sx-space-3);
  }

  .sx-api-reference__access-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
}

/* ---------- Demo layout: a documentation column that scrolls inside its box ---------- */
.sx-api-reference-demo {
  width: 720px;
  max-width: 100%;
  height: 480px;
  padding: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sx-api-reference__panel {
    transition-duration: 1ms;
  }

  .sx-api-reference__copy[data-state="copied"] > .sx-icon {
    animation-name: sx-fade-in;
  }
}


/* ---- Tour (tour) ---- */
/* ==========================================================================
   Tour — steps as data, a spotlight on the target and a card that stays on screen
   Root .sx-tour is the whole layer: fixed over the viewport, or, with data-bounded, absolute
   over one positioned box (a preview, an embedded screen).
     data-state="open | closing", data-moving="spot | all" (glides only between steps),
     data-sheet (the box is narrow: the card becomes a sheet), data-size="sm | md | lg"
   .sx-tour__spot is the hole and the dark backdrop in one element; data-lit when it has a target.
   .sx-tour__card (role="dialog") is moved by script; data-mode="top | right | bottom | left |
   center | sheet-bottom | sheet-top", --tour-arrow places the arrow.
   .sx-tour__panel (.sx-pop) fades and scales inside it.
   ========================================================================== */

.sx-tour {
  position: fixed;
  inset: 0;
  z-index: var(--sx-z-tour);
  overflow: hidden;
  color: var(--sx-ink);
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tour[data-bounded] {
  position: absolute;
}

.sx-tour[data-state="closing"] {
  opacity: 0;
  pointer-events: none;
}

/* Keeps clicks away from the page while the tour runs. */
.sx-tour__blocker {
  position: absolute;
  inset: 0;
}

/* One element for the hole and the backdrop: a shadow wider than any screen. Two layers, because
   the light mode overlay alone is too thin for a spotlight. */
.sx-tour__spot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-radius: var(--sx-r-lg);
  box-shadow:
    0 0 0 max(200vmax, 2400px) var(--sx-overlay),
    0 0 0 max(200vmax, 2400px) var(--sx-overlay);
  pointer-events: none;
}

.sx-tour__spot[data-lit]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sx-surface) 85%, transparent);
}

.sx-tour[data-moving] .sx-tour__spot {
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    width var(--sx-dur-4) var(--sx-ease-out),
    height var(--sx-dur-4) var(--sx-ease-out);
}

/* ---------- Card: the outer box moves, the panel fades and scales ---------- */
.sx-tour__card {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: min(348px, calc(100% - 24px));
  max-height: calc(100% - 24px);
  outline: none;
}

.sx-tour[data-sheet] .sx-tour__card {
  width: calc(100% - 24px);
}

.sx-tour[data-moving="all"] .sx-tour__card {
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-tour__panel {
  --sx-pop-origin: center;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
}

.sx-tour__arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--sx-surface);
  transform: rotate(45deg);
}

.sx-tour__card:is([data-mode="bottom"], [data-mode="top"]) .sx-tour__arrow {
  left: calc(var(--tour-arrow, 24px) - 6px);
}

.sx-tour__card[data-mode="bottom"] .sx-tour__arrow {
  top: -5px;
}

.sx-tour__card[data-mode="top"] .sx-tour__arrow {
  bottom: -5px;
}

.sx-tour__card:is([data-mode="left"], [data-mode="right"]) .sx-tour__arrow {
  top: calc(var(--tour-arrow, 24px) - 6px);
}

.sx-tour__card[data-mode="left"] .sx-tour__arrow {
  right: -5px;
}

.sx-tour__card[data-mode="right"] .sx-tour__arrow {
  left: -5px;
}

.sx-tour__card:is([data-mode="center"], [data-mode^="sheet"]) .sx-tour__arrow {
  display: none;
}

/* On a phone the sheet rises from its edge instead of scaling in. */
.sx-tour__card[data-mode="sheet-bottom"] .sx-tour__panel:not([data-state="open"]) {
  transform: translateY(16px);
}

.sx-tour__card[data-mode="sheet-top"] .sx-tour__panel:not([data-state="open"]) {
  transform: translateY(-16px);
}

.sx-tour__progress.sx-progress {
  flex: none;
  height: 3px;
  margin: var(--sx-space-4) var(--sx-space-5) 0;
}

.sx-tour__body {
  display: grid;
  flex: 1 1 auto;
  gap: var(--sx-space-2);
  min-height: 0;
  padding: var(--sx-space-3) var(--sx-space-5) var(--sx-space-4);
  overflow-y: auto;
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-tour__count {
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-tour__title {
  font-size: var(--sx-fs-xl);
  color: var(--sx-ink);
}

.sx-tour__text {
  font-size: var(--sx-fs-md);
  line-height: var(--sx-lh);
  color: var(--sx-ink-2);
}

.sx-tour__footer {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--sx-space-5) var(--sx-space-4);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-tour__footer-end {
  display: flex;
  gap: var(--sx-space-2);
  margin-inline-start: auto;
}

/* Fingers get 44px wherever the card is a sheet, and on the large size. */
.sx-tour:is([data-sheet], [data-size="lg"]) .sx-tour__footer .sx-btn {
  --_h: 44px;
  --_px: 16px;
  --_fs: var(--sx-fs-md);
  --_r: var(--sx-r-lg);
}

.sx-tour:not([data-bounded])[data-sheet] .sx-tour__footer {
  padding-bottom: calc(var(--sx-space-4) + env(safe-area-inset-bottom));
}

/* ---------- Demo layout: a small product screen with its own tour ---------- */
.sx-tour-demo {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 720px;
  max-width: 100%;
  height: 480px;
  overflow: hidden;
  overflow: clip;
  border-radius: var(--sx-card-radius);
  color: var(--sx-ink);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
  container: sx-tour-demo / inline-size;
}

.sx-tour-demo__bar {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sx-space-3);
  height: 52px;
  padding: 0 var(--sx-space-4);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-tour-demo__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sx-fs-md);
  font-weight: max(600, var(--sx-text-weight));
  white-space: nowrap;
}

.sx-tour-demo__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-xs);
  color: var(--sx-on-primary);
  background: var(--sx-primary);
}

.sx-tour-demo__tabs {
  display: flex;
  gap: 2px;
  margin-inline-start: var(--sx-space-2);
}

.sx-tour-demo__tab {
  height: var(--sx-h-sm);
  padding: 0 10px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-base);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-tour-demo__tab:hover {
  color: var(--sx-ink);
}

.sx-tour-demo__tab[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-tour-demo__start {
  margin-inline-start: auto;
}

.sx-tour-demo__page {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--sx-space-4);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-tour-demo__page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-3);
  margin-bottom: var(--sx-space-3);
}

.sx-tour-demo__heading {
  font-size: var(--sx-fs-lg);
}

.sx-tour-demo__sub {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-tour-demo__list {
  display: grid;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-tour-demo__row {
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  min-height: 44px;
  padding: 0 var(--sx-space-3);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
}

.sx-tour-demo__row + .sx-tour-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-tour-demo__id {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
}

.sx-tour-demo__amount {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
}

.sx-tour-demo__panel {
  padding: var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-tour-demo__panel + .sx-tour-demo__panel {
  margin-top: var(--sx-space-3);
}

.sx-tour-demo__panel > .sx-tour-demo__row {
  min-height: 38px;
  padding-inline: 0;
}

.sx-tour-demo__figure {
  margin-top: 4px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  font-variant-numeric: tabular-nums;
}

.sx-tour-demo__panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-3);
}

.sx-tour-demo__skeleton {
  height: 104px;
  border-radius: var(--sx-r-lg);
}

@container sx-tour-demo (max-width: 480px) {
  .sx-tour-demo__brand-name {
    display: none;
  }

  .sx-tour-demo__tabs {
    margin-inline-start: 0;
  }
}

/* Spatial movement goes; the card and the spotlight simply appear in their place. */
@media (prefers-reduced-motion: reduce) {
  .sx-tour[data-moving] .sx-tour__spot,
  .sx-tour[data-moving="all"] .sx-tour__card {
    transition: none;
  }

  .sx-tour__panel:not([data-state="open"]),
  .sx-tour__card:is([data-mode="sheet-bottom"], [data-mode="sheet-top"]) .sx-tour__panel:not([data-state="open"]) {
    transform: none;
  }

  .sx-tour__progress .sx-progress__bar {
    transition: none;
  }
}


/* ---- Info Tip (info-tip) ---- */
/* ==========================================================================
   Info Tip — a small icon button that opens a short explanation
   Root .sx-info-tip wraps __button (.sx-btn ghost icon at --sx-h-xs) and __panel (.sx-pop .sx-menu,
   role="dialog"). The panel is placed by script from offset metrics: --it-x, --it-y, --it-max,
   data-side="bottom | top". Its width comes from --sx-info-tip-width.
   ========================================================================== */

.sx-info-tip {
  position: relative;
  display: inline-flex;
  flex: none;
  vertical-align: middle;
}

.sx-info-tip__button.sx-btn {
  --_h: var(--sx-h-xs);
  --_icon: 14px;
  color: var(--sx-muted);
}

.sx-info-tip__button.sx-btn:hover,
.sx-info-tip__button.sx-btn[aria-expanded="true"] {
  color: var(--sx-ink);
}

.sx-info-tip__button.sx-btn[aria-expanded="true"] {
  background-color: var(--_bg-hover);
}

/* A larger hit area than the icon, without changing the height of the row. */
.sx-info-tip__button.sx-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
}

@media (pointer: coarse) {
  .sx-info-tip__button.sx-btn::after {
    inset: -10px;
  }
}

.sx-info-tip__panel {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--sx-z-pop);
  display: grid;
  justify-items: start;
  gap: var(--sx-space-1);
  width: min(var(--sx-info-tip-width, 288px), var(--it-max, 92vw));
  min-width: 0;
  padding: var(--sx-space-3) var(--sx-space-4);
  text-align: start;
  white-space: normal;
  letter-spacing: 0;
  translate: var(--it-x, 0px) var(--it-y, 0px);
  --sx-pop-origin: top left;
}

.sx-info-tip__panel[data-side="top"] {
  --sx-pop-origin: bottom left;
}

.sx-info-tip__panel[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-info-tip__panel:focus {
  outline: none;
}

.sx-info-tip__panel:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: 0;
}

.sx-info-tip__title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  color: var(--sx-ink);
}

.sx-info-tip__text {
  margin: 0;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-text-weight);
  line-height: var(--sx-lh);
  color: var(--sx-ink-2);
}

.sx-info-tip__link {
  margin-top: var(--sx-space-1);
  border-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--sx-accent-line);
  text-underline-offset: 0.22em;
  cursor: pointer;
  transition: text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-info-tip__link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Demo layout: a sales summary and a setting ---------- */
.sx-info-tip-demo {
  display: grid;
  width: 460px;
  container: sx-info-tip-demo / inline-size;
}

.sx-pageview .sx-info-tip-demo,
.sx-pageview--react .sx-info-tip-demo {
  width: min(460px, calc(100vw - 24px));
  margin: 12px;
}

.sx-info-tip-demo__head {
  padding: 14px 16px 2px;
  font-size: var(--sx-fs-md);
}

.sx-info-tip-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 8px 16px 14px;
}

.sx-info-tip-demo__stat {
  display: grid;
  align-content: start;
  gap: 2px;
}

.sx-info-tip-demo__label {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--sx-h-xs);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-info-tip-demo__value {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  font-variant-numeric: tabular-nums;
}

.sx-info-tip-demo__note {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-info-tip-demo__rows {
  margin: 0;
  padding: 0 16px;
  list-style: none;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-info-tip-demo__rows > li {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  color: var(--sx-ink-2);
}

.sx-info-tip-demo__rows > li + li {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-info-tip-demo__amount {
  margin-inline-start: auto;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-info-tip-demo__setting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-info-tip-demo__setting-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sx-info-tip-demo__setting-title {
  display: flex;
  align-items: center;
  gap: 2px;
  font-weight: max(500, var(--sx-text-weight));
}

.sx-info-tip-demo__setting-hint {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

@container sx-info-tip-demo (max-width: 400px) {
  .sx-info-tip-demo__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ---- Company Logo (company-logo) ---- */
/* ==========================================================================
   Company Logo — a tenant's logo, kept tidy whatever they uploaded
   Root attributes: data-shape="rounded | circle | square", data-background="none | surface | primary",
   data-fit="contain | cover", data-state="loading | loaded | fallback".
   Size: --sx-company-logo-size, a token by default (--sx-h-md), set by the size prop or your own class.
   ========================================================================== */

.sx-company-logo {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--sx-company-logo-size, var(--sx-h-md));
  height: var(--sx-company-logo-size, var(--sx-h-md));
  overflow: hidden;
  vertical-align: middle;
  user-select: none;
  transition: border-radius var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

/* 28% keeps the corner in proportion at every size. */
.sx-company-logo[data-shape="rounded"] {
  border-radius: 28%;
}

.sx-company-logo[data-shape="circle"] {
  border-radius: 50%;
}

.sx-company-logo[data-shape="square"] {
  border-radius: 0;
}

.sx-company-logo[data-background="surface"] {
  background: var(--sx-surface);
}

.sx-company-logo[data-background="primary"] {
  background: var(--sx-primary-bg);
}

/* A line over the image, so the surface keeps its edge on a panel of the same colour. */
.sx-company-logo[data-background="surface"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  pointer-events: none;
}

.sx-company-logo__img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-company-logo[data-state="loaded"] .sx-company-logo__img {
  opacity: 1;
}

.sx-company-logo[data-fit="cover"] .sx-company-logo__img {
  object-fit: cover;
}

/* A whole logo on a backing gets room, so it does not touch the edge. */
.sx-company-logo[data-fit="contain"]:not([data-background="none"]) .sx-company-logo__img {
  padding: 12%;
}

/* While the picture loads, a quiet tile holds the place. */
.sx-company-logo[data-state="loading"][data-background="none"] {
  background: var(--sx-fill);
}

/* ---------- Fallback: the first letter of the name ---------- */
.sx-company-logo__initial {
  font-size: calc(var(--sx-company-logo-size, var(--sx-h-md)) * 0.46);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--sx-ink-2);
}

.sx-company-logo[data-state="fallback"][data-background="none"] {
  background: var(--sx-fill-strong);
}

.sx-company-logo[data-background="primary"] .sx-company-logo__initial {
  color: var(--sx-on-primary);
}

/* ---------- Demo layout: a workspace header, its settings and a tenant list ---------- */
.sx-company-logo-demo {
  display: grid;
  width: 460px;
  overflow: hidden;
  container: sx-company-logo-demo / inline-size;
}

.sx-pageview .sx-company-logo-demo,
.sx-pageview--react .sx-company-logo-demo {
  width: min(460px, calc(100vw - 24px));
  margin: 12px;
}

.sx-company-logo-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  --sx-company-logo-size: var(--sx-h-lg);
}

.sx-company-logo-demo__who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-company-logo-demo__name {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
}

.sx-company-logo-demo__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-company-logo-demo__bar > .sx-chip {
  margin-inline-start: auto;
}

.sx-company-logo-demo__settings {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
}

.sx-company-logo-demo__setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-company-logo-demo__tenants {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 12px 12px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-company-logo-demo__tenant {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  text-align: center;
  font-size: var(--sx-fs-xs);
  color: var(--sx-ink-2);
}

.sx-company-logo-demo__tenant > span:last-child {
  line-height: 1.25;
}

.sx-company-logo-demo__tenant small {
  display: block;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

@container sx-company-logo-demo (max-width: 400px) {
  .sx-company-logo-demo__tenants {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
  }
}


/* ---- Theme Panel (theme-panel) ---- */
/* ==========================================================================
   Theme Panel — a theme customizer as a component, for a page or a Slide Panel
   Root .sx-theme-panel is a container: sections and preview stack below 620px, sit
   side by side above it, and the sections take two columns from 800px.
   Lg size: .sx-theme-panel--lg keeps every touch target at 44px.
   Detail: the preview takes data-detail from the value, and marks what Simple hides with
   data-sx-extra (the rule is in base.css).
   States: options aria-checked; .sx-theme-panel__contrast data-state="idle | ok | warn";
   .sx-theme-panel__status data-state="clean | unsaved | saving | saved | error".
   The preview element carries data-theme, data-mode and inline custom properties, so the
   chosen theme shows there and nowhere else until the app applies the CSS.
   ========================================================================== */

.sx-theme-panel {
  --tp-seg-h: var(--sx-h-sm);
  --tp-swatch-size: var(--sx-h-md);
  --tp-bar-bg: var(--sx-surface);
  container: theme-panel / inline-size;
  display: grid;
  width: 100%;
  min-width: 0;
  color: var(--sx-ink);
}

.sx-theme-panel--lg {
  --tp-seg-h: max(44px, var(--sx-h-lg));
  --tp-swatch-size: max(44px, var(--sx-h-lg));
}

.sx-theme-panel--lg .sx-btn {
  --_h: max(44px, var(--sx-h-lg));
}

.sx-theme-panel--lg .sx-theme-panel__hex {
  height: var(--tp-swatch-size);
}

.sx-theme-panel--lg .sx-theme-panel__clear {
  width: 40px;
  height: 40px;
}

.sx-theme-panel--lg .sx-theme-panel__range-input {
  height: 44px;
}

/* ---------- Layout ---------- */
.sx-theme-panel__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sx-space-5);
  min-width: 0;
}

.sx-theme-panel__sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sx-space-5) var(--sx-space-6);
  min-width: 0;
}

.sx-theme-panel__section {
  container: theme-panel-section / inline-size;
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.sx-theme-panel__section + .sx-theme-panel__section {
  padding-top: var(--sx-space-5);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-theme-panel__title {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  color: var(--sx-ink);
}

.sx-theme-panel__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

@container theme-panel (min-width: 620px) {
  .sx-theme-panel__layout {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 280px);
    align-items: start;
  }

  .sx-theme-panel__side {
    position: sticky;
    top: var(--sx-space-4);
  }
}

@container theme-panel (min-width: 800px) {
  .sx-theme-panel__sections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-theme-panel__section[data-section="colour"] {
    grid-row: span 2;
  }

  .sx-theme-panel__section[data-section="text"] {
    padding-top: 0;
    box-shadow: none;
  }
}

/* Mode and detail sit side by side, their one line of explanation under both. */
.sx-theme-panel__pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
  min-width: 0;
}

.sx-theme-panel__pair > .sx-hint {
  grid-column: 1 / -1;
}

@container theme-panel-section (max-width: 379px) {
  .sx-theme-panel__pair .sx-theme-panel__seg-option {
    padding-inline: 0;
    font-size: var(--sx-fs-2xs);
  }

  .sx-theme-panel__pair .sx-theme-panel__seg-option > .sx-icon {
    display: none;
  }
}

@container theme-panel-section (max-width: 239px) {
  .sx-theme-panel__pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Segmented row ---------- */
.sx-theme-panel__seg {
  position: relative;
  display: flex;
  height: var(--tp-seg-h);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
  user-select: none;
}

/* Options share the width equally, so the thumb only needs the count and the index. */
.sx-theme-panel__thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--tp-n));
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(calc(100% * var(--tp-i)));
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
  pointer-events: none;
}

.sx-theme-panel__seg-option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 3px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-theme-panel__seg-option > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-theme-panel__seg-option > .sx-icon {
  flex: none;
  --sx-icon-size: 13px;
}

.sx-theme-panel__seg-option:hover {
  color: var(--sx-ink-2);
}

.sx-theme-panel__seg-option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-theme-panel__seg-option:focus-visible {
  outline-offset: 0;
}

/* ---------- Option cards ---------- */
.sx-theme-panel__presets,
.sx-theme-panel__weights,
.sx-theme-panel__fonts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

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

.sx-theme-panel__preset,
.sx-theme-panel__weight,
.sx-theme-panel__font {
  position: relative;
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  min-height: 44px;
  padding: 7px 9px;
  border-radius: var(--sx-r-md);
  text-align: left;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-theme-panel__preset {
  padding: 4px 4px 5px;
}

.sx-theme-panel__preset:hover,
.sx-theme-panel__weight:hover,
.sx-theme-panel__font:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-theme-panel__preset[aria-checked="true"],
.sx-theme-panel__weight[aria-checked="true"],
.sx-theme-panel__font[aria-checked="true"] {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--sx-accent);
}

.sx-theme-panel__preset:focus-visible,
.sx-theme-panel__weight:focus-visible,
.sx-theme-panel__font:focus-visible {
  outline-offset: 1px;
}

/* The one springing moment: the tick pops in on the chosen card. */
.sx-theme-panel__tick {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  color: var(--sx-on-accent);
  background: var(--sx-accent);
  opacity: 0;
  transform: scale(0.4);
  transition:
    transform var(--sx-dur-3) var(--sx-ease-spring),
    opacity var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 10px;
}

[aria-checked="true"] > .sx-theme-panel__tick {
  opacity: 1;
  transform: none;
}

.sx-theme-panel__preset-name,
.sx-theme-panel__weight-name,
.sx-theme-panel__font-name {
  display: block;
  font-size: var(--sx-fs-sm);
  line-height: 1.35;
}

.sx-theme-panel__preset-name {
  padding-inline: 2px;
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-ink-2);
}

.sx-theme-panel__weight-text,
.sx-theme-panel__font-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-theme-panel__weight-name,
.sx-theme-panel__font-name {
  padding-right: 14px;
}

.sx-theme-panel__font-name {
  font-weight: max(500, var(--sx-text-weight));
}

.sx-theme-panel__weight-sample,
.sx-theme-panel__font-sample {
  font-size: var(--sx-fs-xs);
  line-height: 1.35;
  color: var(--sx-muted);
}

.sx-theme-panel__weight-sample {
  font-variant-numeric: tabular-nums;
}

@container theme-panel-section (min-width: 460px) {
  .sx-theme-panel__weights {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

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

/* ---------- Preset picture: its colours are data, set inline on the element ---------- */
.sx-theme-panel__art {
  --art-shell: var(--sx-shell);
  --art-surface: var(--sx-surface);
  --art-ink: var(--sx-ink);
  --art-muted: var(--sx-faint);
  --art-primary: var(--sx-primary);
  --art-accent: var(--sx-accent);
  display: block;
  padding: 5px;
  border-radius: calc(var(--sx-r-md) - 3px);
  background: var(--art-shell);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-theme-panel__art-card {
  display: grid;
  gap: 4px;
  padding: 5px;
  border-radius: var(--sx-r-xs);
  background: var(--art-surface);
}

.sx-theme-panel__art-line {
  display: block;
  height: 3px;
  border-radius: var(--sx-r-pill);
  background: var(--art-ink);
}

.sx-theme-panel__art-line--short {
  width: 62%;
  background: var(--art-muted);
}

.sx-theme-panel__art-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sx-theme-panel__art-button {
  flex: 1;
  height: 9px;
  border-radius: 3px;
  background: var(--art-primary);
}

.sx-theme-panel__art-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--art-accent);
}

/* ---------- Custom colours ---------- */
.sx-theme-panel__custom {
  display: grid;
  min-width: 0;
}

.sx-theme-panel__colours {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
}

.sx-theme-panel__colour {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-theme-panel__colour-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sx-theme-panel__swatch {
  position: relative;
  flex: none;
  width: var(--tp-swatch-size);
  height: var(--tp-swatch-size);
  overflow: hidden;
  border-radius: var(--sx-r-md);
  background: var(--tp-swatch);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-theme-panel__swatch:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-theme-panel__swatch:has(.sx-theme-panel__picker:focus-visible) {
  box-shadow: var(--sx-focus-ring);
}

.sx-theme-panel__picker {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.sx-theme-panel__hex-wrap {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

.sx-theme-panel__hex {
  padding-inline: 6px 20px;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
}

.sx-theme-panel__hex::placeholder {
  font-family: var(--sx-font);
}

.sx-theme-panel__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  transform: translateY(-50%);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 12px;
}

.sx-theme-panel__clear:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-theme-panel__clear:focus-visible {
  outline-offset: -1px;
}

.sx-theme-panel__colour .sx-error-text {
  grid-column: 1 / -1;
}

/* ---------- Contrast note: opens and closes with the grid trick ---------- */
.sx-theme-panel__contrast {
  display: grid;
  min-width: 0;
}

.sx-theme-panel__reveal {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  opacity: 0;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-theme-panel__reveal[data-open] {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.sx-theme-panel__reveal-clip {
  min-height: 0;
  overflow: hidden;
}

.sx-theme-panel__contrast-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
  --sx-icon-size: 14px;
}

.sx-theme-panel__contrast-warn {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 8px;
  margin-top: 6px;
  padding: 7px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.4;
  color: var(--sx-ink-2);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
  --sx-icon-size: 14px;
}

.sx-theme-panel__contrast-warn > .sx-icon {
  margin-top: 1px;
  color: var(--sx-warning-ink);
}

.sx-theme-panel__contrast-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-theme-panel__contrast-title {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-theme-panel__contrast-list {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-theme-panel__contrast-fixes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.sx-theme-panel__contrast-fixes:empty {
  display: none;
}

.sx-theme-panel__fix-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tp-swatch);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

/* ---------- Ranges ---------- */
.sx-theme-panel__ranges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
}

.sx-theme-panel__range {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sx-theme-panel__range-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.sx-theme-panel__range-value {
  flex: none;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-theme-panel__range-input {
  width: 100%;
  margin: 0;
  accent-color: var(--sx-accent);
  cursor: pointer;
}

/* ---------- Preview ---------- */
.sx-theme-panel__side {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sx-theme-panel__side-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 8px;
}

/* Tokens arrive here inline, so the stage sets again what <body> sets on a real page. */
.sx-theme-panel__stage {
  min-width: 0;
  padding: var(--sx-space-3);
  border-radius: var(--sx-r-xl);
  font-family: var(--sx-font);
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-text-weight);
  line-height: var(--sx-lh);
  color: var(--sx-ink);
  background: var(--sx-shell);
  box-shadow: var(--sx-ring);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out);
}

/* The preview shows its own choice, even when the page around it is already on Simple. */
.sx-theme-panel__stage[data-detail="informative"] [data-sx-extra] {
  display: revert !important;
}

.sx-theme-panel__sample {
  display: grid;
  gap: var(--sx-space-3);
  padding: var(--sx-space-3);
}

.sx-theme-panel__sample-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sx-space-2);
}

.sx-theme-panel__sample-title {
  font-size: var(--sx-fs-xl);
}

.sx-theme-panel__sample-meta {
  margin-top: 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-theme-panel__sample-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-theme-panel__sample-list li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sx-space-3);
  padding: 6px 0;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-theme-panel__sample-list li > span:first-child {
  display: grid;
  min-width: 0;
}

.sx-theme-panel__sample-list b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-theme-panel__sample-list small {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-theme-panel__sample-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sx-space-3);
}

.sx-theme-panel__sample-total strong {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-heading-weight);
}

.sx-theme-panel__sample-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sx-space-2);
}

.sx-theme-panel__sample-actions .sx-btn--primary {
  flex: 1 0 auto;
}

/* ---------- Actions: stay in reach while a long panel scrolls ---------- */
.sx-theme-panel__actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: var(--sx-space-4);
  padding-block: 12px;
  background: var(--tp-bar-bg);
  /* The second shadow covers the padding of a scrolling parent, so nothing shows under the bar. */
  box-shadow: inset 0 1px 0 var(--sx-line-soft), 0 var(--sx-space-4) 0 var(--tp-bar-bg);
}

.sx-theme-panel__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-theme-panel__status-mark {
  display: none;
  flex: none;
}

.sx-theme-panel__status[data-state="unsaved"] {
  color: var(--sx-ink-2);
}

.sx-theme-panel__status[data-state="unsaved"] .sx-theme-panel__status-mark {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-warning);
}

.sx-theme-panel__status[data-state="saved"] {
  color: var(--sx-success-ink);
}

.sx-theme-panel__status[data-state="error"] {
  color: var(--sx-danger-ink);
}

.sx-theme-panel__status[data-state="saved"] .sx-theme-panel__status-mark,
.sx-theme-panel__status[data-state="error"] .sx-theme-panel__status-mark {
  display: block;
}

.sx-theme-panel__buttons {
  display: flex;
  gap: 8px;
  margin-inline-start: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sx-theme-panel__thumb,
  .sx-theme-panel__tick {
    transition: opacity var(--sx-dur-1) var(--sx-ease-out);
  }

  .sx-theme-panel__tick {
    transform: none;
  }

  .sx-theme-panel__reveal {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
  }
}

/* ---------- Demo: an appearance page fitted into the preview box ---------- */
.sx-theme-panel-demo {
  width: 860px;
  max-width: 100%;
  padding: var(--sx-space-4);
  border-radius: var(--sx-card-radius);
  background: var(--sx-surface);
  box-shadow: var(--sx-card-shadow);
}

@container theme-panel (min-width: 620px) {
  .sx-theme-panel-demo .sx-theme-panel__sections {
    max-height: 478px;
    margin-right: -8px;
    padding-right: 8px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* The gallery stage is transformed, which would throw off anything sticky. */
  .sx-theme-panel-demo .sx-theme-panel__side {
    position: static;
  }

  .sx-theme-panel-demo .sx-theme-panel__actions {
    position: static;
    padding-bottom: 0;
    box-shadow: inset 0 1px 0 var(--sx-line-soft);
  }
}


/* ---- Ready Orders (ready-orders) ---- */
/* ==========================================================================
   Ready Orders — the counter staff side of a queue board: call a number, mark it collected
   Root:  container (rows stack below 520px), data-loading while the first list arrives
   Rows:  data-flip-key, data-called when called at least once, data-error after a failed action
   One grid on the list, with the rows and actions as subgrid and contents, so the two large buttons
   line up down the list whatever their labels are in the product's language.
   ========================================================================== */

.sx-ready-orders {
  container: ready-orders / inline-size;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-height: 100%;
  overflow: hidden;
}

/* ---------- Head: how many, and how many still need a call ---------- */
.sx-ready-orders__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-ready-orders__title {
  font-size: var(--sx-fs-md);
}

.sx-ready-orders__count {
  font-variant-numeric: tabular-nums;
}

.sx-ready-orders__summary {
  margin-left: auto;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  text-align: right;
}

/* ---------- List ---------- */
.sx-ready-orders__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-content: start;
  min-height: 0;
  column-gap: 12px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-ready-orders__row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  padding: 11px 16px;
  background: var(--sx-card-bg);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-ready-orders__row:last-child {
  box-shadow: none;
}

.sx-ready-orders__number {
  display: grid;
  min-width: 72px;
  line-height: 1.1;
}

.sx-ready-orders__number > b {
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-ready-orders__channel {
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-text-weight);
  white-space: nowrap;
  color: var(--sx-muted);
}

/* ---------- Call status, time and the TV marker ---------- */
.sx-ready-orders__info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-ready-orders__status {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  --sx-icon-size: 14px;
}

.sx-ready-orders__status > .sx-icon {
  flex: none;
}

.sx-ready-orders__row[data-called] .sx-ready-orders__status {
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-accent-ink);
}

.sx-ready-orders__status-text {
  display: inline-block;
  animation: ro-status-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-ready-orders__since {
  font-variant-numeric: tabular-nums;
}

.sx-ready-orders__hidden {
  gap: 4px;
  --sx-icon-size: 12px;
}

.sx-ready-orders__failed {
  flex-basis: 100%;
  color: var(--sx-danger-ink);
}

/* ---------- Two large actions, side by side in the list's own columns ---------- */
.sx-ready-orders__actions {
  display: contents;
}

.sx-ready-orders .sx-ready-orders__action {
  --_h: max(44px, var(--sx-h-lg, 40px));
}

/* ---------- Empty and loading ---------- */
.sx-ready-orders__empty {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  min-height: 200px;
  padding: 24px;
  text-align: center;
}

.sx-ready-orders__empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 18px;
}

.sx-ready-orders__empty-title {
  font-size: var(--sx-fs-base);
  font-weight: 600;
}

.sx-ready-orders__empty-lead {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-ready-orders__loading {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
}

.sx-ready-orders__loading > .sx-skeleton {
  height: 56px;
  border-radius: var(--sx-r-md);
}

/* ---------- Narrow column: the number beside its status, the buttons sharing the row under them ---------- */
@container ready-orders (max-width: 519px) {
  .sx-ready-orders__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-ready-orders__row {
    row-gap: 10px;
  }

  .sx-ready-orders__action {
    min-width: 0;
  }
}

/* ---------- Demo layout ---------- */
.sx-ready-orders-demo {
  width: 580px;
  max-width: 100%;
  height: 372px;
}

@media (max-width: 620px) {
  .sx-ready-orders-demo {
    height: auto;
  }
}

@keyframes ro-status-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.96);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-ready-orders__status-text {
    animation-name: sx-fade-in;
  }
}


/* ---- Sourced Reply (sourced-reply) ---- */
/* ==========================================================================
   Sourced Reply — an AI answer that streams in, with numbered sources
   Root: data-state="reading | streaming | done | stopped", data-ready once measured
   Source cards: data-state="pending | reading | read", data-tone="1-4",
                 data-active while their citation is hovered or focused
   Citation chips: data-active. Copy button: data-copied. Rating buttons: aria-pressed.
   ========================================================================== */

.sx-sourced-reply {
  width: 440px;
}

.sx-sourced-reply__question {
  padding: 16px 18px 0;
  font-size: var(--sx-fs-lg);
  line-height: 1.35;
}

/* ---------- Sources ---------- */
.sx-sourced-reply__sources {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 12px 14px 0;
}

.sx-sourced-reply__slot {
  display: grid;
  min-width: 0;
}

.sx-sourced-reply__source {
  --as-tone: var(--sx-c1);
  position: relative;
  display: grid;
  align-content: space-between;
  gap: 6px;
  min-width: 0;
  height: 64px;
  padding: 8px 7px 7px;
  overflow: hidden;
  border-radius: var(--sx-r-md);
  color: inherit;
  text-decoration: none;
  background: var(--sx-fill);
  transform: scale(0.97);
  transition:
    background-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sourced-reply__source[data-tone="2"] { --as-tone: var(--sx-c2); }
.sx-sourced-reply__source[data-tone="3"] { --as-tone: var(--sx-c3); }
.sx-sourced-reply__source[data-tone="4"] { --as-tone: var(--sx-c4); }

/* Title and domain rise in once the source is read; the domain trails slightly. */
.sx-sourced-reply__source > * {
  min-width: 0;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    filter var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sourced-reply__source > :last-child {
  transition-delay: 70ms;
}

.sx-sourced-reply__source:not([data-state="read"]) > * {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
  transition-duration: var(--sx-dur-2);
  transition-delay: 0s;
}

.sx-sourced-reply__source[data-state="read"] {
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: none;
}

.sx-sourced-reply__source[data-state="read"]:hover {
  background: var(--sx-raised-hover);
}

/* The slot being read carries a soft sweep */
.sx-sourced-reply__source::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--sx-fill-strong), transparent);
  opacity: 0;
  transform: translateX(-100%);
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-sourced-reply__source[data-state="reading"]::after {
  opacity: 1;
  animation: as-sweep 1.15s var(--sx-ease-in-out) infinite;
}

/* Hovering a citation rings its source */
.sx-sourced-reply__source[data-state="read"][data-active] {
  box-shadow: 0 0 0 1px var(--sx-accent), 0 0 0 4px var(--sx-accent-soft), var(--sx-shadow-1);
  transform: translateY(-2px);
}

.sx-sourced-reply__source-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  line-height: 1.32;
  color: var(--sx-ink);
}

.sx-sourced-reply__num {
  display: inline-grid;
  place-items: center;
  min-width: 14px;
  height: 14px;
  margin-right: 4px;
  padding: 0 3px;
  border-radius: var(--sx-r-pill);
  vertical-align: 1px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-sourced-reply__source[data-active] .sx-sourced-reply__num {
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

.sx-sourced-reply__source-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sx-sourced-reply__tile {
  display: grid;
  place-items: center;
  width: 13px;
  height: 13px;
  flex: none;
  border-radius: var(--sx-r-xs);
  font-size: 8px;
  font-weight: 700;
  line-height: 1;
  color: color-mix(in srgb, var(--as-tone) 68%, var(--sx-ink));
  background: color-mix(in srgb, var(--as-tone) 16%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--as-tone) 22%, transparent);
}

.sx-sourced-reply__domain {
  min-width: 0;
  font-size: var(--sx-fs-2xs);
  line-height: 1.2;
  color: var(--sx-muted);
}

/* ---------- Answer ---------- */
/* The wrapper eases to the measured height of the text, so each new line opens smoothly. */
.sx-sourced-reply__answer {
  height: var(--as-h, auto);
  margin: 0 12px;
  padding: 0 6px;
  overflow: hidden;
}

.sx-sourced-reply[data-ready] .sx-sourced-reply__answer {
  transition: height var(--sx-dur-3) var(--sx-ease-out);
}

.sx-sourced-reply__text {
  padding: 12px 0 1px;
  font-size: var(--sx-fs-base);
  line-height: 1.62;
  color: var(--sx-ink-2);
}

.sx-sourced-reply__text:empty {
  padding: 0;
}

.sx-sourced-reply__word {
  animation: as-word-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-sourced-reply__cite {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  margin: 0 1px;
  padding: 0 4px;
  border-radius: var(--sx-r-pill);
  vertical-align: 1.5px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
  cursor: pointer;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
  animation: as-cite-in var(--sx-dur-4) var(--sx-ease-spring) both;
}

.sx-sourced-reply__cite:hover,
.sx-sourced-reply__cite[data-active] {
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

/* Soft caret: a thin accent bar that breathes instead of blinking */
.sx-sourced-reply__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.17em;
  border-radius: 1px;
  background: var(--sx-accent);
  animation: as-caret 1s var(--sx-ease-in-out) infinite;
}

/* ---------- Footer: live row and summary row crossfade in one cell ---------- */
.sx-sourced-reply__foot {
  display: grid;
  margin-top: 12px;
  padding: 7px 10px 7px 18px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-sourced-reply__live,
.sx-sourced-reply__summary {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--sx-h-sm);
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    filter var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s;
}

.sx-sourced-reply:is([data-state="done"], [data-state="stopped"]) .sx-sourced-reply__live,
.sx-sourced-reply:not([data-state="done"]):not([data-state="stopped"]) .sx-sourced-reply__summary {
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-sourced-reply:is([data-state="done"], [data-state="stopped"]) .sx-sourced-reply__live {
  transform: translateY(-4px);
}

.sx-sourced-reply:not([data-state="done"]):not([data-state="stopped"]) .sx-sourced-reply__summary {
  transform: translateY(4px);
}

/* Working label: "Reading sources" soft-swaps to "Writing the answer" */
.sx-sourced-reply__status {
  display: inline-grid;
  font-size: var(--sx-fs-sm);
}

.sx-sourced-reply__status-item {
  grid-area: 1 / 1;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    filter var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-sourced-reply:not([data-state="reading"]) [data-for="reading"],
.sx-sourced-reply:not([data-state="streaming"]) [data-for="streaming"] {
  opacity: 0;
  filter: blur(4px);
  transition-duration: var(--sx-dur-2);
}

.sx-sourced-reply:not([data-state="reading"]) [data-for="reading"] {
  transform: translateY(-4px);
}

.sx-sourced-reply[data-state="reading"] [data-for="streaming"] {
  transform: translateY(4px);
}

.sx-sourced-reply__stop > .sx-icon {
  --sx-icon-size: 9px;
  fill: currentColor;
}

.sx-sourced-reply__stat {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-sourced-reply__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sx-sourced-reply__actions > .sx-btn {
  color: var(--sx-muted);
}

.sx-sourced-reply__actions > .sx-btn:hover {
  color: var(--sx-ink);
}

/* Copy: the check pops in over the copy icon */
.sx-sourced-reply__copy > .sx-icon {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-sourced-reply__copy > .sx-icon + .sx-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: scale(0.6);
}

.sx-sourced-reply__copy[data-copied] {
  color: var(--sx-success-ink);
}

.sx-sourced-reply__copy[data-copied] > .sx-icon:first-child {
  opacity: 0;
  transform: scale(0.6);
}

.sx-sourced-reply__copy[data-copied] > .sx-icon + .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-sourced-reply__rate[aria-pressed="true"],
.sx-sourced-reply__rate[aria-pressed="true"]:hover {
  color: var(--sx-ink);
}

.sx-sourced-reply__rate[aria-pressed="true"] > .sx-icon {
  fill: currentColor;
  animation: as-pop var(--sx-dur-4) var(--sx-ease-spring);
}

/* ---------- Demo layout: the card grows downward from a fixed top ---------- */
.sx-sourced-reply-demo {
  display: grid;
  align-content: start;
  height: 322px;
}

/* ---------- Keyframes ---------- */
@keyframes as-sweep {
  to { transform: translateX(100%); }
}

@keyframes as-word-in {
  from { opacity: 0; filter: blur(3px); }
}

@keyframes as-cite-in {
  from { opacity: 0; transform: scale(0.6); }
}

@keyframes as-caret {
  50% { opacity: 0.25; }
}

@keyframes as-pop {
  from { transform: scale(0.6); }
}

@keyframes as-fade-in {
  from { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-sourced-reply__source,
  .sx-sourced-reply__source:not([data-state="read"]) > *,
  .sx-sourced-reply__source[data-state="read"][data-active],
  .sx-sourced-reply:is([data-state="done"], [data-state="stopped"]) .sx-sourced-reply__live,
  .sx-sourced-reply:not([data-state="done"]):not([data-state="stopped"]) .sx-sourced-reply__summary,
  .sx-sourced-reply:not([data-state="reading"]) [data-for="reading"],
  .sx-sourced-reply[data-state="reading"] [data-for="streaming"] {
    transform: none;
  }

  .sx-sourced-reply__source[data-state="reading"]::after {
    animation: none;
    opacity: 0;
  }

  .sx-sourced-reply[data-ready] .sx-sourced-reply__answer {
    transition: none;
  }

  .sx-sourced-reply__cite,
  .sx-sourced-reply__rate[aria-pressed="true"] > .sx-icon {
    animation-name: as-fade-in;
  }

  .sx-sourced-reply__copy > .sx-icon,
  .sx-sourced-reply__copy > .sx-icon + .sx-icon {
    transform: none;
  }
}


/* ---- Ask Bar (ask-bar) ---- */
/* ==========================================================================
   Ask Bar — message composer with attachments, a model menu, voice input and send
   Root: data-has-files, data-streaming, data-recording, data-dragging, data-focused,
         data-sending (the short send-off after a submit), data-ready (after the first measure)
   Attachment chips: data-leaving while they animate out
   Model menu: .sx-menu.sx-pop (data-state="open"), role="listbox"; options aria-selected, data-active
   Tiles: data-tone="1-4" picks a chart colour (--sx-c1 … --sx-c4)
   ========================================================================== */

.sx-ask-bar {
  position: relative;
  display: grid;
  width: 440px;
  padding: 8px;
  border-radius: var(--sx-r-2xl);
}

.sx-ask-bar[data-focused] {
  box-shadow: 0 0 0 1px var(--sx-line-strong), var(--sx-shadow-2);
}

/* ---------- Attachments: the tray opens with the grid-rows technique ---------- */
.sx-ask-bar__tray {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out);
}

.sx-ask-bar[data-has-files] .sx-ask-bar__tray {
  grid-template-rows: 1fr;
}

.sx-ask-bar__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-ask-bar__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 2px 6px;
}

.sx-ask-bar__file {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 220px;
  height: 40px;
  padding: 0 6px 0 7px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  animation: pb-file-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-ask-bar__file[data-leaving] {
  pointer-events: none;
  animation: pb-file-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

.sx-ask-bar__file-icon {
  --sx-icon-size: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: var(--sx-mark-ink);
  background: var(--sx-mark-soft);
  box-shadow: inset 0 0 0 1px var(--sx-mark-line);
}

.sx-ask-bar__file-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sx-ask-bar__file-name {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-ask-bar__file-size {
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-ask-bar__file-remove {
  --sx-icon-size: 12px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  margin-left: 2px;
  border-radius: var(--sx-r-pill);
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-ask-bar__file-remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-ask-bar__file-remove > .sx-icon {
  --sx-icon-stroke: 2;
}

/* ---------- Body: compose layer and recording layer share one cell ---------- */
.sx-ask-bar__body {
  display: grid;
}

.sx-ask-bar__compose,
.sx-ask-bar__record {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    filter var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s;
}

.sx-ask-bar[data-recording] .sx-ask-bar__compose,
.sx-ask-bar:not([data-recording]) .sx-ask-bar__record {
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-ask-bar:not([data-recording]) .sx-ask-bar__record {
  transform: scale(0.98);
}

.sx-ask-bar__compose {
  position: relative;
}

/* The field eases to the measured height of the auto-growing textarea. */
.sx-ask-bar__field {
  height: var(--pb-h, auto);
  overflow: hidden;
}

.sx-ask-bar[data-ready] .sx-ask-bar__field {
  transition: height var(--sx-dur-3) var(--sx-ease-out);
}

/* Auto-grow: a hidden copy of the text sizes the cell the textarea fills. */
.sx-ask-bar__grow {
  display: grid;
}

.sx-ask-bar__grow::after,
.sx-ask-bar__input,
.sx-ask-bar__ghost {
  padding: 7px 8px 6px;
  font-family: var(--sx-font);
  font-size: var(--sx-fs-md);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.sx-ask-bar__grow::after {
  content: attr(data-value) " ";
  grid-area: 1 / 1;
  max-height: 150px;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.sx-ask-bar__input {
  grid-area: 1 / 1;
  width: 100%;
  min-height: 0;
  max-height: 150px;
  margin: 0;
  border: 0;
  resize: none;
  overflow-y: auto;
  color: var(--sx-ink);
  background: transparent;
}

.sx-ask-bar__input:focus-visible {
  outline: none;
}

.sx-ask-bar__input::placeholder {
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-ask-bar[data-sending] .sx-ask-bar__input::placeholder {
  color: transparent;
}

/* Sent text lifts away while the field settles */
.sx-ask-bar__ghost {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  color: var(--sx-ink);
  pointer-events: none;
  animation: pb-ghost-out var(--sx-dur-4) var(--sx-ease-out) forwards;
}

/* ---------- Toolbar ---------- */
.sx-ask-bar__toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}

.sx-ask-bar__spacer {
  flex: 1;
}

.sx-ask-bar__tool {
  border-radius: var(--sx-r-pill);
  color: var(--sx-muted);
}

.sx-ask-bar__tool:hover {
  color: var(--sx-ink);
}

.sx-ask-bar__tool > .sx-icon {
  --sx-icon-size: 16px;
}

.sx-ask-bar__attach {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

/* Model trigger and menu */
.sx-ask-bar__model {
  position: relative;
}

.sx-ask-bar__model-btn {
  gap: 6px;
  padding: 0 8px 0 5px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-ask-bar__model-btn > .sx-icon {
  --sx-icon-size: 13px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-ask-bar__model-btn[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-ask-bar__model-btn[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

.sx-ask-bar__model-name {
  animation: pb-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-ask-bar__tile {
  --pb-tone: var(--sx-c1);
  --sx-icon-size: 11px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: color-mix(in srgb, var(--pb-tone) 74%, var(--sx-ink));
  background: color-mix(in srgb, var(--pb-tone) 15%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pb-tone) 26%, transparent);
}

.sx-ask-bar__tile[data-tone="2"] { --pb-tone: var(--sx-c2); }
.sx-ask-bar__tile[data-tone="3"] { --pb-tone: var(--sx-c3); }
.sx-ask-bar__tile[data-tone="4"] { --pb-tone: var(--sx-c4); }

.sx-ask-bar__menu {
  --sx-pop-origin: bottom left;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: var(--sx-z-pop);
  width: 248px;
}

.sx-ask-bar__menu.sx-pop:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-ask-bar__menu:focus-visible {
  outline: none;
}

.sx-ask-bar__option {
  gap: 9px;
  min-height: 42px;
}

.sx-ask-bar__option > .sx-ask-bar__tile {
  width: 24px;
  height: 24px;
  --sx-icon-size: 13px;
}

.sx-ask-bar__option-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-ask-bar__option-name {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-ask-bar__option-hint {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-ask-bar__option > .sx-ask-bar__option-check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-ask-bar__option[aria-selected="true"] > .sx-ask-bar__option-check {
  opacity: 1;
  transform: none;
}

/* Send turns into stop while a reply streams */
.sx-ask-bar__send {
  border-radius: var(--sx-r-pill);
}

.sx-ask-bar__send > .sx-icon {
  --sx-icon-size: 16px;
  --sx-icon-stroke: 2.25;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-ask-bar__send > .sx-icon + .sx-icon {
  --sx-icon-size: 11px;
  position: absolute;
  inset: 0;
  margin: auto;
  fill: currentColor;
  opacity: 0;
  transform: scale(0.5);
}

.sx-ask-bar[data-streaming] .sx-ask-bar__send > .sx-icon:first-child {
  opacity: 0;
  transform: translateY(-5px) scale(0.7);
}

.sx-ask-bar[data-streaming] .sx-ask-bar__send > .sx-icon + .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-ask-bar__send:disabled {
  opacity: 1;
  color: var(--sx-faint);
  background: var(--sx-fill-strong);
  box-shadow: none;
}

/* ---------- Recording ---------- */
.sx-ask-bar__record {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  padding-left: 10px;
}

.sx-ask-bar__rec-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-danger);
  box-shadow: 0 0 0 3px var(--sx-danger-soft);
  animation: pb-rec 1.4s var(--sx-ease-in-out) infinite;
}

.sx-ask-bar__rec-time {
  min-width: 28px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* Rolling level history: new samples enter on the right, older ones fade out on the left. */
.sx-ask-bar__levels {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  height: 26px;
  color: var(--sx-ink-2);
  -webkit-mask-image: linear-gradient(90deg, transparent, currentColor 22%);
  mask-image: linear-gradient(90deg, transparent, currentColor 22%);
}

.sx-ask-bar__level {
  width: 3px;
  height: 100%;
  flex: none;
  border-radius: var(--sx-r-pill);
  background: currentColor;
  transform: scaleY(var(--pb-l, 0.12));
  transition: transform 120ms linear;
}

.sx-ask-bar__rec-actions {
  display: flex;
  gap: 4px;
}

.sx-ask-bar__rec-actions > .sx-btn {
  border-radius: var(--sx-r-pill);
}

/* ---------- Drop target ---------- */
.sx-ask-bar__drop {
  --sx-icon-size: 16px;
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: inherit;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-accent-ink);
  background: linear-gradient(var(--sx-accent-soft), var(--sx-accent-soft)), var(--sx-card-bg);
  outline: 1.5px dashed var(--sx-accent-line);
  outline-offset: -6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-ask-bar[data-dragging] .sx-ask-bar__drop {
  opacity: 1;
}

/* ---------- Demo layout: room for growth and the upward model menu ---------- */
.sx-ask-bar-demo {
  display: grid;
  align-content: center;
  height: 300px;
}

/* ---------- Keyframes ---------- */
@keyframes pb-file-in {
  from { opacity: 0; filter: blur(3px); transform: translateY(4px) scale(0.92); }
}

@keyframes pb-file-out {
  to { opacity: 0; filter: blur(3px); transform: translateY(-6px) scale(0.94); }
}

@keyframes pb-ghost-out {
  to { opacity: 0; filter: blur(4px); transform: translateY(-14px); }
}

@keyframes pb-swap-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
}

@keyframes pb-rec {
  50% { opacity: 0.6; box-shadow: 0 0 0 5px var(--sx-danger-soft); }
}

@keyframes pb-fade-in {
  from { opacity: 0; }
}

@keyframes pb-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-ask-bar__file,
  .sx-ask-bar__model-name {
    animation-name: pb-fade-in;
  }

  .sx-ask-bar__file[data-leaving],
  .sx-ask-bar__ghost {
    animation-name: pb-fade-out;
  }

  .sx-ask-bar:not([data-recording]) .sx-ask-bar__record,
  .sx-ask-bar__menu.sx-pop:not([data-state="open"]),
  .sx-ask-bar[data-streaming] .sx-ask-bar__send > .sx-icon:first-child,
  .sx-ask-bar__send > .sx-icon + .sx-icon,
  .sx-ask-bar__option > .sx-ask-bar__option-check {
    transform: none;
  }

  .sx-ask-bar[data-ready] .sx-ask-bar__field {
    transition: none;
  }

  .sx-ask-bar__rec-dot {
    animation: none;
  }
}


/* ---- Thought Trail (thought-trail) ---- */
/* ==========================================================================
   Thought Trail — an AI at work: live timer, sources searched, steps landing
   Root:  data-state="working | done", data-open (body unfolded)
   Steps: .sx-thought-trail__step[data-status="done | current | pending"]
   The header label soft-swaps (blur crossfade); the body folds with the grid-rows trick.
   ========================================================================== */

.sx-thought-trail {
  width: 400px;
}

/* ---------- Header (the toggle) ---------- */
.sx-thought-trail__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 8px);
  height: 36px;
  margin: 4px;
  padding: 0 10px;
  border-radius: calc(var(--sx-card-radius) - 4px);
  font-weight: 500;
  text-align: left;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-thought-trail__head:hover {
  background: var(--sx-fill);
}

.sx-thought-trail__head:focus-visible {
  outline-offset: 0;
}

.sx-thought-trail[data-state="done"] .sx-thought-trail__head {
  color: var(--sx-ink-2);
}

/* Working mark: a comet arc circling a breathing core; it settles into a check. */
.sx-thought-trail__mark {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--sx-accent);
}

.sx-thought-trail__mark > * {
  grid-area: 1 / 1;
}

.sx-thought-trail__orbit {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: conic-gradient(var(--sx-accent-soft) 0turn 0.28turn, currentColor 1turn);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 2px), currentColor calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 2px), currentColor calc(100% - 1.5px));
  animation: rp-orbit 1.1s linear infinite;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), scale var(--sx-dur-3) var(--sx-ease-out);
}

.sx-thought-trail__core {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: rp-breathe 1.6s var(--sx-ease-in-out) infinite;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), scale var(--sx-dur-3) var(--sx-ease-out);
}

.sx-thought-trail__done {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.5;
  color: var(--sx-success);
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), scale var(--sx-dur-2) var(--sx-ease-out);
}

.sx-thought-trail[data-state="done"] .sx-thought-trail__orbit,
.sx-thought-trail[data-state="done"] .sx-thought-trail__core {
  opacity: 0;
  scale: 0.4;
}

.sx-thought-trail[data-state="done"] .sx-thought-trail__done {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out) 80ms,
    scale var(--sx-dur-4) var(--sx-ease-spring) 80ms;
}

/* Soft swap: the old label blurs up and out while the new one blurs in. */
.sx-thought-trail__swap {
  display: inline-grid;
  min-width: 0;
}

.sx-thought-trail__swap-item {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  animation: rp-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-thought-trail__swap-item[data-leaving] {
  animation: rp-swap-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

.sx-thought-trail__timer {
  margin-left: auto;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), filter var(--sx-dur-2) var(--sx-ease-out);
}

.sx-thought-trail[data-state="done"] .sx-thought-trail__timer {
  opacity: 0;
  filter: blur(3px);
}

.sx-thought-trail__chevron {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-thought-trail__head:hover .sx-thought-trail__chevron {
  color: var(--sx-ink-2);
}

.sx-thought-trail[data-open] .sx-thought-trail__chevron {
  transform: rotate(180deg);
}

/* ---------- Body: folds with grid rows 0fr <-> 1fr ---------- */
.sx-thought-trail__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-in-out);
}

.sx-thought-trail[data-open] .sx-thought-trail__fold {
  grid-template-rows: 1fr;
  transition-duration: var(--sx-dur-4);
}

.sx-thought-trail__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-thought-trail__body {
  display: grid;
  padding: 0 14px 12px;
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-thought-trail[data-open] .sx-thought-trail__body {
  opacity: 1;
  filter: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 60ms,
    filter var(--sx-dur-3) var(--sx-ease-out) 60ms,
    visibility 0s;
}

.sx-thought-trail__row,
.sx-thought-trail__step-inner {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  column-gap: 10px;
  align-items: start;
}

.sx-thought-trail__status {
  display: grid;
  place-items: center;
  height: 24px;
  color: var(--sx-muted);
}

.sx-thought-trail__status > * {
  grid-area: 1 / 1;
}

.sx-thought-trail__status > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-thought-trail__label {
  font-size: var(--sx-fs-sm);
  line-height: 24px;
  color: var(--sx-muted);
}

/* Sources: chips grow in one by one as they are read */
.sx-thought-trail__sources {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 1px 0 8px;
}

.sx-thought-trail__source {
  height: 22px;
  gap: 5px;
  padding: 0 8px 0 4px;
  transform-origin: left center;
  animation: rp-chip-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-thought-trail__tile {
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: var(--sx-r-xs);
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-thought-trail__more {
  padding: 0 7px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* Steps: each row grows open (grid rows) while its content rises in */
.sx-thought-trail__steps {
  display: grid;
}

.sx-thought-trail__step {
  display: grid;
  grid-template-rows: 1fr;
  animation: rp-step-grow var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-thought-trail__step-inner {
  min-height: 0;
  overflow: hidden;
  animation: rp-step-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-thought-trail__text {
  padding: 2px 0;
  line-height: 20px;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-thought-trail__step[data-status="current"] .sx-thought-trail__text {
  color: var(--sx-ink);
}

.sx-thought-trail__step[data-status="pending"] .sx-thought-trail__text {
  color: var(--sx-muted);
}

/* One status mark shows at a time: check, spinner or dot */
.sx-thought-trail__step .sx-thought-trail__status > * {
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), scale var(--sx-dur-2) var(--sx-ease-out);
}

.sx-thought-trail__step[data-status="done"] .sx-thought-trail__check,
.sx-thought-trail__step[data-status="current"] .sx-spinner,
.sx-thought-trail__step[data-status="pending"] .sx-thought-trail__dot {
  opacity: 1;
  scale: 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), scale var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-thought-trail__check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-success);
}

.sx-thought-trail__step .sx-spinner {
  --sx-spinner-size: 12px;
  color: var(--sx-accent);
}

.sx-thought-trail__dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sx-faint);
}

/* ---------- Demo layout: a question, the panel, then the answer ---------- */
.sx-thought-trail-demo {
  display: grid;
  width: 400px;
}

.sx-thought-trail-demo__ask {
  justify-self: end;
  max-width: 300px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xs) var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

/* The answer takes no room until it arrives (grid rows 0fr -> 1fr). */
.sx-thought-trail-demo__reply {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-thought-trail-demo__reply[data-visible] {
  grid-template-rows: 1fr;
}

.sx-thought-trail-demo__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-thought-trail-demo__answer {
  padding: 12px 4px 2px;
  color: var(--sx-ink-2);
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 80ms,
    filter var(--sx-dur-4) var(--sx-ease-out) 80ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 80ms,
    visibility 0s;
}

.sx-thought-trail-demo__answer strong {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-thought-trail-demo__reply[data-visible] .sx-thought-trail-demo__answer {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
}

/* ---------- Keyframes ---------- */
@keyframes rp-orbit {
  to {
    rotate: 1turn;
  }
}

@keyframes rp-breathe {
  50% {
    transform: scale(0.6);
    opacity: 0.6;
  }
}

@keyframes rp-swap-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px);
  }
}

@keyframes rp-swap-out {
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }
}

@keyframes rp-chip-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: scale(0.72);
  }
}

@keyframes rp-step-grow {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes rp-step-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(6px);
  }
}

@keyframes rp-soft-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes rp-soft-out {
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes rp-glow {
  50% {
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-thought-trail__orbit {
    animation: rp-glow 1.6s var(--sx-ease-in-out) infinite;
  }

  .sx-thought-trail__core {
    animation-name: rp-glow;
  }

  .sx-thought-trail__swap-item,
  .sx-thought-trail__source,
  .sx-thought-trail__step-inner {
    animation-name: rp-soft-in;
  }

  .sx-thought-trail__swap-item[data-leaving] {
    animation-name: rp-soft-out;
  }

  .sx-thought-trail__step {
    animation: none;
  }

  .sx-thought-trail-demo__answer {
    transform: none;
  }
}


/* ---- Helper Pane (helper-pane) ---- */
/* ==========================================================================
   Helper Pane — a docked assistant with suggestions, a streamed reply and a soft glow
   Root: data-state="idle | writing | done"
     idle     greeting and suggestion chips (__intro open)
     writing  the request and a reply that streams in word by word (__thread open, glow up)
     done     reply finished, Insert / Try again actions shown
   Parts: __glow (behind everything), __head (orb, name, status swap, reset),
          __body (__intro fold, __thread fold), __composer (input and send)
   ========================================================================== */

.sx-helper-pane {
  /* Opaque versions of the glow tokens for the orb (falls back to the accent colour). */
  --ac-o1: rgb(from var(--sx-glow-1) r g b / 1);
  --ac-o2: rgb(from var(--sx-glow-2) r g b / 1);
  --ac-o3: rgb(from var(--sx-glow-3) r g b / 1);
  display: flex;
  flex-direction: column;
  width: 360px;
  height: 332px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Glow: three soft blobs along the bottom edge ---------- */
.sx-helper-pane__glow {
  position: absolute;
  z-index: 0;
  left: -14%;
  right: -14%;
  bottom: -46px;
  height: 200px;
  pointer-events: none;
  opacity: 0.5;
  transform: translateY(34px) scaleY(0.86);
  transform-origin: 50% 100%;
  transition:
    opacity var(--sx-dur-5) var(--sx-ease-out),
    transform var(--sx-dur-5) var(--sx-ease-out);
}

.sx-helper-pane__blob {
  position: absolute;
  bottom: 0;
  width: 54%;
  height: 100%;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--ac-blob), transparent),
    radial-gradient(closest-side, var(--ac-blob), transparent 62%);
  animation: ac-drift-a 8s var(--sx-ease-in-out) infinite alternate;
}

.sx-helper-pane__blob:nth-child(1) {
  --ac-blob: var(--sx-glow-1);
  left: 0;
}

.sx-helper-pane__blob:nth-child(2) {
  --ac-blob: var(--sx-glow-2);
  left: 23%;
  bottom: -18px;
  animation-name: ac-drift-b;
  animation-duration: 10s;
}

.sx-helper-pane__blob:nth-child(3) {
  --ac-blob: var(--sx-glow-3);
  right: 0;
  animation-duration: 9s;
  animation-direction: alternate-reverse;
}

.sx-helper-pane[data-state="writing"] .sx-helper-pane__glow {
  opacity: 1;
  transform: none;
}

.sx-helper-pane[data-state="done"] .sx-helper-pane__glow {
  opacity: 0.7;
  transform: translateY(16px) scaleY(0.94);
}

/* ---------- Head ---------- */
.sx-helper-pane__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 11px 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

/* The orb: a slow swirl of the glow colours with two light spots orbiting the other way. */
.sx-helper-pane__orb {
  position: relative;
  width: 28px;
  height: 28px;
  flex: none;
  overflow: hidden;
  isolation: isolate;
  border-radius: 50%;
  background-color: var(--sx-accent);
  box-shadow: 0 0 0 3px var(--sx-glow-2), 0 2px 12px 1px var(--sx-glow-1);
  transition:
    box-shadow var(--sx-dur-5) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-spring),
    filter var(--sx-dur-5) var(--sx-ease-out);
}

.sx-helper-pane__orb::before,
.sx-helper-pane__orb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

/* Oversized and blurred so the swirl has no hard centre and the blur never shows the rim. */
.sx-helper-pane__orb::before {
  inset: -5px;
  background: conic-gradient(from 20deg, var(--ac-o1), var(--ac-o2), var(--ac-o3), var(--ac-o1));
  filter: blur(3px);
  animation: ac-spin 9s linear infinite;
}

.sx-helper-pane__orb::after {
  background:
    radial-gradient(circle at 30% 27%, var(--ac-o2), transparent 46%),
    radial-gradient(circle at 74% 76%, var(--ac-o1), transparent 42%);
  filter: blur(2px) brightness(1.45) saturate(0.85);
  mix-blend-mode: screen;
  animation: ac-spin 4.6s linear infinite reverse;
}

.sx-helper-pane[data-state="writing"] .sx-helper-pane__orb {
  transform: scale(1.08);
  filter: saturate(1.3) brightness(1.06);
  box-shadow: 0 0 0 4px var(--sx-glow-3), 0 2px 20px 3px var(--sx-glow-1);
}

.sx-helper-pane__who {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-helper-pane__name {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: 18px;
}

.sx-helper-pane__status {
  display: flex;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: 17px;
  color: var(--sx-muted);
}

/* Soft swap: the old label blurs out upwards while the new one blurs in. */
.sx-helper-pane__swap {
  display: inline-grid;
  min-width: 0;
  max-width: 100%;
}

.sx-helper-pane__swap-item {
  grid-area: 1 / 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-helper-pane__swap-item:not(:first-child) {
  animation: ac-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-helper-pane__swap-item[data-leaving] {
  animation: ac-swap-out var(--sx-dur-2) var(--sx-ease-out) both;
}

/* ---------- Body ---------- */
.sx-helper-pane__body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 16px 16px 8px;
  overflow-y: auto;
}

/* Both folds use the grid-rows trick; the 4px side gutters keep focus rings unclipped. */
.sx-helper-pane__intro,
.sx-helper-pane__thread {
  display: grid;
  margin: 0 -4px;
}

.sx-helper-pane__intro-inner,
.sx-helper-pane__thread-inner {
  min-height: 0;
  padding: 0 4px;
  overflow: hidden;
}

.sx-helper-pane__intro {
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-out) 60ms,
    opacity var(--sx-dur-3) var(--sx-ease-out) 120ms;
}

.sx-helper-pane[data-state="writing"] .sx-helper-pane__intro,
.sx-helper-pane[data-state="done"] .sx-helper-pane__intro {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-in-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-helper-pane__greeting {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: 1.25;
  text-wrap: balance;
}

.sx-helper-pane__hint {
  margin-top: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-helper-pane__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 16px 0 4px;
}

.sx-helper-pane__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px 0 9px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-helper-pane__chip > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-helper-pane__chip:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-helper-pane__chip:hover > .sx-icon,
.sx-helper-pane__chip[data-pressed] > .sx-icon {
  color: var(--sx-accent-ink);
}

.sx-helper-pane__chip:active,
.sx-helper-pane__chip[data-pressed] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  transform: scale(0.96);
}

/* ---------- Thread ---------- */
.sx-helper-pane__thread {
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-in-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-helper-pane[data-state="writing"] .sx-helper-pane__thread,
.sx-helper-pane[data-state="done"] .sx-helper-pane__thread {
  grid-template-rows: 1fr;
  opacity: 1;
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-out) 120ms,
    opacity var(--sx-dur-3) var(--sx-ease-out) 120ms;
}

.sx-helper-pane__thread-inner {
  display: grid;
  align-content: start;
  gap: 10px;
}

.sx-helper-pane__thread-inner > :last-child {
  margin-bottom: 4px;
}

.sx-helper-pane__request {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 85%;
  padding: 5px 11px 5px 9px;
  border-radius: var(--sx-r-lg) var(--sx-r-lg) var(--sx-r-xs) var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  line-height: 18px;
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
  animation: ac-rise var(--sx-dur-4) var(--sx-ease-out) 140ms both;
}

.sx-helper-pane__request > .sx-icon {
  --sx-icon-size: 13px;
  color: var(--sx-muted);
}

.sx-helper-pane__reply {
  min-height: 40px;
  padding: 10px 12px;
  border-radius: var(--sx-r-xs) var(--sx-r-lg) var(--sx-r-lg) var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  text-wrap: pretty;
  animation: ac-rise var(--sx-dur-4) var(--sx-ease-out) 260ms both;
}

.sx-helper-pane__word {
  animation: ac-word-in var(--sx-dur-3) var(--sx-ease-out) both;
}

/* Soft caret while streaming: a thin accent bar that breathes instead of blinking. */
.sx-helper-pane__caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.17em;
  border-radius: 1px;
  background: var(--sx-accent);
  animation: ac-caret 1s var(--sx-ease-in-out) infinite;
}

.sx-helper-pane__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  animation: ac-rise var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-helper-pane__insert[data-inserted] > .sx-icon {
  animation: ac-pop var(--sx-dur-3) var(--sx-ease-spring) both;
}

/* ---------- Composer ---------- */
.sx-helper-pane__composer {
  position: relative;
  z-index: 1;
  display: grid;
  padding: 6px 14px 14px;
}

.sx-helper-pane__input,
.sx-helper-pane__send {
  grid-area: 1 / 1;
}

.sx-helper-pane__input {
  height: 36px;
  padding: 0 42px 0 14px;
  border-radius: var(--sx-r-pill);
}

.sx-helper-pane__send {
  align-self: center;
  justify-self: end;
  margin-right: 5px;
}

/* ---------- Keyframes ---------- */
@keyframes ac-spin {
  to { transform: rotate(360deg); }
}

@keyframes ac-drift-a {
  to { transform: translateX(14%) scale(1.08); }
}

@keyframes ac-drift-b {
  to { transform: translateX(-12%) scale(0.92); }
}

@keyframes ac-swap-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(4px); }
}

@keyframes ac-swap-out {
  to { opacity: 0; filter: blur(4px); transform: translateY(-4px); }
}

@keyframes ac-word-in {
  from { opacity: 0; filter: blur(3px); }
}

@keyframes ac-caret {
  50% { opacity: 0.25; }
}

@keyframes ac-rise {
  from { opacity: 0; transform: translateY(6px); }
}

@keyframes ac-pop {
  from { opacity: 0; transform: scale(0.5); }
}

@keyframes ac-fade-in {
  from { opacity: 0; }
}

@keyframes ac-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-helper-pane__orb::before,
  .sx-helper-pane__orb::after,
  .sx-helper-pane__blob {
    animation: none;
  }

  .sx-helper-pane[data-state] .sx-helper-pane__glow,
  .sx-helper-pane[data-state] .sx-helper-pane__orb,
  .sx-helper-pane__chip:active,
  .sx-helper-pane__chip[data-pressed] {
    transform: none;
  }

  .sx-helper-pane__swap-item:not(:first-child),
  .sx-helper-pane__request,
  .sx-helper-pane__reply,
  .sx-helper-pane__actions,
  .sx-helper-pane__insert[data-inserted] > .sx-icon {
    animation-name: ac-fade-in;
  }

  .sx-helper-pane__swap-item[data-leaving] {
    animation-name: ac-fade-out;
  }
}


/* ---- Busy Badge (busy-badge) ---- */
/* ==========================================================================
   Busy Badge — says what an AI reply is doing right now
   Root: data-state="working | done". Sizes: default (28px), .sx-busy-badge--sm (22px).
   .sx-busy-badge--bare drops the pill surface for use inside a message bubble.
   The label soft-swaps (blur crossfade) while the pill glides to the new width.
   ========================================================================== */

.sx-busy-badge {
  --wp-mark: 16px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px 0 9px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  vertical-align: middle;
}

.sx-busy-badge--sm {
  --wp-mark: 13px;
  gap: 5px;
  height: 22px;
  padding: 0 9px 0 7px;
  font-size: var(--sx-fs-xs);
}

.sx-busy-badge--bare {
  height: auto;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* ---------- Working mark: three dots rising in a wave; settles into a check ---------- */
.sx-busy-badge__mark {
  display: grid;
  place-items: center;
  width: var(--wp-mark);
  height: var(--wp-mark);
  flex: none;
  color: var(--sx-accent);
}

.sx-busy-badge__mark > * {
  grid-area: 1 / 1;
}

.sx-busy-badge__dots {
  display: flex;
  align-items: center;
  gap: 2px;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), scale var(--sx-dur-2) var(--sx-ease-out);
}

.sx-busy-badge__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: wp-wave 1.2s var(--sx-ease-in-out) infinite;
}

.sx-busy-badge__dot:nth-child(2) {
  animation-delay: 0.16s;
}

.sx-busy-badge__dot:nth-child(3) {
  animation-delay: 0.32s;
}

.sx-busy-badge--sm .sx-busy-badge__dot {
  width: 3px;
  height: 3px;
}

.sx-busy-badge__check {
  --sx-icon-size: calc(var(--wp-mark) - 2px);
  --sx-icon-stroke: 2.6;
  color: var(--sx-success);
  opacity: 0;
  scale: 0.6;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), scale var(--sx-dur-2) var(--sx-ease-out);
}

.sx-busy-badge[data-state="done"] .sx-busy-badge__dots {
  opacity: 0;
  scale: 0.4;
}

.sx-busy-badge[data-state="done"] .sx-busy-badge__check {
  opacity: 1;
  scale: 1;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out) 60ms,
    scale var(--sx-dur-4) var(--sx-ease-spring) 60ms;
}

/* ---------- Label: soft swap; the width is set by script during a swap ---------- */
.sx-busy-badge__swap {
  display: inline-grid;
  clip-path: inset(-8px -1px -8px -8px);
  transition: width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-busy-badge__swap-item {
  grid-area: 1 / 1;
  justify-self: start;
  white-space: nowrap;
  animation: wp-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-busy-badge__swap-item[data-leaving] {
  animation: wp-swap-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

/* ---------- Demo layout: standalone, small, and inside a reply placeholder ---------- */
.sx-busy-badge-demo {
  display: grid;
  justify-items: start;
  gap: 14px;
  width: 290px;
}

.sx-busy-badge-demo__msg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

.sx-busy-badge-demo__avatar {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-busy-badge-demo__avatar > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-busy-badge-demo__bubble {
  flex: 1;
  display: grid;
  gap: 10px;
  padding: 11px 12px 12px;
  border-radius: var(--sx-r-xs) var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xl);
}

.sx-busy-badge-demo__content {
  display: grid;
}

.sx-busy-badge-demo__content > * {
  grid-area: 1 / 1;
}

/* Placeholder bars sit where the reply's two text lines will land (12px / 18px lines). */
.sx-busy-badge-demo__lines {
  display: grid;
  align-content: start;
  gap: 10px;
  padding-top: 5px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), filter var(--sx-dur-3) var(--sx-ease-out);
}

.sx-busy-badge-demo__line {
  height: 8px;
  border-radius: var(--sx-r-pill);
}

.sx-busy-badge-demo__line:nth-child(2) {
  width: 64%;
}

.sx-busy-badge-demo__reply {
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 80ms,
    filter var(--sx-dur-4) var(--sx-ease-out) 80ms,
    visibility 0s;
}

.sx-busy-badge-demo__msg[data-state="done"] .sx-busy-badge-demo__lines {
  opacity: 0;
  filter: blur(4px);
}

.sx-busy-badge-demo__msg[data-state="done"] .sx-busy-badge-demo__reply {
  opacity: 1;
  filter: none;
  visibility: visible;
}

/* ---------- Keyframes ---------- */
@keyframes wp-wave {
  0%,
  70%,
  100% {
    opacity: 0.35;
    transform: none;
  }

  35% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

@keyframes wp-swap-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px);
  }
}

@keyframes wp-swap-out {
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }
}

@keyframes wp-blink {
  0%,
  70%,
  100% {
    opacity: 0.35;
  }

  35% {
    opacity: 1;
  }
}

@keyframes wp-soft-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes wp-soft-out {
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-busy-badge__dot {
    animation-name: wp-blink;
  }

  .sx-busy-badge__swap {
    transition: none;
  }

  .sx-busy-badge__swap-item {
    animation-name: wp-soft-in;
  }

  .sx-busy-badge__swap-item[data-leaving] {
    animation-name: wp-soft-out;
  }
}


/* ---- Reply Tools (reply-tools) ---- */
/* ==========================================================================
   Reply Tools — copy, rate and regenerate under an AI reply
   Root (role="group"): data-rating="up | down", data-open (reason panel), data-sent (thanks)
   Actions [data-action="copy | up | down | regenerate"]:
     copy data-done, thumbs aria-pressed, regenerate data-busy. Reason chips: aria-pressed.
   ========================================================================== */

.sx-reply-tools {
  position: relative;
  display: grid;
  min-width: 0;
}

/* ---------- Action row ---------- */
.sx-reply-tools__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Square icon buttons that can grow a label beside the icon */
.sx-reply-tools__btn {
  min-width: var(--sx-btn-h);
  padding: 0 6px;
  gap: 0;
  color: var(--sx-muted);
}

.sx-reply-tools__btn > .sx-icon,
.sx-reply-tools__glyph > .sx-icon {
  --sx-icon-size: 14px;
}

/* Copy: the icon turns into a check */
.sx-reply-tools__glyph {
  display: grid;
  place-items: center;
}

.sx-reply-tools__glyph > .sx-icon {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-reply-tools__glyph > .sx-icon:last-child,
.sx-reply-tools__btn[data-done] .sx-reply-tools__glyph > .sx-icon:first-child {
  opacity: 0;
  transform: scale(0.5);
}

.sx-reply-tools__btn[data-done] .sx-reply-tools__glyph > .sx-icon:last-child {
  opacity: 1;
  transform: none;
  color: var(--sx-success-ink);
  --sx-icon-stroke: 2.25;
}

.sx-reply-tools__btn[data-done] {
  color: var(--sx-ink-2);
}

/* A label that grows in beside the icon ("Copied", "Regenerating") */
.sx-reply-tools__label {
  display: grid;
  grid-template-columns: 0fr;
  transition: grid-template-columns var(--sx-dur-3) var(--sx-ease-out);
}

.sx-reply-tools__label > span {
  min-width: 0;
  overflow: hidden;
  text-indent: 5px;
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  opacity: 0;
  filter: blur(3px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), filter var(--sx-dur-2) var(--sx-ease-out);
}

.sx-reply-tools__btn[data-done] .sx-reply-tools__label,
.sx-reply-tools__btn[data-busy] .sx-reply-tools__label {
  grid-template-columns: 1fr;
}

.sx-reply-tools__btn[data-done] .sx-reply-tools__label > span,
.sx-reply-tools__btn[data-busy] .sx-reply-tools__label > span {
  opacity: 1;
  filter: none;
}

/* Thumbs: fill and pop when pressed */
.sx-reply-tools__btn[aria-pressed] > .sx-icon {
  fill: currentColor;
  fill-opacity: 0;
  transition: fill-opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-reply-tools__btn[aria-pressed="true"] {
  color: var(--sx-ink);
}

.sx-reply-tools__btn[aria-pressed="true"] > .sx-icon {
  fill-opacity: 1;
  animation: fb-pop var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-reply-tools[data-open] .sx-reply-tools__btn[data-action="down"] {
  background: var(--sx-fill);
}

/* Regenerate: half-turns while busy; script lets the last half-turn finish */
.sx-reply-tools__btn[data-busy] {
  color: var(--sx-ink-2);
}

.sx-reply-tools__btn[data-busy] > .sx-icon {
  animation: fb-spin 0.55s linear infinite;
}

/* ---------- Reason panel (grid-rows fold) ---------- */
.sx-reply-tools__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-reply-tools[data-open] .sx-reply-tools__panel {
  grid-template-rows: 1fr;
}

.sx-reply-tools__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-reply-tools__sheet {
  margin-top: 6px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-reply-tools[data-open] .sx-reply-tools__sheet {
  opacity: 1;
  transform: none;
  transition-duration: var(--sx-dur-3), var(--sx-dur-4);
}

/* Inside the sheet the form folds away while the thanks line folds open */
.sx-reply-tools__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-reply-tools__fold[data-part="thanks"],
.sx-reply-tools[data-sent] .sx-reply-tools__fold[data-part="form"] {
  grid-template-rows: 0fr;
  opacity: 0;
}

.sx-reply-tools[data-sent] .sx-reply-tools__fold[data-part="thanks"] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sx-reply-tools__form {
  display: grid;
  gap: 8px;
  padding: 8px 8px 10px 12px;
}

.sx-reply-tools__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sx-reply-tools__title {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-reply-tools__close {
  --sx-btn-h: var(--sx-h-xs);
  color: var(--sx-muted);
}

.sx-reply-tools__close > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-reply-tools__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-reply-tools__reason {
  height: 24px;
  padding: 0 10px;
  font-size: var(--sx-fs-sm);
  cursor: pointer;
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-reply-tools__reason:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-reply-tools__reason:active {
  transform: scale(0.96);
}

.sx-reply-tools__reason[aria-pressed="true"] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  animation: fb-chip var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-reply-tools__row {
  display: flex;
  gap: 6px;
}

.sx-reply-tools__note {
  flex: 1;
  min-width: 0;
  height: var(--sx-h-sm);
  padding: 0 9px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
}

.sx-reply-tools__note[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-reply-tools__send {
  flex: none;
}

.sx-reply-tools__thanks {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-reply-tools__thanks strong {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-reply-tools__thanks > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-success-ink);
}

.sx-reply-tools[data-sent] .sx-reply-tools__thanks > .sx-icon {
  animation: fb-pop var(--sx-dur-4) var(--sx-ease-spring) 60ms both;
}

@keyframes fb-pop {
  from {
    transform: scale(0.55) rotate(-12deg);
  }
}

@keyframes fb-chip {
  from {
    transform: scale(0.92);
  }
}

@keyframes fb-spin {
  to {
    transform: rotate(180deg);
  }
}

/* ---------- Demo: an assistant reply with the bar under it ---------- */
.sx-reply-tools-demo {
  display: grid;
  align-content: center;
  width: 392px;
  height: 264px;
}

.sx-reply-tools-demo__msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sx-reply-tools-demo__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  color: var(--sx-ink-2);
  background:
    radial-gradient(circle at 30% 28%, var(--sx-glow-1), transparent 62%),
    radial-gradient(circle at 72% 74%, var(--sx-glow-3), transparent 64%),
    var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 13px;
}

.sx-reply-tools-demo__body {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 6px;
}

.sx-reply-tools-demo__bubble {
  padding: 9px 12px;
  border-radius: var(--sx-r-xs) var(--sx-r-xl) var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
}

/* The reply text blur-crossfades when a new version arrives; it dims while one is written */
.sx-reply-tools-demo__swap {
  display: grid;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), filter var(--sx-dur-3) var(--sx-ease-out);
}

.sx-reply-tools-demo__bubble[data-busy] .sx-reply-tools-demo__swap {
  opacity: 0.4;
  filter: blur(1.5px);
}

.sx-reply-tools-demo__swap-item {
  grid-area: 1 / 1;
}

.sx-reply-tools-demo__swap-item + .sx-reply-tools-demo__swap-item {
  animation: fbd-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-reply-tools-demo__swap-item[data-leaving] {
  animation: fbd-swap-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

@keyframes fbd-swap-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px);
  }
}

@keyframes fbd-swap-out {
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }
}

@keyframes fbd-fade-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes fbd-fade-out {
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-reply-tools__btn[aria-pressed="true"] > .sx-icon,
  .sx-reply-tools[data-sent] .sx-reply-tools__thanks > .sx-icon,
  .sx-reply-tools__reason[aria-pressed="true"] {
    animation-name: sx-fade-in;
  }

  .sx-reply-tools__btn[data-busy] > .sx-icon {
    animation: sx-pulse 1.2s var(--sx-ease-in-out) infinite;
  }

  .sx-reply-tools__glyph > .sx-icon:last-child,
  .sx-reply-tools__btn[data-done] .sx-reply-tools__glyph > .sx-icon:first-child,
  .sx-reply-tools__sheet {
    transform: none;
  }

  .sx-reply-tools-demo__swap-item + .sx-reply-tools-demo__swap-item {
    animation-name: fbd-fade-in;
  }

  .sx-reply-tools-demo__swap-item[data-leaving] {
    animation-name: fbd-fade-out;
  }
}


/* ---- Engine Select (engine-select) ---- */
/* ==========================================================================
   Engine Select — a trigger plus a listbox of models with speed, cost and context
   Trigger: aria-haspopup="listbox" aria-expanded. Menu: .sx-menu.sx-pop role="listbox",
   data-state="open"; options role="option" aria-selected, data-active="true" on the highlight.
   Tiles: data-tone="1…6" picks a chart colour (--sx-c1 … --sx-c6).
   ========================================================================== */

.sx-engine-select {
  position: relative;
  display: inline-flex;
  vertical-align: middle;
}

/* ---------- Trigger ---------- */
.sx-engine-select__trigger {
  gap: 6px;
  padding: 0 7px 0 5px;
  font-size: var(--sx-fs-md);
  font-weight: 550;
  color: var(--sx-ink);
}

.sx-engine-select__trigger[aria-expanded="true"] {
  background: var(--sx-fill);
}

.sx-engine-select__trigger > .sx-engine-select__chevron {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-engine-select__trigger[aria-expanded="true"] > .sx-engine-select__chevron {
  transform: rotate(180deg);
}

/* Label: blur crossfade between models; script animates the width to the new name */
.sx-engine-select__swap {
  display: inline-grid;
  align-items: center;
  transition: width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-engine-select__swap-item {
  grid-area: 1 / 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.sx-engine-select__swap-item + .sx-engine-select__swap-item {
  animation: ms-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-engine-select__swap-item[data-leaving] {
  animation: ms-swap-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

/* ---------- Model tile ---------- */
.sx-engine-select__tile {
  --ms-tone: var(--sx-c1);
  --ms-tile: 24px;
  --sx-icon-size: 13px;
  display: grid;
  place-items: center;
  width: var(--ms-tile);
  height: var(--ms-tile);
  flex: none;
  border-radius: var(--sx-r-sm);
  color: color-mix(in srgb, var(--ms-tone) 74%, var(--sx-ink));
  background: color-mix(in srgb, var(--ms-tone) 15%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ms-tone) 26%, transparent);
}

.sx-engine-select__tile[data-tone="2"] { --ms-tone: var(--sx-c2); }
.sx-engine-select__tile[data-tone="3"] { --ms-tone: var(--sx-c3); }
.sx-engine-select__tile[data-tone="4"] { --ms-tone: var(--sx-c4); }
.sx-engine-select__tile[data-tone="5"] { --ms-tone: var(--sx-c5); }
.sx-engine-select__tile[data-tone="6"] { --ms-tone: var(--sx-c6); }

.sx-engine-select__trigger .sx-engine-select__tile {
  --ms-tile: 20px;
  --sx-icon-size: 12px;
}

/* ---------- Menu ---------- */
.sx-engine-select__menu {
  --sx-pop-origin: top left;
  --ms-cols: 24px minmax(0, 1fr) 32px 30px 40px 14px;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--sx-z-pop);
  width: 356px;
}

.sx-engine-select__menu:focus-visible {
  outline: none;
}

.sx-engine-select__head {
  display: grid;
  grid-template-columns: var(--ms-cols);
  column-gap: 6px;
  align-items: end;
  padding: 6px 8px 5px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  line-height: 1.2;
  color: var(--sx-muted);
}

.sx-engine-select__head > :first-child {
  grid-column: span 2;
}

.sx-engine-select__head > :not(:first-child) {
  justify-self: center;
}

/* One highlight that glides between options instead of each option lighting up */
.sx-engine-select__glide {
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: var(--ms-h, 0px);
  border-radius: var(--sx-r-sm);
  background: var(--sx-fill);
  transform: translateY(var(--ms-y, 0px));
  transition: transform var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
  pointer-events: none;
}

.sx-engine-select__glide[data-instant] {
  transition: none;
}

.sx-engine-select__menu:focus-visible .sx-engine-select__glide {
  box-shadow: inset 0 0 0 1px var(--sx-focus);
}

.sx-engine-select__option {
  position: relative;
  display: grid;
  grid-template-columns: var(--ms-cols);
  column-gap: 6px;
  align-items: center;
  min-height: 46px;
  padding: 6px 8px;
}

.sx-engine-select__option:hover,
.sx-engine-select__option[data-active="true"] {
  background: transparent;
}

.sx-engine-select__option > .sx-engine-select__tile {
  margin-right: 4px;
}

.sx-engine-select__text {
  display: grid;
  min-width: 0;
}

.sx-engine-select__opt-name {
  font-size: var(--sx-fs-base);
  font-weight: 500;
  line-height: 1.35;
  color: var(--sx-ink);
}

.sx-engine-select__desc {
  font-size: var(--sx-fs-xs);
  line-height: 1.35;
  color: var(--sx-muted);
}

/* Speed: three ascending bars */
.sx-engine-select__meter {
  justify-self: center;
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 10px;
}

.sx-engine-select__meter > span {
  width: 3px;
  border-radius: 1px;
  background: var(--sx-line-strong);
}

.sx-engine-select__meter > span:nth-child(1) { height: 4px; }
.sx-engine-select__meter > span:nth-child(2) { height: 7px; }
.sx-engine-select__meter > span:nth-child(3) { height: 10px; }

.sx-engine-select__meter[data-level="1"] > span:nth-child(1),
.sx-engine-select__meter[data-level="2"] > span:nth-child(-n + 2),
.sx-engine-select__meter[data-level="3"] > span {
  background: var(--sx-ink-2);
}

.sx-engine-select__cost,
.sx-engine-select__ctx {
  justify-self: center;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-engine-select__cost {
  letter-spacing: 0.02em;
  color: var(--sx-faint);
}

.sx-engine-select__cost > span,
.sx-engine-select__ctx {
  color: var(--sx-ink-2);
}

.sx-engine-select__option > .sx-engine-select__check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-engine-select__option[aria-selected="true"] > .sx-engine-select__check {
  opacity: 1;
  transform: none;
}

@keyframes ms-swap-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px);
  }
}

@keyframes ms-swap-out {
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }
}

@keyframes ms-fade-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes ms-fade-out {
  to {
    opacity: 0;
    filter: blur(4px);
  }
}

/* ---------- Demo: an assistant panel header with room for the open menu ---------- */
.sx-engine-select-demo {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 440px;
  height: 300px;
}

.sx-engine-select-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-engine-select-demo__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sx-engine-select-demo__tools > .sx-btn {
  color: var(--sx-muted);
}

.sx-engine-select-demo__body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  padding: 12px 32px;
  text-align: center;
}

.sx-engine-select-demo__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 16px;
}

.sx-engine-select-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-engine-select-demo__sub {
  max-width: 250px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-engine-select-demo__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 12px;
  padding: 5px 5px 5px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-engine-select-demo__composer:focus-within {
  box-shadow: var(--sx-focus-ring);
}

.sx-engine-select-demo__input {
  flex: 1;
  min-width: 0;
  height: 26px;
  padding: 0;
  border: 0;
  font-size: var(--sx-fs-base);
  background: transparent;
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  .sx-engine-select__swap-item + .sx-engine-select__swap-item {
    animation-name: ms-fade-in;
  }

  .sx-engine-select__swap-item[data-leaving] {
    animation-name: ms-fade-out;
  }

  .sx-engine-select__swap,
  .sx-engine-select__glide {
    transition: none;
  }
}


/* ---- Member Select (member-select) ---- */
/* ==========================================================================
   Member Select — multi-select combobox over a grouped list of people
   Root: data-focused. Field: chips (data-flip-key, data-leaving) + role="combobox" input.
   List: role="listbox" aria-multiselectable; options carry aria-selected and data-active.
   Avatars take a tint from data-tint="1…5" (chart series colours).
   ========================================================================== */

.sx-member-select {
  width: 400px;
  overflow: hidden;
}

.sx-member-select__head {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
}

.sx-member-select__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-member-select__count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Field: chips and the text input share one wrapping row ---------- */
.sx-member-select__field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 36px;
  padding: 4px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-member-select__field:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-member-select[data-focused] .sx-member-select__field {
  box-shadow: var(--sx-focus-ring);
}

.sx-member-select__chip {
  height: 26px;
  gap: 6px;
  padding: 0 3px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  box-shadow: var(--sx-shadow-1);
  cursor: default;
}

.sx-member-select__chip > .sx-avatar {
  --sx-avatar-size: 20px;
  font-size: 8.5px;
}

.sx-member-select__chip-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-member-select__remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: -2px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-member-select__remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-member-select__remove:focus-visible {
  outline-offset: 0;
}

.sx-member-select__chip[data-leaving] {
  pointer-events: none;
  animation: pp-chip-out var(--sx-dur-1) var(--sx-ease-in) forwards;
}

.sx-member-select__input {
  flex: 1 0 96px;
  min-width: 96px;
  height: 26px;
  padding: 0 6px;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: transparent;
}

/* ---------- Avatars ---------- */
.sx-member-select__avatar {
  --pp-tint: var(--sx-c6);
  --sx-avatar-bg: color-mix(in oklab, var(--pp-tint) 17%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in oklab, var(--pp-tint) 66%, var(--sx-ink));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pp-tint) 24%, transparent);
}

.sx-member-select__avatar[data-tint="1"] { --pp-tint: var(--sx-c1); }
.sx-member-select__avatar[data-tint="2"] { --pp-tint: var(--sx-c2); }
.sx-member-select__avatar[data-tint="3"] { --pp-tint: var(--sx-c3); }
.sx-member-select__avatar[data-tint="4"] { --pp-tint: var(--sx-c4); }
.sx-member-select__avatar[data-tint="5"] { --pp-tint: var(--sx-c5); }

/* ---------- Listbox ---------- */
.sx-member-select__list {
  position: relative;
  height: 200px;
  padding: 2px 6px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-member-select__group-label {
  padding: 9px 8px 4px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-member-select__option {
  display: grid;
  grid-template-columns: 24px auto minmax(0, 1fr) 16px;
  align-items: center;
  column-gap: 10px;
  height: 34px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-ink);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-member-select__option[data-active] {
  background: var(--sx-fill);
}

.sx-member-select__name {
  white-space: nowrap;
}

.sx-member-select__role {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-member-select__check {
  --sx-icon-size: 15px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-member-select__option[aria-selected="true"] .sx-member-select__check {
  opacity: 1;
  transform: none;
}

.sx-member-select__empty {
  padding: 56px 16px 0;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Footer hints ---------- */
.sx-member-select__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 14px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-member-select__hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-member-select__hint > .sx-kbd:last-of-type {
  margin-right: 3px;
}

@keyframes pp-chip-out {
  to {
    opacity: 0;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-member-select__chip[data-leaving] {
    animation-name: pp-fade-out;
  }

  .sx-member-select__check {
    transform: none;
  }

  @keyframes pp-fade-out {
    to { opacity: 0; }
  }
}


/* ---- Quick Run (quick-run) ---- */
/* ==========================================================================
   Quick Run — command menu with grouped results and a gliding highlight
   Root: data-ready (enables the glide). Input: role="combobox".
   Rows: role="option" aria-selected (the highlighted row), data-flash on Enter.
   One .sx-quick-run__glide sits under the rows and is moved by script (--ln-gy, --ln-gh).
   The results area animates its height (--ln-h) as results narrow.
   ========================================================================== */

.sx-quick-run {
  width: 520px;
  overflow: hidden;
}

/* ---------- Search ---------- */
.sx-quick-run__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-quick-run__search > .sx-icon {
  --sx-icon-size: 16px;
  color: var(--sx-muted);
}

.sx-quick-run__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-md);
  color: var(--sx-ink);
  background: transparent;
}

/* ---------- Results ---------- */
.sx-quick-run__list {
  height: var(--ln-h, auto);
  max-height: 250px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-quick-run[data-ready] .sx-quick-run__list {
  transition: height var(--sx-dur-3) var(--sx-ease-out);
}

.sx-quick-run__inner {
  position: relative;
  padding: 6px;
}

.sx-quick-run__glide {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: var(--ln-gh, 34px);
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  opacity: 0;
  transform: translateY(var(--ln-gy, 0px));
  pointer-events: none;
}

.sx-quick-run__glide[data-show] {
  opacity: 1;
}

.sx-quick-run[data-ready] .sx-quick-run__glide {
  transition:
    transform var(--sx-dur-2) var(--sx-ease-out),
    height var(--sx-dur-2) var(--sx-ease-out),
    opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-quick-run__label {
  padding: 8px 10px 5px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-quick-run__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px 0 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-quick-run__item > .sx-icon {
  --sx-icon-size: 16px;
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-quick-run__item[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-quick-run__item[aria-selected="true"] > .sx-icon {
  color: var(--sx-ink-2);
}

.sx-quick-run__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-quick-run__hit {
  color: var(--sx-accent-ink);
  font-weight: 600;
  background: none;
}

.sx-quick-run__keys {
  display: inline-flex;
  gap: 3px;
}

/* Enter / click: a short pulse on the chosen row */
.sx-quick-run__item[data-flash] {
  animation: ln-flash 0.6s var(--sx-ease-out);
}

.sx-quick-run__item[data-flash] > .sx-icon {
  color: var(--sx-accent-ink);
}

/* ---------- Empty state ---------- */
.sx-quick-run__empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 24px 26px;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-quick-run__empty-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-quick-run__empty-title {
  color: var(--sx-ink-2);
}

.sx-quick-run__empty-title strong {
  color: var(--sx-ink);
  font-weight: 500;
}

.sx-quick-run__empty:not([hidden]) {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Footer ---------- */
.sx-quick-run__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 38px;
  padding: 0 14px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-quick-run__hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-quick-run__hint > .sx-kbd:last-of-type {
  margin-right: 3px;
}

.sx-quick-run__count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* Demo: the card hangs from the top of a fixed box, like a palette under the search bar */
.sx-quick-run-demo {
  display: grid;
  align-content: start;
  height: 336px;
}

@keyframes ln-flash {
  0% {
    background-color: transparent;
    transform: none;
  }
  22% {
    background-color: var(--sx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
    transform: scale(0.985);
  }
  100% {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px transparent;
    transform: none;
  }
}

@keyframes ln-flash-still {
  22% {
    background-color: var(--sx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-quick-run__empty:not([hidden]) {
    animation-name: sx-fade-in;
  }

  .sx-quick-run__item[data-flash] {
    animation-name: ln-flash-still;
  }

  .sx-quick-run[data-ready] .sx-quick-run__glide {
    transition-property: opacity;
  }
}


/* ---- Period Calendar (period-calendar) ---- */
/* ==========================================================================
   Period Calendar — presets and two months with a range fill and hover preview
   Days (role="gridcell" buttons) carry:
     data-range="start | mid | end | single"   the chosen range (start alone while picking)
     data-preview="start | mid | end"          the range under the pointer before the second pick
     data-hover                                the day under the pointer
     data-row-start / data-row-end             first and last day of a week row (band ends)
     aria-current="date"                       today
   --rc-i on a day staggers the band as a range sweeps in.
   Presets: aria-pressed; one .sx-period-calendar__thumb glides to the pressed one (--rc-ty, --rc-th).
   Months container: data-dir="next | prev" slides new months in.
   ========================================================================== */

.sx-period-calendar {
  --rc-cell: 32px;
  --rc-step: 11ms;
  --rc-band: color-mix(in oklab, var(--sx-ink) 8%, var(--sx-card-bg));
  --rc-preview: color-mix(in oklab, var(--sx-ink) 4%, var(--sx-card-bg));
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 640px;
  overflow: hidden;
}

/* ---------- Presets ---------- */
.sx-period-calendar__presets {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  padding: 12px 8px;
  background: var(--sx-surface-2);
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-period-calendar__preset {
  position: relative;
  z-index: 1;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--sx-r-sm);
  text-align: left;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-period-calendar__preset:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-period-calendar__preset[aria-pressed="true"] {
  color: var(--sx-ink);
  font-weight: 500;
  background: transparent;
}

.sx-period-calendar__preset:focus-visible {
  outline-offset: -2px;
}

.sx-period-calendar__thumb {
  position: absolute;
  top: 0;
  left: 8px;
  right: 8px;
  height: var(--rc-th, 30px);
  border-radius: var(--sx-r-sm);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  opacity: 0;
  transform: translateY(var(--rc-ty, 0px));
  pointer-events: none;
}

.sx-period-calendar__thumb[data-show] {
  opacity: 1;
}

.sx-period-calendar[data-ready] .sx-period-calendar__thumb {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Months ---------- */
.sx-period-calendar__main {
  position: relative;
  padding: 12px 16px 14px;
  overflow: hidden;
}

.sx-period-calendar__nav {
  position: absolute;
  z-index: 2;
  top: 13px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.sx-period-calendar__nav > .sx-btn {
  pointer-events: auto;
  color: var(--sx-muted);
}

.sx-period-calendar__nav > .sx-btn:hover {
  color: var(--sx-ink);
}

.sx-period-calendar__months {
  display: grid;
  grid-template-columns: repeat(2, calc(var(--rc-cell) * 7));
  justify-content: center;
  gap: 24px;
}

.sx-period-calendar__months[data-dir="next"] {
  animation: rc-in-next var(--sx-dur-4) var(--sx-ease-out);
}

.sx-period-calendar__months[data-dir="prev"] {
  animation: rc-in-prev var(--sx-dur-4) var(--sx-ease-out);
}

.sx-period-calendar__title {
  display: grid;
  place-items: center;
  height: 28px;
  margin-bottom: 4px;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-period-calendar__grid {
  display: grid;
  gap: 2px;
  isolation: isolate;
}

.sx-period-calendar__row {
  display: grid;
  grid-template-columns: repeat(7, var(--rc-cell));
}

.sx-period-calendar__wd {
  display: grid;
  place-items: center;
  height: 24px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-period-calendar__pad {
  height: var(--rc-cell);
}

.sx-period-calendar__day {
  position: relative;
  height: var(--rc-cell);
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-period-calendar__day:hover {
  background-color: var(--sx-fill);
}

.sx-period-calendar__day:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

/* The band sits behind the day buttons (the grid isolates it). */
.sx-period-calendar__day::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 -0.5px;
  background: var(--rc-band);
  opacity: 0;
  transform: scaleX(0.55);
  transform-origin: left center;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-period-calendar__day[data-range="start"]::before,
.sx-period-calendar__day[data-range="mid"]::before,
.sx-period-calendar__day[data-range="end"]::before {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) calc(var(--rc-i, 0) * var(--rc-step)),
    transform var(--sx-dur-3) var(--sx-ease-out) calc(var(--rc-i, 0) * var(--rc-step)),
    background-color var(--sx-dur-3) var(--sx-ease-out) calc(var(--rc-i, 0) * var(--rc-step));
}

.sx-period-calendar__day[data-preview]::before {
  opacity: 1;
  transform: none;
  background: var(--rc-preview);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-period-calendar__day[data-range="start"]::before,
.sx-period-calendar__day[data-preview="start"]::before {
  left: 50%;
}

.sx-period-calendar__day[data-range="end"]::before,
.sx-period-calendar__day[data-preview="end"]::before {
  right: 50%;
}

.sx-period-calendar__day[data-row-start]::before {
  border-top-left-radius: var(--sx-r-md);
  border-bottom-left-radius: var(--sx-r-md);
}

.sx-period-calendar__day[data-row-end]::before {
  border-top-right-radius: var(--sx-r-md);
  border-bottom-right-radius: var(--sx-r-md);
}

/* Caps: the first and last day of the range */
.sx-period-calendar__day[data-range="start"],
.sx-period-calendar__day[data-range="end"],
.sx-period-calendar__day[data-range="single"] {
  font-weight: 500;
  color: var(--sx-on-primary);
  background-color: var(--sx-primary);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  animation: rc-cap-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-period-calendar__day[data-range="start"]:focus-visible,
.sx-period-calendar__day[data-range="end"]:focus-visible,
.sx-period-calendar__day[data-range="single"]:focus-visible {
  box-shadow: var(--sx-focus-ring), var(--sx-shadow-primary);
}

/* The day under the pointer while picking the end */
.sx-period-calendar__day[data-hover]:not([data-range]) {
  background-color: var(--rc-preview);
  box-shadow: inset 0 0 0 1.5px var(--sx-primary);
}

/* Today */
.sx-period-calendar__day[aria-current="date"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sx-accent);
}

.sx-period-calendar__day[aria-current="date"][data-range="start"]::after,
.sx-period-calendar__day[aria-current="date"][data-range="end"]::after,
.sx-period-calendar__day[aria-current="date"][data-range="single"]::after {
  background: var(--sx-on-primary);
}

/* ---------- Footer ---------- */
.sx-period-calendar__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-period-calendar__span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-period-calendar__span strong {
  color: var(--sx-ink);
  font-weight: 500;
}

.sx-period-calendar__actions {
  display: flex;
  gap: 6px;
}

@keyframes rc-cap-in {
  from {
    transform: scale(0.72);
  }
}

@keyframes rc-in-next {
  from {
    opacity: 0;
    transform: translateX(18px);
  }
}

@keyframes rc-in-prev {
  from {
    opacity: 0;
    transform: translateX(-18px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-period-calendar {
    --rc-step: 0ms;
  }

  .sx-period-calendar__day::before {
    transform: none;
  }

  .sx-period-calendar__day[data-range="start"],
  .sx-period-calendar__day[data-range="end"],
  .sx-period-calendar__day[data-range="single"] {
    animation: none;
  }

  .sx-period-calendar__months[data-dir="next"],
  .sx-period-calendar__months[data-dir="prev"] {
    animation-name: sx-fade-in;
  }

  .sx-period-calendar[data-ready] .sx-period-calendar__thumb {
    transition-property: opacity;
  }
}


/* ---- Drop Shelf (drop-shelf) ---- */
/* ==========================================================================
   Drop Shelf — drop zone plus one row per file
   Zone: data-dragover while files are over the tray.
   Rows: data-status="queued | uploading | done | failed | rejected", data-kind="pdf | image | file",
         data-flip-key (rows slide into place when the list changes).
   ========================================================================== */

.sx-drop-shelf {
  display: grid;
  gap: 12px;
  width: 100%;
  min-width: 0;
  padding: 14px;
}

/* ---------- Drop zone ---------- */
.sx-drop-shelf__zone {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 2px;
  height: 104px;
  padding: 0 16px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: var(--sx-r-lg);
  text-align: center;
  background: var(--sx-surface-2);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    border-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-drop-shelf__zone[data-dragover] {
  border-color: var(--sx-accent);
  background: var(--sx-accent-soft);
  box-shadow: 0 0 0 4px var(--sx-accent-soft);
}

.sx-drop-shelf__icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
  transition:
    transform var(--sx-dur-3) var(--sx-ease-spring),
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-drop-shelf__zone[data-dragover] .sx-drop-shelf__icon {
  color: var(--sx-accent-ink);
  box-shadow: var(--sx-shadow-2);
  transform: translateY(-4px);
}

.sx-drop-shelf__title {
  font-size: var(--sx-fs-base);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-drop-shelf__browse {
  font-weight: 500;
  color: var(--sx-accent-ink);
  border-radius: var(--sx-r-xs);
  text-decoration: underline;
  text-decoration-color: var(--sx-accent-line);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-drop-shelf__browse:hover {
  text-decoration-color: currentColor;
}

.sx-drop-shelf__hint {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- List ---------- */
.sx-drop-shelf__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 2px;
}

.sx-drop-shelf__label {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-drop-shelf__summary {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-drop-shelf__list {
  position: relative;
  display: grid;
  align-content: start;
  gap: 2px;
  height: 182px;
  margin: -4px -6px 0;
  padding: 0 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-drop-shelf__empty {
  padding-top: 64px;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-faint);
}

.sx-drop-shelf__row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  height: 44px;
  padding: 0 4px 0 2px;
}

.sx-drop-shelf__tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-surface-3);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  --sx-icon-size: 15px;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-drop-shelf__row[data-kind="pdf"] .sx-drop-shelf__tile {
  color: var(--sx-mark-ink);
  background: var(--sx-mark-soft);
  box-shadow: inset 0 0 0 1px var(--sx-mark-line);
}

.sx-drop-shelf__row[data-kind="image"] .sx-drop-shelf__tile {
  color: var(--sx-info-ink);
  background: var(--sx-info-soft);
  box-shadow: inset 0 0 0 1px var(--sx-info-line);
}

.sx-drop-shelf__row[data-status="rejected"] .sx-drop-shelf__tile {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-drop-shelf__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-drop-shelf__line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  line-height: 1.2;
}

.sx-drop-shelf__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink);
}

.sx-drop-shelf__status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-drop-shelf__status > .sx-icon {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2;
  animation: ut-pop var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-drop-shelf__row[data-status="done"] .sx-drop-shelf__status {
  color: var(--sx-success-ink);
}

.sx-drop-shelf__row[data-status="failed"] .sx-drop-shelf__status,
.sx-drop-shelf__row[data-status="rejected"] .sx-drop-shelf__status {
  color: var(--sx-danger-ink);
}

.sx-drop-shelf__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

.sx-drop-shelf__size {
  flex: none;
  min-width: 48px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-drop-shelf__bar {
  flex: 1;
  height: 4px;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-drop-shelf__row[data-status="done"] .sx-drop-shelf__bar {
  --sx-progress-color: var(--sx-success);
}

.sx-drop-shelf__row[data-status="failed"] .sx-drop-shelf__bar {
  --sx-progress-color: var(--sx-danger);
}

.sx-drop-shelf__row[data-status="rejected"] .sx-drop-shelf__bar {
  opacity: 0;
}

.sx-drop-shelf__action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 14px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-drop-shelf__action:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-drop-shelf__retry {
  animation: ut-pop var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-drop-shelf__retry > .sx-icon {
  --sx-icon-size: 13px;
}

@keyframes ut-pop {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-drop-shelf__zone[data-dragover] .sx-drop-shelf__icon {
    transform: none;
  }

  .sx-drop-shelf__status > .sx-icon,
  .sx-drop-shelf__retry {
    animation-name: sx-fade-in;
  }
}

/* ---------- Demo layout ---------- */
.sx-drop-shelf-demo {
  width: 440px;
  max-width: 100%;
}


/* ---- Passcode Boxes (passcode-boxes) ---- */
/* ==========================================================================
   Passcode Boxes — one-time code input
   States on the root: data-state="idle | checking | error | success", data-focused
   ========================================================================== */

.sx-passcode-boxes {
  --cf-cell-w: 42px;
  --cf-cell-h: 50px;
  --cf-gap: 8px;
  width: 380px;
  overflow: hidden;
  text-align: center;
}

.sx-passcode-boxes__head {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 28px 28px 0;
}

.sx-passcode-boxes__badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-bottom: 10px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
}

.sx-passcode-boxes__title {
  font-size: var(--sx-fs-lg);
}

.sx-passcode-boxes__sub {
  color: var(--sx-muted);
}

.sx-passcode-boxes__sub strong {
  color: var(--sx-ink);
  font-weight: 500;
}

.sx-passcode-boxes__body {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 22px 28px 20px;
}

/* The real input sits over the cells: typing, paste and SMS autofill all go through it. */
.sx-passcode-boxes__control {
  position: relative;
  display: block;
  cursor: text;
}

.sx-passcode-boxes__input {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: 16px;
  color: transparent;
  caret-color: transparent;
  background: transparent;
  outline: none;
  cursor: text;
}

.sx-passcode-boxes__input::selection {
  background: transparent;
}

.sx-passcode-boxes__cells {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--cf-gap);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), filter var(--sx-dur-3) var(--sx-ease-out);
}

.sx-passcode-boxes__cell {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--cf-cell-w);
  height: var(--cf-cell-h);
  border-radius: var(--sx-r-md);
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition:
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-in-out),
    opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-passcode-boxes__cell[data-filled] {
  background: var(--sx-surface-2);
}

.sx-passcode-boxes__char {
  display: block;
  animation: cf-char-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

/* Blinking caret in the active empty cell */
.sx-passcode-boxes[data-focused] .sx-passcode-boxes__cell[data-caret]::after {
  content: "";
  position: absolute;
  width: 1.5px;
  height: 20px;
  border-radius: 1px;
  background: var(--sx-ink);
  animation: sx-blink 1.05s steps(1) infinite;
}

.sx-passcode-boxes__sep {
  width: 9px;
  height: 1.5px;
  flex: none;
  border-radius: 1px;
  background: var(--sx-line-strong);
}

/* One ring that glides to the active cell instead of each cell lighting up on its own */
.sx-passcode-boxes__ring {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cf-cell-w);
  height: var(--cf-cell-h);
  border-radius: var(--sx-r-md);
  box-shadow: var(--sx-focus-ring);
  opacity: 0;
  transform: translateX(var(--cf-ring-x, 0px));
  transition: transform var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
  pointer-events: none;
}

.sx-passcode-boxes[data-focused] .sx-passcode-boxes__ring {
  opacity: 1;
}

.sx-passcode-boxes__msg {
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-passcode-boxes__msg > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-passcode-boxes__msg:empty {
  visibility: hidden;
}

.sx-passcode-boxes__msg .sx-spinner {
  --sx-spinner-size: 12px;
}

.sx-passcode-boxes__resend {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-passcode-boxes__link {
  color: var(--sx-ink);
  font-weight: 500;
  border-radius: var(--sx-r-xs);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-passcode-boxes__link:disabled {
  color: var(--sx-ink-2);
  font-weight: var(--sx-text-weight);
  cursor: default;
}

.sx-passcode-boxes__link:not(:disabled):hover {
  color: var(--sx-accent-ink);
}

.sx-passcode-boxes__verified {
  position: absolute;
  left: 50%;
  top: 22px;
  height: var(--cf-cell-h);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-md);
  font-weight: 500;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  opacity: 0;
  filter: blur(6px);
  transform: translateX(-50%) scale(0.6);
  pointer-events: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.52s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.52s,
    transform var(--sx-dur-4) var(--sx-ease-spring) 0.52s;
}

.sx-passcode-boxes__verified > .sx-icon {
  --sx-icon-size: 16px;
  --sx-icon-stroke: 2.25;
}

.sx-passcode-boxes__foot {
  padding: 11px 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-passcode-boxes__foot strong {
  color: var(--sx-ink);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---------- States ---------- */
.sx-passcode-boxes[data-state="checking"] .sx-passcode-boxes__cell {
  animation: cf-breathe 0.9s var(--sx-ease-in-out) infinite;
  animation-delay: calc(var(--cf-i, 0) * 60ms);
}

.sx-passcode-boxes[data-state="error"] .sx-passcode-boxes__cells {
  animation: sx-shake 0.42s var(--sx-ease-out);
}

.sx-passcode-boxes[data-state="error"] .sx-passcode-boxes__cell {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-passcode-boxes[data-state="error"] .sx-passcode-boxes__ring {
  opacity: 0;
}

.sx-passcode-boxes[data-state="error"] .sx-passcode-boxes__msg {
  color: var(--sx-danger-ink);
}

/* Success: cells turn green, then fold into the Verified pill */
.sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__cell {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  opacity: 0;
  transform: translateX(var(--cf-dx, 0px)) scale(0.4);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-in-out) calc(0.3s + var(--cf-i, 0) * 18ms),
    opacity var(--sx-dur-3) var(--sx-ease-out) calc(0.36s + var(--cf-i, 0) * 18ms);
}

.sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__sep,
.sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__ring {
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out) 0.3s;
}

.sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__verified {
  opacity: 1;
  filter: none;
  transform: translateX(-50%) scale(1);
}

.sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__input {
  pointer-events: none;
}

@keyframes cf-char-in {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.6);
  }
}

@keyframes cf-breathe {
  50% {
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
    background: var(--sx-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-passcode-boxes__char {
    animation-name: sx-fade-in;
  }

  .sx-passcode-boxes[data-state="error"] .sx-passcode-boxes__cells {
    animation: none;
  }

  .sx-passcode-boxes[data-state="success"] .sx-passcode-boxes__cell {
    transform: none;
  }
}


/* ---- Segment Rail (segment-rail) ---- */
/* ==========================================================================
   Segment Rail — segmented control with a sliding thumb
   Root: role="radiogroup"; options: role="radio" aria-checked; one .sx-segment-rail__thumb
   Sizes: default (30px), .sx-segment-rail--sm (26px). Fill: .sx-segment-rail--block
   ========================================================================== */

.sx-segment-rail {
  --sb-h: var(--sx-h-md);
  --sb-pad: 2px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  height: var(--sb-h);
  padding: var(--sb-pad);
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
  user-select: none;
}

.sx-segment-rail--sm {
  --sb-h: var(--sx-h-sm);
}

.sx-segment-rail--block {
  display: flex;
  width: 100%;
}

.sx-segment-rail--block > .sx-segment-rail__option {
  flex: 1;
}

.sx-segment-rail__option {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border-radius: calc(var(--sx-r-md) - var(--sb-pad));
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-segment-rail--sm .sx-segment-rail__option {
  padding: 0 9px;
  font-size: var(--sx-fs-xs);
}

.sx-segment-rail__option > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-segment-rail__option:hover {
  color: var(--sx-ink-2);
}

.sx-segment-rail__option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-segment-rail__option:focus-visible {
  outline-offset: 0;
}

.sx-segment-rail__badge {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-segment-rail__option[aria-checked="true"] .sx-segment-rail__badge {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-segment-rail__badge--accent {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

/* The thumb is positioned by script from the checked option's offset box. */
.sx-segment-rail__thumb {
  position: absolute;
  z-index: 0;
  top: var(--sb-pad);
  bottom: var(--sb-pad);
  left: 0;
  width: var(--sb-w, 0px);
  border-radius: calc(var(--sx-r-md) - var(--sb-pad));
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--sb-x, 0px));
  pointer-events: none;
}

.sx-segment-rail[data-ready] .sx-segment-rail__thumb {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out);
}

/* Demo layout (settings panel) */
.sx-segment-rail-demo {
  display: grid;
  gap: 18px;
  width: 400px;
  padding: 22px 24px 24px;
}

.sx-segment-rail-demo__row {
  display: grid;
  gap: 8px;
  justify-items: start;
}

.sx-segment-rail-demo__row + .sx-segment-rail-demo__row {
  padding-top: 18px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-segment-rail-demo__label {
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-muted);
}


/* ---- Wizard Steps (wizard-steps) ---- */
/* ==========================================================================
   Wizard Steps — multi-step setup form with progress, validation and a review
   Root: data-state="done" after the last step.
   Steps: data-status="done | current | todo", aria-current="step"; the rail fill reads --sf-progress.
   Panels: data-pos="before | current | after"; the ones off stage are inert. Moving forward
   sends the current panel left and brings the next in from the right, and the reverse going back.
   Fields: aria-invalid; .sx-wizard-steps__url takes data-invalid; data-focus previews focus.
   ========================================================================== */

.sx-wizard-steps {
  width: 460px;
  overflow: hidden;
}

/* ---------- Progress ---------- */
.sx-wizard-steps__head {
  position: relative;
  padding: 16px 20px 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-wizard-steps__rail {
  position: absolute;
  top: 26px;
  left: calc(20px + (100% - 40px) / 8);
  right: calc(20px + (100% - 40px) / 8);
  height: 2px;
  overflow: hidden;
  border-radius: 1px;
  background: var(--sx-line);
}

.sx-wizard-steps__fill {
  position: absolute;
  inset: 0;
  background: var(--sx-primary);
  transform-origin: left center;
  transform: scaleX(var(--sf-progress, 0));
  transition: transform var(--sx-dur-5) var(--sx-ease-in-out);
}

.sx-wizard-steps__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sx-wizard-steps__step {
  display: grid;
  justify-items: center;
  gap: 6px;
}

.sx-wizard-steps__dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  background: var(--sx-card-bg);
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-wizard-steps__dot > * {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-wizard-steps__dot > .sx-icon {
  --sx-icon-size: 12px;
  --sx-icon-stroke: 3;
  opacity: 0;
  transform: scale(0.4);
}

.sx-wizard-steps__step[data-status="current"] .sx-wizard-steps__dot {
  color: var(--sx-ink);
  box-shadow: inset 0 0 0 1.5px var(--sx-primary), 0 0 0 4px var(--sx-fill);
}

.sx-wizard-steps__step[data-status="done"] .sx-wizard-steps__dot {
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: inset 0 0 0 1.5px var(--sx-primary);
}

.sx-wizard-steps__step[data-status="done"] .sx-wizard-steps__num {
  opacity: 0;
  transform: scale(0.4);
}

.sx-wizard-steps__step[data-status="done"] .sx-wizard-steps__dot > .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-wizard-steps__name {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-wizard-steps__step[data-status="current"] .sx-wizard-steps__name {
  color: var(--sx-ink);
}

.sx-wizard-steps__step[data-status="done"] .sx-wizard-steps__name {
  color: var(--sx-ink-2);
}

/* ---------- Panels ---------- */
.sx-wizard-steps__viewport {
  position: relative;
  height: 216px;
  overflow: hidden;
}

.sx-wizard-steps__panel {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px 20px 0;
  transition:
    transform var(--sx-dur-3) var(--sx-ease-in-out),
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-wizard-steps__panel[data-pos="before"],
.sx-wizard-steps__panel[data-pos="after"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sx-wizard-steps__panel[data-pos="before"] {
  transform: translateX(-36px);
}

.sx-wizard-steps__panel[data-pos="after"] {
  transform: translateX(36px);
}

.sx-wizard-steps__panel[data-pos="current"] {
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out) 70ms,
    opacity var(--sx-dur-3) var(--sx-ease-out) 70ms,
    visibility 0s linear 0s;
}

.sx-wizard-steps__intro {
  display: grid;
  gap: 3px;
}

.sx-wizard-steps__title {
  font-size: var(--sx-fs-lg);
}

.sx-wizard-steps__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-wizard-steps__fields {
  display: grid;
  gap: 8px;
}

.sx-wizard-steps .sx-field {
  gap: 5px;
}

.sx-wizard-steps .sx-label {
  line-height: 16px;
}

.sx-wizard-steps .sx-input[data-focus]:not([aria-invalid="true"]),
.sx-wizard-steps__url[data-focus]:not([data-invalid]),
.sx-wizard-steps__url:focus-within:not([data-invalid]) {
  box-shadow: var(--sx-focus-ring);
}

.sx-wizard-steps__msg {
  display: flex;
  align-items: center;
  min-height: 15px;
  font-size: var(--sx-fs-xs);
  line-height: 15px;
  color: var(--sx-muted);
}

.sx-wizard-steps__error {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sx-danger-ink);
  animation: sf-error-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-wizard-steps__error > .sx-icon {
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2;
}

/* Web address: a fixed prefix and the editable part in one control */
.sx-wizard-steps__url {
  display: flex;
  align-items: center;
  height: var(--sx-h-md);
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-wizard-steps__url:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-wizard-steps__url[data-invalid] {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-wizard-steps__prefix {
  padding-left: 10px;
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-wizard-steps__slug {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0 10px 0 1px;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: transparent;
}

/* ---------- Team ---------- */
.sx-wizard-steps__invite {
  display: flex;
  gap: 8px;
}

.sx-wizard-steps__team {
  display: grid;
  max-height: 72px;
  overflow-y: auto;
  margin-top: -4px;
}

.sx-wizard-steps__member {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 2px;
}

.sx-wizard-steps__member + .sx-wizard-steps__member {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-wizard-steps__avatar {
  --sf-tint: var(--sx-c1);
  --sx-avatar-bg: color-mix(in oklab, var(--sf-tint) 17%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in oklab, var(--sf-tint) 66%, var(--sx-ink));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sf-tint) 24%, transparent);
}

.sx-wizard-steps__avatar[data-tint="2"] { --sf-tint: var(--sx-c2); }
.sx-wizard-steps__avatar[data-tint="3"] { --sf-tint: var(--sx-c3); }
.sx-wizard-steps__avatar[data-tint="4"] { --sf-tint: var(--sx-c4); }
.sx-wizard-steps__avatar[data-tint="5"] { --sf-tint: var(--sx-c5); }

.sx-wizard-steps__email {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-wizard-steps__remove {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 13px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-wizard-steps__remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-wizard-steps__none {
  padding: 8px 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-faint);
}

/* ---------- Channels ---------- */
.sx-wizard-steps__channels {
  display: grid;
  gap: 6px;
}

.sx-wizard-steps__channel {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  height: 46px;
  padding: 0 12px 0 8px;
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-wizard-steps__channel[data-on] {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-wizard-steps__channel-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 15px;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-wizard-steps__channel[data-on] .sx-wizard-steps__channel-icon {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-wizard-steps__channel-text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.sx-wizard-steps__channel-name {
  font-weight: 500;
}

.sx-wizard-steps__channel-desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* ---------- Review ---------- */
.sx-wizard-steps__review {
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-wizard-steps__row {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  min-height: 34px;
  padding: 0 4px 0 12px;
}

.sx-wizard-steps__row + .sx-wizard-steps__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-wizard-steps__row > dt {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-wizard-steps__row > dd {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-wizard-steps__edit {
  height: 24px;
  padding: 0 8px;
  font-size: var(--sx-fs-xs);
}

/* ---------- Done ---------- */
.sx-wizard-steps__done {
  justify-items: center;
  align-content: center;
  gap: 6px;
  padding-top: 0;
  text-align: center;
}

.sx-wizard-steps__badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 20px;
  --sx-icon-stroke: 2.5;
}

.sx-wizard-steps__done[data-pos="current"] .sx-wizard-steps__badge {
  animation: sf-badge-in var(--sx-dur-4) var(--sx-ease-spring) 0.18s both;
}

.sx-wizard-steps__done .sx-wizard-steps__sub {
  max-width: 320px;
}

/* ---------- Footer ---------- */
.sx-wizard-steps__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px 12px 20px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-wizard-steps__count {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-wizard-steps__nav {
  display: flex;
  gap: 8px;
}

.sx-wizard-steps__back {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-wizard-steps[data-state="done"] .sx-wizard-steps__back {
  opacity: 0;
  visibility: hidden;
}

.sx-wizard-steps__next {
  min-width: 132px;
}

@keyframes sf-error-in {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
}

@keyframes sf-badge-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-wizard-steps__panel[data-pos="before"],
  .sx-wizard-steps__panel[data-pos="after"] {
    transform: none;
  }

  .sx-wizard-steps__error,
  .sx-wizard-steps__member {
    animation-name: sx-fade-in;
  }

  .sx-wizard-steps__done[data-pos="current"] .sx-wizard-steps__badge {
    animation-name: sx-fade-in;
  }
}


/* ---- Refine Chips (refine-chips) ---- */
/* ==========================================================================
   Refine Chips — result count, removable filter chips and an add-filter menu
   Chips: data-flip-key (FLIP on add/remove), data-leaving while they fade out.
   Menu: .sx-menu.sx-pop, data-state="open", data-align="end" near the right edge.
   Views inside the menu: data-view="fields" | "<field id>", hidden when not shown,
   data-dir="in" | "back" for the slide when navigating between them.
   ========================================================================== */

.sx-refine-chips {
  display: grid;
  gap: 10px;
}

.sx-refine-chips__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 26px;
}

.sx-refine-chips__result {
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
}

.sx-refine-chips__count {
  color: var(--sx-ink);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
}

.sx-refine-chips__clear {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-refine-chips__clear:disabled {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
}

/* ---------- Chips ---------- */
.sx-refine-chips__chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: 6px;
  min-height: 58px;
}

.sx-refine-chips__chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 3px 0 9px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-refine-chips__chip > .sx-icon {
  --sx-icon-size: 13px;
  margin-right: 1px;
  color: var(--sx-muted);
}

.sx-refine-chips__op {
  color: var(--sx-muted);
}

.sx-refine-chips__value {
  color: var(--sx-ink);
  font-weight: 500;
}

.sx-refine-chips__remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-left: 1px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-refine-chips__remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-refine-chips__remove:focus-visible {
  outline-offset: 0;
}

.sx-refine-chips__chip[data-leaving] {
  pointer-events: none;
  animation: fb-chip-out var(--sx-dur-1) var(--sx-ease-in) forwards;
}

/* ---------- Add filter + menu ---------- */
.sx-refine-chips__add {
  position: relative;
}

.sx-refine-chips__trigger {
  height: 26px;
  padding: 0 10px 0 8px;
  border-radius: var(--sx-r-pill);
  color: var(--sx-ink-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-refine-chips__trigger[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-refine-chips__menu {
  --sx-pop-origin: top left;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--sx-z-pop);
  width: 208px;
}

.sx-refine-chips__menu[data-align="end"] {
  --sx-pop-origin: top right;
  left: auto;
  right: 0;
}

.sx-refine-chips__view[data-dir="in"] {
  animation: fb-view-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-refine-chips__view[data-dir="back"] {
  animation: fb-view-back var(--sx-dur-3) var(--sx-ease-out);
}

.sx-refine-chips__menu .sx-menu__item:focus-visible {
  outline: none;
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-refine-chips__item-label {
  flex: 1;
}

.sx-refine-chips__current {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-menu__item > .sx-refine-chips__next {
  --sx-icon-size: 14px;
  margin-right: -2px;
  color: var(--sx-faint);
}

.sx-refine-chips__back {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-refine-chips__menu [role="menuitemradio"] {
  justify-content: space-between;
}

.sx-refine-chips__tick {
  --sx-icon-stroke: 2.25;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-menu__item > .sx-refine-chips__tick {
  --sx-icon-size: 14px;
  color: var(--sx-ink);
}

.sx-refine-chips__menu [aria-checked="true"] > .sx-refine-chips__tick {
  opacity: 1;
  transform: none;
}

/* ---------- Demo: an inbox list under the bar; the menu opens over it ---------- */
.sx-refine-chips-demo {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 520px;
  height: 320px;
  padding: 14px 16px 0;
  overflow: hidden;
}

.sx-refine-chips-demo__list {
  margin: 0 -16px;
  padding: 4px 8px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), filter var(--sx-dur-3) var(--sx-ease-out);
}

.sx-refine-chips-demo__list[data-loading] {
  opacity: 0.45;
  filter: blur(0.6px);
  transition-duration: var(--sx-dur-1);
}

.sx-refine-chips-demo__row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  height: 46px;
  padding: 0 8px;
}

.sx-refine-chips-demo__row + .sx-refine-chips-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-refine-chips-demo__avatar {
  --sx-avatar-size: 28px;
  --fb-tint: var(--sx-c6);
  --sx-avatar-bg: color-mix(in oklab, var(--fb-tint) 17%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in oklab, var(--fb-tint) 66%, var(--sx-ink));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--fb-tint) 24%, transparent);
}

.sx-refine-chips-demo__avatar[data-tint="1"] { --fb-tint: var(--sx-c1); }
.sx-refine-chips-demo__avatar[data-tint="2"] { --fb-tint: var(--sx-c2); }
.sx-refine-chips-demo__avatar[data-tint="3"] { --fb-tint: var(--sx-c3); }
.sx-refine-chips-demo__avatar[data-tint="4"] { --fb-tint: var(--sx-c4); }

.sx-refine-chips-demo__who {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.sx-refine-chips-demo__name {
  font-weight: 500;
}

.sx-refine-chips-demo__msg {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-refine-chips-demo__time {
  align-self: start;
  padding-top: 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes fb-chip-out {
  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes fb-view-in {
  from {
    opacity: 0;
    transform: translateX(12px);
  }
}

@keyframes fb-view-back {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
}

@keyframes fb-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-refine-chips__chip[data-leaving] {
    animation-name: fb-fade-out;
  }

  .sx-refine-chips__view[data-dir="in"],
  .sx-refine-chips__view[data-dir="back"] {
    animation-name: sx-fade-in;
  }

  .sx-refine-chips-demo__list[data-loading] {
    filter: none;
  }
}


/* ---- Action Buttons (action-buttons) ---- */
/* ==========================================================================
   Action Buttons: the .sx-btn family lives in base.css; this file adds
   .sx-button-group (attached buttons) and the library demo layout.
   Group: <div class="sx-button-group" role="group"> with .sx-btn children.
   The group needs no size or radius of its own: each button keeps its outer
   corners and only the shared inner edges go square.
   ========================================================================== */

.sx-button-group {
  display: inline-flex;
  vertical-align: middle;
  isolation: isolate;
}

/* Neighbours share one edge: inner corners go square and borders overlap by 1px. */
.sx-button-group > .sx-btn:not(:first-child) {
  margin-inline-start: -1px;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.sx-button-group > .sx-btn:not(:last-child) {
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}

/* The hovered or focused button sits on top, so its border and focus ring stay whole. */
.sx-button-group > .sx-btn:is(:hover, :focus-visible) {
  z-index: 1;
}

/* Filled neighbours get a soft divider drawn in their label colour. */
.sx-button-group > :is(.sx-btn--primary, .sx-btn--accent) + :is(.sx-btn--primary, .sx-btn--accent) {
  border-inline-start-color: color-mix(in srgb, currentColor 24%, transparent);
}

/* A trailing icon segment (split button) is a little narrower than a square. */
.sx-button-group > .sx-btn--icon:last-child:not(:only-child) {
  width: calc(var(--_h) - 6px);
}

/* ---------- Demo layout: variants x sizes, then icon-only, group, loading, disabled ---------- */
.sx-action-buttons-demo {
  display: grid;
  gap: 22px;
  width: max-content;
  padding: 24px 26px 26px;
}

.sx-action-buttons-demo__grid {
  display: grid;
  grid-template-columns: auto repeat(5, auto);
  align-items: center;
  justify-items: start;
  gap: 14px 12px;
}

.sx-action-buttons-demo__head,
.sx-action-buttons-demo__label {
  font-size: var(--sx-fs-2xs, 11px);
  font-weight: 500;
  line-height: 1;
  color: var(--sx-muted, color-mix(in srgb, currentColor 60%, transparent));
}

.sx-action-buttons-demo__head {
  padding-bottom: 2px;
}

.sx-action-buttons-demo__size {
  padding-inline-end: 12px;
  font-size: var(--sx-fs-xs, 12px);
  color: var(--sx-muted, color-mix(in srgb, currentColor 60%, transparent));
}

.sx-action-buttons-demo__states {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 30px;
  padding-top: 22px;
  border-top: 1px solid var(--sx-line-soft, color-mix(in srgb, currentColor 8%, transparent));
}

.sx-action-buttons-demo__cell {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.sx-action-buttons-demo__row {
  display: flex;
  gap: 6px;
}

/* Wide enough for both labels, so the button never changes width during the cycle. */
.sx-action-buttons-demo__save {
  min-width: 9.25em;
}

.sx-action-buttons-demo__save[data-swap] > :not(.sx-spinner) {
  opacity: 0;
}

/* The check draws itself once the spinner hands over. */
.sx-action-buttons-demo__save > .sx-icon {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: sx-kit-check 0.34s cubic-bezier(0.2, 0, 0, 1) 0.12s forwards;
}

@keyframes sx-kit-check {
  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-action-buttons-demo__save > .sx-icon {
    animation: none;
    stroke-dashoffset: 0;
  }
}


/* ---- Flash Notes (flash-notes) ---- */
/* ==========================================================================
   Flash Notes — toasts that tuck behind each other and fan out on hover
   List: <ol class="sx-flash-notes"> [data-expanded] while hovered, focused or previewed.
   Item: <li class="sx-flash-notes__item" data-state="entering | shown | leaving" data-tone [data-front]>
   Script measures offset heights and writes --ns-y, --ns-s and --ns-clip per item, and --ns-h on the
   list; collapsed items behind the front one are scaled down and clipped to its height.
   ========================================================================== */

.sx-flash-notes {
  --ns-w: 340px;
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: var(--sx-z-toast);
  width: var(--ns-w);
  height: var(--ns-h, 0px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-flash-notes__item {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 100%;
  transform-origin: 50% 0;
  transform: translateY(var(--ns-y, 0px)) scale(var(--ns-s, 1));
  clip-path: inset(-40px -40px var(--ns-clip, 0px) -40px);
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    clip-path var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out);
}

/* New notices rise in from below the corner. */
.sx-flash-notes__item[data-state="entering"] {
  opacity: 0;
  transform: translateY(calc(100% + 24px));
  transition: none;
}

/* Exits are quicker than entrances. */
.sx-flash-notes__item[data-state="leaving"] {
  opacity: 0;
  transform: translateY(calc(var(--ns-y, 0px) + 12px)) scale(calc(var(--ns-s, 1) * 0.97));
  pointer-events: none;
  transition: transform var(--sx-dur-3) var(--sx-ease-in), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-flash-notes__item[data-hidden] {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Card ---------- */
.sx-flash-notes__card {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 11px 12px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-3);
}

/* Behind the front notice, only the card edge shows while the stack is collapsed. */
.sx-flash-notes__card > * {
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-flash-notes:not([data-expanded]) .sx-flash-notes__item:not([data-front]) .sx-flash-notes__card > * {
  opacity: 0;
}

.sx-flash-notes__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  --sx-icon-size: 15px;
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-flash-notes__item[data-tone="success"] .sx-flash-notes__icon {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-flash-notes__item[data-tone="info"] .sx-flash-notes__icon {
  color: var(--sx-info-ink);
  background: var(--sx-info-soft);
}

.sx-flash-notes__item[data-tone="warning"] .sx-flash-notes__icon {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
}

.sx-flash-notes__item[data-tone="danger"] .sx-flash-notes__icon {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-flash-notes__text {
  min-width: 0;
}

.sx-flash-notes__title {
  overflow: hidden;
  font-size: var(--sx-fs-base);
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink);
}

.sx-flash-notes__desc {
  margin-top: 1px;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

/* After an update (Undo becomes Restored) the new content sharpens in. */
.sx-flash-notes__item[data-swapped] :is(.sx-flash-notes__icon, .sx-flash-notes__text) {
  animation: ns-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

/* Close: a small round button on the corner, shown on hover, focus and while fanned out. */
.sx-flash-notes__close {
  position: absolute;
  top: -7px;
  left: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 11px;
  --sx-icon-stroke: 2.2;
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring),
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-flash-notes__close:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-flash-notes__close:focus-visible {
  outline-offset: 1px;
}

.sx-flash-notes[data-expanded] .sx-flash-notes__close,
.sx-flash-notes__card:is(:hover, :focus-within) .sx-flash-notes__close {
  opacity: 1;
  transform: none;
}

.sx-flash-notes:not([data-expanded]) .sx-flash-notes__item:not([data-front]) .sx-flash-notes__close {
  opacity: 0;
}

/* Time left before the notice closes itself; it holds still while the stack is hovered. */
.sx-flash-notes__timer {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sx-line-strong);
  transform-origin: left center;
  pointer-events: none;
}

.sx-flash-notes__item[data-tone="success"] .sx-flash-notes__timer {
  background: color-mix(in srgb, var(--sx-success) 45%, transparent);
}

.sx-flash-notes__item[data-tone="info"] .sx-flash-notes__timer {
  background: color-mix(in srgb, var(--sx-info) 45%, transparent);
}

/* ---------- Demo: a quiet inbox with the stack in its bottom-right corner ---------- */
.sx-flash-notes-demo {
  position: relative;
  width: 420px;
  height: 304px;
  overflow: hidden;
}

.sx-flash-notes-demo .sx-flash-notes {
  position: absolute;
  right: 14px;
  bottom: 14px;
}

.sx-flash-notes-demo__app {
  height: 100%;
}

.sx-flash-notes-demo__head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-flash-notes-demo__head strong {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-flash-notes-demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-flash-notes-demo__row > span:nth-child(2) {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-flash-notes-demo__row strong {
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-flash-notes-demo__row time {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-faint);
}

@keyframes ns-swap-in {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-flash-notes__item,
  .sx-flash-notes__item[data-state="leaving"] {
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-flash-notes__item[data-state="entering"] {
    transform: translateY(var(--ns-y, 0px)) scale(var(--ns-s, 1));
  }
}


/* ---- Allowance Bar (allowance-bar) ---- */
/* ==========================================================================
   Allowance Bar — plan usage as a stacked bar with a legend and a warning note
   Root: data-state="ok | warning" (warning once usage passes the threshold), data-ready
   Segments are full-width layers placed with transform (translateX + scaleX), never width:
     --qm-start / --qm-size are fractions of the limit; gaps sit at --qm-at.
   ========================================================================== */

.sx-allowance-bar {
  width: 100%;
  min-width: 0;
  padding: 18px 20px 20px;
}

.sx-allowance-bar__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sx-allowance-bar__badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-allowance-bar__plan {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-allowance-bar__name {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: var(--sx-lh-tight);
}

.sx-allowance-bar__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-allowance-bar__reset {
  flex: none;
}

.sx-allowance-bar__summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
}

.sx-allowance-bar__headline {
  color: var(--sx-muted);
}

.sx-allowance-bar__used {
  margin-right: 2px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-allowance-bar__pct {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Bar ---------- */
.sx-allowance-bar__bar {
  position: relative;
  height: 10px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
  transition: background-color var(--sx-dur-4) var(--sx-ease-out), box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-allowance-bar__seg,
.sx-allowance-bar__gap {
  position: absolute;
  inset: 0;
  transition: transform var(--sx-dur-5) var(--sx-ease-out);
}

.sx-allowance-bar__seg {
  background: var(--qm-color, var(--sx-c1));
  transform-origin: left center;
  transform: translateX(calc(var(--qm-start, 0) * 100%)) scaleX(var(--qm-size, 0));
}

/* 2px of card surface between neighbours, so touching segments read apart. */
.sx-allowance-bar__gap {
  transform: translateX(calc(var(--qm-at, 0) * 100%));
}

.sx-allowance-bar__gap::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--sx-card-bg);
}

.sx-allowance-bar:not([data-ready]) .sx-allowance-bar__seg,
.sx-allowance-bar:not([data-ready]) .sx-allowance-bar__gap {
  transition: none;
}

/* ---------- Legend ---------- */
.sx-allowance-bar__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: 7px 22px;
  margin-top: 14px;
}

.sx-allowance-bar__key {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-allowance-bar__swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--qm-color, var(--sx-c1));
  transition: background-color var(--sx-dur-4) var(--sx-ease-out), box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-allowance-bar__key--left .sx-allowance-bar__swatch {
  background: var(--sx-c-track);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-allowance-bar__num {
  margin-left: auto;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Warning note: opens with the grid-rows trick ---------- */
.sx-allowance-bar__note {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-allowance-bar__note-clip {
  min-height: 0;
  overflow: hidden;
}

.sx-allowance-bar__note-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 9px 9px 9px 12px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-allowance-bar__note-box > .sx-icon {
  --sx-icon-size: 15px;
}

.sx-allowance-bar__note-text {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-ink-2);
  text-wrap: balance;
}

.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__note {
  grid-template-rows: 1fr;
}

.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__note-box {
  opacity: 1;
  transform: none;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 80ms, transform var(--sx-dur-4) var(--sx-ease-out) 80ms;
}

/* ---------- Warning: the remainder turns amber ---------- */
.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__bar {
  background: color-mix(in srgb, var(--sx-warning) 26%, var(--sx-c-track));
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__key--left .sx-allowance-bar__swatch {
  background: color-mix(in srgb, var(--sx-warning) 26%, var(--sx-c-track));
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__pct,
.sx-allowance-bar[data-state="warning"] .sx-allowance-bar__key--left .sx-allowance-bar__num {
  color: var(--sx-warning-ink);
}

/* ---------- Demo layout ---------- */
.sx-allowance-bar-demo {
  width: 400px;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .sx-allowance-bar__note-box {
    transform: none;
  }
}


/* ---- Consent Check (consent-check) ---- */
/* ==========================================================================
   Consent Check — an agent asks before it acts
   Root data-state="pending | once | always | declined"
        data-noting   the decline note is open
        data-open     details reopened after a decision (history)
   Swapped parts carry data-for="pending | resolved"; hints carry data-active.
   ========================================================================== */

.sx-consent-check {
  width: 420px;
  overflow: hidden;
}

/* ---------- Head: stays put while the card morphs ---------- */
.sx-consent-check__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.sx-consent-check__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 18px;
}

.sx-consent-check__badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: var(--sx-on-success);
  background: var(--sx-success);
  box-shadow: 0 0 0 2px var(--sx-card-bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 10px;
  --sx-icon-stroke: 3.2;
}

.sx-consent-check[data-state="declined"] .sx-consent-check__badge {
  background: var(--sx-muted);
}

.sx-consent-check__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sx-consent-check__title {
  font-size: var(--sx-fs-md);
}

.sx-consent-check__meta {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-consent-check__meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-consent-check__meta .sx-truncate {
  min-width: 0;
}

.sx-consent-check__meta > [data-for="pending"] {
  color: var(--sx-warning-ink);
}

.sx-consent-check__meta > [data-for="resolved"] {
  color: var(--sx-success-ink);
}

.sx-consent-check[data-state="declined"] .sx-consent-check__meta > [data-for="resolved"] {
  color: var(--sx-muted);
}

.sx-consent-check__meta .sx-icon {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.25;
}

/* Two layers in one cell: the leaving one blurs out, the new one sharpens in. */
.sx-consent-check__swap {
  display: grid;
  min-width: 0;
}

.sx-consent-check__swap > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

.sx-consent-check[data-state="pending"] .sx-consent-check__swap > [data-for="resolved"],
.sx-consent-check:not([data-state="pending"]) .sx-consent-check__swap > [data-for="pending"] {
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-consent-check:not([data-state="pending"]) .sx-consent-check__swap > [data-for="pending"] {
  transform: translateY(-5px);
}

.sx-consent-check[data-state="pending"] .sx-consent-check__swap > [data-for="resolved"] {
  transform: translateY(5px);
}

.sx-consent-check__aside {
  flex: none;
}

.sx-consent-check__toggle > .sx-icon {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-consent-check__toggle[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

/* ---------- Body: collapses with the grid-rows technique ---------- */
.sx-consent-check__body,
.sx-consent-check__foot {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-consent-check__inner,
.sx-consent-check__foot-inner {
  min-height: 0;
  overflow: hidden;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    visibility 0s;
}

.sx-consent-check:not([data-state="pending"]):not([data-open]) .sx-consent-check__body,
.sx-consent-check:not([data-state="pending"]) .sx-consent-check__foot {
  grid-template-rows: 0fr;
}

.sx-consent-check:not([data-state="pending"]):not([data-open]) .sx-consent-check__inner,
.sx-consent-check:not([data-state="pending"]) .sx-consent-check__foot-inner {
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-consent-check__details {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 16px 12px;
}

.sx-consent-check__row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.sx-consent-check__row > dt {
  font-size: var(--sx-fs-sm);
  line-height: 20px;
  color: var(--sx-muted);
}

/* Line the label up with the first text line of a boxed value */
.sx-consent-check__row:has(> dd > .sx-consent-check__preview) > dt {
  padding-top: 8px;
}

.sx-consent-check__row > dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  min-width: 0;
  min-height: 20px;
  margin: 0;
  color: var(--sx-ink-2);
}

.sx-consent-check__row > dd > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
}

.sx-consent-check__row strong {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-consent-check__muted {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-consent-check__preview {
  display: grid;
  gap: 1px;
  width: 100%;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-consent-check__subject {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-consent-check__excerpt {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.sx-consent-check__risk {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 7px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
  --sx-icon-size: 14px;
}

.sx-consent-check__risk strong {
  font-weight: var(--sx-strong-weight);
}

/* ---------- Footer: hint line and actions ---------- */
.sx-consent-check__band {
  display: grid;
  gap: 8px;
  padding: 11px 16px 14px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-consent-check__hint {
  display: grid;
  min-height: 18px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-consent-check__hint > span {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(3px);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-consent-check__hint > [data-active] {
  opacity: 1;
  filter: none;
  transform: none;
  transition-duration: var(--sx-dur-3);
  transition-delay: 0.05s;
}

.sx-consent-check__controls {
  display: grid;
}

.sx-consent-check__actions,
.sx-consent-check__note {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s;
}

.sx-consent-check__spacer {
  flex: 1;
}

.sx-consent-check__note .sx-input {
  flex: 1;
  min-width: 0;
}

.sx-consent-check[data-noting] .sx-consent-check__actions,
.sx-consent-check:not([data-noting]) .sx-consent-check__note {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-consent-check[data-noting] .sx-consent-check__actions {
  transform: translateY(-6px);
}

.sx-consent-check:not([data-noting]) .sx-consent-check__note {
  transform: translateY(6px);
}

/* Demo-only states that mirror real hover and press (previewHover / previewPress) */
.sx-consent-check .sx-btn[data-preview] {
  background-color: var(--sx-raised-hover);
}

.sx-consent-check .sx-btn--ghost[data-preview] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-consent-check .sx-btn--primary[data-preview] {
  background: var(--sx-primary-bg);
}

.sx-consent-check .sx-btn--primary[data-preview]::after {
  opacity: 1;
}

.sx-consent-check .sx-btn[data-preview="press"] {
  transform: scale(0.97);
}

/* ---------- Resolved ---------- */
.sx-consent-check:not([data-state="pending"]) .sx-consent-check__badge {
  opacity: 1;
  transform: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out) 0.2s, transform var(--sx-dur-4) var(--sx-ease-spring) 0.2s;
}

@media (prefers-reduced-motion: reduce) {
  .sx-consent-check__swap > *,
  .sx-consent-check__hint > span,
  .sx-consent-check__actions,
  .sx-consent-check__note {
    transform: none !important;
  }

  .sx-consent-check__badge {
    transform: none;
  }
}


/* ---- Task Pulse (task-pulse) ---- */
/* ==========================================================================
   Task Pulse — one agent run at a glance
   Root data-state="running | paused | done | cancelled"
   Layers that swap with the state carry data-for="<state>" (or "active" for
   running and paused). The step line keeps the leaving text for one beat
   (data-leaving) while the new one sharpens in (data-enter).
   ========================================================================== */

.sx-task-pulse {
  width: 420px;
}

.sx-task-pulse__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 0;
}

.sx-task-pulse__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 18px;
}

.sx-task-pulse__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-task-pulse__title {
  font-size: var(--sx-fs-md);
}

.sx-task-pulse__model {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

/* Stacked layers: only the one matching the state is shown */
.sx-task-pulse__swap {
  display: grid;
}

.sx-task-pulse__swap > * {
  grid-area: 1 / 1;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    transform var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    visibility 0s;
}

.sx-task-pulse__swap > [data-for]:not([data-active]) {
  opacity: 0;
  filter: blur(3px);
  transform: scale(0.94);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-task-pulse__status {
  flex: none;
  justify-items: end;
  align-self: flex-start;
  margin-top: 1px;
}

.sx-task-pulse__chip--muted {
  color: var(--sx-muted);
}

/* ---------- Current step ---------- */
.sx-task-pulse__body {
  display: grid;
  gap: 10px;
  padding: 18px 16px 16px;
}

.sx-task-pulse__step-row {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sx-task-pulse__step-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--sx-accent-ink);
  --sx-icon-size: 15px;
}

.sx-task-pulse__step-icon > * {
  justify-self: center;
}

.sx-task-pulse__step-icon .sx-spinner {
  --sx-spinner-size: 13px;
}

.sx-task-pulse[data-state="paused"] .sx-task-pulse__step-icon {
  color: var(--sx-warning-ink);
}

.sx-task-pulse[data-state="done"] .sx-task-pulse__step-icon {
  color: var(--sx-success-ink);
}

.sx-task-pulse[data-state="cancelled"] .sx-task-pulse__step-icon {
  color: var(--sx-muted);
}

.sx-task-pulse__step {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-task-pulse__step-text {
  grid-area: 1 / 1;
  min-width: 0;
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-task-pulse__step-text[data-enter] {
  animation: rc-step-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-task-pulse__step-text[data-leaving] {
  animation: rc-step-out var(--sx-dur-3) var(--sx-ease-out) both;
}

/* In-progress label sweep (the same light sweep as .sx-shimmer-text), only while running */
.sx-task-pulse[data-state="running"] .sx-task-pulse__label {
  color: transparent;
  background: linear-gradient(90deg, var(--sx-ink-2) 0%, var(--sx-ink-2) 35%, var(--sx-ink) 50%, var(--sx-ink-2) 65%, var(--sx-ink-2) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sx-shimmer 1.8s linear infinite;
}

.sx-task-pulse[data-state="cancelled"] .sx-task-pulse__step-text {
  color: var(--sx-muted);
}

.sx-task-pulse__count {
  flex: none;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-task-pulse__count strong {
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-task-pulse__progress {
  --sx-progress-color: var(--sx-accent);
}

.sx-task-pulse[data-state="paused"] .sx-task-pulse__progress {
  --sx-progress-color: var(--sx-warning);
}

.sx-task-pulse[data-state="done"] .sx-task-pulse__progress {
  --sx-progress-color: var(--sx-success);
}

.sx-task-pulse[data-state="cancelled"] .sx-task-pulse__progress {
  --sx-progress-color: var(--sx-faint);
}

/* ---------- Footer: figures and controls ---------- */
.sx-task-pulse__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 12px 0 16px;
  border-radius: 0 0 var(--sx-card-radius) var(--sx-card-radius);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-task-pulse__stats {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 14px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-task-pulse__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  --sx-icon-size: 13px;
}

.sx-task-pulse__stat > strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-task-pulse__controls {
  flex: none;
  justify-items: end;
}

.sx-task-pulse__group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-task-pulse__toggle-label {
  display: grid;
}

.sx-task-pulse__toggle-label > span {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s;
}

.sx-task-pulse__toggle-label > span:not([data-active]) {
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    filter var(--sx-dur-1) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-1);
}

.sx-task-pulse__toggle-label .sx-icon {
  --sx-icon-size: 13px;
}

@keyframes rc-step-in {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(7px);
  }
}

@keyframes rc-step-out {
  to {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-task-pulse__step-text[data-enter] {
    animation-name: sx-fade-in;
  }

  .sx-task-pulse__step-text[data-leaving] {
    animation-name: rc-fade-out;
  }

  .sx-task-pulse__swap > * {
    transform: none !important;
  }

  .sx-task-pulse[data-state="running"] .sx-task-pulse__label {
    animation-duration: 4s;
  }
}

@keyframes rc-fade-out {
  to { opacity: 0; }
}


/* ---- Work Line (work-line) ---- */
/* ==========================================================================
   Work Line — waiting, running and finished jobs with live counters
   Rows carry data-status="waiting | running | done | failed" and move with FLIP.
   Rolling figures: each digit is a real character (it sets the width) with a
   0–9 strip drawn over it; --d picks the digit, so a change rolls the strip.
   ========================================================================== */

.sx-work-line {
  --jq-row: 38px;
  --jq-rows: 6;
  width: 600px;
  overflow: hidden;
}

.sx-work-line__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.sx-work-line__tile {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
}

.sx-work-line__heading {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.sx-work-line__title {
  font-size: var(--sx-fs-md);
}

.sx-work-line__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- KPI strip ---------- */
.sx-work-line__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft), inset 0 -1px 0 var(--sx-line-soft);
}

.sx-work-line__kpi {
  display: grid;
  gap: 3px;
  padding: 11px 16px 12px;
}

.sx-work-line__kpi + .sx-work-line__kpi {
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

.sx-work-line__kpi > dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-work-line__kpi > dt .sx-dot {
  width: 5px;
  height: 5px;
}

.sx-work-line__kpi > dd {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
}

.sx-work-line__unit {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-work-line__kpi[data-kpi="running"] > dt {
  color: var(--sx-info-ink);
}

.sx-work-line__num {
  --jq-lh: 26px;
  --jq-c: var(--sx-ink);
  display: inline-flex;
  height: var(--jq-lh);
  overflow: hidden;
  font-size: 21px;
  font-weight: var(--sx-display-weight);
  letter-spacing: -0.01em;
  line-height: var(--jq-lh);
  font-variant-numeric: tabular-nums;
}

.sx-work-line__digit,
.sx-work-line__sep {
  position: relative;
  display: inline-block;
  height: var(--jq-lh);
}

.sx-work-line__sep {
  color: var(--jq-c);
}

.sx-work-line__digit {
  color: transparent;
}

.sx-work-line__digit::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: pre;
  text-align: center;
  color: var(--jq-c);
  transform: translateY(calc(var(--d, 0) * -1 * var(--jq-lh)));
  transition: transform var(--sx-dur-5) var(--sx-ease-out);
}

/* ---------- Job list ---------- */
.sx-work-line__cols,
.sx-work-line__row {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 92px 46px 92px;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
}

.sx-work-line__cols {
  height: 30px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-work-line__cols > :nth-child(4),
.sx-work-line__cols > :nth-child(5) {
  text-align: right;
}

/* A window over the queue: rows that move past the bottom fade out under the edge. */
.sx-work-line__list {
  position: relative;
  height: calc(var(--jq-row) * var(--jq-rows));
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, var(--sx-ink) calc(100% - 16px), transparent);
  mask-image: linear-gradient(to bottom, var(--sx-ink) calc(100% - 16px), transparent);
}

.sx-work-line__row {
  height: var(--jq-row);
  background: var(--sx-card-bg);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  --sx-icon-size: 15px;
}

.sx-work-line__row > .sx-icon {
  color: var(--sx-muted);
}

.sx-work-line__name {
  min-width: 0;
  color: var(--sx-ink);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-work-line__row[data-status="done"] .sx-work-line__name {
  color: var(--sx-ink-2);
}

.sx-work-line__worker {
  justify-self: start;
  max-width: 100%;
}

.sx-work-line__worker > .sx-dot {
  color: var(--jq-worker, var(--sx-c6));
}

.sx-work-line__time {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sx-muted);
}

.sx-work-line__row[data-status="running"] .sx-work-line__time {
  color: var(--sx-ink);
}

.sx-work-line__pill {
  justify-self: end;
  animation: jq-pill-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-work-line__pill .sx-spinner {
  --sx-spinner-size: 10px;
}

.sx-work-line__pill--waiting {
  color: var(--sx-muted);
}

@keyframes jq-pill-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: scale(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-work-line__digit::before {
    transition-duration: var(--sx-dur-2);
  }

  .sx-work-line__pill {
    animation-name: sx-fade-in;
  }
}


/* ---- Branch View (branch-view) ---- */
/* ==========================================================================
   Branch View — an orchestrator and the sub-agents it started
   Nodes sit in rows by depth (each row centred); connectors are SVG paths in
   one overlay, measured from offset metrics. Nodes and wires carry
   data-status="queued | running | done | failed". Wires use pathLength="1",
   so stroke-dashoffset 1 -> 0 draws a branch in as it starts.
   ========================================================================== */

.sx-branch-view {
  width: 680px;
  overflow: hidden;
}

.sx-branch-view__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-branch-view__tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 16px;
}

.sx-branch-view__heading {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.sx-branch-view__title {
  font-size: var(--sx-fs-md);
}

.sx-branch-view__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-branch-view__summary {
  display: grid;
  justify-items: end;
  gap: 6px;
  flex: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-branch-view__summary strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-branch-view__meter {
  width: 120px;
  height: 4px;
}

/* ---------- Canvas ---------- */
.sx-branch-view__canvas {
  position: relative;
  display: grid;
  gap: 36px;
  padding: 22px 16px 24px;
  background-image: radial-gradient(var(--sx-line) 1px, transparent 1.4px);
  background-size: 16px 16px;
  background-position: 8px 8px;
}

.sx-branch-view__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sx-branch-view__wire {
  fill: none;
  stroke: var(--sx-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  opacity: 0;
  transition:
    stroke-dashoffset var(--sx-dur-5) var(--sx-ease-out),
    stroke var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-branch-view__wire:not([data-status="queued"]) {
  stroke-dashoffset: 0;
  opacity: 1;
}

.sx-branch-view__wire[data-status="done"] {
  stroke: var(--sx-success);
}

.sx-branch-view__wire[data-status="failed"] {
  stroke: var(--sx-danger);
}

.sx-branch-view__row {
  position: static;
  display: flex;
  justify-content: center;
  gap: 24px;
}

.sx-branch-view__row[data-depth="2"] {
  gap: 16px;
}

/* ---------- Node (positioned so it paints above the wires) ---------- */
.sx-branch-view__node {
  position: relative;
  display: grid;
  gap: 4px;
  width: 196px;
  padding: 10px 11px 9px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-shadow-1);
  transition:
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-branch-view__row[data-depth="0"] .sx-branch-view__node {
  width: 232px;
}

.sx-branch-view__node[data-status="queued"] {
  opacity: 0.6;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  outline: 1px dashed var(--sx-line-strong);
  outline-offset: -1px;
}

.sx-branch-view__node[data-status="running"] {
  box-shadow: 0 0 0 1px var(--sx-accent-line), 0 0 0 4px var(--sx-accent-soft), var(--sx-shadow-1);
}

.sx-branch-view__node[data-status="failed"] {
  box-shadow: 0 0 0 1px var(--sx-danger-line), 0 0 0 4px var(--sx-danger-soft), var(--sx-shadow-1);
}

.sx-branch-view__top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.sx-branch-view__icon {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  --sx-icon-size: 12px;
}

.sx-branch-view__icon > .sx-icon {
  animation: tt-pop var(--sx-dur-4) var(--sx-ease-spring) both;
}

.sx-branch-view__node[data-status="done"] .sx-branch-view__icon {
  color: var(--sx-on-success);
  background: var(--sx-success);
  --sx-icon-stroke: 3;
}

.sx-branch-view__node[data-status="failed"] .sx-branch-view__icon {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-branch-view__agent {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-branch-view__chip {
  flex: none;
  height: 18px;
  padding: 0 6px;
  font-size: var(--sx-fs-2xs);
  animation: tt-pop var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-branch-view__chip .sx-icon {
  --sx-icon-size: 10px;
  --sx-icon-stroke: 2.5;
}

.sx-branch-view__chip .sx-dot {
  width: 5px;
  height: 5px;
}

.sx-branch-view__task {
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-branch-view__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-branch-view__model {
  flex: 1;
  min-width: 0;
}

.sx-branch-view__retry {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 3px;
  font-weight: 500;
  color: var(--sx-warning-ink);
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out) both;
  --sx-icon-size: 10px;
}

.sx-branch-view__time {
  flex: none;
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-branch-view__node[data-status="running"] .sx-branch-view__time {
  color: var(--sx-ink-2);
}

@keyframes tt-pop {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-branch-view__icon > .sx-icon,
  .sx-branch-view__chip {
    animation-name: sx-fade-in;
  }

  .sx-branch-view__wire {
    transition-duration: var(--sx-dur-2);
  }
}


/* ---- Co-edit Pointers (coedit-pointers) ---- */
/* ==========================================================================
   Co-edit Pointers — agents editing a document beside you
   Text anchors are <span class="sx-coedit-pointers__mark" data-mark="id"> with an
   empty __end span as their last child; cursor positions are read from those
   spans with offset metrics relative to .sx-coedit-pointers__doc.
   Marks: data-selected (a cursor holds a selection), data-typing (text is
   arriving), data-fresh (just landed: the highlight fades out). Every agent
   colour comes in as --lc-c (one of --sx-c1 … --sx-c6).
   ========================================================================== */

.sx-coedit-pointers {
  width: 480px;
  overflow: hidden;
}

.sx-coedit-pointers__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-coedit-pointers__tile {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 16px;
}

.sx-coedit-pointers__heading {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.sx-coedit-pointers__title {
  font-size: var(--sx-fs-md);
}

.sx-coedit-pointers__meta {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-coedit-pointers__people {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* People first, then a hairline, then the agents */
.sx-coedit-pointers__people > .sx-avatar-stack {
  padding-left: 10px;
  box-shadow: inset 1px 0 0 var(--sx-line);
}

.sx-coedit-pointers__people .sx-avatar {
  --sx-avatar-size: 26px;
}

.sx-coedit-pointers__people .sx-avatar[data-agent] {
  --sx-avatar-bg: color-mix(in oklab, var(--lc-c) 16%, var(--sx-card-bg));
  --sx-avatar-ink: color-mix(in oklab, var(--lc-c) 80%, var(--sx-ink));
  --sx-icon-size: 13px;
}

.sx-coedit-pointers__people .sx-avatar-stack > .sx-avatar[data-agent] {
  box-shadow: 0 0 0 2px var(--sx-card-bg), inset 0 0 0 1px color-mix(in oklab, var(--lc-c) 45%, transparent);
}

/* ---------- Document ---------- */
.sx-coedit-pointers__doc {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 18px 22px 30px;
  line-height: 1.65;
  color: var(--sx-ink-2);
}

.sx-coedit-pointers__doc h4 {
  font-size: var(--sx-fs-lg);
  color: var(--sx-ink);
}

.sx-coedit-pointers__doc p {
  margin: 0;
}

.sx-coedit-pointers__mark {
  border-radius: 3px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-coedit-pointers__mark[data-selected] {
  background: color-mix(in oklab, var(--lc-c) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--lc-c) 30%, transparent);
}

.sx-coedit-pointers__mark[data-typing] {
  color: var(--sx-ink);
  background: color-mix(in oklab, var(--lc-c) 26%, transparent);
}

.sx-coedit-pointers__mark[data-fresh]:not([data-typing]):not([data-selected]) {
  animation: lc-fresh 1.8s var(--sx-ease-out);
}

.sx-coedit-pointers__end {
  display: inline;
}

@keyframes lc-fresh {
  from {
    color: var(--sx-ink);
    background-color: color-mix(in oklab, var(--lc-c) 30%, transparent);
  }
  to {
    background-color: transparent;
  }
}

/* ---------- Cursors ---------- */
.sx-coedit-pointers__layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.sx-coedit-pointers__cursor {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(var(--x, 0px), var(--y, 0px));
}

.sx-coedit-pointers[data-ready] .sx-coedit-pointers__cursor {
  transition: transform var(--sx-dur-5) var(--sx-ease-in-out);
}

.sx-coedit-pointers__arrow {
  display: block;
  width: 15px;
  height: 15px;
  margin: -1px 0 0 -1px;
  fill: var(--lc-c);
  stroke: var(--sx-card-bg);
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px color-mix(in oklab, var(--sx-ink) 18%, transparent));
}

.sx-coedit-pointers__label {
  position: absolute;
  top: 13px;
  left: 10px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: color-mix(in oklab, var(--lc-c) 75%, var(--sx-ink));
  background: color-mix(in oklab, var(--lc-c) 14%, var(--sx-card-bg));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--lc-c) 40%, transparent), var(--sx-shadow-1);
}

/* While an agent types, its label shows three soft dots. */
.sx-coedit-pointers__dots {
  display: none;
  gap: 2px;
}

.sx-coedit-pointers__dots > span {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: currentColor;
  animation: lc-dot 1s var(--sx-ease-in-out) infinite;
}

.sx-coedit-pointers__dots > span:nth-child(2) {
  animation-delay: 0.15s;
}

.sx-coedit-pointers__dots > span:nth-child(3) {
  animation-delay: 0.3s;
}

.sx-coedit-pointers__cursor[data-typing] .sx-coedit-pointers__dots {
  display: inline-flex;
}

@keyframes lc-dot {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-coedit-pointers[data-ready] .sx-coedit-pointers__cursor {
    transition: none;
  }

  .sx-coedit-pointers__dots > span {
    animation: none;
  }
}


/* ---- Autopilot Level (autopilot-level) ---- */
/* ==========================================================================
   Autopilot Level — how much an agent may do on its own
   Root data-level="0 | 1 | 2" plus style --td-level (same number) for motion.
   The control is a radiogroup: three columns, each a role="radio" button, under
   one rail with a sliding thumb. Rows carry data-mode="auto | ask | never";
   their pill layers and the summary lines carry data-active.
   ========================================================================== */

.sx-autopilot-level {
  --td-tone: var(--sx-success);
  width: 420px;
  padding-bottom: 6px;
}

/* The middle level uses the first series colour, not the accent: in Onix the accent is
   orange and would read as the same step as the warning level. */
.sx-autopilot-level[data-level="1"] {
  --td-tone: var(--sx-c1);
}

.sx-autopilot-level[data-level="2"] {
  --td-tone: var(--sx-warning);
}

.sx-autopilot-level__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px 4px;
}

.sx-autopilot-level__tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 18px;
}

.sx-autopilot-level__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-autopilot-level__title {
  font-size: var(--sx-fs-md);
}

.sx-autopilot-level__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Control ---------- */
.sx-autopilot-level__control {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 8px 10px 6px;
}

.sx-autopilot-level__rail {
  position: absolute;
  top: 18px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 6px;
  margin-top: -3px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
  pointer-events: none;
}

.sx-autopilot-level__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--td-tone);
  transform-origin: left center;
  transform: scaleX(calc(var(--td-level, 0) / 2));
  transition: transform var(--sx-dur-4) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-autopilot-level__stop {
  position: absolute;
  top: 50%;
  left: calc(var(--td-at) * 50%);
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--sx-card-bg);
  box-shadow: inset 0 0 0 2px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-autopilot-level__stop[data-on] {
  box-shadow: inset 0 0 0 2px var(--td-tone);
}

/* The runner is as wide as the rail, so translating it by 50% moves the thumb one stop. */
.sx-autopilot-level__runner {
  position: absolute;
  inset: 0;
  transform: translateX(calc(var(--td-level, 0) * 50%));
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-autopilot-level__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
}

.sx-autopilot-level__thumb::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--td-tone);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-autopilot-level__option {
  position: relative;
  display: grid;
  align-content: end;
  justify-items: center;
  height: 58px;
  padding: 0 4px 6px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-autopilot-level__option:hover {
  color: var(--sx-ink-2);
  background: var(--sx-fill);
}

.sx-autopilot-level__option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-autopilot-level__option:focus-visible {
  outline-offset: 0;
}

/* ---------- Actions ---------- */
.sx-autopilot-level__list {
  margin: 0 16px;
  padding: 0;
  list-style: none;
}

.sx-autopilot-level__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  --sx-icon-size: 15px;
}

.sx-autopilot-level__row > .sx-icon {
  color: var(--sx-muted);
}

.sx-autopilot-level__action {
  flex: 1;
  min-width: 0;
  color: var(--sx-ink);
}

.sx-autopilot-level__pills {
  display: grid;
  justify-items: end;
}

.sx-autopilot-level__pills > * {
  grid-area: 1 / 1;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) calc(var(--i, 0) * 55ms + 60ms),
    filter var(--sx-dur-3) var(--sx-ease-out) calc(var(--i, 0) * 55ms + 60ms),
    transform var(--sx-dur-4) var(--sx-ease-spring) calc(var(--i, 0) * 55ms + 60ms),
    visibility 0s;
}

.sx-autopilot-level__pills > :not([data-active]) {
  opacity: 0;
  filter: blur(4px);
  transform: translateX(6px) scale(0.92);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out) calc(var(--i, 0) * 55ms),
    filter var(--sx-dur-2) var(--sx-ease-out) calc(var(--i, 0) * 55ms),
    transform var(--sx-dur-2) var(--sx-ease-out) calc(var(--i, 0) * 55ms),
    visibility 0s linear calc(var(--i, 0) * 55ms + var(--sx-dur-2));
}

.sx-autopilot-level__pills .sx-chip > .sx-icon {
  --sx-icon-size: 12px;
}

/* ---------- Summary ---------- */
.sx-autopilot-level__summary {
  display: grid;
  margin: 6px 10px 4px;
  padding: 9px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-autopilot-level__summary > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.12s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.12s,
    transform var(--sx-dur-3) var(--sx-ease-out) 0.12s;
}

.sx-autopilot-level__summary > span:not([data-active]) {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-autopilot-level__summary .sx-icon {
  --sx-icon-size: 14px;
  margin-top: 2px;
  color: var(--td-tone);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .sx-autopilot-level__pills > *,
  .sx-autopilot-level__pills > :not([data-active]),
  .sx-autopilot-level__summary > span {
    transform: none !important;
    transition-delay: 0s !important;
  }
}


/* ---- Tool Receipt (tool-receipt) ---- */
/* ==========================================================================
   Tool Receipt — one tool call in an agent transcript
   Root data-state="running | done | failed", data-open when expanded.
   The header is the toggle (aria-expanded); the body opens with the grid-rows
   technique. Status layers carry data-for and data-active.
   ========================================================================== */

.sx-tool-receipt {
  width: 440px;
}

/* ---------- Header row (the toggle) ---------- */
.sx-tool-receipt__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 12px 0 10px;
  border-radius: var(--sx-card-radius);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), border-radius var(--sx-dur-3) var(--sx-ease-out);
}

.sx-tool-receipt__head:hover {
  background: var(--sx-fill);
}

.sx-tool-receipt[data-open] .sx-tool-receipt__head {
  border-radius: var(--sx-card-radius) var(--sx-card-radius) 0 0;
}

.sx-tool-receipt__head:focus-visible {
  outline-offset: -2px;
}

.sx-tool-receipt__tool {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 14px;
}

.sx-tool-receipt__name {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-tool-receipt__swap {
  display: grid;
}

.sx-tool-receipt__swap > * {
  grid-area: 1 / 1;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.05s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.05s,
    transform var(--sx-dur-3) var(--sx-ease-spring) 0.05s,
    visibility 0s;
}

.sx-tool-receipt__swap > [data-for]:not([data-active]) {
  opacity: 0;
  filter: blur(3px);
  transform: scale(0.9);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-tool-receipt__status {
  flex: none;
  justify-items: end;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
}

.sx-tool-receipt__state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
}

.sx-tool-receipt__state[data-for="running"] {
  color: var(--sx-muted);
}

.sx-tool-receipt__state[data-for="running"] .sx-spinner {
  --sx-spinner-size: 12px;
}

.sx-tool-receipt__state[data-for="done"] {
  color: var(--sx-success-ink);
}

.sx-tool-receipt__state[data-for="failed"] {
  color: var(--sx-danger-ink);
}

.sx-tool-receipt__time {
  flex: none;
  min-width: 38px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sx-muted);
}

.sx-tool-receipt__chev {
  flex: none;
  color: var(--sx-faint);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-tool-receipt__head:hover .sx-tool-receipt__chev {
  color: var(--sx-ink-2);
}

.sx-tool-receipt[data-open] .sx-tool-receipt__chev {
  transform: rotate(180deg);
}

/* ---------- Body: grid-rows 0fr -> 1fr ---------- */
.sx-tool-receipt__body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-tool-receipt[data-open] .sx-tool-receipt__body {
  grid-template-rows: 1fr;
}

.sx-tool-receipt__inner {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-tool-receipt[data-open] .sx-tool-receipt__inner {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

.sx-tool-receipt__panes {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  gap: 14px;
  padding: 6px 10px 12px 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-tool-receipt__pane {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
}

.sx-tool-receipt__label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-tool-receipt__label-meta {
  font-weight: var(--sx-text-weight);
  color: var(--sx-faint);
}

.sx-tool-receipt__rerun {
  --sx-btn-h: 24px;
  margin-left: auto;
}

.sx-tool-receipt__code {
  margin: 0;
  padding: 7px 10px;
  overflow: hidden;
  border-radius: var(--sx-r-md);
  font: 400 var(--sx-fs-xs) / 17px var(--sx-font-mono);
  white-space: pre;
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-tool-receipt__key {
  color: var(--sx-ink);
}

.sx-tool-receipt__str {
  color: var(--sx-success-ink);
}

.sx-tool-receipt__num,
.sx-tool-receipt__lit {
  color: var(--sx-accent-ink);
}

/* Output list, with a skeleton while the call is still running */
.sx-tool-receipt__out {
  display: grid;
}

.sx-tool-receipt__out > * {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-tool-receipt__results {
  display: grid;
  align-content: start;
  gap: 2px;
}

.sx-tool-receipt__result {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 20px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-tool-receipt__result > .sx-truncate {
  min-width: 0;
}

.sx-tool-receipt__lead {
  flex: none;
  min-width: 44px;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-tool-receipt__wait {
  display: grid;
  align-content: start;
  gap: 9px;
  padding-top: 5px;
  opacity: 0;
}

.sx-tool-receipt__wait > .sx-skeleton {
  height: 9px;
}

.sx-tool-receipt__wait > .sx-skeleton:nth-child(2) {
  width: 82%;
}

.sx-tool-receipt__wait > .sx-skeleton:nth-child(3) {
  width: 64%;
}

.sx-tool-receipt[data-state="running"] .sx-tool-receipt__results {
  opacity: 0;
}

.sx-tool-receipt[data-state="running"] .sx-tool-receipt__wait {
  opacity: 1;
}

/* Demo layout: two calls in a transcript */
.sx-tool-receipt-demo {
  display: grid;
  gap: 8px;
  width: 440px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-tool-receipt__swap > * {
    transform: none !important;
  }
}


/* ---- Latency Cascade (latency-cascade) ---- */
/* ==========================================================================
   Latency Cascade — a trace as a waterfall of timed spans
   Root: .sx-latency-cascade; data-drawn starts the draw-in, data-hovering while a row is active.
   Rows: .sx-latency-cascade__row[data-kind="agent | llm | tool | http | db"], data-active,
         data-over for spans over budget. Row vars: --st-depth (indent), --st-start and
         --st-dur (fractions of the trace), --st-i (draw order), --st-budget (fraction of the span).
   Tooltip: __tip, placed by script with --tip-x / --tip-y, data-state="open".
   ========================================================================== */

.sx-latency-cascade {
  --st-name-w: 188px;
  --st-gap: 12px;
  --st-row-h: 28px;
  --st-c: var(--sx-c6);
  position: relative;
  width: 632px;
}

.sx-latency-cascade [data-kind="agent"] { --st-c: var(--sx-c6); }
.sx-latency-cascade [data-kind="llm"] { --st-c: var(--sx-c1); }
.sx-latency-cascade [data-kind="tool"] { --st-c: var(--sx-c3); }
.sx-latency-cascade [data-kind="http"] { --st-c: var(--sx-c4); }
.sx-latency-cascade [data-kind="db"] { --st-c: var(--sx-c5); }

/* ---------- Head and legend ---------- */
.sx-latency-cascade__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}

.sx-latency-cascade__badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-latency-cascade__heading {
  display: grid;
  min-width: 0;
}

.sx-latency-cascade__title {
  font-size: var(--sx-fs-md);
}

.sx-latency-cascade__id {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-latency-cascade__total {
  display: grid;
  justify-items: end;
  margin-left: auto;
}

.sx-latency-cascade__total strong {
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-heading-weight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.sx-latency-cascade__total span {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-latency-cascade__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 0 16px 10px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-latency-cascade__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sx-latency-cascade__swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--st-c);
}

/* ---------- Axis, gridlines, rows ---------- */
.sx-latency-cascade__body {
  position: relative;
  padding: 0 16px 8px;
}

.sx-latency-cascade__axis {
  display: grid;
  grid-template-columns: var(--st-name-w) minmax(0, 1fr);
  column-gap: var(--st-gap);
  height: 24px;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-latency-cascade__axis-label {
  align-self: center;
  font-weight: 500;
}

.sx-latency-cascade__ticks {
  position: relative;
}

.sx-latency-cascade__tick {
  position: absolute;
  top: 50%;
  left: calc(var(--x) * 100%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.sx-latency-cascade__tick:first-child {
  transform: translate(0, -50%);
}

.sx-latency-cascade__rows {
  position: relative;
  display: grid;
  padding-top: 4px;
}

.sx-latency-cascade__grid {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--st-name-w) + var(--st-gap));
  right: 0;
  pointer-events: none;
}

.sx-latency-cascade__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--x) * 100%);
  width: 1px;
  background: var(--sx-line-soft);
}

.sx-latency-cascade__row {
  position: relative;
  display: grid;
  grid-template-columns: var(--st-name-w) minmax(0, 1fr);
  column-gap: var(--st-gap);
  align-items: center;
  height: var(--st-row-h);
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  cursor: default;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-latency-cascade__row[data-active] {
  background: var(--sx-fill);
}

.sx-latency-cascade__row:focus-visible {
  outline-offset: -2px;
}

.sx-latency-cascade__name {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding-left: calc(var(--st-depth, 0) * 14px);
  font-family: var(--sx-font-mono);
  font-size: 11.5px;
  color: var(--sx-ink-2);
}

.sx-latency-cascade__row[data-active] .sx-latency-cascade__name {
  color: var(--sx-ink);
}

.sx-latency-cascade__label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-latency-cascade__flag {
  color: var(--sx-warning);
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2;
}

.sx-latency-cascade__lane {
  position: relative;
  height: 100%;
}

.sx-latency-cascade__bar {
  position: absolute;
  top: 50%;
  left: calc(var(--st-start) * 100%);
  width: max(3px, calc(var(--st-dur) * 100%));
  height: 12px;
  margin-top: -6px;
  border-radius: 3px;
  background: var(--st-c);
  transform-origin: left center;
  transition:
    transform var(--sx-dur-5) var(--sx-ease-out) calc(120ms + var(--st-i, 0) * 110ms),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* Bars are visible by default; script arms the timeline so it can draw in once it is seen. */
.sx-latency-cascade[data-armed]:not([data-drawn]) .sx-latency-cascade__bar {
  transform: scaleX(0);
  transition: none;
}

.sx-latency-cascade[data-hovering] .sx-latency-cascade__row:not([data-active]) .sx-latency-cascade__bar {
  opacity: 0.4;
}

/* Over budget: the part past the budget is hatched, with a mark where the budget ends */
.sx-latency-cascade__over {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--st-budget) * 100%);
  right: 0;
  border-radius: 0 3px 3px 0;
  background: repeating-linear-gradient(-45deg, var(--sx-warning) 0 2px, transparent 2px 5px);
}

.sx-latency-cascade__over::before {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -1px;
  width: 2px;
  border-radius: 1px;
  background: var(--sx-warning);
}

.sx-latency-cascade__dur {
  position: absolute;
  top: 50%;
  left: calc((var(--st-start) + var(--st-dur)) * 100% + 6px);
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
  transform: translateY(-50%);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) calc(420ms + var(--st-i, 0) * 110ms);
}

.sx-latency-cascade[data-armed]:not([data-drawn]) .sx-latency-cascade__dur {
  opacity: 0;
  transition: none;
}

.sx-latency-cascade__dur[data-side="left"] {
  left: auto;
  right: calc((1 - var(--st-start)) * 100% + 6px);
}

.sx-latency-cascade__row[data-over] .sx-latency-cascade__dur {
  color: var(--sx-warning-ink);
  font-weight: 500;
}

/* ---------- Tooltip ---------- */
.sx-latency-cascade__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--sx-z-pop);
  display: grid;
  gap: 8px;
  width: 214px;
  padding: 10px 12px 11px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--tip-x, 0px), calc(var(--tip-y, 0px) + 4px));
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-latency-cascade__tip[data-state="open"] {
  opacity: 1;
  transform: translate(var(--tip-x, 0px), var(--tip-y, 0px));
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-latency-cascade__tip-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.sx-latency-cascade__tip-name {
  min-width: 0;
  overflow: hidden;
  font-family: var(--sx-font-mono);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-latency-cascade__tip-kind {
  margin-left: auto;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-latency-cascade__tip-rows {
  display: grid;
  gap: 3px;
  margin: 0;
}

.sx-latency-cascade__tip-rows > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-latency-cascade__tip-rows dt {
  color: var(--sx-muted);
}

.sx-latency-cascade__tip-rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.sx-latency-cascade__tip-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 8px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-warning-ink);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  --sx-icon-size: 13px;
}

/* ---------- Foot ---------- */
.sx-latency-cascade__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  border-radius: 0 0 var(--sx-card-radius) var(--sx-card-radius);
}

.sx-latency-cascade__foot .sx-mono {
  color: var(--sx-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .sx-latency-cascade__bar,
  .sx-latency-cascade[data-drawn] .sx-latency-cascade__bar {
    transform: none;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-latency-cascade__dur {
    transition-delay: 0s;
  }

  .sx-latency-cascade__tip,
  .sx-latency-cascade__tip[data-state="open"] {
    transform: translate(var(--tip-x, 0px), var(--tip-y, 0px));
  }
}


/* ---- Figure Card (figure-card) ---- */
/* ==========================================================================
   Figure Card — KPI with a rolling value, change chip and a 14-day area chart
   Root: data-state="intro | ready" (intro hides the plot for the reveal), data-trend="up | down"
   Chart: one SVG in a 0–100 viewBox stretched to the box; the crosshair, dot and tooltip are HTML
   placed with --mt-fx / --mt-fy (0–1 fractions) so they never distort.
   Sizes: default (chart), .sx-figure-card--sm (compact, with a sparkline)
   ========================================================================== */

.sx-figure-card {
  --mt-plot-h: 86px;
  --mt-fx: 0;
  --mt-fy: 0;
  display: grid;
  width: 100%;
  min-width: 0;
  padding: 16px 18px 14px;
  /* The crosshair is a full-size layer slid sideways; it must not add scroll width to the parent. */
  overflow: clip;
}

.sx-figure-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
}

.sx-figure-card__label {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-figure-card__figure {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 6px;
}

.sx-figure-card__value {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-figure-card__change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-figure-card__change .sx-chip {
  font-variant-numeric: tabular-nums;
}

/* ---------- Chart ---------- */
/* Tick labels live in a left gutter, so they never collide with the line. */
.sx-figure-card__chart {
  position: relative;
  height: var(--mt-plot-h);
  margin: 16px 0 0 var(--mt-gutter, 26px);
  border-radius: var(--sx-r-xs);
  cursor: crosshair;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the chart box itself. */
.sx-figure-card__chart > * {
  pointer-events: none;
}

.sx-figure-card__chart:focus-visible {
  outline-offset: 4px;
}

.sx-figure-card__grid {
  position: absolute;
  inset: 0;
}

.sx-figure-card__tick {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--mt-tick);
  height: 1px;
  background: var(--sx-line-soft);
}

.sx-figure-card__tick:last-child {
  background: var(--sx-line);
}

.sx-figure-card__tick > span {
  position: absolute;
  right: calc(100% + 8px);
  top: -5px;
  font-size: var(--sx-fs-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-faint);
}

.sx-figure-card__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: inset(-4px -4px -4px -4px);
  transition: clip-path 900ms var(--sx-ease-out);
}

.sx-figure-card[data-state="intro"] .sx-figure-card__svg {
  clip-path: inset(-4px 100% -4px -4px);
  transition: none;
}

.sx-figure-card__line {
  fill: none;
  stroke: var(--sx-c1);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sx-figure-card__area {
  stroke: none;
}

.sx-figure-card__stop {
  stop-color: color-mix(in srgb, var(--sx-c1) 20%, transparent);
}

.sx-figure-card__stop + .sx-figure-card__stop {
  stop-color: color-mix(in srgb, var(--sx-c1) 0%, transparent);
}

/* Crosshair: a full-size layer slid by its own width fraction, so no pixel measuring is needed. */
.sx-figure-card__cursor {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(calc(var(--mt-fx) * 100%));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-figure-card__cursor::before {
  content: "";
  position: absolute;
  top: -6px;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  background: var(--sx-line-strong);
}

.sx-figure-card__dot-y {
  position: absolute;
  inset: 0;
  transform: translateY(calc(var(--mt-fy) * 100%));
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-figure-card__dot {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sx-c1);
  box-shadow: 0 0 0 2px var(--sx-card-bg), 0 1px 3px 2px color-mix(in srgb, var(--sx-ink) 12%, transparent);
}

.sx-figure-card__tip {
  position: absolute;
  top: -4px;
  left: 0;
  display: grid;
  gap: 1px;
  padding: 6px 9px 7px;
  border-radius: var(--sx-r-md);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translateX(var(--mt-tip-x, 0px)) translateY(2px) scale(0.98);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-figure-card__tip-value {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-figure-card__tip-value strong {
  font-size: var(--sx-fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-figure-card__tip-day {
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-figure-card[data-hover] .sx-figure-card__cursor {
  opacity: 1;
}

.sx-figure-card[data-hover] .sx-figure-card__tip {
  opacity: 1;
  transform: translateX(var(--mt-tip-x, 0px));
}

/* Before the first hover there is nothing to glide from, so the layers jump into place. */
.sx-figure-card:not([data-hovered]) .sx-figure-card__cursor,
.sx-figure-card:not([data-hovered]) .sx-figure-card__dot-y {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-figure-card__axis {
  position: relative;
  height: 14px;
  margin: 8px 0 0 var(--mt-gutter, 26px);
  font-size: var(--sx-fs-2xs);
  line-height: 14px;
  color: var(--sx-muted);
}

.sx-figure-card__axis > span {
  position: absolute;
  top: 0;
  left: calc(var(--mt-at) * 100%);
  transform: translateX(calc(var(--mt-at) * -100%));
  white-space: nowrap;
}

/* ---------- Small: label and change on top, value beside a sparkline ---------- */
.sx-figure-card--sm {
  padding: 13px 18px 14px;
}

.sx-figure-card--sm .sx-figure-card__figure {
  flex-wrap: nowrap;
  gap: 18px;
  margin-top: 4px;
}

.sx-figure-card--sm .sx-figure-card__value {
  font-size: var(--sx-fs-2xl);
}

.sx-figure-card__spark {
  position: relative;
  flex: 1;
  height: 28px;
  min-width: 0;
}

.sx-figure-card__spark svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  clip-path: inset(-4px -4px -4px -4px);
  transition: clip-path 900ms var(--sx-ease-out);
}

.sx-figure-card[data-state="intro"] .sx-figure-card__spark svg {
  clip-path: inset(-4px 100% -4px -4px);
  transition: none;
}

.sx-figure-card__spark-line {
  fill: none;
  stroke: var(--sx-c6);
  stroke-width: 1.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.sx-figure-card__spark-dot {
  position: absolute;
  top: calc(var(--mt-fy) * 100% - 4px);
  left: calc(100% - 4px);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--sx-c1);
  box-shadow: 0 0 0 2px var(--sx-card-bg);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 700ms;
}

.sx-figure-card[data-state="intro"] .sx-figure-card__spark-dot {
  opacity: 0;
  transition: none;
}

/* ---------- Demo layout ---------- */
.sx-figure-card-demo {
  display: grid;
  gap: 10px;
  width: 360px;
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  /* The plot fades in instead of wiping across. */
  .sx-figure-card__svg,
  .sx-figure-card__spark svg {
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-figure-card[data-state="intro"] .sx-figure-card__svg,
  .sx-figure-card[data-state="intro"] .sx-figure-card__spark svg {
    clip-path: inset(-4px);
    opacity: 0;
  }

  .sx-figure-card__cursor,
  .sx-figure-card__dot-y,
  .sx-figure-card__tip {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }
}


/* ---- Record Grid (record-grid) ---- */
/* ==========================================================================
   Record Grid — sortable table with row selection and a bulk-action bar
   Header cells: aria-sort="none | ascending | descending"; rows: aria-selected="true | false"
   Bulk bar: data-state="open | closed" (slides up from the bottom edge of the card)
   ========================================================================== */

.sx-record-grid {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ---------- Card header ---------- */
.sx-record-grid__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 12px 18px;
}

.sx-record-grid__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sx-record-grid__title {
  font-size: var(--sx-fs-md);
}

.sx-record-grid__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Table: never narrower than its columns add up to; on a narrow screen it scrolls here ---------- */
.sx-record-grid__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-record-grid__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
}

.sx-record-grid__table th {
  height: 34px;
  padding: 0 12px;
  text-align: left;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft), inset 0 -1px 0 var(--sx-line);
  white-space: nowrap;
}

.sx-record-grid__table td {
  height: 44px;
  padding: 0 12px;
  color: var(--sx-ink-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-record-grid__table tbody tr {
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-record-grid__table tbody tr:hover {
  background: var(--sx-fill);
}

.sx-record-grid__table tbody tr[aria-selected="true"] {
  background: var(--sx-accent-soft);
}

.sx-record-grid__table tbody tr[aria-selected="true"]:hover {
  background: color-mix(in srgb, var(--sx-accent) 14%, var(--sx-card-bg));
}

.sx-record-grid__table .sx-record-grid__select {
  width: 46px;
  padding: 0 0 0 18px;
}

.sx-record-grid__table .sx-record-grid__end {
  padding-right: 18px;
  text-align: right;
}

/* ---------- Checkboxes: the header one shows a dash when only some rows are picked ---------- */
.sx-record-grid .sx-check {
  vertical-align: middle;
}

.sx-record-grid .sx-check__box > * {
  grid-area: 1 / 1;
}

.sx-record-grid__dash {
  width: 8px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-record-grid .sx-check > input:indeterminate + .sx-check__box > .sx-record-grid__dash {
  opacity: 1;
  transform: none;
}

/* ---------- Sortable headers ---------- */
.sx-record-grid__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 0 -6px;
  padding: 0 6px;
  border-radius: var(--sx-r-sm);
  font-weight: 500;
  color: inherit;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-record-grid__end .sx-record-grid__sort {
  flex-direction: row-reverse;
}

.sx-record-grid__sort:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-record-grid__sort:focus-visible {
  outline-offset: 0;
}

.sx-record-grid__arrow {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2;
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-record-grid__sort:is(:hover, :focus-visible) .sx-record-grid__arrow {
  opacity: 0.5;
}

.sx-record-grid__table th[aria-sort="ascending"],
.sx-record-grid__table th[aria-sort="descending"] {
  color: var(--sx-ink);
}

.sx-record-grid__table th[aria-sort="ascending"] .sx-record-grid__arrow,
.sx-record-grid__table th[aria-sort="descending"] .sx-record-grid__arrow {
  opacity: 1;
}

.sx-record-grid__table th[aria-sort="ascending"] .sx-record-grid__arrow {
  transform: rotate(180deg);
}

/* ---------- Cells ---------- */
.sx-record-grid__person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  vertical-align: middle;
}

.sx-record-grid__person > .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--dg-hue, var(--sx-c6)) 16%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--dg-hue, var(--sx-c6)) 72%, var(--sx-ink));
}

.sx-record-grid__name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-record-grid__agent {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-record-grid__nobody {
  color: var(--sx-faint);
}

.sx-record-grid__channel {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  vertical-align: middle;
}

.sx-record-grid__channel > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
}

.sx-record-grid__time {
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* ---------- Footer ---------- */
.sx-record-grid__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 12px 0 18px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-record-grid__pager {
  display: flex;
  gap: 6px;
}

.sx-record-grid__foot > * {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* The bar takes over the footer while rows are selected. */
.sx-record-grid:has(> .sx-record-grid__bulk[data-state="open"]) .sx-record-grid__foot > * {
  opacity: 0;
}

/* ---------- Bulk-action bar ---------- */
.sx-record-grid__bulk {
  position: absolute;
  left: 50%;
  bottom: 9px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  max-width: calc(100% - 16px);
  padding: 4px 4px 4px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--sx-r-lg);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(-50%, calc(100% + 18px));
  transition: transform var(--sx-dur-3) var(--sx-ease-in-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-record-grid__bulk[data-state="open"] {
  opacity: 1;
  transform: translate(-50%, 0);
  transition: transform var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-record-grid__count {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-record-grid__count > strong {
  display: inline-block;
  min-width: 0.65em;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  animation: dg-count-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-record-grid__bulk > * {
  flex: none;
}

.sx-record-grid__sep {
  width: 1px;
  height: 18px;
  margin: 0 6px 0 10px;
  background: var(--sx-line);
}

.sx-record-grid__bulk .sx-btn--icon {
  margin-left: 4px;
}

/* ---------- Demo layout ---------- */
.sx-record-grid-demo {
  width: 700px;
  max-width: 100%;
}

@keyframes dg-count-in {
  from {
    opacity: 0;
    transform: translateY(-45%);
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-record-grid__bulk,
  .sx-record-grid__bulk[data-state="open"] {
    transform: translate(-50%, 0);
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-record-grid__count > strong {
    animation-name: sx-fade-in;
  }
}


/* ---- Edit Proposals (edit-proposals) ---- */
/* ==========================================================================
   Edit Proposals — suggested edits shown inline, with accept and reject per change
   Change: <span class="sx-edit-proposals__change" data-state="pending | accepted | rejected" [data-settled]>
           <del>old</del><ins>new</ins><span class="sx-edit-proposals__tools">accept, reject</span></span>
   The tools float above the start of the change (its first line), kept inside the column by script.
   A decided change fades first, then data-settled shrinks the text that lost out of the line.
   ========================================================================== */

.sx-edit-proposals {
  width: 440px;
}

.sx-edit-proposals__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 14px 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-edit-proposals__avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  --sx-icon-size: 15px;
}

.sx-edit-proposals__titles {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-edit-proposals__title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: var(--sx-lh-tight);
}

.sx-edit-proposals__count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  animation: dv-count-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-edit-proposals__sub {
  margin-top: 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-edit-proposals__body {
  padding: 24px 18px 18px;
}

.sx-edit-proposals__text {
  font-size: var(--sx-fs-base);
  line-height: 1.8;
  color: var(--sx-ink-2);
}

/* ---------- Changes ---------- */
.sx-edit-proposals__change {
  position: relative;
  border-radius: var(--sx-r-xs);
}

.sx-edit-proposals__del,
.sx-edit-proposals__ins {
  /* The highlight bleeds 2px each side without moving the text. */
  margin: 0 -2px;
  padding: 1px 2px;
  border-radius: var(--sx-r-xs);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out),
    text-decoration-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    margin var(--sx-dur-3) var(--sx-ease-in-out);
}

.sx-edit-proposals__del {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--sx-danger) 75%, transparent);
}

.sx-edit-proposals__ins {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  text-decoration: none;
}

.sx-edit-proposals__del + .sx-edit-proposals__ins {
  margin-left: 3px;
}

.sx-edit-proposals__change[data-state="pending"]:is(:hover, :focus-within, [data-preview]) .sx-edit-proposals__del {
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-edit-proposals__change[data-state="pending"]:is(:hover, :focus-within, [data-preview]) .sx-edit-proposals__ins {
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

/* Accepted: the old text fades out, the new text settles into plain ink. */
.sx-edit-proposals__change[data-state="accepted"] .sx-edit-proposals__del,
.sx-edit-proposals__change[data-state="rejected"] .sx-edit-proposals__ins {
  opacity: 0;
}

.sx-edit-proposals__change[data-state="accepted"] .sx-edit-proposals__ins,
.sx-edit-proposals__change[data-state="rejected"] .sx-edit-proposals__del {
  color: inherit;
  background-color: transparent;
  text-decoration-color: transparent;
}

/* Settled: the losing text shrinks to nothing (it is already invisible), so the words after
   it slide into place instead of jumping when it leaves the line. */
.sx-edit-proposals__change[data-state="accepted"][data-settled] .sx-edit-proposals__del,
.sx-edit-proposals__change[data-state="rejected"][data-settled] .sx-edit-proposals__ins {
  font-size: 0;
  visibility: hidden;
  transition:
    font-size var(--sx-dur-3) var(--sx-ease-in-out),
    margin var(--sx-dur-3) var(--sx-ease-in-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-edit-proposals__change[data-settled] .sx-edit-proposals__ins {
  margin-left: -2px;
}

/* ---------- Floating accept / reject tools ---------- */
.sx-edit-proposals__tools {
  position: absolute;
  left: -6px;
  bottom: calc(100% + 5px);
  z-index: 2;
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  white-space: nowrap;
  opacity: 0;
  /* --dv-shift (set by script from offset metrics) keeps the tools inside the text column. */
  transform: translateX(var(--dv-shift, 0px)) translateY(3px) scale(0.96);
  transform-origin: left bottom;
  pointer-events: none;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

/* A bridge over the gap, so moving from the text to the tools keeps them open. */
.sx-edit-proposals__tools::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 8px;
}

.sx-edit-proposals__change[data-state="pending"]:is(:hover, :focus-within, [data-preview]) .sx-edit-proposals__tools {
  opacity: 1;
  transform: translateX(var(--dv-shift, 0px));
  pointer-events: auto;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-edit-proposals__tool {
  display: grid;
  place-items: center;
  width: 24px;
  height: 22px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.1;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-edit-proposals__tool:focus-visible {
  outline-offset: 0;
}

.sx-edit-proposals__tool[data-action="accept"]:is(:hover, [data-hot]) {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-edit-proposals__tool[data-action="reject"]:is(:hover, [data-hot]) {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-edit-proposals__all[data-hot] {
  background-color: var(--sx-raised-hover);
  transform: scale(0.97);
}

/* ---------- Footer ---------- */
.sx-edit-proposals__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 18px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  border-radius: 0 0 var(--sx-card-radius) var(--sx-card-radius);
}

.sx-edit-proposals__progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-edit-proposals__dots {
  display: inline-flex;
  gap: 3px;
}

.sx-edit-proposals__dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-fill-strong);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-edit-proposals__dots > [data-state="accepted"] {
  background: var(--sx-success);
}

.sx-edit-proposals__dots > [data-state="rejected"] {
  background: var(--sx-danger);
}

@keyframes dv-count-in {
  from {
    opacity: 0;
    transform: translateY(-45%);
    filter: blur(2px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-edit-proposals__count {
    animation-name: sx-fade-in;
  }

  .sx-edit-proposals__del,
  .sx-edit-proposals__ins {
    transition-property: opacity, color, background-color, text-decoration-color, box-shadow;
  }

  .sx-edit-proposals__change[data-state="accepted"][data-settled] .sx-edit-proposals__del,
  .sx-edit-proposals__change[data-state="rejected"][data-settled] .sx-edit-proposals__ins {
    transition: none;
  }

  .sx-edit-proposals__tools {
    transform: translateX(var(--dv-shift, 0px));
  }
}


/* ---- Identity Menu (identity-menu) ---- */
/* ==========================================================================
   Identity Menu — avatar trigger with a profile menu (.sx-menu + .sx-pop)
   Root .sx-identity-menu wraps the trigger and the menu; the menu opens with data-state="open".
   Trigger: aria-haspopup="menu" aria-expanded; items: role="menuitem" / "menuitemradio" with
   aria-checked; the highlighted stop carries data-active="true".
   Workspaces share one check that glides to the chosen row (--am-check-y).
   ========================================================================== */

.sx-identity-menu {
  position: relative;
  display: inline-flex;
}

/* ---------- Trigger ---------- */
.sx-identity-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 38px;
  padding: 0 8px 0 4px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-identity-menu__trigger:hover,
.sx-identity-menu__trigger[aria-expanded="true"] {
  background: var(--sx-fill);
}

.sx-identity-menu__trigger:focus-visible {
  outline-offset: 1px;
}

.sx-identity-menu .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--sx-c3) 18%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--sx-c3) 70%, var(--sx-ink));
}

.sx-identity-menu__who {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sx-identity-menu__name {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
  white-space: nowrap;
}

.sx-identity-menu__org {
  display: block;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  animation: am-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

.sx-identity-menu__chevron {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-identity-menu__trigger[aria-expanded="true"] .sx-identity-menu__chevron {
  transform: rotate(180deg);
}

/* ---------- Menu ---------- */
.sx-identity-menu__menu {
  --sx-pop-origin: top right;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--sx-z-pop);
  width: 256px;
}

.sx-identity-menu__menu:focus {
  outline: none;
}

.sx-identity-menu__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 9px;
}

.sx-identity-menu__header .sx-identity-menu__who {
  line-height: 1.3;
}

.sx-identity-menu__email {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-identity-menu .sx-menu__item:focus-visible {
  outline: none;
}

.sx-identity-menu .sx-menu__item[data-active="true"] {
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-identity-menu__workspaces {
  position: relative;
}

.sx-identity-menu__tile {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  color: color-mix(in srgb, var(--am-hue, var(--sx-c1)) 72%, var(--sx-ink));
  background: color-mix(in srgb, var(--am-hue, var(--sx-c1)) 16%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--am-hue, var(--sx-c1)) 22%, transparent);
}

.sx-identity-menu__tile--add {
  color: var(--sx-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  --sx-icon-size: 12px;
}

/* One check for the group, gliding to the chosen workspace. */
.sx-identity-menu__check {
  position: absolute;
  top: 0;
  right: 10px;
  --sx-icon-size: 15px;
  --sx-icon-stroke: 2.2;
  color: var(--sx-ink);
  pointer-events: none;
  transform: translateY(var(--am-check-y, 7px));
}

.sx-identity-menu[data-ready] .sx-identity-menu__check {
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

/* ---------- Theme row: a small segmented control ---------- */
.sx-identity-menu__theme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  padding: 0 4px 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-identity-menu__theme:has([data-active="true"]) {
  background: var(--sx-fill);
}

.sx-identity-menu__theme-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sx-identity-menu__theme-label > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
}

.sx-identity-menu__seg {
  position: relative;
  display: inline-flex;
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

.sx-identity-menu__opt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 26px;
  height: 22px;
  border-radius: calc(var(--sx-r-md) - 2px);
  color: var(--sx-muted);
  --sx-icon-size: 13px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-identity-menu__opt:hover,
.sx-identity-menu__opt[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-identity-menu__opt:focus-visible {
  outline-offset: 0;
}

.sx-identity-menu__thumb {
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 0;
  width: 26px;
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--am-thumb-x, 54px));
  pointer-events: none;
}

.sx-identity-menu[data-ready] .sx-identity-menu__thumb {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-identity-menu__keys {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

/* ---------- Demo: a mini app with a top bar; room is reserved for the open menu ---------- */
.sx-identity-menu-demo {
  width: 500px;
  height: 432px;
  overflow: hidden;
}

.sx-identity-menu-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 10px 0 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-identity-menu-demo__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: 14px;
}

.sx-identity-menu-demo__nav {
  display: flex;
  gap: 2px;
  margin-right: auto;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-identity-menu-demo__nav > span {
  padding: 4px 8px;
  border-radius: var(--sx-r-sm);
}

.sx-identity-menu-demo__nav > [aria-current] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-identity-menu-demo__page {
  display: grid;
  gap: 14px;
  padding: 18px 18px 0;
}

.sx-identity-menu-demo__hello {
  font-size: var(--sx-fs-lg);
}

.sx-identity-menu-demo__lede {
  margin-top: 3px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-identity-menu-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.sx-identity-menu-demo__stat {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-identity-menu-demo__stat strong {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-identity-menu-demo__rows {
  display: grid;
}

.sx-identity-menu-demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-identity-menu-demo__row strong {
  font-weight: 500;
  color: var(--sx-ink);
}

@keyframes am-swap-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-identity-menu__org {
    animation-name: sx-fade-in;
  }

  .sx-identity-menu[data-ready] .sx-identity-menu__check,
  .sx-identity-menu[data-ready] .sx-identity-menu__thumb {
    transition: none;
  }
}


/* ---- Tag Field (tag-field) ---- */
/* ==========================================================================
   Tag Field — tag chips and an input in one field, with a suggestions listbox
   Root: .sx-field; data-focused, data-state="warning" when the limit is reached.
   Chips: .sx-chip.sx-tag-field__tag with data-flip-key (lower-case label) and data-value;
          data-leaving while a removed chip fades, data-flash when it is added a second time.
   Input: role="combobox" (aria-expanded, aria-controls, aria-activedescendant).
   List:  .sx-menu.sx-pop role="listbox", data-state="open"; options carry aria-selected and
          data-active="true" on the highlight, hidden when filtered out; data-add on "Add “…”".
   Dots take data-tint="1…6" (chart series colours).
   ========================================================================== */

.sx-tag-field {
  --tf-chip: 24px;
  position: relative;
  width: 100%;
  min-width: 0;
}

.sx-tag-field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-tag-field__count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* The anchor for the suggestions popover */
.sx-tag-field__control {
  position: relative;
}

/* ---------- Field: chips and the text input share one wrapping row ---------- */
.sx-tag-field__box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: var(--sx-h-md);
  padding: max(3px, calc((var(--sx-h-md) - var(--tf-chip)) / 2));
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tag-field__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-tag-field[data-focused] .sx-tag-field__box {
  box-shadow: var(--sx-focus-ring);
}

.sx-tag-field__tag {
  height: var(--tf-chip);
  gap: 6px;
  padding: 0 3px 0 9px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  cursor: default;
}

.sx-tag-field__label {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-tag-field__dot {
  color: var(--sx-c6);
}

.sx-tag-field__dot[data-tint="1"] { color: var(--sx-c1); }
.sx-tag-field__dot[data-tint="2"] { color: var(--sx-c2); }
.sx-tag-field__dot[data-tint="3"] { color: var(--sx-c3); }
.sx-tag-field__dot[data-tint="4"] { color: var(--sx-c4); }
.sx-tag-field__dot[data-tint="5"] { color: var(--sx-c5); }
.sx-tag-field__dot[data-tint="6"] { color: var(--sx-c6); }

.sx-tag-field__remove {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: -2px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-tag-field__remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-tag-field__remove:focus-visible {
  outline-offset: 0;
}

.sx-tag-field__tag[data-leaving] {
  pointer-events: none;
  animation: tf-tag-out var(--sx-dur-1) var(--sx-ease-in) forwards;
}

/* A second try at adding a tag points at the chip that already holds it */
.sx-tag-field__tag[data-flash] {
  animation: tf-tag-flash 0.62s var(--sx-ease-out);
}

.sx-tag-field__input {
  flex: 1 0 96px;
  min-width: 96px;
  height: var(--tf-chip);
  padding: 0 6px;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: transparent;
}

.sx-tag-field__input:focus-visible {
  outline: none;
}

/* ---------- Suggestions ---------- */
.sx-tag-field__list {
  --sx-pop-origin: top center;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--sx-z-pop);
  max-height: 172px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-tag-field__option {
  gap: 10px;
  user-select: none;
}

/* The dot sits in the same 15px column as the plus icon of "Add “…”" */
.sx-tag-field__option > .sx-dot {
  margin: 0 4.5px;
}

.sx-tag-field__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-tag-field__hit {
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-tag-field__meta {
  flex: none;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-tag-field__option--add .sx-tag-field__name {
  color: var(--sx-ink);
}

/* ---------- Hint ---------- */
.sx-tag-field__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tag-field__hint > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-tag-field[data-state="warning"] .sx-tag-field__hint,
.sx-tag-field[data-state="warning"] .sx-tag-field__count {
  color: var(--sx-warning-ink);
}

/* ---------- Demo layout (ticket side panel) ---------- */
.sx-tag-field-demo {
  display: grid;
  align-content: start;
  gap: 16px;
  width: 460px;
  max-width: 100%;
  height: 340px;
  padding: 18px 20px;
}

.sx-tag-field-demo__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sx-tag-field-demo__badge {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 16px;
}

.sx-tag-field-demo__heading {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.sx-tag-field-demo__title {
  font-size: var(--sx-fs-md);
}

.sx-tag-field-demo__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tag-field-demo__rows {
  display: grid;
  padding-top: 4px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-tag-field-demo__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  font-size: var(--sx-fs-sm);
}

.sx-tag-field-demo__key {
  color: var(--sx-muted);
}

.sx-tag-field-demo__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sx-ink);
}

@keyframes tf-tag-out {
  to {
    opacity: 0;
    transform: scale(0.82);
  }
}

@keyframes tf-tag-flash {
  30% {
    transform: scale(1.06);
    box-shadow: var(--sx-shadow-1), 0 0 0 3px var(--sx-accent-soft), 0 0 0 1px var(--sx-accent-line);
  }
}

@keyframes tf-tag-glow {
  30% {
    box-shadow: var(--sx-shadow-1), 0 0 0 3px var(--sx-accent-soft), 0 0 0 1px var(--sx-accent-line);
  }
}

@keyframes tf-fade-out {
  to {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-tag-field__tag[data-leaving] {
    animation-name: tf-fade-out;
  }

  .sx-tag-field__tag[data-flash] {
    animation-name: tf-tag-glow;
  }
}


/* ---- Category Select (category-select) ---- */
/* ==========================================================================
   Category Select — searchable grouped multi-select with select-all per group
   Groups:  .sx-category-select__group[data-group]  data-open while open, hidden when a
            search leaves nothing in it. The toggle button carries aria-expanded and
            aria-controls; the select-all box is a real checkbox whose indeterminate
            property shows a partial pick.
   Options: label.sx-check[data-value] with a real checkbox; matched search text is <strong>.
   Summary: chips carry data-flip-key, and data-leaving while they fade out.
   ========================================================================== */

.sx-category-select {
  --cs-indent: 32px;
  width: 380px;
  overflow: hidden;
}

/* ---------- Head: title, count and search ---------- */
.sx-category-select__head {
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
}

.sx-category-select__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-category-select__title {
  font-size: var(--sx-fs-md);
}

.sx-category-select__meta {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-category-select__search {
  position: relative;
}

.sx-category-select__search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin-block: auto;
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-category-select__input {
  padding-left: 30px;
  padding-right: 34px;
}

.sx-category-select__search-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  margin-block: auto;
}

/* ---------- List ---------- */
.sx-category-select__list {
  position: relative;
  height: 232px;
  padding: 4px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
  /* Soft edges appear only when there is more to scroll: the card-coloured covers scroll with
     the content and hide the edge shades at either end. */
  background:
    linear-gradient(var(--sx-card-bg) 40%, transparent) top / 100% 18px no-repeat local,
    linear-gradient(transparent, var(--sx-card-bg) 60%) bottom / 100% 18px no-repeat local,
    linear-gradient(var(--sx-line), transparent) top / 100% 7px no-repeat scroll,
    linear-gradient(transparent, var(--sx-line)) bottom / 100% 7px no-repeat scroll;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-category-select__group-row {
  display: flex;
  align-items: stretch;
  min-height: var(--sx-h-sm);
  border-radius: var(--sx-r-sm);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-category-select__group-row:hover {
  background: var(--sx-fill);
}

.sx-category-select__all {
  position: relative;
  width: calc(var(--cs-indent) - 5px);
  padding-left: 8px;
  flex: none;
}

.sx-category-select__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 0 8px 0 5px;
  border-radius: var(--sx-r-sm);
  text-align: left;
  color: var(--sx-ink);
}

.sx-category-select__toggle:focus-visible {
  outline-offset: -2px;
}

.sx-category-select__group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
}

.sx-category-select__group-count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-category-select__chev {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-category-select__toggle:hover .sx-category-select__chev {
  color: var(--sx-ink-2);
}

.sx-category-select__group[data-open] .sx-category-select__chev {
  transform: rotate(180deg);
}

/* Open and close with the grid-rows trick; closed items leave the tab order after the fold. */
.sx-category-select__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-category-select__group[data-open] .sx-category-select__panel {
  grid-template-rows: 1fr;
}

.sx-category-select__items {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-category-select__group[data-open] .sx-category-select__items {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 60ms,
    visibility 0s;
}

.sx-category-select__option {
  position: relative;
  display: flex;
  gap: 10px;
  min-height: var(--sx-h-sm);
  padding: 0 8px 0 var(--cs-indent);
  border-radius: var(--sx-r-sm);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-category-select__option:hover {
  background: var(--sx-fill);
}

.sx-category-select__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-category-select__option:has(> input:checked) .sx-category-select__name {
  color: var(--sx-ink);
}

.sx-category-select__name strong {
  font-weight: 650;
  color: var(--sx-ink);
}

.sx-category-select__count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-category-select__empty {
  padding: 72px 16px 0;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Summary ---------- */
.sx-category-select__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-category-select__chips {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.sx-category-select__chip,
.sx-category-select__more {
  flex: none;
  height: 22px;
  padding: 0 8px;
}

.sx-category-select__chip {
  color: var(--sx-ink);
  box-shadow: var(--sx-shadow-1);
}

.sx-category-select__more {
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-category-select__none {
  flex: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-category-select__chips > [data-leaving] {
  pointer-events: none;
  animation: cs-leave var(--sx-dur-1) var(--sx-ease-in) forwards;
}

.sx-category-select__clear {
  flex: none;
}

@keyframes cs-leave {
  to {
    opacity: 0;
    transform: scale(0.84);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-category-select__panel {
    transition: none;
  }

  .sx-category-select__chips > [data-leaving] {
    animation-name: cs-fade-out;
  }

  @keyframes cs-fade-out {
    to { opacity: 0; }
  }
}


/* ---- Nested Categories (nested-categories) ---- */
/* ==========================================================================
   Nested Categories — a checkbox tree with cascading picks and a search that keeps parents
   Tree:  ul[role="tree"] > li[role="treeitem"] carrying data-id, aria-level, aria-expanded
          (parents), aria-checked (true | false | mixed) and a roving tabindex.
          Each item holds a .__row and, for parents, a .__branch (grid rows 0fr -> 1fr) around
          its ul[role="group"]. Rows a search leaves out get the hidden attribute.
   The checkbox in a row is decorative (aria-hidden, tabindex -1); the treeitem holds the state.
   ========================================================================== */

.sx-nested-categories {
  --nc-step: 20px;
  width: 380px;
  overflow: hidden;
}

/* ---------- Head: title, count and search ---------- */
.sx-nested-categories__head {
  display: grid;
  gap: 10px;
  padding: 14px 14px 12px;
}

.sx-nested-categories__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-nested-categories__title {
  font-size: var(--sx-fs-md);
}

.sx-nested-categories__meta {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-nested-categories__search {
  position: relative;
}

.sx-nested-categories__search-icon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin-block: auto;
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-nested-categories__input {
  padding-left: 30px;
  padding-right: 34px;
}

.sx-nested-categories__search-clear {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 3px;
  margin-block: auto;
}

/* ---------- Tree ---------- */
.sx-nested-categories__scroll {
  position: relative;
  height: 232px;
  padding: 4px 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
  /* Soft edges appear only when there is more to scroll: the card-coloured covers scroll with
     the content and hide the edge shades at either end. */
  background:
    linear-gradient(var(--sx-card-bg) 40%, transparent) top / 100% 18px no-repeat local,
    linear-gradient(transparent, var(--sx-card-bg) 60%) bottom / 100% 18px no-repeat local,
    linear-gradient(var(--sx-line), transparent) top / 100% 7px no-repeat scroll,
    linear-gradient(transparent, var(--sx-line)) bottom / 100% 7px no-repeat scroll;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-nested-categories__tree,
.sx-nested-categories__group {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-nested-categories__item:focus,
.sx-nested-categories__item:focus-visible {
  outline: none;
}

.sx-nested-categories__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sx-h-sm);
  padding: 0 8px 0 4px;
  border-radius: var(--sx-r-sm);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-nested-categories__item[aria-level="2"] > .sx-nested-categories__row {
  padding-left: calc(4px + var(--nc-step));
}

.sx-nested-categories__item[aria-level="3"] > .sx-nested-categories__row {
  padding-left: calc(4px + var(--nc-step) * 2);
}

.sx-nested-categories__item[aria-level="4"] > .sx-nested-categories__row {
  padding-left: calc(4px + var(--nc-step) * 3);
}

.sx-nested-categories__row:hover {
  background: var(--sx-fill);
}

/* An inset ring: branches clip their overflow, so an outer ring would be cut at the edges. */
.sx-nested-categories__item:focus-visible > .sx-nested-categories__row {
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1.5px var(--sx-focus);
}

.sx-nested-categories__chev {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: var(--sx-r-xs);
  color: var(--sx-muted);
  --sx-icon-size: 14px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-nested-categories__chev:not(:empty):hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-nested-categories__chev > .sx-icon {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-nested-categories__item[aria-expanded="true"] > .sx-nested-categories__row .sx-nested-categories__chev > .sx-icon {
  transform: rotate(90deg);
}

.sx-nested-categories__check {
  position: relative;
  pointer-events: none;
}

.sx-nested-categories__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-nested-categories__item[aria-level="1"] > .sx-nested-categories__row .sx-nested-categories__name,
.sx-nested-categories__item:not([aria-checked="false"]) > .sx-nested-categories__row .sx-nested-categories__name {
  color: var(--sx-ink);
}

.sx-nested-categories__item[aria-level="1"] > .sx-nested-categories__row .sx-nested-categories__name {
  font-weight: 500;
}

.sx-nested-categories__name strong {
  font-weight: 650;
  color: var(--sx-ink);
}

.sx-nested-categories__count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* Branches open and close with the grid-rows trick; folded rows leave the accessibility tree. */
.sx-nested-categories__branch {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-nested-categories__item[aria-expanded="true"] > .sx-nested-categories__branch {
  grid-template-rows: 1fr;
}

.sx-nested-categories__group {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-nested-categories__item[aria-expanded="true"] > .sx-nested-categories__branch > .sx-nested-categories__group {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 60ms,
    visibility 0s;
}

.sx-nested-categories__empty {
  padding: 72px 16px 0;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Foot: keyboard hints and Clear ---------- */
.sx-nested-categories__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  padding: 6px 8px 6px 14px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-nested-categories__hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.sx-nested-categories__hint > .sx-kbd:last-of-type {
  margin-right: 3px;
}

.sx-nested-categories__clear {
  flex: none;
  margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sx-nested-categories__branch {
    transition: none;
  }
}


/* ---- Type Ahead (type-ahead) ---- */
/* ==========================================================================
   Type Ahead — an input that suggests matches as you type, with recent picks
   Root: .sx-field; data-focused. Input: role="combobox" (aria-expanded, aria-controls,
   aria-activedescendant). Popover: .sx-menu.sx-pop.sx-type-ahead__list, data-state="open",
   holding the role="listbox" options (aria-selected and data-active="true" on the highlight),
   a loading block and an empty block; only one of the three shows at a time.
   ========================================================================== */

.sx-type-ahead {
  position: relative;
  width: 400px;
}

.sx-type-ahead__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

/* The anchor for the suggestions popover */
.sx-type-ahead__control {
  position: relative;
}

.sx-type-ahead__box {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--sx-h-md);
  padding: 0 3px 0 10px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-type-ahead__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-type-ahead[data-focused] .sx-type-ahead__box {
  box-shadow: var(--sx-focus-ring);
}

.sx-type-ahead__lead {
  --sx-icon-size: 15px;
  margin-right: 6px;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-type-ahead[data-focused] .sx-type-ahead__lead {
  color: var(--sx-ink-2);
}

.sx-type-ahead__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  text-overflow: ellipsis;
  color: var(--sx-ink);
  background: transparent;
}

.sx-type-ahead__input:focus-visible {
  outline: none;
}

.sx-type-ahead__spinner {
  --sx-spinner-size: 13px;
  margin: 0 7px 0 4px;
  color: var(--sx-muted);
  animation-duration: 0.8s;
}

.sx-type-ahead__clear {
  flex: none;
}

/* ---------- Suggestions popover ---------- */
.sx-type-ahead__list {
  --sx-pop-origin: top center;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--sx-z-pop);
  max-height: 196px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-type-ahead__option {
  align-items: flex-start;
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 6px;
  user-select: none;
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-type-ahead__option > .sx-icon {
  margin-top: 1.5px;
}

.sx-type-ahead__text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-type-ahead__line,
.sx-type-ahead__sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.sx-type-ahead__sub {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-type-ahead__hit {
  font-weight: 600;
  color: var(--sx-ink);
}

/* Loading: skeleton rows in the shape of the options */
.sx-type-ahead__loading {
  display: grid;
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-type-ahead__ghost {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 8px 10px;
}

.sx-type-ahead__ghost-icon {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: var(--sx-r-xs);
}

.sx-type-ahead__ghost-lines {
  display: grid;
  flex: 1;
  gap: 7px;
  padding-top: 2px;
}

.sx-type-ahead__ghost-line {
  width: 58%;
  height: 9px;
}

.sx-type-ahead__ghost-sub {
  width: 40%;
  height: 7px;
}

.sx-type-ahead__ghost:nth-child(2) .sx-type-ahead__ghost-line { width: 70%; }
.sx-type-ahead__ghost:nth-child(2) .sx-type-ahead__ghost-sub { width: 47%; }
.sx-type-ahead__ghost:nth-child(3) .sx-type-ahead__ghost-line { width: 49%; }
.sx-type-ahead__ghost:nth-child(3) .sx-type-ahead__ghost-sub { width: 33%; }

/* Nothing found: say so, then say what to try */
.sx-type-ahead__empty {
  display: grid;
  gap: 3px;
  padding: 12px 10px 13px;
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-type-ahead__empty-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-type-ahead__empty-tip {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Demo layout (delivery form) ---------- */
.sx-type-ahead-demo {
  display: grid;
  align-content: start;
  gap: 16px;
  width: 440px;
  height: 336px;
  padding: 18px 20px;
}

.sx-type-ahead-demo__head {
  display: grid;
  gap: 2px;
}

.sx-type-ahead-demo__title {
  font-size: var(--sx-fs-md);
}

.sx-type-ahead-demo__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-type-ahead-demo__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-type-ahead__spinner {
    animation-duration: 1.6s;
  }
}


/* ---- Date Field (date-field) ---- */
/* ==========================================================================
   Date Field — typed DD/MM/YYYY entry, a month popover with quick picks, optional time
   Root: .sx-field; data-focused, data-state="error" (red ring, one shake, message in the hint).
   Toggle: aria-haspopup="dialog" aria-expanded. Popover: .sx-menu.sx-pop role="dialog",
   data-state="open". Quick picks: aria-pressed when they match the value, data-hover (previews).
   Days (role="gridcell" buttons) carry aria-selected, aria-current="date" (today),
   aria-disabled (outside min/max), data-outside (next or previous month) and data-cursor
   (the keyboard position drawn without real focus, for previews).
   The weeks group takes data-dir="next | prev" to slide a new month in.
   ========================================================================== */

.sx-date-field {
  --df-cell: 30px;
  --df-quick: 124px;
  position: relative;
  width: 320px;
}

.sx-date-field__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-date-field__row {
  display: flex;
  gap: 8px;
}

/* The anchor for the popover */
.sx-date-field__control {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* ---------- Typed entry ---------- */
.sx-date-field__box {
  display: flex;
  align-items: center;
  gap: 2px;
  height: var(--sx-h-md);
  padding: 0 3px 0 10px;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-field__box:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-date-field[data-focused] .sx-date-field__box {
  box-shadow: var(--sx-focus-ring);
}

.sx-date-field[data-state="error"] .sx-date-field__box {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
  animation: sx-shake 0.42s var(--sx-ease-out);
}

.sx-date-field__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--sx-ink);
  background: transparent;
}

.sx-date-field__input:focus-visible {
  outline: none;
}

.sx-date-field__toggle[aria-expanded="true"] {
  color: var(--sx-ink);
  background-color: var(--sx-fill);
}

/* ---------- Time (a native select dressed as an input) ---------- */
.sx-date-field__time {
  position: relative;
  flex: none;
  width: 108px;
}

/* The .sx-select primitive draws the chevron; this narrow field tucks it in so "No time" still fits. */
.sx-date-field__time .sx-select .sx-date-field__select {
  padding: 0 24px 0 30px;
  font-variant-numeric: tabular-nums;
}

.sx-date-field__time .sx-select__icon {
  --sx-icon-size: 14px;
  inset-inline-end: 8px;
}

.sx-date-field__select[data-empty] {
  color: var(--sx-muted);
}

.sx-date-field__time > .sx-icon {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-date-field__time-lead {
  left: 10px;
  z-index: 1;
  --sx-icon-size: 14px;
}

/* ---------- Popover ---------- */
.sx-date-field__pop {
  --sx-pop-origin: top left;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--sx-z-pop);
  display: grid;
  grid-template-columns: minmax(var(--df-quick), max-content) auto;
  width: max-content;
  padding: 6px;
}

.sx-date-field__quick {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 6px;
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-date-field__pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--sx-h-sm);
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  text-align: left;
  white-space: nowrap;
  color: var(--sx-ink-2);
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-field__pick:hover,
.sx-date-field__pick[data-hover] {
  color: var(--sx-ink);
  background-color: var(--sx-fill);
}

.sx-date-field__pick[aria-pressed="true"] {
  font-weight: 500;
  color: var(--sx-ink);
  background-color: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-date-field__pick:focus-visible {
  outline-offset: -2px;
}

.sx-date-field__pick:disabled {
  opacity: 0.45;
  background: none;
}

.sx-date-field__pick-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-date-field__pick-date {
  flex: none;
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-text-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-date-field__clear {
  align-self: flex-start;
  margin-top: auto;
}

.sx-date-field__cal {
  min-width: 0;
  padding: 0 0 0 8px;
}

.sx-date-field__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  margin-bottom: 2px;
}

.sx-date-field__title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  font-variant-numeric: tabular-nums;
}

.sx-date-field__nav > .sx-btn:hover {
  color: var(--sx-ink);
}

/* ---------- Month grid ---------- */
.sx-date-field__grid {
  display: grid;
  overflow: hidden;
}

.sx-date-field__week {
  display: grid;
  grid-template-columns: repeat(7, var(--df-cell));
}

.sx-date-field__wd {
  display: grid;
  place-items: center;
  height: 20px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-date-field__weeks {
  display: grid;
}

.sx-date-field__weeks[data-dir="next"] {
  animation: df-in-next var(--sx-dur-4) var(--sx-ease-out);
}

.sx-date-field__weeks[data-dir="prev"] {
  animation: df-in-prev var(--sx-dur-4) var(--sx-ease-out);
}

.sx-date-field__day {
  position: relative;
  height: var(--df-cell);
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-field__day:hover {
  background-color: var(--sx-fill);
}

.sx-date-field__day[data-outside] {
  color: var(--sx-faint);
}

.sx-date-field__day:focus-visible,
.sx-date-field__day[data-cursor] {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

/* Today: a small accent dot under the number */
.sx-date-field__day[aria-current="date"] {
  font-weight: 600;
}

.sx-date-field__day[aria-current="date"]::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: var(--sx-accent);
}

.sx-date-field__day[aria-selected="true"] {
  font-weight: 500;
  color: var(--sx-on-primary);
  background-color: var(--sx-primary);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  animation: df-cap-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-date-field__day[aria-selected="true"]:focus-visible,
.sx-date-field__day[aria-selected="true"][data-cursor] {
  box-shadow: var(--sx-focus-ring), var(--sx-shadow-primary);
}

.sx-date-field__day[aria-selected="true"][aria-current="date"]::after {
  background: var(--sx-on-primary);
}

.sx-date-field__day[aria-disabled="true"] {
  color: var(--sx-faint);
  background: none;
  cursor: not-allowed;
}

/* ---------- Hint and error ---------- */
.sx-date-field__hint {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 20px;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-date-field__hint > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-date-field__when {
  color: var(--sx-ink-2);
}

.sx-date-field__rel {
  font-variant-numeric: tabular-nums;
}

.sx-date-field[data-state="error"] .sx-date-field__hint {
  color: var(--sx-danger-ink);
}

@keyframes df-in-next {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
}

@keyframes df-in-prev {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
}

@keyframes df-cap-in {
  from {
    transform: scale(0.72);
  }
}

/* ---------- Demo layout (follow-up panel; its height leaves room for the open popover) ---------- */
.sx-date-field-demo {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 404px;
  height: 370px;
  padding: 16px 18px;
}

.sx-date-field-demo__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sx-date-field-demo__badge {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-date-field-demo__title {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-md);
}

.sx-date-field-demo__rows {
  display: grid;
  padding-top: 4px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-date-field-demo__row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  min-height: 32px;
  font-size: var(--sx-fs-sm);
}

.sx-date-field-demo__key {
  color: var(--sx-muted);
}

.sx-date-field-demo__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sx-ink);
}

.sx-date-field-demo__note {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-date-field-demo__note-label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sx-date-field[data-state="error"] .sx-date-field__box {
    animation: none;
  }

  .sx-date-field__weeks[data-dir="next"],
  .sx-date-field__weeks[data-dir="prev"] {
    animation-name: sx-fade-in;
  }

  .sx-date-field__day[aria-selected="true"] {
    animation: none;
  }
}


/* ---- Colour Mixer (colour-mixer) ---- */
/* ==========================================================================
   Colour Mixer — saturation/brightness area, hue and opacity sliders, hex input, swatches
   The colour lives on the root as custom properties written by script on every change:
     --cm-h (0…360), --cm-s, --cm-v, --cm-a (0…1) and --cm-rgb ("r g b").
   Every part paints from them; the area and the slider tracks are size containers, so the
   handles move with the translate property alone (p × 100cqw / 100cqh) and nothing is
   measured. The scale property is kept free for the focus and drag emphasis.
   Root: data-dragging while a handle follows the pointer (no glide).
   Handles: role="slider"; the area, hue and opacity tracks are the pointer targets.
   Message: data-state="error" when the typed hex is not valid; the input gets aria-invalid.
   Swatches: aria-pressed on the one matching the current colour, which sits in --cm-swatch.
   ========================================================================== */

.sx-colour-mixer {
  --cm-handle: 16px;
  --cm-thumb: 14px;
  --cm-check: repeating-conic-gradient(var(--sx-fill-strong) 0 25%, transparent 0 50%) 0 0 / 8px 8px;
  width: 300px;
  overflow: hidden;
}

.sx-colour-mixer__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px 0;
}

.sx-colour-mixer__title {
  font-size: var(--sx-fs-md);
}

.sx-colour-mixer__name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-colour-mixer__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: rgb(var(--cm-rgb, 0 0 0) / var(--cm-a, 1));
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-colour-mixer__body {
  display: grid;
  gap: 12px;
  padding: 12px 14px 14px;
}

/* ---------- Saturation / brightness area ---------- */
.sx-colour-mixer__area {
  position: relative;
  height: 140px;
  border-radius: var(--sx-r-md);
  background:
    linear-gradient(to top, black, transparent),
    linear-gradient(to right, white, hsl(var(--cm-h, 0) 100% 50%));
  box-shadow: inset 0 0 0 1px var(--sx-line);
  container-type: size;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sx-colour-mixer__handle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cm-handle);
  height: var(--cm-handle);
  margin: calc(var(--cm-handle) / -2) 0 0 calc(var(--cm-handle) / -2);
  border-radius: 50%;
  outline: none;
  background: rgb(var(--cm-rgb, 0 0 0));
  box-shadow: inset 0 0 0 3px white, 0 0 0 1px var(--sx-overlay), 0 2px 6px var(--sx-overlay);
  translate: calc(var(--cm-s, 0) * 100cqw) calc((1 - var(--cm-v, 0)) * 100cqh);
  pointer-events: none;
  transition:
    translate var(--sx-dur-2) var(--sx-ease-out),
    scale var(--sx-dur-2) var(--sx-ease-spring),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Preview, eyedropper and the two sliders ---------- */
.sx-colour-mixer__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sx-colour-mixer__pick {
  margin: 0 -4px 0 -6px;
}

.sx-colour-mixer__preview {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--cm-check), var(--sx-surface);
}

.sx-colour-mixer__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--cm-rgb, 0 0 0) / var(--cm-a, 1));
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-colour-mixer__sliders {
  display: grid;
  flex: 1;
  min-width: 0;
}

/* The slider is the pointer target; its padding gives the thumb room at both ends. */
.sx-colour-mixer__slider {
  position: relative;
  padding: 4px calc(var(--cm-thumb) / 2);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sx-colour-mixer__slider * {
  pointer-events: none;
}

.sx-colour-mixer__track {
  position: relative;
  height: 10px;
  border-radius: var(--sx-r-pill);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  container-type: inline-size;
}

.sx-colour-mixer__slider[data-channel="hue"] .sx-colour-mixer__track {
  background: linear-gradient(
    to right,
    hsl(0 100% 50%),
    hsl(60 100% 50%),
    hsl(120 100% 50%),
    hsl(180 100% 50%),
    hsl(240 100% 50%),
    hsl(300 100% 50%),
    hsl(360 100% 50%)
  );
}

.sx-colour-mixer__slider[data-channel="alpha"] .sx-colour-mixer__track {
  background:
    linear-gradient(to right, rgb(var(--cm-rgb, 0 0 0) / 0), rgb(var(--cm-rgb, 0 0 0))),
    var(--cm-check),
    var(--sx-surface);
}

.sx-colour-mixer__thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: var(--cm-thumb);
  height: var(--cm-thumb);
  margin: calc(var(--cm-thumb) / -2) 0 0 calc(var(--cm-thumb) / -2);
  border-radius: 50%;
  outline: none;
  box-shadow: inset 0 0 0 3px white, 0 0 0 1px var(--sx-overlay), 0 1px 4px var(--sx-overlay);
  transition:
    translate var(--sx-dur-2) var(--sx-ease-out),
    scale var(--sx-dur-2) var(--sx-ease-spring),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-colour-mixer__slider[data-channel="hue"] .sx-colour-mixer__thumb {
  background: hsl(var(--cm-h, 0) 100% 50%);
  translate: calc(var(--cm-h, 0) / 360 * 100cqw) 0;
}

.sx-colour-mixer__slider[data-channel="alpha"] .sx-colour-mixer__thumb {
  background: rgb(var(--cm-rgb, 0 0 0) / var(--cm-a, 1));
  translate: calc(var(--cm-a, 1) * 100cqw) 0;
}

.sx-colour-mixer__handle:focus-visible,
.sx-colour-mixer__thumb:focus-visible {
  scale: 1.15;
  box-shadow: inset 0 0 0 3px white, 0 0 0 1px var(--sx-overlay), var(--sx-focus-ring);
}

/* While dragging, handles stick to the pointer. */
.sx-colour-mixer[data-dragging] :is(.sx-colour-mixer__handle, .sx-colour-mixer__thumb) {
  transition-property: scale, box-shadow;
}

.sx-colour-mixer[data-dragging] :is(.sx-colour-mixer__handle, .sx-colour-mixer__thumb):focus {
  scale: 1.15;
}

/* ---------- Hex field ---------- */
.sx-colour-mixer__fields {
  display: flex;
  gap: 8px;
}

.sx-colour-mixer__hexwrap {
  position: relative;
  display: block;
  flex: 1;
  min-width: 0;
}

.sx-colour-mixer__hash {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-colour-mixer__hex {
  padding-left: 22px;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.sx-colour-mixer__alpha {
  display: grid;
  place-items: center;
  width: 58px;
  height: var(--sx-h-md);
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-colour-mixer__msg {
  min-height: 18px;
  margin-top: -6px;
  font-size: var(--sx-fs-xs);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-colour-mixer__msg[data-state="error"] {
  color: var(--sx-danger-ink);
}

/* ---------- Swatches ---------- */
.sx-colour-mixer__swatches {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.sx-colour-mixer__swatch {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--cm-swatch);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: transform var(--sx-dur-2) var(--sx-ease-spring), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-colour-mixer__swatch:hover {
  transform: scale(1.1);
}

.sx-colour-mixer__swatch:active {
  transform: scale(0.94);
}

.sx-colour-mixer__swatch[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px var(--sx-line), 0 0 0 2px var(--sx-card-bg), 0 0 0 3.5px var(--sx-ink-2);
}

.sx-colour-mixer__swatch:focus-visible {
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-colour-mixer__handle,
  .sx-colour-mixer__thumb {
    transition-property: box-shadow;
  }

  .sx-colour-mixer__handle:focus-visible,
  .sx-colour-mixer__thumb:focus-visible,
  .sx-colour-mixer[data-dragging] :is(.sx-colour-mixer__handle, .sx-colour-mixer__thumb):focus {
    scale: none;
  }

  .sx-colour-mixer__swatch:hover,
  .sx-colour-mixer__swatch:active {
    transform: none;
  }
}


/* ---- Value Slider (value-slider) ---- */
/* ==========================================================================
   Value Slider — one value or a range on a track, with steps, marks and a value bubble
   Root: data-range (two thumbs), data-dragging (a thumb follows the pointer), data-disabled.
   Rail: an inline-size container carrying --vs-p0 / --vs-p1 (0…1), the ends of the fill.
         Thumbs move with transform: translateX(p × 100cqw), so nothing is measured.
   Thumbs: role="slider" with --vs-p (0…1). :focus-visible, data-active (dragging or preview)
           and data-hover (nearest to the pointer) show the bubble above the thumb.
   Marks: --vs-m (0…1) places a label under the track; data-in marks the ones inside the value.
   ========================================================================== */

.sx-value-slider {
  --vs-thumb: 18px;
  --vs-track: 6px;
  --vs-fill: var(--sx-primary);
  display: grid;
  gap: 4px;
  width: 100%;
  min-width: 200px;
}

.sx-value-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-value-slider__value {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
}

/* The control is the pointer target: everything inside ignores the pointer, so offsetX is
   always measured against the control, which stays correct inside scaled previews.
   The margin above it is the room the bubble needs, so the bubble never covers the label row. */
.sx-value-slider__control {
  position: relative;
  margin-top: 22px;
  padding: 6px calc(var(--vs-thumb) / 2) 0;
  cursor: pointer;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sx-value-slider__control * {
  pointer-events: none;
}

.sx-value-slider__rail {
  position: relative;
  height: var(--vs-thumb);
  container-type: inline-size;
}

.sx-value-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: var(--vs-track);
  margin-top: calc(var(--vs-track) / -2);
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-value-slider__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--vs-fill);
  clip-path: inset(0 calc((1 - var(--vs-p1, 0)) * 100%) 0 calc(var(--vs-p0, 0) * 100%) round var(--sx-r-pill));
  transition: clip-path var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Thumb: positioned by transform, drawn by ::before so it can grow on its own ---------- */
.sx-value-slider__thumb {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: var(--vs-thumb);
  height: var(--vs-thumb);
  margin-left: calc(var(--vs-thumb) / -2);
  border-radius: 50%;
  outline: none;
  transform: translateX(calc(var(--vs-p, 0) * 100cqw));
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-value-slider__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
  transition: transform var(--sx-dur-2) var(--sx-ease-spring), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-value-slider__thumb::after {
  content: "";
  position: absolute;
  inset: calc(var(--vs-thumb) / 2 - 3px);
  border-radius: 50%;
  background: var(--sx-ink);
  transition: transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-value-slider__thumb:focus-visible::before {
  box-shadow: var(--sx-shadow-2), var(--sx-focus-ring);
}

.sx-value-slider__thumb:is(:focus-visible, [data-active], [data-hover]) {
  z-index: 2;
}

.sx-value-slider__thumb[data-active]::before {
  transform: scale(1.14);
}

.sx-value-slider__thumb[data-active]::after {
  transform: scale(1.3);
}

/* While a thumb follows the pointer it only eases between steps, so it never lags behind. */
.sx-value-slider[data-dragging] .sx-value-slider__thumb,
.sx-value-slider[data-dragging] .sx-value-slider__fill {
  transition-duration: var(--sx-dur-1);
}

/* ---------- Bubble: anchored to the thumb, sliding along its own width near the ends ---------- */
.sx-value-slider__bubble {
  --vs-anchor: clamp(10px, var(--vs-p, 0) * 100%, 100% - 10px);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  padding: 4px 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: var(--sx-shadow-primary);
  opacity: 0;
  transform-origin: var(--vs-anchor) 100%;
  transform: translateX(calc(var(--vs-anchor) * -1)) translateY(3px) scale(0.9);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-value-slider__bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: var(--vs-anchor);
  width: 8px;
  height: 4px;
  margin-left: -4px;
  background: inherit;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sx-value-slider__thumb:is(:focus-visible, [data-active], [data-hover]) .sx-value-slider__bubble {
  opacity: 1;
  transform: translateX(calc(var(--vs-anchor) * -1));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Marks ---------- */
.sx-value-slider__marks {
  position: relative;
  height: 20px;
  margin-top: 3px;
}

.sx-value-slider__mark {
  position: absolute;
  top: 0;
  left: calc(var(--vs-m, 0) * 100%);
  display: grid;
  justify-items: center;
  gap: 4px;
  transform: translateX(-50%);
  font-size: var(--sx-fs-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-value-slider__mark::before {
  content: "";
  width: 1px;
  height: 4px;
  border-radius: 1px;
  background: var(--sx-line-strong);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-value-slider__mark[data-in] {
  color: var(--sx-ink);
}

.sx-value-slider__mark[data-in]::before {
  background: var(--sx-ink-2);
}

/* ---------- Disabled ---------- */
.sx-value-slider[data-disabled] {
  opacity: 0.5;
}

.sx-value-slider[data-disabled] .sx-value-slider__control {
  cursor: not-allowed;
}

/* ---------- Demo layout: a sale rules panel ---------- */
.sx-value-slider-demo {
  width: 380px;
  overflow: hidden;
}

.sx-value-slider-demo__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 0;
}

.sx-value-slider-demo__title {
  font-size: var(--sx-fs-md);
}

.sx-value-slider-demo__meta {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-value-slider-demo__body {
  display: grid;
  gap: 16px;
  padding: 10px 18px 14px;
}

.sx-value-slider-demo__body > .sx-value-slider + .sx-value-slider {
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sx-value-slider__thumb,
  .sx-value-slider__fill {
    transition: none;
  }

  .sx-value-slider__thumb[data-active]::before,
  .sx-value-slider__thumb[data-active]::after {
    transform: none;
  }

  .sx-value-slider__bubble,
  .sx-value-slider__thumb:is(:focus-visible, [data-active], [data-hover]) .sx-value-slider__bubble {
    transform: translateX(calc(var(--vs-anchor) * -1));
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }
}


/* ---- Tick Box (tick-box) ---- */
/* ==========================================================================
   Tick Box — checkbox rows and cards, with a "select all" parent
   Root: role="group", optional .sx-tick-box--cards. Every item is a .sx-check label whose
   input carries the state (:checked, :indeterminate on the parent). The tick is the shared
   check icon drawn with stroke-dashoffset; cards take a ring while checked.
   ========================================================================== */

.sx-tick-box {
  --tb-ring: var(--sx-primary);
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-tick-box__legend {
  margin-bottom: 4px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-tick-box__list {
  position: relative;
  display: grid;
  gap: 2px;
}

/* ---------- Row ---------- */
.sx-tick-box .sx-tick-box__item {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 10px;
  padding: 6px 10px;
  border-radius: var(--sx-r-md);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tick-box .sx-tick-box__item:hover {
  background: var(--sx-fill);
}

.sx-tick-box__item > .sx-check__box {
  margin-top: calc((var(--sx-fs-base) * 1.5 - 16px) / 2);
}

.sx-tick-box__text {
  display: grid;
  min-width: 0;
}

.sx-tick-box__label {
  font-size: var(--sx-fs-base);
  line-height: 1.5;
  color: var(--sx-ink);
}

.sx-tick-box__desc {
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  color: var(--sx-muted);
}

.sx-tick-box__count {
  align-self: center;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* The parent row reads as the head of its group; children sit on a quiet guide line. */
.sx-tick-box__item--all .sx-tick-box__label {
  font-weight: 500;
}

.sx-tick-box__item--all + .sx-tick-box__list {
  padding-left: 26px;
}

.sx-tick-box__item--all + .sx-tick-box__list::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 14px;
  left: 17.5px;
  width: 1px;
  border-radius: 1px;
  background: var(--sx-line);
}

/* ---------- The tick draws itself ----------
   The shared check icon (M20 6 9 17l-5-5, about 22.6 units long) is dashed by its own length.
   A negative offset reveals it from its end, so the short stroke lands first, like a pen. */
.sx-tick-box .sx-check__box > .sx-icon {
  opacity: 1;
  transform: none;
  stroke-dasharray: 24;
  stroke-dashoffset: -24;
  transition: stroke-dashoffset var(--sx-dur-1) var(--sx-ease-in);
}

.sx-tick-box .sx-check > input:checked + .sx-check__box > .sx-icon {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--sx-dur-3) var(--sx-ease-out) 50ms;
}

.sx-tick-box .sx-check > input:indeterminate + .sx-check__box > .sx-icon {
  opacity: 0;
}

.sx-tick-box .sx-check__box {
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring);
}

/* A real press dips the box a little; it springs back on release. */
.sx-tick-box .sx-tick-box__item:active > .sx-check__box {
  transform: scale(0.88);
  transition-duration: var(--sx-dur-1), var(--sx-dur-1), var(--sx-dur-1);
}

.sx-tick-box .sx-check > input:disabled + .sx-check__box,
.sx-tick-box .sx-tick-box__item:has(> input:disabled) .sx-tick-box__text {
  opacity: 0.5;
}

.sx-tick-box .sx-tick-box__item:has(> input:disabled) {
  cursor: not-allowed;
  background: none;
}

/* ---------- Cards: the whole card is the hit area ---------- */
.sx-tick-box--cards .sx-tick-box__list {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}

.sx-tick-box .sx-tick-box__card {
  grid-template-columns: minmax(0, 1fr) 16px;
  grid-template-areas:
    "icon box"
    "text text";
  align-content: start;
  row-gap: 8px;
  padding: 11px 12px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-tick-box .sx-tick-box__card:hover {
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-tick-box__card > .sx-check__box {
  grid-area: box;
  margin-top: 0;
}

.sx-tick-box__card > .sx-tick-box__text {
  grid-area: text;
}

.sx-tick-box__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 15px;
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tick-box .sx-tick-box__card:has(> input:checked) {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--tb-ring), 0 1px 2px var(--sx-fill-strong);
}

.sx-tick-box__card:has(> input:checked) > .sx-tick-box__icon {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-tick-box__card .sx-tick-box__label {
  font-weight: 500;
}

/* Cards show focus on the card itself instead of the small box. */
.sx-tick-box .sx-tick-box__card:has(> input:focus-visible) {
  box-shadow: var(--sx-focus-ring);
}

.sx-tick-box__card > input:focus-visible + .sx-check__box {
  box-shadow: none;
}

.sx-tick-box .sx-tick-box__card:has(> input:checked:focus-visible) {
  box-shadow: inset 0 0 0 1.5px var(--tb-ring), var(--sx-focus-ring);
}

/* ---------- Demo layout (notification settings) ---------- */
.sx-tick-box-demo {
  display: grid;
  gap: 12px;
  width: 400px;
  padding: 14px 18px 18px;
}

/* Rows keep their hover padding but line their boxes up with the card edge. */
.sx-tick-box-demo > .sx-tick-box:not(.sx-tick-box--cards) {
  margin-inline: -10px;
}

.sx-tick-box-demo > .sx-tick-box:not(.sx-tick-box--cards) > .sx-tick-box__legend {
  padding-inline: 10px;
}

.sx-tick-box-demo > .sx-tick-box + .sx-tick-box {
  padding-top: 13px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sx-tick-box .sx-check__box > .sx-icon,
  .sx-tick-box .sx-check > input:checked + .sx-check__box > .sx-icon {
    stroke-dashoffset: 0;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-tick-box .sx-check > input:checked + .sx-check__box > .sx-icon {
    opacity: 1;
  }

  .sx-tick-box .sx-tick-box__item:active > .sx-check__box {
    transform: none;
  }
}


/* ---- Single Choice (single-choice) ---- */
/* ==========================================================================
   Single Choice — radio rows or radio cards with roving focus
   Root: role="radiogroup", optional .sx-single-choice--cards. Options: role="radio" buttons
   with aria-checked and a roving tabindex (only the checked one is tabbable). The dot grows
   into place; checked cards lift with a ring. data-focus previews the focus ring (demos).
   ========================================================================== */

.sx-single-choice {
  --sc-ring: var(--sx-primary);
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-single-choice__legend {
  margin-bottom: 4px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-single-choice__list {
  display: grid;
  gap: 2px;
}

/* ---------- Row ---------- */
.sx-single-choice__option {
  position: relative;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  column-gap: 10px;
  width: 100%;
  padding: 6px 10px;
  border-radius: var(--sx-r-md);
  text-align: left;
  color: var(--sx-ink);
  user-select: none;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-single-choice__option:hover {
  background: var(--sx-fill);
}

.sx-single-choice__option:focus-visible,
.sx-single-choice__option[data-focus] {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-single-choice__option:disabled {
  cursor: not-allowed;
  background: none;
}

.sx-single-choice__option:disabled > * {
  opacity: 0.5;
}

.sx-single-choice__text {
  display: grid;
  min-width: 0;
}

.sx-single-choice__label {
  font-size: var(--sx-fs-base);
  line-height: 1.5;
}

.sx-single-choice__desc {
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  color: var(--sx-muted);
}

/* ---------- Radio: the fill lands, then the dot grows into place ---------- */
.sx-single-choice__radio {
  position: relative;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-top: calc((var(--sx-fs-base) * 1.5 - 16px) / 2);
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-single-choice__radio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-on-primary);
  transform: scale(0);
  transition: transform var(--sx-dur-1) var(--sx-ease-in);
}

.sx-single-choice__option[aria-checked="true"] .sx-single-choice__radio {
  background: var(--sc-ring);
  box-shadow: inset 0 0 0 1px var(--sc-ring);
}

.sx-single-choice__option[aria-checked="true"] .sx-single-choice__radio::after {
  transform: scale(1);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring) 40ms;
}

/* A real press dips the radio; it springs back on release. */
.sx-single-choice__option:active .sx-single-choice__radio {
  transform: scale(0.88);
  transition-duration: var(--sx-dur-1);
}

/* ---------- Cards ---------- */
.sx-single-choice--cards .sx-single-choice__list {
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 8px;
}

.sx-single-choice__card {
  grid-template-columns: minmax(0, 1fr) 16px;
  grid-template-areas:
    "icon radio"
    "text text";
  align-content: start;
  row-gap: 8px;
  padding: 11px 12px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-single-choice__card:hover {
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-single-choice__card > .sx-single-choice__radio {
  grid-area: radio;
  margin-top: 0;
}

.sx-single-choice__card > .sx-single-choice__text {
  grid-area: text;
}

.sx-single-choice__card .sx-single-choice__label {
  font-weight: 500;
}

.sx-single-choice__icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 15px;
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-single-choice__card[aria-checked="true"] {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1.5px var(--sc-ring), var(--sx-shadow-2);
  transform: translateY(-1px);
}

.sx-single-choice__card[aria-checked="true"] > .sx-single-choice__icon {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-single-choice__card:focus-visible,
.sx-single-choice__card[data-focus] {
  box-shadow: var(--sx-focus-ring);
}

.sx-single-choice__card[aria-checked="true"]:focus-visible,
.sx-single-choice__card[aria-checked="true"][data-focus] {
  box-shadow: inset 0 0 0 1.5px var(--sc-ring), var(--sx-focus-ring);
}

/* ---------- Demo layout (checkout preferences) ---------- */
.sx-single-choice-demo {
  display: grid;
  gap: 12px;
  width: 400px;
  padding: 14px 18px 16px;
}

.sx-single-choice-demo > .sx-single-choice:not(.sx-single-choice--cards) {
  margin-inline: -10px;
}

.sx-single-choice-demo > .sx-single-choice:not(.sx-single-choice--cards) > .sx-single-choice__legend {
  padding-inline: 10px;
}

.sx-single-choice-demo > .sx-single-choice + .sx-single-choice {
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@media (prefers-reduced-motion: reduce) {
  .sx-single-choice__card[aria-checked="true"],
  .sx-single-choice__option:active .sx-single-choice__radio {
    transform: none;
  }

  .sx-single-choice__radio::after,
  .sx-single-choice__option[aria-checked="true"] .sx-single-choice__radio::after {
    transform: none;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-single-choice__option[aria-checked="true"] .sx-single-choice__radio::after {
    opacity: 1;
  }
}


/* ---- Long Text (long-text) ---- */
/* ==========================================================================
   Long Text — a text area that grows with its content, with a soft limit
   Root: data-level="ok | near | over", data-focus previews the focus ring; --lt-pct (0–100)
   fills the counter ring; --lt-min-rows / --lt-max-rows bound the height.
   Height follows a hidden copy of the text (the control's data-value) in the same grid cell,
   so nothing is measured in script. Draft: .sx-long-text__draft data-state="idle | saving | saved".
   ========================================================================== */

.sx-long-text {
  --lt-min-rows: 2;
  --lt-max-rows: 6;
  --lt-line: calc(var(--sx-fs-base) * 1.5);
  --lt-pad-y: 8px;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-long-text__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-long-text__head > .sx-hint {
  font-size: var(--sx-fs-xs);
}

/* ---------- Growing control ---------- */
.sx-long-text__control {
  display: grid;
}

.sx-long-text__control::after,
.sx-long-text .sx-long-text__input {
  grid-area: 1 / 1;
  min-height: calc(var(--lt-line) * var(--lt-min-rows) + var(--lt-pad-y) * 2);
  max-height: calc(var(--lt-line) * var(--lt-max-rows) + var(--lt-pad-y) * 2);
  padding: var(--lt-pad-y) 10px;
  font-family: inherit;
  font-size: var(--sx-fs-base);
  line-height: 1.5;
  letter-spacing: inherit;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* The copy keeps one trailing space so a final empty line still counts. */
.sx-long-text__control::after {
  content: attr(data-value) " ";
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.sx-long-text .sx-long-text__input {
  height: auto;
  resize: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sx-long-text[data-focus] .sx-long-text__input:not([aria-invalid="true"]) {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Foot: draft status and counter ---------- */
.sx-long-text__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
  font-size: var(--sx-fs-xs);
}

.sx-long-text__msg {
  display: grid;
  min-width: 0;
}

.sx-long-text__msg > * {
  grid-area: 1 / 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  white-space: nowrap;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-long-text__draft {
  color: var(--sx-muted);
  opacity: 0;
  filter: blur(2px);
  transform: translateY(2px);
}

.sx-long-text__draft > .sx-icon {
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-success-ink);
}

.sx-long-text__draft > .sx-spinner {
  --sx-spinner-size: 10px;
}

.sx-long-text__draft[data-state="saving"],
.sx-long-text__draft[data-state="saved"] {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Typing again lets the old status go quickly. */
.sx-long-text__draft[data-state="idle"] {
  transition-duration: var(--sx-dur-1);
}

.sx-long-text__over {
  font-weight: 500;
  color: var(--sx-danger-ink);
  opacity: 0;
  transform: translateY(2px);
}

.sx-long-text[data-level="over"] .sx-long-text__over {
  opacity: 1;
  transform: none;
}

.sx-long-text[data-level="over"] .sx-long-text__draft {
  opacity: 0;
}

.sx-long-text__count {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-long-text__num {
  min-width: 3ch;
  text-align: right;
  font-weight: 500;
}

.sx-long-text__limit {
  margin-left: -3px;
  color: var(--sx-faint);
}

.sx-long-text__ring {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
  overflow: visible;
}

.sx-long-text__ring > circle {
  fill: none;
  stroke-width: 2;
}

.sx-long-text__track {
  stroke: var(--sx-c-track);
}

.sx-long-text__arc {
  stroke: var(--sx-ink-2);
  stroke-linecap: round;
  stroke-dasharray: 100 200;
  stroke-dashoffset: calc((100 - var(--lt-pct, 0)) * 1px);
  opacity: min(1, var(--lt-pct, 0));
  transition:
    stroke-dashoffset var(--sx-dur-3) var(--sx-ease-out),
    stroke var(--sx-dur-2) var(--sx-ease-out);
}

.sx-long-text[data-level="near"] .sx-long-text__count {
  color: var(--sx-warning-ink);
}

.sx-long-text[data-level="near"] .sx-long-text__arc {
  stroke: var(--sx-warning);
}

.sx-long-text[data-level="over"] .sx-long-text__count,
.sx-long-text[data-level="over"] .sx-long-text__limit {
  color: var(--sx-danger-ink);
}

.sx-long-text[data-level="over"] .sx-long-text__arc {
  stroke: var(--sx-danger);
}

.sx-long-text[data-level="over"] .sx-long-text__track {
  stroke: var(--sx-danger-soft);
}

/* ---------- Demo layout (support form) ---------- */
.sx-long-text-demo {
  display: grid;
  gap: 14px;
  width: 420px;
  padding: 18px 20px 16px;
}

.sx-long-text-demo__head {
  display: grid;
  gap: 2px;
}

.sx-long-text-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-long-text-demo__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sx-long-text__draft,
  .sx-long-text__over {
    filter: none;
    transform: none;
  }
}


/* ---- Prose Editor (prose-editor) ---- */
/* ==========================================================================
   Prose Editor — contenteditable rich text with a toolbar, link popover and word count
   Root (.sx-card): data-empty shows the placeholder; data-focus and data-caret preview focus
   and a caret at the end (demos). Tools: aria-pressed follows the selection, data-pressed
   previews a press. Link popover: .sx-pop with data-state="open", placed by script (--pe-pop-x).
   ::highlight(sx-prose-selection) paints a previewed selection without touching the real one.
   ========================================================================== */

.sx-prose-editor {
  --pe-pop-x: 0px;
  display: grid;
  width: 540px;
  overflow: hidden;
}

.sx-prose-editor:has(.sx-prose-editor__content:focus),
.sx-prose-editor[data-focus] {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Toolbar ---------- */
.sx-prose-editor__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 8px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-prose-editor__tool {
  color: var(--sx-ink-2);
}

.sx-prose-editor__tool[aria-pressed="true"],
.sx-prose-editor__tool[aria-expanded="true"] {
  color: var(--sx-ink);
  background-color: var(--sx-fill-strong);
}

.sx-prose-editor__glyph {
  display: grid;
  place-items: center;
  width: 16px;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;
}

.sx-prose-editor__glyph--bold {
  font-weight: 750;
}

.sx-prose-editor__glyph--italic {
  font-weight: 500;
  font-style: italic;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}

/* Clear formatting: the type icon with a strike through it. */
.sx-prose-editor__clear {
  position: relative;
  display: grid;
  place-items: center;
}

.sx-prose-editor__clear::after {
  content: "";
  position: absolute;
  width: 1.75px;
  height: 18px;
  border-radius: 1px;
  background: currentColor;
  box-shadow: 0 0 0 1.5px var(--sx-surface-2);
  transform: rotate(-45deg);
}

.sx-prose-editor__sep {
  width: 1px;
  height: 16px;
  margin: 0 5px;
  background: var(--sx-line);
}

/* ---------- Writing area ---------- */
.sx-prose-editor__body {
  position: relative;
}

.sx-prose-editor__content {
  min-height: 188px;
  max-height: 260px;
  padding: 16px 20px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: var(--sx-fs-md);
  line-height: 1.6;
  color: var(--sx-ink);
  outline: none;
  overflow-wrap: break-word;
  scrollbar-width: thin;
}

.sx-prose-editor__content:focus-visible {
  outline: none;
}

.sx-prose-editor__content > * {
  margin: 0;
}

.sx-prose-editor__content > * + * {
  margin-top: 0.55em;
}

.sx-prose-editor__content :is(p, div) > :is(ul, ol) {
  margin: 0;
}

.sx-prose-editor__content h2 {
  font-size: var(--sx-fs-xl);
  line-height: 1.3;
}

.sx-prose-editor__content :is(h2 + *) {
  margin-top: 0.45em;
}

.sx-prose-editor__content :is(ul, ol) {
  margin: 0;
  padding-left: 1.35em;
}

.sx-prose-editor__content li + li {
  margin-top: 0.15em;
}

.sx-prose-editor__content li::marker {
  color: var(--sx-muted);
}

.sx-prose-editor__content blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 2px 0 2px 14px;
  color: var(--sx-ink-2);
  box-shadow: inset 2px 0 0 var(--sx-line-strong);
}

.sx-prose-editor__content :is(strong, b) {
  font-weight: 600;
}

.sx-prose-editor__content a {
  color: var(--sx-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--sx-accent-line);
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-prose-editor__content a:hover {
  text-decoration-color: currentColor;
}

.sx-prose-editor__placeholder {
  position: absolute;
  top: 16px;
  left: 20px;
  font-size: var(--sx-fs-md);
  line-height: 1.6;
  color: var(--sx-muted);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-prose-editor[data-empty] .sx-prose-editor__placeholder {
  opacity: 1;
}

/* Previewed selection (CSS Custom Highlight API) */
.sx-prose-editor__content ::highlight(sx-prose-selection) {
  background-color: var(--sx-selection);
}

/* Previewed caret at the end of the last block; an empty block (just a <br>) takes it first. */
.sx-prose-editor[data-caret] .sx-prose-editor__content > :is(p, h2, blockquote):last-child:not(:has(> br))::after,
.sx-prose-editor[data-caret] .sx-prose-editor__content > :is(ul, ol):last-child > li:last-child:not(:has(> br))::after,
.sx-prose-editor[data-caret] .sx-prose-editor__content > :is(p, h2, blockquote):last-child:has(> br)::before,
.sx-prose-editor[data-caret] .sx-prose-editor__content > :is(ul, ol):last-child > li:last-child:has(> br)::before {
  content: "";
  display: inline-block;
  width: 1.5px;
  height: 1.15em;
  margin: 0 1px;
  vertical-align: -0.2em;
  border-radius: 1px;
  background: var(--sx-accent);
  animation: sx-blink 1.05s steps(1) infinite;
}

/* ---------- Link popover ---------- */
.sx-prose-editor__pop {
  position: absolute;
  top: 6px;
  left: 0;
  z-index: var(--sx-z-pop);
  display: flex;
  align-items: center;
  gap: 6px;
  width: 316px;
  padding: 6px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  translate: var(--pe-pop-x) 0;
  --sx-pop-origin: top left;
}

.sx-prose-editor__url {
  flex: 1;
  min-width: 0;
  height: var(--sx-h-sm);
  font-size: var(--sx-fs-sm);
}

.sx-prose-editor__url[data-focus] {
  box-shadow: var(--sx-focus-ring);
}

/* ---------- Footer ---------- */
.sx-prose-editor__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 36px;
  padding: 0 14px 0 20px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-prose-editor__count {
  font-variant-numeric: tabular-nums;
}

.sx-prose-editor__keys {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sx-prose-editor__key {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-prose-editor__key > .sx-kbd {
  min-width: 16px;
  height: 16px;
}

.sx-prose-editor__key > .sx-kbd:last-of-type {
  margin-right: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-prose-editor[data-caret] .sx-prose-editor__content > *::after,
  .sx-prose-editor[data-caret] .sx-prose-editor__content > *::before,
  .sx-prose-editor[data-caret] .sx-prose-editor__content li::after,
  .sx-prose-editor[data-caret] .sx-prose-editor__content li::before {
    animation-duration: 2.1s;
  }
}


/* ---- Attach Field (attach-field) ---- */
/* ==========================================================================
   Attach Field — an avatar uploader and a single-file field
   Root: .sx-attach-field--avatar or --file, data-state:
     avatar  empty | filled              (--af-zoom scales the photo, --af-pct fills the slider)
     file    empty | ready | uploading | done | error
   data-drag while a file is dragged over it. The file input is hidden; buttons open it.
   The file kind stacks the drop zone and the file row in one cell, so they crossfade
   without changing height; the one not showing is inert.
   ========================================================================== */

.sx-attach-field {
  --af-zoom: 1;
  --af-pct: 0%;
  display: grid;
  gap: 8px;
  min-width: 0;
}

/* ---------- Avatar ---------- */
.sx-attach-field__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.sx-attach-field__avatar {
  --af-tint: var(--sx-c1);
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  font-size: var(--sx-fs-xl);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: color-mix(in oklab, var(--af-tint) 66%, var(--sx-ink));
  background: color-mix(in oklab, var(--af-tint) 16%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--af-tint) 22%, transparent);
  isolation: isolate;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

/* A hairline ring above the photo keeps the circle crisp on light and dark photos. */
.sx-attach-field__avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--sx-line);
  pointer-events: none;
}

.sx-attach-field__initials {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-attach-field__img {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--af-zoom));
  animation: af-photo-in var(--sx-dur-4) var(--sx-ease-out) both;
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field--avatar[data-state="filled"] .sx-attach-field__initials {
  opacity: 0;
  transform: scale(0.8);
}

.sx-attach-field--avatar[data-drag] .sx-attach-field__avatar {
  box-shadow: inset 0 0 0 1px var(--sx-accent-line), 0 0 0 4px var(--sx-accent-soft);
}

.sx-attach-field__body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-attach-field__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-attach-field__note {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field__note[data-tone="danger"] {
  color: var(--sx-danger-ink);
}

/* Zoom opens with the grid trick once there is a photo. */
.sx-attach-field__zoom {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field--avatar[data-state="filled"] .sx-attach-field__zoom {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sx-attach-field__zoom-inner {
  min-height: 0;
  overflow: hidden;
}

.sx-attach-field__zoom-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto 4.5ch;
  align-items: center;
  gap: 10px;
  padding: 6px 0 2px 80px;
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-attach-field__zoom-row > .sx-icon:nth-of-type(2) {
  --sx-icon-size: 17px;
}

.sx-attach-field__zoom-value {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sx-ink-2);
}

/* Range: a token-coloured track that fills up to the thumb. */
.sx-attach-field__range {
  width: 100%;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sx-attach-field__range::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--sx-r-pill);
  background: linear-gradient(to right, var(--sx-primary) var(--af-pct), var(--sx-c-track) var(--af-pct));
}

.sx-attach-field__range::-moz-range-track {
  height: 4px;
  border-radius: var(--sx-r-pill);
  background: linear-gradient(to right, var(--sx-primary) var(--af-pct), var(--sx-c-track) var(--af-pct));
}

.sx-attach-field__range::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
  appearance: none;
  -webkit-appearance: none;
  transition: transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-attach-field__range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 0;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
}

.sx-attach-field__range:active::-webkit-slider-thumb {
  transform: scale(1.15);
}

.sx-attach-field__range:focus-visible {
  outline: none;
}

.sx-attach-field__range:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--sx-shadow-2), var(--sx-focus-ring);
}

.sx-attach-field__range:focus-visible::-moz-range-thumb {
  box-shadow: var(--sx-shadow-2), var(--sx-focus-ring);
}

/* ---------- File: drop zone and file row share one cell ---------- */
.sx-attach-field__slot {
  display: grid;
}

.sx-attach-field__slot > * {
  grid-area: 1 / 1;
  min-height: 64px;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-attach-field__drop {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field__drop:hover {
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-attach-field__drop:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-attach-field__drop-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
  transition: transform var(--sx-dur-3) var(--sx-ease-spring), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field__drop-text {
  display: grid;
  min-width: 0;
  line-height: 1.4;
}

.sx-attach-field__drop-title {
  display: grid;
}

.sx-attach-field__drop-title > span {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-attach-field__drop-title strong {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-attach-field__browse {
  font-weight: 500;
  color: var(--sx-accent-ink);
}

.sx-attach-field__release {
  font-weight: 500;
  color: var(--sx-accent-ink);
  opacity: 0;
  transform: translateY(4px);
}

.sx-attach-field__drop-hint {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* Drag-over: the zone takes the accent and the icon lifts. */
.sx-attach-field[data-drag] .sx-attach-field__drop {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--sx-accent);
}

.sx-attach-field[data-drag] .sx-attach-field__drop-icon {
  color: var(--sx-accent-ink);
  transform: translateY(-3px);
}

.sx-attach-field[data-drag] .sx-attach-field__ask {
  opacity: 0;
  transform: translateY(-4px);
}

.sx-attach-field[data-drag] .sx-attach-field__release {
  opacity: 1;
  transform: none;
}

/* File row */
.sx-attach-field__file {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 8px 10px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field__type {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  --sx-icon-size: 17px;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-attach-field__meta {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.sx-attach-field__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  line-height: 18px;
  color: var(--sx-ink);
}

.sx-attach-field__info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-xs);
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-attach-field__status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  white-space: nowrap;
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2.25;
}

.sx-attach-field__bar {
  height: 4px;
  margin-top: 3px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-attach-field__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

/* Which layer shows */
.sx-attach-field--file[data-state="empty"] .sx-attach-field__file,
.sx-attach-field--file:not([data-state="empty"]) .sx-attach-field__drop {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.sx-attach-field--file[data-state="empty"] .sx-attach-field__file {
  transform: translateY(4px);
}

.sx-attach-field--file:not([data-state="empty"]) .sx-attach-field__drop {
  transform: scale(0.98);
}

.sx-attach-field--file[data-state="empty"] .sx-attach-field__drop,
.sx-attach-field--file:not([data-state="empty"]) .sx-attach-field__file {
  transition-delay: 0s, 0s, 0s, 0s, 0s;
}

.sx-attach-field--file:is([data-state="ready"], [data-state="done"], [data-state="error"]) .sx-attach-field__bar {
  opacity: 0;
}

.sx-attach-field--file[data-state="done"] .sx-attach-field__status {
  color: var(--sx-success-ink);
}

.sx-attach-field--file[data-state="done"] .sx-attach-field__type {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-attach-field--file[data-state="error"] .sx-attach-field__file {
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-attach-field--file[data-state="error"] .sx-attach-field__type {
  color: var(--sx-danger-ink);
  background: var(--sx-surface);
}

.sx-attach-field--file[data-state="error"] .sx-attach-field__status {
  color: var(--sx-danger-ink);
}

.sx-attach-field--file[data-state="error"] .sx-attach-field__file {
  animation: af-nudge var(--sx-dur-4) var(--sx-ease-out);
}

/* ---------- Demo layout (profile and a return form) ---------- */
.sx-attach-field-demo {
  display: grid;
  gap: 16px;
  width: 420px;
  padding: 18px 20px 20px;
}

.sx-attach-field-demo > .sx-attach-field + .sx-attach-field {
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@keyframes af-photo-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: scale(calc(var(--af-zoom) * 1.12));
  }
}

@keyframes af-nudge {
  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-4px);
  }

  55% {
    transform: translateX(3px);
  }

  80% {
    transform: translateX(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-attach-field__img {
    animation-name: sx-fade-in;
  }

  .sx-attach-field--file[data-state="error"] .sx-attach-field__file {
    animation: none;
  }

  .sx-attach-field[data-drag] .sx-attach-field__drop-icon,
  .sx-attach-field--file[data-state="empty"] .sx-attach-field__file,
  .sx-attach-field--file:not([data-state="empty"]) .sx-attach-field__drop {
    transform: none;
  }
}


/* ---- Pick List (pick-list) ---- */
/* ==========================================================================
   Pick List — a select trigger with a searchable listbox popover
   Trigger: aria-haspopup="listbox", aria-expanded. Popover: .sx-menu.sx-pop, data-state="open",
   rendered inside the component under the trigger. The search input is the combobox
   (aria-activedescendant); options are role="option" with aria-selected and data-active="true"
   on the keyboard highlight, which a single glide follows (--pl-y, --pl-h).
   Filtered-out options and empty groups carry the hidden attribute.
   ========================================================================== */

.sx-pick-list {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}

/* ---------- Trigger ---------- */
.sx-pick-list__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--sx-h-md);
  padding: 0 8px 0 6px;
  border-radius: var(--sx-r-md);
  text-align: left;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-pick-list__trigger:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-pick-list__trigger:focus-visible,
.sx-pick-list__trigger[aria-expanded="true"] {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-pick-list__value {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-pick-list__current {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* A new choice arrives with a short blur (data-swap marks every value after the first). */
.sx-pick-list__current[data-swap] {
  animation: pl-swap-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-pick-list__placeholder {
  padding-left: 2px;
  color: var(--sx-muted);
}

.sx-pick-list__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-pick-list__chevron {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
}

/* ---------- Icon tile (trigger and options) ---------- */
.sx-pick-list__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  --sx-icon-size: 13px;
}

/* ---------- Popover ---------- */
.sx-pick-list__pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--sx-z-pop);
  display: grid;
  padding: 0;
  overflow: hidden;
  --sx-pop-origin: top center;
}

.sx-pick-list__search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  --sx-icon-size: 14px;
}

.sx-pick-list__query {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: transparent;
}

.sx-pick-list__list {
  position: relative;
  max-height: var(--pl-list-h, 220px);
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sx-pick-list__glide {
  position: absolute;
  top: 0;
  left: 4px;
  right: 4px;
  height: var(--pl-h, 0px);
  border-radius: var(--sx-r-sm);
  background: var(--sx-fill-strong);
  opacity: 0;
  transform: translateY(var(--pl-y, 0px));
  pointer-events: none;
}

.sx-pick-list__list[data-glide] .sx-pick-list__glide {
  opacity: 1;
}

.sx-pick-list__list[data-glide-ready] .sx-pick-list__glide {
  transition:
    transform var(--sx-dur-2) var(--sx-ease-out),
    height var(--sx-dur-2) var(--sx-ease-out),
    opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-pick-list__group + .sx-pick-list__group {
  margin-top: 2px;
}

.sx-pick-list__group-label {
  padding: 7px 8px 3px;
}

.sx-pick-list .sx-pick-list__option {
  position: relative;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 5px 8px 5px 6px;
  cursor: pointer;
  user-select: none;
}

/* The glide carries the highlight, so rows stay transparent under it. */
.sx-pick-list .sx-pick-list__option:hover,
.sx-pick-list .sx-pick-list__option[data-active="true"] {
  background: transparent;
}

.sx-pick-list__option[aria-selected="true"] .sx-pick-list__icon {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-pick-list__text {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-pick-list__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 18px;
  color: var(--sx-ink);
}

.sx-pick-list__desc {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-xs);
  line-height: 15px;
  color: var(--sx-muted);
}

.sx-pick-list__hit {
  border-radius: 2px;
  color: inherit;
  background: var(--sx-accent-soft);
  box-shadow: 0 0 0 1px var(--sx-accent-soft);
}

.sx-pick-list__check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-pick-list__option[aria-selected="true"] .sx-pick-list__check {
  opacity: 1;
  transform: none;
}

.sx-pick-list__empty {
  padding: 18px 12px 20px;
  font-size: var(--sx-fs-sm);
  text-align: center;
  color: var(--sx-muted);
}

/* ---------- Demo layout (routing settings; the space below the field holds the popover) ---------- */
.sx-pick-list-demo {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  width: 360px;
  min-height: 376px;
  padding: 18px 20px;
}

.sx-pick-list-demo__head {
  display: grid;
  gap: 2px;
}

.sx-pick-list-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-pick-list-demo__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-pick-list-demo .sx-pick-list {
  --pl-list-h: 194px;
  z-index: 1;
}

.sx-pick-list-demo__notes {
  display: grid;
  align-content: start;
  gap: 10px;
  margin: 0;
  padding: 14px 14px 16px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-pick-list-demo__notes-title {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-pick-list-demo__note {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  color: var(--sx-ink-2);
  --sx-icon-size: 14px;
}

.sx-pick-list-demo__note > .sx-icon {
  margin-top: 2px;
  color: var(--sx-muted);
}

@keyframes pl-swap-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-pick-list__current[data-swap] {
    animation-name: sx-fade-in;
  }

  .sx-pick-list__list[data-glide-ready] .sx-pick-list__glide {
    transition: opacity var(--sx-dur-1) var(--sx-ease-out);
  }
}


/* ---- Star Score (star-score) ---- */
/* ==========================================================================
   Star Score — a rating input with optional half steps, and a read-only summary
   Input: .sx-star-score__stars is role="slider"; each star reads --ss-f (0, 0.5 or 1) to clip
   its fill. data-hover marks the star under the pointer, data-on the filled ones.
   data-commit="1 | 2" on the root alternates with every committed change and replays the pop.
   data-focus previews the focus ring (demos).
   Summary: .sx-star-score--summary with fractional stars and distribution bars (--ss-share).
   ========================================================================== */

.sx-star-score {
  --ss-size: 28px;
  --ss-gap: 4px;
  --ss-on: var(--sx-warning);
  --ss-off: var(--sx-line-strong);
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* ---------- Stars ---------- */
.sx-star-score__stars {
  display: inline-flex;
  gap: var(--ss-gap);
  padding: 4px;
  margin: -4px;
  border-radius: var(--sx-r-md);
  cursor: pointer;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-star-score__stars:focus-visible,
.sx-star-score[data-focus] .sx-star-score__stars {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-star-score__star {
  position: relative;
  display: grid;
  width: var(--ss-size);
  height: var(--ss-size);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-star-score__star > .sx-icon {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  pointer-events: none;
}

.sx-star-score__base {
  fill: var(--ss-off);
  stroke: var(--ss-off);
}

.sx-star-score__fill {
  fill: var(--ss-on);
  stroke: var(--ss-on);
  clip-path: inset(0 calc((1 - var(--ss-f, 0)) * 100%) 0 0);
  transition: clip-path var(--sx-dur-2) var(--sx-ease-out);
}

.sx-star-score__star[data-hover] {
  transform: scale(1.14);
}

/* A committed score pops along the filled stars, left to right. */
.sx-star-score[data-commit="1"] .sx-star-score__star[data-on] {
  animation: ss-pop-a var(--sx-dur-4) var(--sx-ease-out) calc(var(--ss-i, 0) * 45ms) both;
}

.sx-star-score[data-commit="2"] .sx-star-score__star[data-on] {
  animation: ss-pop-b var(--sx-dur-4) var(--sx-ease-out) calc(var(--ss-i, 0) * 45ms) both;
}

/* ---------- Word ---------- */
.sx-star-score__word {
  display: grid;
  min-width: 84px;
  font-size: var(--sx-fs-md);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-star-score__word > * {
  grid-area: 1 / 1;
  white-space: nowrap;
  animation: ss-word-in var(--sx-dur-2) var(--sx-ease-out) both;
}

.sx-star-score__word[data-empty] {
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

/* ---------- Read-only summary ---------- */
.sx-star-score--summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px;
}

.sx-star-score__score {
  display: grid;
  justify-items: start;
  gap: 6px;
}

.sx-star-score__avg {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sx-star-score--summary .sx-star-score__stars {
  --ss-size: 14px;
  --ss-gap: 2px;
  padding: 0;
  margin: 0;
  cursor: default;
}

.sx-star-score__total {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-star-score__bars {
  display: grid;
  gap: 5px;
  margin: 0;
}

.sx-star-score__bar {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 3ch;
  align-items: center;
  gap: 9px;
  font-size: var(--sx-fs-xs);
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-star-score__count {
  text-align: right;
}

.sx-star-score__track {
  height: 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-star-score__share {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--ss-on);
  transform-origin: left center;
  transform: scaleX(var(--ss-share, 0));
  animation: ss-bar-in var(--sx-dur-5) var(--sx-ease-out) calc(var(--ss-row, 0) * 70ms + 120ms) both;
}

/* ---------- Demo layout (after a support chat) ---------- */
.sx-star-score-demo {
  display: grid;
  width: 360px;
  overflow: hidden;
}

.sx-star-score-demo__ask {
  display: grid;
  gap: 12px;
  padding: 18px 20px 20px;
}

.sx-star-score-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-star-score-demo__sub {
  margin-top: -9px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-star-score-demo__summary {
  display: grid;
  gap: 12px;
  padding: 16px 20px 18px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-star-score-demo__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

@keyframes ss-pop-a {
  35% {
    transform: scale(1.22);
  }
}

@keyframes ss-pop-b {
  35% {
    transform: scale(1.22);
  }
}

@keyframes ss-word-in {
  from {
    opacity: 0.2;
    filter: blur(2px);
    transform: translateY(2px);
  }
}

@keyframes ss-bar-in {
  from {
    transform: scaleX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-star-score__star[data-hover] {
    transform: none;
  }

  .sx-star-score[data-commit] .sx-star-score__star[data-on] {
    animation: none;
  }

  .sx-star-score__word > * {
    animation-name: sx-fade-in;
  }

  .sx-star-score__share {
    animation: none;
  }
}


/* ---- Hint Bubble (hint-bubble) ---- */
/* ==========================================================================
   Hint Bubble — short hints for the controls inside one region
   Root .sx-hint-bubble (position: relative) wraps any content. Descendants with data-hint get a hint:
     data-hint="Archive"     the text (an empty value uses the element's aria-label)
     data-hint-keys="⌘ E"    optional shortcut, space separated, one .sx-kbd per key
     data-hint-side="left"   preferred side: top (default) | bottom | left | right
   One .sx-hint-bubble__bubble (role="tooltip") per root, placed by script inside the root:
     data-state="open | closed", data-side (the side it landed on), data-glide (moving between
     anchors while open), --hb-x / --hb-y (position), --hb-arrow (arrow offset along the edge).
   The described anchor carries aria-describedby; [data-hint-focus] draws a scripted focus ring.
   ========================================================================== */

.sx-hint-bubble {
  position: relative;
}

/* Scripted focus ring for previews; real focus uses :focus-visible as usual. */
.sx-hint-bubble [data-hint-focus] {
  outline: 2px solid var(--sx-focus);
  outline-offset: 2px;
}

/* ---------- Bubble: the outer box moves, the body fades and scales ---------- */
.sx-hint-bubble__bubble {
  --hb-dx: 0px;
  --hb-dy: 4px;
  --hb-origin: var(--hb-arrow, 50%) 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--sx-z-pop);
  display: flex;
  width: max-content;
  max-width: 240px;
  transform: translate(var(--hb-x, 0px), var(--hb-y, 0px));
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0s linear var(--sx-dur-2);
}

.sx-hint-bubble__bubble[data-state="open"] {
  visibility: visible;
  transition-delay: 0s;
}

/* Switching anchors while a hint is showing: the bubble glides instead of closing and reopening. */
.sx-hint-bubble__bubble[data-state="open"][data-glide] {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), visibility 0s;
}

.sx-hint-bubble__bubble[data-side="bottom"] {
  --hb-dx: 0px;
  --hb-dy: -4px;
  --hb-origin: var(--hb-arrow, 50%) 0%;
}

.sx-hint-bubble__bubble[data-side="left"] {
  --hb-dx: 4px;
  --hb-dy: 0px;
  --hb-origin: 100% var(--hb-arrow, 50%);
}

.sx-hint-bubble__bubble[data-side="right"] {
  --hb-dx: -4px;
  --hb-dy: 0px;
  --hb-origin: 0% var(--hb-arrow, 50%);
}

.sx-hint-bubble__body {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 26px;
  padding: 4px 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.003em;
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: var(--sx-shadow-pop);
  transform-origin: var(--hb-origin);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

/* Exits are quicker than entrances. */
.sx-hint-bubble__bubble[data-state="closed"] .sx-hint-bubble__body {
  opacity: 0;
  transform: translate(var(--hb-dx), var(--hb-dy)) scale(0.96);
  transition-duration: var(--sx-dur-1);
}

/* The arrow slides along the edge facing the anchor. */
.sx-hint-bubble__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: inherit;
}

.sx-hint-bubble__bubble[data-side="top"] .sx-hint-bubble__arrow,
.sx-hint-bubble__bubble[data-side="bottom"] .sx-hint-bubble__arrow {
  left: -4px;
  transform: translateX(var(--hb-arrow, 50%)) rotate(45deg);
}

.sx-hint-bubble__bubble[data-side="top"] .sx-hint-bubble__arrow {
  bottom: -3px;
}

.sx-hint-bubble__bubble[data-side="bottom"] .sx-hint-bubble__arrow {
  top: -3px;
}

.sx-hint-bubble__bubble[data-side="left"] .sx-hint-bubble__arrow,
.sx-hint-bubble__bubble[data-side="right"] .sx-hint-bubble__arrow {
  top: -4px;
  transform: translateY(var(--hb-arrow, 50%)) rotate(45deg);
}

.sx-hint-bubble__bubble[data-side="left"] .sx-hint-bubble__arrow {
  right: -3px;
}

.sx-hint-bubble__bubble[data-side="right"] .sx-hint-bubble__arrow {
  left: -3px;
}

.sx-hint-bubble__bubble[data-glide] .sx-hint-bubble__arrow {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Content ---------- */
.sx-hint-bubble__content {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* A new hint's text settles in while the bubble glides to it. */
.sx-hint-bubble__bubble[data-glide] .sx-hint-bubble__content {
  animation: hb-swap var(--sx-dur-2) var(--sx-ease-out);
}

.sx-hint-bubble__keys {
  display: inline-flex;
  gap: 3px;
  margin-right: -4px;
}

.sx-hint-bubble__keys .sx-kbd {
  min-width: 17px;
  height: 17px;
  color: color-mix(in srgb, var(--sx-on-primary) 80%, transparent);
  background: color-mix(in srgb, var(--sx-on-primary) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-on-primary) 16%, transparent);
}

@keyframes hb-swap {
  from {
    opacity: 0.2;
    filter: blur(2px);
  }
}

/* ---------- Demo: a conversation with a toolbar on top, a rail on the right, a composer below ---------- */
.sx-hint-bubble-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: 46px minmax(0, 1fr) 50px;
  width: 420px;
  height: 252px;
}

.sx-hint-bubble-demo__bar {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 0 8px 0 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-hint-bubble-demo__avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--sx-c3) 18%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--sx-c3) 70%, var(--sx-ink));
}

.sx-hint-bubble-demo__who {
  display: grid;
  min-width: 0;
  margin-right: auto;
  line-height: 1.25;
}

.sx-hint-bubble-demo__name {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.sx-hint-bubble-demo__meta {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-hint-bubble-demo__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sx-hint-bubble-demo__divider {
  width: 1px;
  height: 16px;
  margin: 0 4px;
  background: var(--sx-line);
}

.sx-hint-bubble-demo__rail {
  grid-column: 2;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 9px 0;
  border-radius: 0 var(--sx-card-radius) var(--sx-card-radius) 0;
  background: var(--sx-surface-2);
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

.sx-hint-bubble-demo__thread {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  align-content: start;
  gap: 8px;
  min-height: 0;
  padding: 14px 14px 0;
  overflow: hidden;
}

.sx-hint-bubble-demo__msg {
  justify-self: start;
  max-width: 82%;
  padding: 7px 11px;
  border-radius: var(--sx-r-lg) var(--sx-r-lg) var(--sx-r-lg) var(--sx-r-xs);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-hint-bubble-demo__msg--me {
  justify-self: end;
  border-radius: var(--sx-r-lg) var(--sx-r-lg) var(--sx-r-xs) var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-hint-bubble-demo__time {
  justify-self: end;
  margin-top: -4px;
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-faint);
}

.sx-hint-bubble-demo__composer {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 0 10px 0 8px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-hint-bubble-demo__input {
  flex: 1;
  min-width: 0;
  height: var(--sx-h-sm);
  margin: 0 6px 0 4px;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .sx-hint-bubble__bubble[data-state="open"][data-glide] {
    transition: visibility 0s;
  }

  .sx-hint-bubble__bubble[data-state="closed"] .sx-hint-bubble__body {
    transform: none;
  }

  .sx-hint-bubble__bubble[data-glide] .sx-hint-bubble__arrow {
    transition: none;
  }

  .sx-hint-bubble__bubble[data-glide] .sx-hint-bubble__content {
    animation-name: sx-fade-in;
  }
}


/* ---- Float Panel (float-panel) ---- */
/* ==========================================================================
   Float Panel — a trigger with an anchored panel for quick settings
   Root .sx-float-panel (position: relative) holds the trigger and the panel.
   Trigger: .sx-btn.sx-float-panel__trigger, aria-haspopup="dialog", aria-expanded,
            [data-preview-focus] draws a scripted focus ring.
   Panel:   .sx-pop.sx-float-panel__panel, role="dialog", data-state="open | closed",
            data-side="bottom | top". Script places it in root coordinates with --fp-x / --fp-y,
            caps it with --fp-max-h when neither side has room, and points --sx-pop-origin at the
            trigger. Width: --fp-w.
   Content: .sx-float-panel__row (label + .sx-switch), .sx-float-panel__choice with a segmented
            .sx-float-panel__seg (role="radiogroup"; --fp-seg-n options, --fp-seg-i the checked one),
            .sx-float-panel__sep. [data-active="true"] highlights a row or choice.
   ========================================================================== */

.sx-float-panel {
  position: relative;
  display: inline-flex;
}

/* ---------- Trigger ---------- */
.sx-float-panel__trigger[aria-expanded="true"] {
  background-color: var(--sx-fill);
}

.sx-float-panel__trigger[data-preview-focus] {
  outline-color: var(--sx-focus);
}

.sx-btn > .sx-float-panel__chevron {
  width: 13px;
  height: 13px;
  margin-left: -1px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-float-panel__trigger[aria-expanded="true"] > .sx-float-panel__chevron {
  transform: rotate(180deg);
}

/* ---------- Panel ---------- */
.sx-float-panel__panel {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: var(--fp-y, calc(100% + 6px));
  left: var(--fp-x, 0px);
  display: flex;
  flex-direction: column;
  width: var(--fp-w, 264px);
  max-height: var(--fp-max-h, none);
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  text-align: left;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
}

/* A pointer open focuses the panel itself, so Tab starts inside it without showing a ring. */
.sx-float-panel__panel:focus {
  outline: none;
}

.sx-float-panel__panel[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-float-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
  min-height: 44px;
  padding: 6px 8px 2px 16px;
}

.sx-float-panel__title {
  font-size: var(--sx-fs-base);
}

.sx-float-panel__body {
  display: grid;
  gap: 1px;
  min-height: 0;
  padding: 2px 6px 6px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sx-float-panel__sep {
  height: 1px;
  margin: 3px -6px 4px;
  background: var(--sx-line-soft);
}

.sx-float-panel__label {
  min-width: 0;
}

/* Switch row: the whole row is the label, so a click anywhere toggles. */
.sx-float-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--sx-h-md);
  padding: 0 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-float-panel__row:hover,
.sx-float-panel__row[data-active="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

/* Segmented choice */
.sx-float-panel__choice {
  display: grid;
  gap: 7px;
  padding: 7px 10px 10px;
  border-radius: var(--sx-r-md);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-float-panel__choice[data-active="true"] {
  background: var(--sx-fill);
}

.sx-float-panel__choice > .sx-float-panel__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-float-panel__seg {
  --fp-seg-n: 3;
  --fp-seg-i: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--fp-seg-n), minmax(0, 1fr));
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

/* Equal options, so the thumb is placed in CSS from the checked index alone. */
.sx-float-panel__thumb {
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc((100% - 4px) / var(--fp-seg-n));
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(calc(var(--fp-seg-i) * 100%));
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
  pointer-events: none;
}

.sx-float-panel__opt {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-float-panel__opt:hover {
  color: var(--sx-ink-2);
}

.sx-float-panel__opt[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-float-panel__opt:focus-visible {
  outline-offset: 0;
}

/* ---------- Demo: an inbox whose list follows the display options ---------- */
.sx-float-panel-demo {
  display: flex;
  flex-direction: column;
  width: 440px;
  height: 336px;
}

.sx-float-panel-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: none;
  height: 52px;
  padding: 0 12px 0 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-float-panel-demo__heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sx-float-panel-demo__title {
  font-size: var(--sx-fs-lg);
}

/* Each option only changes a custom property; the rows animate their own grid tracks. */
.sx-float-panel-demo__list {
  --fpd-av: 24px;
  --fpd-gap: 10px;
  --fpd-prev: 1fr;
  --fpd-pad: 8px;
  position: relative;
  display: grid;
  align-content: start;
  flex: 1;
  min-height: 0;
  padding: 4px 6px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 28px), transparent);
}

.sx-float-panel-demo__list:not([data-avatars]) {
  --fpd-av: 0px;
  --fpd-gap: 0px;
}

.sx-float-panel-demo__list:not([data-previews]) {
  --fpd-prev: 0fr;
}

.sx-float-panel-demo__list[data-compact] {
  --fpd-pad: 3px;
}

.sx-float-panel-demo__row {
  display: grid;
  grid-template-columns: var(--fpd-av) var(--fpd-gap) minmax(0, 1fr) auto;
  grid-template-rows: var(--fpd-pad) 24px var(--fpd-prev) var(--fpd-pad);
  padding: 0 12px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out),
    grid-template-columns var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-float-panel-demo__avatar {
  grid-column: 1;
  grid-row: 2;
  align-self: center;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-float-panel-demo__list:not([data-avatars]) .sx-float-panel-demo__avatar {
  opacity: 0;
  transform: scale(0.6);
}

.sx-float-panel-demo__avatar[data-tint="1"] { --fpd-tint: var(--sx-c1); }
.sx-float-panel-demo__avatar[data-tint="2"] { --fpd-tint: var(--sx-c2); }
.sx-float-panel-demo__avatar[data-tint="3"] { --fpd-tint: var(--sx-c3); }
.sx-float-panel-demo__avatar[data-tint="4"] { --fpd-tint: var(--sx-c4); }
.sx-float-panel-demo__avatar[data-tint="5"] { --fpd-tint: var(--sx-c5); }

.sx-float-panel-demo__avatar[data-tint] {
  --sx-avatar-bg: color-mix(in srgb, var(--fpd-tint) 16%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--fpd-tint) 70%, var(--sx-ink));
}

.sx-float-panel-demo__name {
  grid-column: 3;
  grid-row: 2;
  align-self: center;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-float-panel-demo__time {
  grid-column: 4;
  grid-row: 2;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-float-panel-demo__time > .sx-dot {
  color: var(--sx-warning);
}

.sx-float-panel-demo__preview {
  grid-column: 3 / 5;
  grid-row: 3;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-float-panel-demo__preview > span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-float-panel-demo__list:not([data-previews]) .sx-float-panel-demo__preview {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sx-float-panel__panel[data-side="top"]:not([data-state="open"]) {
    transform: none;
  }

  .sx-float-panel__thumb,
  .sx-float-panel-demo__row {
    transition: none;
  }

  .sx-float-panel-demo__list:not([data-avatars]) .sx-float-panel-demo__avatar {
    transform: none;
  }
}


/* ---- Modal Window (modal-window) ---- */
/* ==========================================================================
   Modal Window — dialog for confirmations and short forms
   Root .sx-modal-window covers its nearest positioned ancestor (position: absolute; inset: 0):
   the library demo mounts it inside a small mock app window (position: relative; overflow:
   hidden) so the scrim dims that window only. Products mount it at the page level: add
   .sx-modal-window--fixed (React: fixed) and render it as the last child of <body>.
   State on the root: data-state="open | closed", data-tone="danger"; size: .sx-modal-window--sm
   Dialog: role="dialog" (or "alertdialog") aria-modal="true" aria-labelledby/-describedby,
   aria-busy="true" while it works. While open, the root's siblings are made inert.
   Previews mark the element that would take focus with data-preview-focus.
   ========================================================================== */

.sx-modal-window {
  --mw-w: 404px;
  position: absolute;
  inset: 0;
  z-index: var(--sx-z-modal);
  display: grid;
  place-items: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
  /* Stay visible until the exit has played. */
  transition: visibility 0s linear var(--sx-dur-3);
}

.sx-modal-window[data-state="open"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sx-modal-window--fixed {
  position: fixed;
}

.sx-modal-window--sm {
  --mw-w: 356px;
}

/* ---------- Scrim ---------- */
.sx-modal-window__scrim {
  position: absolute;
  inset: 0;
  background: var(--sx-overlay);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modal-window[data-state="open"] > .sx-modal-window__scrim {
  opacity: 1;
  transition-duration: var(--sx-dur-3);
}

/* ---------- Dialog: rises in, drops away a little faster ---------- */
.sx-modal-window__dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--mw-w), 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-3);
  opacity: 0;
  transform: translateY(10px) scale(0.97);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-in),
    transform var(--sx-dur-2) var(--sx-ease-in);
}

.sx-modal-window[data-state="open"] .sx-modal-window__dialog {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out);
}

/* The dialog itself takes focus only so screen readers read its title; it is not a control. */
.sx-modal-window__dialog:focus-visible {
  outline: none;
}

/* A form dialog keeps the same flex layout: the form box is transparent to it. */
.sx-modal-window__form {
  display: contents;
}

/* ---------- Head ---------- */
.sx-modal-window__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: none;
  padding: 20px 52px 0 20px;
}

.sx-modal-window__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
}

.sx-modal-window[data-tone="danger"] .sx-modal-window__icon {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-modal-window__titles {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-top: 1px;
}

.sx-modal-window__title {
  font-size: var(--sx-fs-lg);
  line-height: 1.35;
}

.sx-modal-window__desc {
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
}

.sx-modal-window__close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ---------- Body and footer ---------- */
.sx-modal-window__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 20px 2px;
}

.sx-modal-window__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* Field message under an input: the hint, or the error with its icon. */
.sx-modal-window__msg {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
}

.sx-modal-window__msg > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-modal-window .sx-input[aria-invalid="true"] {
  animation: sx-shake 0.42s var(--sx-ease-out);
}

/* ---------- Previews: focus shown without moving it ---------- */
.sx-modal-window .sx-btn[data-preview-focus] {
  outline-color: var(--sx-focus);
}

.sx-modal-window .sx-input[data-preview-focus]:not([aria-invalid="true"]) {
  box-shadow: var(--sx-focus-ring);
}

/* ==========================================================================
   Demo: a mock inbox window. The dialogs cover it, not the page.
   ========================================================================== */
.sx-modal-window-demo {
  width: 520px;
  height: 360px;
  overflow: hidden;
}

.sx-modal-window-demo__app {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
}

.sx-modal-window-demo .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--mwd-hue, var(--sx-c1)) 16%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--mwd-hue, var(--sx-c1)) 72%, var(--sx-ink));
}

/* Top bar */
.sx-modal-window-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 14px 0 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-modal-window-demo__tile {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-modal-window-demo__who {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-modal-window-demo__name {
  font-size: var(--sx-fs-base);
  font-weight: 500;
  white-space: nowrap;
}

.sx-modal-window-demo__name[data-swap] {
  animation: mwd-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

.sx-modal-window-demo__sub {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-modal-window-demo__team {
  margin-left: auto;
}

.sx-modal-window-demo__team > .sx-avatar {
  --sx-avatar-size: 24px;
}

.sx-modal-window-demo__team > .sx-avatar + .sx-avatar {
  margin-left: -3px;
}

/* Selection toolbar */
.sx-modal-window-demo__tools {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 10px 0 16px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-modal-window-demo__all {
  margin-right: auto;
  gap: 12px;
}

.sx-modal-window-demo__count {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

/* Conversation rows collapse with the grid trick when they are deleted. */
.sx-modal-window-demo__list {
  overflow: hidden;
}

.sx-modal-window-demo__row {
  display: grid;
  grid-template-rows: 1fr;
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out),
    opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-modal-window-demo__row[data-leaving] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.sx-modal-window-demo__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-modal-window-demo__item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  font-size: var(--sx-fs-sm);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  cursor: pointer;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-modal-window-demo__item:hover {
  background: var(--sx-fill);
}

.sx-modal-window-demo__row:has(input:checked) .sx-modal-window-demo__item {
  background: var(--sx-accent-soft);
}

.sx-modal-window-demo__from {
  flex: none;
  width: 104px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-modal-window-demo__row[data-unread] .sx-modal-window-demo__from {
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-modal-window-demo__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-modal-window-demo__dot {
  color: var(--sx-accent);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modal-window-demo__row[data-unread] .sx-modal-window-demo__dot {
  opacity: 1;
}

.sx-modal-window-demo__time {
  flex: none;
  min-width: 30px;
  text-align: right;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

@keyframes mwd-swap-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(3px);
  }
}

/* ---------- Reduced motion: fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-modal-window__dialog,
  .sx-modal-window[data-state="open"] .sx-modal-window__dialog {
    transform: none;
  }

  .sx-modal-window .sx-input[aria-invalid="true"] {
    animation: none;
  }

  /* Deleted rows fade in place; the list closes the gap when they are removed. */
  .sx-modal-window-demo__row,
  .sx-modal-window-demo__row[data-leaving] {
    grid-template-rows: 1fr;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-modal-window-demo__name[data-swap] {
    animation-name: sx-fade-in;
  }
}


/* ---- Action Menu (action-menu) ---- */
/* ==========================================================================
   Action Menu — a "More" button that opens a menu of actions (.sx-menu + .sx-pop)
   Root .sx-action-menu (position: relative) holds the trigger, the menu and one
   .sx-action-menu__sub per submenu. Script places them from offset metrics through
   --acm-x / --acm-y and keeps them inside the boundary (the root's offsetParent unless set).
   Trigger: aria-haspopup="menu" aria-expanded
   Menu:    data-state="open | closed", data-side="bottom | top", data-align="start | end"
   Submenu: data-state="open | closed", data-side="right | left", data-parent="<item id>"
   Items:   role="menuitem" | "menuitemradio" (aria-checked); the highlighted item carries
            data-active="true"; submenu parents aria-haspopup="menu" aria-expanded;
            data-tone="danger" marks a destructive item; aria-disabled="true" dims one.
   ========================================================================== */

.sx-action-menu {
  position: relative;
  display: inline-flex;
}

/* ---------- Trigger ---------- */
.sx-action-menu__trigger[aria-expanded="true"] {
  background-color: var(--_bg-hover);
  border-color: var(--_border-hover);
}

.sx-action-menu__chevron {
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-action-menu__trigger[aria-expanded="true"] .sx-action-menu__chevron {
  transform: rotate(180deg);
}

/* ---------- Menus ---------- */
.sx-action-menu__menu {
  --sx-pop-origin: top left;
  position: absolute;
  left: var(--acm-x, 0px);
  top: var(--acm-y, calc(100% + 6px));
  z-index: var(--sx-z-pop);
  width: 208px;
}

.sx-action-menu__menu:focus {
  outline: none;
}

/* A closed menu leaves layout once its exit has played, so it adds no scroll width or height to a parent
   it would overflow. allow-discrete holds display through the exit and @starting-style (further down)
   gives the entrance its first frame; browsers without them simply show and hide the menu. */
.sx-action-menu .sx-action-menu__menu {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3),
    display 0s linear var(--sx-dur-3) allow-discrete;
}

.sx-action-menu .sx-action-menu__menu[data-state="open"] {
  transition-delay: 0s;
}

.sx-action-menu .sx-action-menu__menu:not([data-state="open"]) {
  display: none;
}

@starting-style {
  .sx-action-menu .sx-action-menu__menu[data-state="open"] {
    opacity: 0;
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @starting-style {
    .sx-action-menu .sx-action-menu__menu[data-state="open"] {
      transform: translateY(-4px) scale(0.97);
    }

    .sx-action-menu .sx-action-menu__menu[data-side="top"][data-state="open"] {
      transform: translateY(4px) scale(0.97);
    }

    .sx-action-menu .sx-action-menu__sub[data-state="open"] {
      transform: translateX(-4px) scale(0.97);
    }

    .sx-action-menu .sx-action-menu__sub[data-side="left"][data-state="open"] {
      transform: translateX(4px) scale(0.97);
    }
  }
}

.sx-action-menu__menu[data-align="end"] {
  --sx-pop-origin: top right;
}

.sx-action-menu__menu[data-side="top"] {
  --sx-pop-origin: bottom left;
}

.sx-action-menu__menu[data-side="top"][data-align="end"] {
  --sx-pop-origin: bottom right;
}

.sx-action-menu__menu[data-side="top"]:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

/* Submenus slide in from the side they open on. */
.sx-action-menu__sub {
  --sx-pop-origin: top left;
  z-index: calc(var(--sx-z-pop) + 1);
  width: 172px;
  min-width: 0;
}

.sx-action-menu__sub[data-side="left"] {
  --sx-pop-origin: top right;
}

.sx-action-menu__sub:not([data-state="open"]) {
  transform: translateX(-4px) scale(0.97);
}

.sx-action-menu__sub[data-side="left"]:not([data-state="open"]) {
  transform: translateX(4px) scale(0.97);
}

/* ---------- Items: one highlight, driven by data-active (pointer and keys stay in step) ---------- */
.sx-action-menu .sx-menu__item:hover {
  background: transparent;
  color: var(--sx-ink-2);
}

.sx-action-menu .sx-menu__item[data-active="true"],
.sx-action-menu .sx-menu__item[aria-expanded="true"] {
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-action-menu .sx-menu__item:focus-visible {
  outline: none;
}

.sx-action-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-action-menu__keys {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.sx-action-menu .sx-menu__item > .sx-action-menu__more {
  --sx-icon-size: 14px;
  margin-left: auto;
  margin-right: -2px;
  color: var(--sx-muted);
}

.sx-action-menu .sx-menu__item > .sx-action-menu__check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.2;
  margin-left: auto;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-action-menu .sx-menu__item[aria-checked="true"] > .sx-action-menu__check {
  opacity: 1;
  transform: none;
}

/* Destructive: red label and icon, a soft red highlight. */
.sx-action-menu .sx-menu__item[data-tone="danger"],
.sx-action-menu .sx-menu__item[data-tone="danger"] > .sx-icon {
  color: var(--sx-danger-ink);
}

.sx-action-menu .sx-menu__item[data-tone="danger"][data-active="true"] {
  background: var(--sx-danger-soft);
}

.sx-action-menu .sx-menu__item[data-tone="danger"] .sx-kbd {
  color: var(--sx-danger-ink);
}

.sx-action-menu .sx-menu__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Demo: a conversation header with room below it for the menu and its submenu ---------- */
.sx-action-menu-demo {
  display: flex;
  flex-direction: column;
  width: 480px;
  height: 320px;
}

.sx-action-menu-demo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 6px;
  padding: 18px 20px 16px;
}

.sx-action-menu-demo__meta {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.sx-action-menu-demo__queue {
  animation: acm-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

.sx-action-menu-demo__id {
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-action-menu-demo__summary {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
}

.sx-action-menu-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-action-menu-demo__who {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-action-menu-demo__who strong {
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-action-menu-demo__who .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--sx-c2) 18%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--sx-c2) 70%, var(--sx-ink));
}

/* The actions sit at the right edge, so the menu aligns to the trigger's end and the
   submenu opens to the left, where there is room. */
.sx-action-menu-demo__actions {
  display: flex;
  gap: 8px;
}

.sx-action-menu-demo__body {
  flex: 1;
  padding: 16px 20px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-action-menu-demo__msg {
  max-width: 360px;
  padding: 10px 12px;
  border-radius: var(--sx-r-lg);
  border-top-left-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-action-menu-demo__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 20px;
  border-radius: 0 0 var(--sx-card-radius) var(--sx-card-radius);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-action-menu-demo__foot > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-action-menu-demo__note {
  animation: acm-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

@keyframes acm-swap-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-action-menu__menu.sx-pop:not([data-state="open"]) {
    transform: none;
  }

  .sx-action-menu__chevron {
    transition: none;
  }

  .sx-action-menu-demo__queue,
  .sx-action-menu-demo__note {
    animation-name: sx-fade-in;
  }
}


/* ---- Slide Panel (slide-panel) ---- */
/* ==========================================================================
   Slide Panel — side sheet for record details and forms
   Root .sx-slide-panel covers its nearest positioned ancestor (position: absolute; inset: 0):
   the library demo mounts it inside a small mock app window (position: relative; overflow:
   hidden) so the panel slides in from that window's edge. Products mount it at the page level:
   add .sx-slide-panel--fixed (React: fixed) and render it as the last child of <body>.
   State on the root: data-state="open | closed"; width from --sp-w (default 340px).
   Sheet: role="dialog" aria-modal="true" aria-labelledby; head, a body that scrolls on its own
   (.sx-slide-panel__body) and a footer that stays in reach. While open, the root's siblings are
   inert. Previews mark the element that would take focus with data-preview-focus.
   ========================================================================== */

.sx-slide-panel {
  --sp-w: 340px;
  --sp-inset: 8px;
  position: absolute;
  inset: 0;
  z-index: var(--sx-z-panel);
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  /* Stay visible until the exit has played. */
  transition: visibility 0s linear var(--sx-dur-3);
}

.sx-slide-panel[data-state="open"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sx-slide-panel--fixed {
  position: fixed;
}

/* ---------- Scrim ---------- */
.sx-slide-panel__scrim {
  position: absolute;
  inset: 0;
  background: var(--sx-overlay);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-slide-panel[data-state="open"] > .sx-slide-panel__scrim {
  opacity: 1;
  transition-duration: var(--sx-dur-3);
}

/* ---------- Sheet: slides in from the right edge, leaves a little faster ---------- */
.sx-slide-panel__sheet {
  position: absolute;
  top: var(--sp-inset);
  right: var(--sp-inset);
  bottom: var(--sp-inset);
  display: flex;
  flex-direction: column;
  width: min(var(--sp-w), calc(100% - 2 * var(--sp-inset)));
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-3);
  transform: translateX(calc(100% + var(--sp-inset) + 40px));
  transition: transform var(--sx-dur-3) var(--sx-ease-in);
}

.sx-slide-panel[data-state="open"] .sx-slide-panel__sheet {
  transform: none;
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

/* The sheet takes focus only so screen readers read its title; it is not a control. */
.sx-slide-panel__sheet:focus-visible {
  outline: none;
}

/* ---------- Head ---------- */
.sx-slide-panel__head {
  position: relative;
  flex: none;
  padding: 16px 52px 14px 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-slide-panel__eyebrow {
  margin-bottom: 3px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-slide-panel__title {
  font-size: var(--sx-fs-lg);
  line-height: 1.35;
}

.sx-slide-panel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-slide-panel__close {
  position: absolute;
  top: 12px;
  right: 12px;
}

/* ---------- Body scrolls on its own; the footer stays in reach ---------- */
.sx-slide-panel__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.sx-slide-panel__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: none;
  padding: 12px 14px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-slide-panel .sx-btn[data-preview-focus] {
  outline-color: var(--sx-focus);
}

/* ==========================================================================
   Demo: a mock orders window; the panel holds the chosen order.
   ========================================================================== */
.sx-slide-panel-demo {
  width: 560px;
  height: 380px;
  overflow: hidden;
}

.sx-slide-panel-demo__app {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100%;
}

.sx-slide-panel-demo .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--spd-hue, var(--sx-c1)) 16%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--spd-hue, var(--sx-c1)) 72%, var(--sx-ink));
}

.sx-slide-panel-demo__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 54px;
  padding: 0 12px 0 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-slide-panel-demo__heading {
  display: grid;
  margin-right: auto;
  line-height: 1.3;
}

.sx-slide-panel-demo__heading h3 {
  font-size: var(--sx-fs-md);
}

.sx-slide-panel-demo__heading span {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* Columns shared by the header strip and the rows */
.sx-slide-panel-demo__cols,
.sx-slide-panel-demo__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 124px 100px;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
}

.sx-slide-panel-demo__cols {
  height: 32px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-slide-panel-demo__cols > :last-child {
  text-align: right;
}

.sx-slide-panel-demo__list {
  overflow-y: auto;
}

.sx-slide-panel-demo__row {
  width: 100%;
  height: 46px;
  font-size: var(--sx-fs-sm);
  text-align: left;
  color: var(--sx-ink-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-slide-panel-demo__row:hover,
.sx-slide-panel-demo__row[data-active] {
  background: var(--sx-fill);
}

.sx-slide-panel-demo__row[data-pressed] {
  background: var(--sx-fill-strong);
}

/* The open order stays marked while its panel is showing. */
.sx-slide-panel-demo__row[aria-expanded="true"] {
  background: var(--sx-accent-soft);
  box-shadow: inset 2px 0 0 var(--sx-accent), inset 0 -1px 0 var(--sx-line-soft);
}

.sx-slide-panel-demo__row:focus-visible {
  outline-offset: -2px;
}

.sx-slide-panel-demo__id {
  color: var(--sx-muted);
}

.sx-slide-panel-demo__cust {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-slide-panel-demo__total {
  text-align: right;
  font-weight: 500;
  color: var(--sx-ink);
}

/* Panel body sections */
.sx-slide-panel-demo__section {
  padding: 14px 18px 16px;
}

.sx-slide-panel-demo__section + .sx-slide-panel-demo__section {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-slide-panel-demo__label {
  margin-bottom: 10px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-slide-panel-demo__person {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sx-slide-panel-demo__who {
  display: grid;
  min-width: 0;
  line-height: 1.35;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-slide-panel-demo__strong {
  font-size: var(--sx-fs-base);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-slide-panel-demo__facts {
  display: grid;
  gap: 6px;
  margin-top: 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-slide-panel-demo__facts > li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sx-slide-panel-demo__facts .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
}

.sx-slide-panel-demo__items {
  display: grid;
  gap: 10px;
}

.sx-slide-panel-demo__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
}

.sx-slide-panel-demo__item-name {
  color: var(--sx-ink);
}

.sx-slide-panel-demo__item-sum {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  color: var(--sx-ink);
}

.sx-slide-panel-demo__item-qty {
  grid-column: 1;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-slide-panel-demo__totals {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  font-size: var(--sx-fs-sm);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-slide-panel-demo__totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-slide-panel-demo__totals dt {
  color: var(--sx-muted);
}

.sx-slide-panel-demo__totals dd {
  margin: 0;
  color: var(--sx-ink-2);
}

.sx-slide-panel-demo__totals > .sx-slide-panel-demo__grand {
  margin-top: 2px;
  font-weight: 600;
}

.sx-slide-panel-demo__grand dt,
.sx-slide-panel-demo__grand dd {
  color: var(--sx-ink);
}

/* Activity: newest first, joined by a hairline */
.sx-slide-panel-demo__timeline {
  display: grid;
  gap: 12px;
}

.sx-slide-panel-demo__timeline > li {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-left: 18px;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-ink-2);
}

.sx-slide-panel-demo__timeline > li::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
}

.sx-slide-panel-demo__timeline > li:first-child::before {
  background: var(--sx-accent);
  box-shadow: 0 0 0 3px var(--sx-accent-soft);
}

.sx-slide-panel-demo__timeline > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 17px;
  bottom: -10px;
  left: 5px;
  width: 1px;
  background: var(--sx-line);
}

.sx-slide-panel-demo__timeline > li[data-new] {
  animation: sx-rise-in var(--sx-dur-4) var(--sx-ease-out);
}

.sx-slide-panel-demo__when {
  flex: none;
  color: var(--sx-muted);
}

/* ---------- Reduced motion: the sheet fades in place ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-slide-panel__sheet {
    opacity: 0;
    transform: none;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-slide-panel[data-state="open"] .sx-slide-panel__sheet {
    opacity: 1;
    transform: none;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-slide-panel-demo__timeline > li[data-new] {
    animation-name: sx-fade-in;
  }
}


/* ---- Right-click Menu (right-click-menu) ---- */
/* ==========================================================================
   Right-click Menu — a context menu that opens at the pointer (.sx-menu + .sx-pop)
   Root .sx-right-click-menu (position: relative) is the region that owns the menu. Elements in it
   with data-menu="<kind>" (plus data-id and data-label) are targets; data-menu on the root itself
   gives the menu for empty space. The target carries data-context while its menu is open.
   Menu:    data-state="open | closed", data-side="bottom | top" (opens down or up from the
            pointer), data-align="start | end" (opens to its right or left); --rcm-x / --rcm-y
   Submenu: .sx-right-click-menu__sub with data-state, data-side="right | left", data-parent
   Items:   role="menuitem" | "menuitemradio" (aria-checked); data-active="true" on the highlighted
            item; data-tone="danger"; aria-disabled="true"
   Long press: .sx-right-click-menu__press grows a ring under the finger (data-state="pressing");
            the root carries data-pressing meanwhile.
   ========================================================================== */

.sx-right-click-menu {
  position: relative;
  -webkit-touch-callout: none;
}

/* Pointer events land on HTML elements, so offsetX/offsetY stay inside their offset boxes. */
.sx-right-click-menu .sx-icon {
  pointer-events: none;
}

.sx-right-click-menu[data-pressing] {
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Menus ---------- */
.sx-right-click-menu__menu {
  --sx-pop-origin: top left;
  position: absolute;
  left: var(--rcm-x, 0px);
  top: var(--rcm-y, 0px);
  z-index: var(--sx-z-pop);
  width: 204px;
  user-select: none;
  -webkit-user-select: none;
}

.sx-right-click-menu__menu:focus {
  outline: none;
}

.sx-right-click-menu__menu:not(.sx-right-click-menu__sub):not([data-state="open"]) {
  transform: scale(0.96);
}

.sx-right-click-menu__menu[data-align="end"] {
  --sx-pop-origin: top right;
}

.sx-right-click-menu__menu[data-side="top"] {
  --sx-pop-origin: bottom left;
}

.sx-right-click-menu__menu[data-side="top"][data-align="end"] {
  --sx-pop-origin: bottom right;
}

.sx-right-click-menu__sub {
  --sx-pop-origin: top left;
  z-index: calc(var(--sx-z-pop) + 1);
  width: 172px;
  min-width: 0;
}

.sx-right-click-menu__sub[data-side="left"] {
  --sx-pop-origin: top right;
}

.sx-right-click-menu__sub:not([data-state="open"]) {
  transform: translateX(-4px) scale(0.97);
}

.sx-right-click-menu__sub[data-side="left"]:not([data-state="open"]) {
  transform: translateX(4px) scale(0.97);
}

/* ---------- Items: one highlight, driven by data-active ---------- */
.sx-right-click-menu__menu .sx-menu__item:hover {
  background: transparent;
  color: var(--sx-ink-2);
}

.sx-right-click-menu__menu .sx-menu__item[data-active="true"],
.sx-right-click-menu__menu .sx-menu__item[aria-expanded="true"] {
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-right-click-menu__menu .sx-menu__item:focus-visible {
  outline: none;
}

.sx-right-click-menu__menu .sx-menu__label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-right-click-menu__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-right-click-menu__keys {
  display: inline-flex;
  gap: 3px;
  margin-left: auto;
}

.sx-right-click-menu__menu .sx-menu__item > .sx-right-click-menu__more {
  --sx-icon-size: 14px;
  margin-left: auto;
  margin-right: -2px;
  color: var(--sx-muted);
}

.sx-right-click-menu__menu .sx-menu__item > .sx-right-click-menu__check {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.2;
  margin-left: auto;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-right-click-menu__menu .sx-menu__item[aria-checked="true"] > .sx-right-click-menu__check {
  opacity: 1;
  transform: none;
}

.sx-right-click-menu__menu .sx-menu__item[data-tone="danger"],
.sx-right-click-menu__menu .sx-menu__item[data-tone="danger"] > .sx-icon,
.sx-right-click-menu__menu .sx-menu__item[data-tone="danger"] .sx-kbd {
  color: var(--sx-danger-ink);
}

.sx-right-click-menu__menu .sx-menu__item[data-tone="danger"][data-active="true"] {
  background: var(--sx-danger-soft);
}

.sx-right-click-menu__menu .sx-menu__item[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

/* ---------- Long press ring: it waits a beat, so quick taps never flash it ---------- */
.sx-right-click-menu__press {
  position: absolute;
  left: var(--rcm-px, 0px);
  top: var(--rcm-py, 0px);
  z-index: var(--sx-z-pop);
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1.5px var(--sx-accent-line);
  opacity: 0;
  transform: scale(0.3);
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-right-click-menu__press[data-state="pressing"] {
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out) 120ms, transform 380ms linear 120ms;
}

/* ---------- Demo: a shared folder with a small file grid ---------- */
.sx-right-click-menu-demo {
  display: flex;
  flex-direction: column;
  width: 480px;
  height: 316px;
}

.sx-right-click-menu-demo__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  flex: none;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-right-click-menu-demo__bar > .sx-icon {
  --sx-icon-size: 16px;
  color: var(--sx-muted);
}

.sx-right-click-menu-demo__title {
  font-size: var(--sx-fs-md);
  font-weight: 600;
}

.sx-right-click-menu-demo__hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-right-click-menu-demo__hint > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-right-click-menu-demo__grid {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 10px;
  padding: 12px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}

.sx-right-click-menu-demo__tile {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 1px;
  min-width: 0;
  padding: 6px 6px 8px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-right-click-menu-demo__tile:hover {
  background: var(--sx-fill);
}

.sx-right-click-menu-demo__tile:focus-visible {
  outline-offset: 0;
}

.sx-right-click-menu-demo__tile[data-context] {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-right-click-menu-demo__thumb {
  --rcm-tone: var(--sx-muted);
  display: grid;
  place-items: center;
  width: 100%;
  height: 50px;
  margin-bottom: 5px;
  border-radius: var(--sx-r-md);
  color: color-mix(in srgb, var(--rcm-tone) 80%, var(--sx-ink));
  background: color-mix(in srgb, var(--rcm-tone) 10%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rcm-tone) 16%, transparent);
  --sx-icon-size: 22px;
}

.sx-right-click-menu-demo__thumb[data-type="folder"] {
  --rcm-tone: var(--sx-c2);
}

.sx-right-click-menu-demo__thumb[data-type="pdf"] {
  --rcm-tone: var(--sx-danger);
}

.sx-right-click-menu-demo__thumb[data-type="csv"] {
  --rcm-tone: var(--sx-success);
}

.sx-right-click-menu-demo__thumb[data-type="image"] {
  --rcm-tone: var(--sx-c3);
  background:
    radial-gradient(60% 70% at 30% 100%, color-mix(in srgb, var(--sx-c3) 26%, transparent), transparent),
    linear-gradient(160deg, color-mix(in srgb, var(--sx-c1) 14%, var(--sx-surface)), color-mix(in srgb, var(--sx-c3) 18%, var(--sx-surface)));
}

.sx-right-click-menu-demo__name {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-right-click-menu-demo__meta {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-right-click-menu-demo__star {
  position: absolute;
  top: 10px;
  right: 10px;
  --sx-icon-size: 13px;
  color: var(--sx-warning);
  fill: currentColor;
  animation: rcm-pop var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-right-click-menu-demo__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  flex: none;
  padding: 0 16px;
  border-radius: 0 0 var(--sx-card-radius) var(--sx-card-radius);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-right-click-menu-demo__count {
  font-variant-numeric: tabular-nums;
}

.sx-right-click-menu-demo__note {
  margin-left: auto;
  animation: rcm-swap-in var(--sx-dur-4) var(--sx-ease-out);
}

/* A stand-in pointer for the scripted story; it never takes pointer events. */
.sx-right-click-menu-demo__cursor {
  position: absolute;
  left: 0;
  top: 0;
  z-index: calc(var(--sx-z-pop) + 3);
  width: 20px;
  height: 20px;
  margin: -3px 0 0 -3px;
  color: var(--sx-ink);
  opacity: 0;
  transform: translate(var(--rcm-cx, 240px), var(--rcm-cy, 290px));
  pointer-events: none;
  transition: transform var(--sx-dur-4) var(--sx-ease-in-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-right-click-menu-demo__cursor[data-visible] {
  opacity: 1;
}

.sx-right-click-menu-demo__cursor > .sx-icon {
  --sx-icon-size: 20px;
  --sx-icon-stroke: 1.5;
  fill: currentColor;
  stroke: var(--sx-surface);
  filter: drop-shadow(0 1px 1.5px var(--sx-overlay));
}

.sx-right-click-menu-demo__ripple {
  position: absolute;
  left: var(--rcm-cx, 0px);
  top: var(--rcm-cy, 0px);
  z-index: calc(var(--sx-z-pop) + 2);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--sx-accent-line);
  background: var(--sx-accent-soft);
  opacity: 0;
  pointer-events: none;
  animation: rcm-ripple 520ms var(--sx-ease-out);
}

@keyframes rcm-ripple {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(1.4);
  }
}

@keyframes rcm-ripple-fade {
  from {
    opacity: 0.9;
  }
  to {
    opacity: 0;
  }
}

@keyframes rcm-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes rcm-swap-in {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-right-click-menu__menu.sx-pop:not([data-state="open"]),
  .sx-right-click-menu__press,
  .sx-right-click-menu__press[data-state="pressing"] {
    transform: none;
  }

  .sx-right-click-menu-demo__cursor {
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-right-click-menu-demo__ripple {
    animation-name: rcm-ripple-fade;
  }

  .sx-right-click-menu-demo__star,
  .sx-right-click-menu-demo__note {
    animation-name: sx-fade-in;
  }
}


/* ---- Search Spotlight (search-spotlight) ---- */
/* ==========================================================================
   Search Spotlight — search popup with scopes, recent searches and keyboard navigation
   Root: data-state="open | closed", data-ready (turns on the glides after the first measure).
   The root fills its positioned parent; for a page-wide overlay put it in a fixed container.
   Input: role="combobox". Scopes: role="tab" aria-selected, one .sx-search-spotlight__thumb
   moved by script (--ss-tx, --ss-tw). Options: role="option" aria-selected; results flash with
   data-flash on Enter; recent rows collapse with data-leaving. The list animates --ss-h.
   ========================================================================== */

.sx-search-spotlight {
  position: absolute;
  inset: 0;
  z-index: var(--sx-z-modal);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--sx-dur-2);
}

.sx-search-spotlight[data-state="open"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sx-search-spotlight__scrim {
  position: absolute;
  inset: 0;
  background: var(--sx-overlay);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-search-spotlight[data-state="open"] .sx-search-spotlight__scrim {
  opacity: 1;
  transition-duration: var(--sx-dur-3);
}

/* Centred with auto margins so transform stays free for the scale-in. Exits are quicker. */
.sx-search-spotlight__panel {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  width: 520px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: 50% 0;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-in);
}

.sx-search-spotlight[data-state="open"] .sx-search-spotlight__panel {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Search row ---------- */
.sx-search-spotlight__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  padding: 0 12px 0 16px;
}

.sx-search-spotlight__search > .sx-icon {
  --sx-icon-size: 17px;
  color: var(--sx-muted);
}

.sx-search-spotlight__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-lg);
  color: var(--sx-ink);
  background: transparent;
}

.sx-search-spotlight__close {
  display: inline-grid;
  place-items: center;
  border-radius: var(--sx-r-xs);
}

.sx-search-spotlight__close > .sx-kbd {
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-search-spotlight__close:hover > .sx-kbd {
  color: var(--sx-ink);
}

/* ---------- Scope tabs ---------- */
.sx-search-spotlight__tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 0 10px 9px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  isolation: isolate;
}

.sx-search-spotlight__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-search-spotlight__tab:hover {
  color: var(--sx-ink-2);
}

.sx-search-spotlight__tab[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-search-spotlight__tab:focus-visible {
  outline-offset: 0;
}

.sx-search-spotlight__tab-count {
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-faint);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-search-spotlight__tab[aria-selected="true"] .sx-search-spotlight__tab-count {
  color: var(--sx-muted);
}

.sx-search-spotlight__tab-count:empty {
  display: none;
}

/* One pill glides to the chosen scope, positioned by script from the tab's offset box. */
.sx-search-spotlight__thumb {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--ss-tw, 0px);
  height: 26px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--ss-tx, 0px));
  pointer-events: none;
}

.sx-search-spotlight[data-ready] .sx-search-spotlight__thumb {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Results ---------- */
.sx-search-spotlight__list {
  height: var(--ss-h, auto);
  max-height: 222px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-search-spotlight[data-ready] .sx-search-spotlight__list {
  transition: height var(--sx-dur-3) var(--sx-ease-out);
}

.sx-search-spotlight__inner {
  position: relative;
  padding: 6px;
}

.sx-search-spotlight__label {
  padding: 6px 10px 5px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

/* Recent searches collapse with the grid-rows trick when removed. */
.sx-search-spotlight__recent {
  display: grid;
  grid-template-rows: 1fr;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-search-spotlight__recent[data-leaving] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
}

.sx-search-spotlight__recent-body {
  min-height: 0;
  overflow: hidden;
}

.sx-search-spotlight__recent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 4px 0 10px;
}

.sx-search-spotlight__recent-row > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
}

.sx-search-spotlight__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-search-spotlight__remove {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: var(--sx-faint);
  --sx-icon-size: 14px;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-search-spotlight__remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-search-spotlight__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 4px 8px 4px 6px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-search-spotlight__item:not([hidden]) {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-search-spotlight__item[aria-selected="true"],
.sx-search-spotlight__recent[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-search-spotlight__tile {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  --sx-icon-size: 15px;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-search-spotlight__item[aria-selected="true"] .sx-search-spotlight__tile {
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-search-spotlight__main {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-search-spotlight__title,
.sx-search-spotlight__sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-search-spotlight__title {
  font-size: var(--sx-fs-base);
  line-height: 17px;
  color: var(--sx-ink);
}

.sx-search-spotlight__sub {
  font-size: var(--sx-fs-xs);
  line-height: 15px;
  color: var(--sx-muted);
}

.sx-search-spotlight__hit {
  color: var(--sx-accent-ink);
  font-weight: 600;
  background: none;
}

.sx-search-spotlight__item > .sx-chip {
  flex: none;
}

/* The Enter hint only shows on the highlighted row. */
.sx-search-spotlight__enter {
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-search-spotlight__item[aria-selected="true"] .sx-search-spotlight__enter {
  opacity: 1;
  transform: none;
}

/* Enter or click: a short pulse on the chosen row before the panel closes */
.sx-search-spotlight__item[data-flash]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  animation: ss-flash 0.32s var(--sx-ease-out) both;
}

/* ---------- Empty ---------- */
.sx-search-spotlight__empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 24px 22px;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-search-spotlight__empty:not([hidden]) {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-search-spotlight__empty-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-search-spotlight__empty-title {
  color: var(--sx-ink-2);
}

/* ---------- Footer ---------- */
.sx-search-spotlight__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 36px;
  padding: 0 14px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-search-spotlight__hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-search-spotlight__hint > .sx-kbd:last-of-type {
  margin-right: 3px;
}

.sx-search-spotlight__total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ---------- Demo: a small app page behind the popup ---------- */
.sx-search-spotlight-demo {
  position: relative;
  width: 620px;
  height: 408px;
  overflow: hidden;
  isolation: isolate;
}

.sx-search-spotlight-demo__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 14px 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-search-spotlight-demo__mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: 13px;
}

.sx-search-spotlight-demo__brand {
  margin-left: -4px;
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-search-spotlight-demo__nav {
  display: flex;
  gap: 2px;
  margin-right: auto;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-search-spotlight-demo__nav > span {
  padding: 4px 8px;
  border-radius: var(--sx-r-sm);
}

.sx-search-spotlight-demo__nav > [aria-current] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-search-spotlight-demo__trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 172px;
  height: var(--sx-h-sm);
  padding: 0 5px 0 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-search-spotlight-demo__trigger:hover {
  color: var(--sx-ink-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-search-spotlight-demo__trigger > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-search-spotlight-demo__trigger > span {
  flex: 1;
  text-align: left;
}

.sx-search-spotlight-demo__body {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
}

.sx-search-spotlight-demo__head {
  display: grid;
  gap: 3px;
}

/* A result was opened: the heading arrives once the popup has started to close. */
.sx-search-spotlight-demo__head[data-opened] {
  animation: ss-page-in var(--sx-dur-4) var(--sx-ease-out) 0.34s both;
}

.sx-search-spotlight-demo__title {
  font-size: var(--sx-fs-xl);
}

.sx-search-spotlight-demo__lede {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-search-spotlight-demo__rows {
  display: grid;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-search-spotlight-demo__row {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 14px;
  font-size: var(--sx-fs-sm);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out) 0.3s;
}

.sx-search-spotlight-demo__row + .sx-search-spotlight-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-search-spotlight-demo__row[data-current] {
  background: var(--sx-fill);
}

.sx-search-spotlight-demo__name {
  width: 108px;
  flex: none;
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-search-spotlight-demo__subject {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-search-spotlight-demo__time {
  font-variant-numeric: tabular-nums;
  color: var(--sx-faint);
}

@keyframes ss-flash {
  0% {
    background-color: transparent;
    box-shadow: inset 0 0 0 1px transparent;
  }
  30% {
    background-color: var(--sx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  }
  100% {
    background-color: var(--sx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  }
}

@keyframes ss-page-in {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-search-spotlight__panel,
  .sx-search-spotlight[data-state="open"] .sx-search-spotlight__panel,
  .sx-search-spotlight__enter {
    transform: none;
  }

  .sx-search-spotlight__item:not([hidden]),
  .sx-search-spotlight__empty:not([hidden]),
  .sx-search-spotlight-demo__head[data-opened] {
    animation-name: sx-fade-in;
  }
}


/* ---- Omni Search (omni-search) ---- */
/* ==========================================================================
   Omni Search — one search across people, tickets, orders and articles
   Root: .sx-card.sx-omni-search. Input: role="combobox".
   Filter chips: aria-pressed. Groups: role="group", hidden when nothing in them matches.
   Rows: role="option" aria-selected (the highlighted row), data-tags (the filter ids the row
   passes), data-flash while it opens, hidden when filtered out.
   Preview: one sheet per result, stacked in one cell; the highlighted one has data-active, the
   others are inert and crossfade out.
   ========================================================================== */

.sx-omni-search {
  --os-body-h: 360px;
  --os-preview-w: 360px;
  display: grid;
  grid-template-rows: auto auto var(--os-body-h) auto;
  width: 880px;
  overflow: hidden;
}

/* ---------- Search ---------- */
.sx-omni-search__search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 14px 0 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-omni-search__search > .sx-icon {
  --sx-icon-size: 17px;
  color: var(--sx-muted);
}

.sx-omni-search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  font-size: var(--sx-fs-lg);
  color: var(--sx-ink);
  background: transparent;
}

.sx-omni-search__clear:not([hidden]) {
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Filters ---------- */
.sx-omni-search__filters {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-omni-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: calc(var(--sx-h-xs) + 2px);
  padding: 0 11px 0 9px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-1) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-omni-search__chip:hover {
    color: var(--sx-ink);
    background: var(--sx-raised-hover);
  }
}

.sx-omni-search__chip:active {
  transform: scale(0.97);
}

.sx-omni-search__chip[aria-pressed="true"] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

/* The filter icon turns into a check when pressed; both share one slot, so the chip keeps its width. */
.sx-omni-search__chip-icon {
  display: grid;
  width: 13px;
  height: 13px;
}

.sx-omni-search__chip-icon > .sx-icon {
  --sx-icon-size: 13px;
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-omni-search__chip-icon > .sx-icon:last-child {
  --sx-icon-stroke: 2.4;
  opacity: 0;
  transform: scale(0.4);
}

.sx-omni-search__chip[aria-pressed="true"] .sx-omni-search__chip-icon > .sx-icon:first-child {
  opacity: 0;
  transform: scale(0.4);
}

.sx-omni-search__chip[aria-pressed="true"] .sx-omni-search__chip-icon > .sx-icon:last-child {
  opacity: 1;
  transform: none;
}

.sx-omni-search__total {
  margin-left: auto;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* ---------- Body ---------- */
.sx-omni-search__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--os-preview-w);
  min-height: 0;
}

.sx-omni-search__list {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

/* Rows and groups measure their offsets against this box. */
.sx-omni-search__inner {
  position: relative;
  padding: 4px 8px 10px;
}

.sx-omni-search__label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 5px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-omni-search__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-omni-search__row {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  min-height: calc(var(--sx-h-md) + 10px);
  padding: 5px 10px 5px 8px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
}

/* Rows that come back into the results rise in. */
.sx-omni-search__row:not([hidden]) {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-omni-search__row[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

/* Enter or click: a short accent pulse over the row. */
.sx-omni-search__row::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  opacity: 0;
  pointer-events: none;
}

.sx-omni-search__row[data-flash]::after {
  animation: os-flash 0.6s var(--sx-ease-out);
}

.sx-omni-search__lead {
  width: 28px;
  height: 28px;
}

.sx-omni-search__lead.sx-avatar {
  --sx-avatar-size: 28px;
}

.sx-omni-search__lead[data-tone="accent"] {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-omni-search__lead[data-tone="info"] {
  --sx-avatar-bg: var(--sx-info-soft);
  --sx-avatar-ink: var(--sx-info-ink);
}

.sx-omni-search__lead[data-tone="success"] {
  --sx-avatar-bg: var(--sx-success-soft);
  --sx-avatar-ink: var(--sx-success-ink);
}

.sx-omni-search__lead[data-tone="mark"] {
  --sx-avatar-bg: var(--sx-mark-soft);
  --sx-avatar-ink: var(--sx-mark-ink);
}

.sx-omni-search__tile {
  display: grid;
  place-items: center;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-omni-search__row[aria-selected="true"] .sx-omni-search__tile {
  color: var(--sx-ink-2);
}

.sx-omni-search__main {
  display: grid;
  min-width: 0;
}

.sx-omni-search__title,
.sx-omni-search__sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.35;
}

.sx-omni-search__title {
  font-weight: 500;
}

.sx-omni-search__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-omni-search__meta {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
}

/* The match itself: a soft accent wash that never changes the text width. */
.sx-omni-search__hit {
  border-radius: 3px;
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: 0 0 0 1.5px var(--sx-accent-soft);
}

/* ---------- Nothing found ---------- */
/* Fills the list so it sits level with the preview's blank state. */
.sx-omni-search__empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 4px;
  min-height: calc(var(--os-body-h) - 14px);
  padding: 0 32px;
  text-align: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-omni-search__empty:not([hidden]) {
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-omni-search__empty-icon,
.sx-omni-search__blank-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-omni-search__empty-title {
  color: var(--sx-ink-2);
}

.sx-omni-search__empty-title strong {
  font-weight: 500;
  color: var(--sx-ink);
}

/* ---------- Preview ---------- */
.sx-omni-search__preview {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--sx-surface-2);
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

/* Every sheet sits in the same cell. The outgoing one fades and blurs away a little faster
   than the incoming one arrives. */
.sx-omni-search__sheet,
.sx-omni-search__blank {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
  opacity: 0;
  filter: blur(4px);
  transform: translateY(4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-omni-search__sheet[data-active],
.sx-omni-search__blank[data-active] {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    filter var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s;
}

.sx-omni-search__sheet {
  display: flex;
  flex-direction: column;
  padding: 18px 20px 16px;
}

.sx-omni-search__sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.sx-omni-search__sheet-head > .sx-omni-search__lead {
  width: 36px;
  height: 36px;
}

.sx-omni-search__sheet-head > .sx-omni-search__lead.sx-avatar {
  --sx-avatar-size: 36px;
}

.sx-omni-search__sheet-head > .sx-omni-search__tile {
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  --sx-icon-size: 16px;
}

.sx-omni-search__kicker {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-omni-search__sheet-title {
  font-size: var(--sx-fs-lg);
  line-height: 1.3;
}

.sx-omni-search__figure {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.sx-omni-search__sheet-sub {
  margin-top: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-omni-search__quote {
  margin-top: 14px;
  padding: 10px 12px 11px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-omni-search__quote figcaption {
  margin-bottom: 3px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-omni-search__quote blockquote {
  margin: 0;
  font-size: var(--sx-fs-sm);
  line-height: 1.5;
  color: var(--sx-ink-2);
}

.sx-omni-search__lines {
  margin: 14px 0 0;
  padding: 2px 12px;
  list-style: none;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-omni-search__lines > li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-omni-search__lines > li + li {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-omni-search__lines > li > span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-omni-search__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin-top: 14px;
}

.sx-omni-search__facts dt {
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-omni-search__facts dd {
  margin: 1px 0 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
}

.sx-omni-search__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.sx-omni-search__blank {
  display: grid;
  place-content: center;
  justify-items: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Footer ---------- */
.sx-omni-search__foot {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 38px;
  padding: 0 16px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-omni-search__keys {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-omni-search__keys > .sx-kbd:last-of-type {
  margin-right: 3px;
}

.sx-omni-search__pos {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@keyframes os-flash {
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-omni-search__row:not([hidden]),
  .sx-omni-search__empty:not([hidden]) {
    animation-name: sx-fade-in;
  }

  .sx-omni-search__sheet,
  .sx-omni-search__blank {
    filter: none;
    transform: none;
  }

  .sx-omni-search__chip:active {
    transform: none;
  }

  .sx-omni-search__chip-icon > .sx-icon {
    transform: none !important;
  }
}


/* ---- Media Viewer (media-viewer) ---- */
/* ==========================================================================
   Media Viewer — thumbnail grid with a lightbox that zooms out of the thumbnail
   Thumbs: .sx-media-viewer__thumb [data-kind="image | video"] [data-lifted] (the open item's slot)
   Lightbox: .sx-media-viewer__box role="dialog" data-state="closed | open | closing" (inert while closed)
   Figure: .sx-media-viewer__figure [data-kind] [data-zoomed] [data-dragging]; script animates its
   transform (FLIP zoom from the thumb, slides between items) and writes --mv-z / --mv-x / --mv-y
   on .sx-media-viewer__zoom. Strip: .sx-media-viewer__mini aria-current="true" on the shown item.
   Art: .sx-media-viewer__art[data-art] is drawn with layered gradients in percentages, so the same
   picture scales from the strip to the lightbox. An <img class="sx-media-viewer__art"> works too.
   ========================================================================== */

.sx-media-viewer {
  --mv-r: var(--sx-r-lg);
  --mv-gap: 10px;

  /* Palette for the drawn pictures, mixed from theme tokens */
  --mv-wall: color-mix(in oklab, var(--sx-c1) 12%, var(--sx-surface-3));
  --mv-wall-2: color-mix(in oklab, var(--sx-c3) 16%, var(--sx-surface-3));
  --mv-wall-3: color-mix(in oklab, var(--sx-c5) 14%, var(--sx-surface-3));
  --mv-floor: color-mix(in oklab, var(--sx-c6) 34%, var(--sx-surface-3));
  --mv-light: color-mix(in srgb, var(--sx-surface) 45%, transparent);
  --mv-grain: color-mix(in srgb, var(--sx-overlay) 22%, transparent);
  --mv-kraft: color-mix(in oklab, var(--sx-c2) 52%, var(--sx-surface-3));
  --mv-kraft-hi: color-mix(in oklab, var(--mv-kraft) 70%, var(--sx-surface));
  --mv-kraft-lo: color-mix(in oklab, var(--mv-kraft) 82%, black);
  --mv-tape: color-mix(in oklab, var(--sx-c2) 24%, var(--sx-surface));
  --mv-paper: color-mix(in oklab, var(--sx-surface) 94%, var(--sx-c2));
  --mv-print: color-mix(in oklab, var(--sx-ink) 62%, var(--mv-paper));
  --mv-print-2: color-mix(in oklab, var(--sx-ink) 24%, var(--mv-paper));
  --mv-band: color-mix(in oklab, var(--sx-ink) 9%, var(--mv-paper));
  --mv-metal: color-mix(in oklab, var(--sx-c1) 55%, black);
  --mv-metal-hi: color-mix(in oklab, var(--mv-metal) 72%, white);
  --mv-glass: color-mix(in oklab, var(--sx-c1) 14%, var(--sx-surface));
  --mv-glass-hi: color-mix(in oklab, var(--sx-surface) 55%, white);
  --mv-glass-edge: color-mix(in oklab, var(--mv-glass) 78%, var(--mv-metal));
  --mv-crack: var(--sx-danger);
  --mv-shade: color-mix(in srgb, var(--sx-overlay) 80%, transparent);

  position: relative;
  width: 640px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Header ---------- */
.sx-media-viewer__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 0;
}

.sx-media-viewer__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.sx-media-viewer__title {
  font-size: var(--sx-fs-lg);
}

.sx-media-viewer__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Grid ---------- */
.sx-media-viewer__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--mv-gap);
  padding: 14px 18px 18px;
}

.sx-media-viewer__thumb {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border-radius: var(--mv-r);
  background: var(--sx-surface-3);
  box-shadow: var(--sx-shadow-1);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

/* Hairline over the picture, so light pictures keep an edge */
.sx-media-viewer__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--sx-line);
  pointer-events: none;
}

.sx-media-viewer__thumb > .sx-media-viewer__art {
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-media-viewer__thumb:hover {
    box-shadow: var(--sx-shadow-2);
  }

  .sx-media-viewer__thumb:hover > .sx-media-viewer__art {
    transform: scale(1.035);
  }
}

/* While its picture is open, the thumb shows an empty slot for the lightbox to land in. */
.sx-media-viewer__thumb[data-lifted] > * {
  opacity: 0;
  transition: none;
}

.sx-media-viewer__play {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  color: var(--sx-ink);
  background: color-mix(in srgb, var(--sx-raised) 86%, transparent);
  box-shadow: var(--sx-shadow-2);
  backdrop-filter: blur(6px);
  pointer-events: none;
  --sx-icon-size: 14px;
}

.sx-media-viewer__play > .sx-icon {
  margin-left: 2px;
  fill: currentColor;
}

.sx-media-viewer__duration {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--sx-ink);
  background: color-mix(in srgb, var(--sx-raised) 86%, transparent);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---------- Lightbox ---------- */
.sx-media-viewer__box {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  isolation: isolate;
  outline: none;
}

.sx-media-viewer__box:focus-visible {
  outline: none;
}

.sx-media-viewer__box[data-state="closed"] {
  visibility: hidden;
  pointer-events: none;
}

.sx-media-viewer__box[data-state="closing"] {
  pointer-events: none;
}

.sx-media-viewer__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--sx-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-media-viewer__box[data-state="open"] .sx-media-viewer__backdrop {
  opacity: 1;
  transition-duration: var(--sx-dur-3);
}

/* Chrome around the picture arrives just after the zoom starts and leaves first. */
.sx-media-viewer__bar,
.sx-media-viewer__strip {
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-media-viewer__bar {
  transform: translateY(-6px);
}

.sx-media-viewer__strip {
  transform: translateY(6px);
}

.sx-media-viewer__box[data-state="open"] :is(.sx-media-viewer__bar, .sx-media-viewer__strip) {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 80ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 80ms;
}

.sx-media-viewer__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 10px 0 18px;
}

.sx-media-viewer__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  margin-right: auto;
}

.sx-media-viewer__count {
  flex: none;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-media-viewer__caption {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-media-viewer__tools {
  display: flex;
  align-items: center;
  gap: 2px;
}

.sx-media-viewer__level {
  min-width: 42px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  color: var(--sx-ink-2);
}

.sx-media-viewer__sep {
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: var(--sx-line);
}

/* ---------- Stage and figure ---------- */
/* Above the bar and strip, so the picture flies over them on its way to or from a thumbnail. */
.sx-media-viewer__stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  container-type: size;
}

.sx-media-viewer__figure {
  position: relative;
  width: min(100cqw - 120px, (100cqh - 8px) * 4 / 3);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--mv-r);
  background: var(--sx-surface-3);
  box-shadow: var(--sx-shadow-3);
  transform-origin: 0 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.sx-media-viewer__figure[data-zoomed] {
  cursor: grab;
}

.sx-media-viewer__figure[data-zoomed][data-dragging] {
  cursor: grabbing;
}

.sx-media-viewer__zoom {
  position: absolute;
  inset: 0;
  transform: translate(var(--mv-x, 0px), var(--mv-y, 0px)) scale(var(--mv-z, 1));
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-media-viewer__figure[data-dragging] .sx-media-viewer__zoom {
  transition: none;
}

.sx-media-viewer__zoom > .sx-media-viewer__art {
  height: 100%;
}

.sx-media-viewer__figure > .sx-media-viewer__play {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  --sx-icon-size: 20px;
}

.sx-media-viewer__figure:not([data-kind="video"]) > .sx-media-viewer__play {
  display: none;
}

/* Round raised arrows on either side of the picture */
.sx-media-viewer__nav {
  --_bg: color-mix(in srgb, var(--sx-raised) 92%, transparent);
  --_bg-hover: var(--sx-raised-hover);
  --_bg-active: var(--sx-raised-hover);
  --_border: transparent;
  --_border-hover: transparent;
  --_shadow: var(--sx-shadow-2);
  position: absolute;
  top: 50%;
  margin-top: calc(var(--sx-h-md) / -2);
  opacity: 0;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease,
    opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-media-viewer__nav[data-dir="prev"] {
  left: 16px;
}

.sx-media-viewer__nav[data-dir="next"] {
  right: 16px;
}

.sx-media-viewer__box[data-state="open"] .sx-media-viewer__nav {
  opacity: 1;
  transition:
    background-color 0.15s ease,
    box-shadow 0.15s ease,
    outline-color 0.15s ease,
    opacity var(--sx-dur-3) var(--sx-ease-out) 80ms;
}

/* ---------- Strip ---------- */
.sx-media-viewer__strip {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px 14px;
}

.sx-media-viewer__mini {
  position: relative;
  width: 52px;
  flex: none;
  overflow: hidden;
  border-radius: var(--sx-r-sm);
  opacity: 0.55;
  box-shadow: 0 0 0 1px var(--sx-line);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-media-viewer__mini:hover {
    opacity: 0.85;
  }
}

.sx-media-viewer__mini[aria-current="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--sx-panel), 0 0 0 3.5px var(--sx-ink);
}

/* ---------- Art ---------- */
.sx-media-viewer__art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--mv-wall);
  isolation: isolate;
  pointer-events: none;
}

img.sx-media-viewer__art {
  height: auto;
  object-fit: cover;
}

.sx-media-viewer__art::before,
.sx-media-viewer__art::after {
  position: absolute;
  pointer-events: none;
}

/* Drawn pictures (generated layer by layer; positions are percentages of the 4:3 box) */

.sx-media-viewer__art[data-art="box"] {
  background:
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 36.264% 62.5% / 9% 1.6% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 35.106% 65.65% / 6% 1.6% no-repeat,
    linear-gradient(var(--mv-paper), var(--mv-paper)) 36.047% 64.804% / 14% 10.5% no-repeat,
    linear-gradient(var(--mv-tape), var(--mv-tape)) 50% 42.353% / 7% 15% no-repeat,
    radial-gradient(8% 9% at 70% 41%, color-mix(in oklab, var(--mv-kraft) 74%, black), transparent),
    linear-gradient(90deg, var(--mv-kraft) 0 68%, color-mix(in oklab, var(--mv-kraft) 88%, black)) 50% 64.286% / 48% 44% no-repeat,
    radial-gradient(33% 5.5% at 50% 80.5%, var(--mv-shade), transparent),
    linear-gradient(180deg, var(--mv-wall) 0 64%, var(--mv-floor) 64% 100%);
}

.sx-media-viewer__art[data-art="box"]::before {
  content: "";
  left: 26%;
  top: 27%;
  width: 48%;
  height: 9%;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(90deg, transparent 0 43%, var(--mv-tape) 43% 57%, transparent 57%), var(--mv-kraft-hi);
}

.sx-media-viewer__art[data-art="box"]::after {
  content: "";
  left: 66%;
  top: 34%;
  width: 8%;
  height: 9%;
  clip-path: polygon(100% 0, 100% 100%, 28% 22%);
  background:
    var(--mv-kraft-lo);
}

.sx-media-viewer__art[data-art="corner"] {
  background:
    radial-gradient(9% 10% at 53% 46%, var(--mv-kraft-hi), transparent),
    radial-gradient(17% 19% at 46% 53%, color-mix(in oklab, var(--mv-kraft) 72%, black), transparent),
    conic-gradient(from -60deg at 48% 54%, var(--mv-kraft-hi) 0 120deg, var(--mv-kraft) 120deg 240deg, var(--mv-kraft-lo) 240deg 360deg);
}

.sx-media-viewer__art[data-art="corner"]::before {
  content: "";
  left: 0%;
  top: 0%;
  width: 100%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 14%, 48% 54%, 0 17%);
  background:
    linear-gradient(90deg, transparent 0 39%, var(--mv-tape) 39% 55%, transparent 55%);
}

.sx-media-viewer__art[data-art="corner"]::after {
  content: "";
  left: 37%;
  top: 46%;
  width: 24%;
  height: 16%;
  clip-path: polygon(0 46%, 30% 16%, 56% 58%, 100% 22%, 100% 36%, 56% 74%, 30% 32%, 0 60%);
  background:
    color-mix(in oklab, var(--mv-kraft) 58%, black);
}

.sx-media-viewer__art[data-art="blender"] {
  background:
    radial-gradient(2.4% 3.2% at 50% 75.5%, var(--sx-accent) 94%, transparent 100%),
    linear-gradient(var(--mv-metal), var(--mv-metal)) 50% 64.737% / 17% 5% no-repeat,
    linear-gradient(90deg, var(--mv-metal) 0, var(--mv-metal-hi) 42%, var(--mv-metal) 100%) 50% 81.481% / 24% 19% no-repeat,
    linear-gradient(var(--mv-metal), var(--mv-metal)) 66.304% 27.835% / 8% 3% no-repeat,
    linear-gradient(var(--mv-metal), var(--mv-metal)) 68.041% 36% / 3% 25% no-repeat,
    linear-gradient(var(--mv-metal), var(--mv-metal)) 66.304% 50.515% / 8% 3% no-repeat,
    linear-gradient(180deg, var(--mv-metal-hi), var(--mv-metal)) 50% 16.931% / 29% 5.5% no-repeat,
    radial-gradient(25% 3.6% at 50% 85.5%, var(--mv-shade), transparent),
    linear-gradient(180deg, var(--mv-wall-2) 0 72%, var(--mv-floor) 72% 100%);
}

.sx-media-viewer__art[data-art="blender"]::before {
  content: "";
  left: 37%;
  top: 21.5%;
  width: 26%;
  height: 40%;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
  background:
    linear-gradient(90deg, var(--mv-glass-edge) 0 7%, var(--mv-glass) 7% 21%, var(--mv-glass-hi) 21% 30%, var(--mv-glass) 30% 88%, var(--mv-glass-edge) 94%);
}

.sx-media-viewer__art[data-art="blender"]::after {
  content: "";
  left: 45%;
  top: 28%;
  width: 10%;
  height: 26%;
  clip-path: polygon(40% 0, 26% 38%, 64% 60%, 38% 100%, 54% 100%, 80% 58%, 42% 36%, 56% 0);
  background:
    var(--mv-crack);
}

.sx-media-viewer__art[data-art="unboxing"] {
  background:
    radial-gradient(2.2% 2.933% at 50% 51%, var(--mv-metal) 94%, transparent 100%),
    radial-gradient(7.6% 10.133% at 50% 51%, var(--mv-glass) 94%, transparent 100%),
    radial-gradient(11% 14.667% at 50% 51%, var(--mv-metal) 94%, transparent 100%),
    radial-gradient(4.6% 5.2% at 36.5% 33%, var(--mv-paper) 70%, transparent 100%),
    radial-gradient(5.6% 5.8% at 64% 69.5%, var(--mv-paper) 70%, transparent 100%),
    radial-gradient(4.2% 4.8% at 37.5% 70%, var(--mv-paper) 70%, transparent 100%),
    linear-gradient(180deg, var(--mv-shade), transparent) 50% 30.682% / 36% 12% no-repeat,
    linear-gradient(var(--mv-kraft-lo), var(--mv-kraft-lo)) 50% 51.923% / 36% 48% no-repeat,
    linear-gradient(var(--mv-kraft-hi), var(--mv-kraft-hi)) 50% 11.429% / 41% 12.5% no-repeat,
    linear-gradient(var(--mv-kraft-hi), var(--mv-kraft-hi)) 50% 89.326% / 41% 11% no-repeat,
    linear-gradient(var(--mv-kraft), var(--mv-kraft)) 50% 52.381% / 44% 58% no-repeat,
    radial-gradient(40% 44% at 52% 56%, var(--mv-shade), transparent),
    repeating-linear-gradient(90deg, transparent 0 19.6%, var(--mv-grain) 19.6% 20%),
    var(--mv-wall-3);
}

.sx-media-viewer__art[data-art="unboxing"]::before {
  content: "";
  left: 15%;
  top: 22%;
  width: 13%;
  height: 58%;
  clip-path: polygon(0 7%, 100% 0, 100% 100%, 0 93%);
  background:
    var(--mv-kraft-hi);
}

.sx-media-viewer__art[data-art="unboxing"]::after {
  content: "";
  left: 72%;
  top: 22%;
  width: 13%;
  height: 58%;
  clip-path: polygon(0 0, 100% 7%, 100% 93%, 0 100%);
  background:
    var(--mv-kraft-hi);
}

.sx-media-viewer__art[data-art="slip"] {
  background:
    radial-gradient(74% 84% at 22% 10%, var(--mv-light), transparent),
    var(--mv-floor);
}

.sx-media-viewer__art[data-art="slip"]::before {
  content: "";
  left: 28%;
  top: 7%;
  width: 44%;
  height: 86%;
  transform: rotate(-3deg);
  background:
    linear-gradient(var(--sx-c1), var(--sx-c1)) 9.091% 6.565% / 12% 8.6% no-repeat,
    linear-gradient(var(--mv-print), var(--mv-print)) 41.667% 6.804% / 40% 3% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 32.895% 11.452% / 24% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 50% 19.134% / 84% 0.7% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 10% 24.49% / 20% 2% no-repeat,
    linear-gradient(var(--mv-print), var(--mv-print)) 12.5% 28.747% / 36% 2.6% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 11.111% 33.163% / 28% 2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 70% 24.49% / 20% 2% no-repeat,
    linear-gradient(var(--mv-print), var(--mv-print)) 82.353% 28.747% / 32% 2.6% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 73.684% 33.163% / 24% 2% no-repeat,
    linear-gradient(var(--mv-band), var(--mv-band)) 50% 42.797% / 84% 4.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 14.815% 50.102% / 46% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 90.909% 50.102% / 12% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 17.391% 56.237% / 54% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 90.909% 56.237% / 12% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 12.903% 62.372% / 38% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 90.909% 62.372% / 12% 2.2% no-repeat,
    linear-gradient(var(--mv-print-2), var(--mv-print-2)) 87.879% 68.479% / 34% 0.7% no-repeat,
    linear-gradient(var(--mv-print), var(--mv-print)) 89.189% 73.608% / 26% 3% no-repeat,
    repeating-linear-gradient(90deg, var(--mv-print) 0 3%, transparent 3% 5%, var(--mv-print) 5% 6.4%, transparent 6.4% 9%) 14.815% 89.888% / 46% 11% no-repeat,
    radial-gradient(11% 7.5% at 80% 85.5%, transparent 66%, var(--sx-accent) 69% 84%, transparent 87%),
    var(--mv-paper);
}

.sx-media-viewer__art[data-art="slip"]::after {
  content: "";
  left: 29.6%;
  top: 9.4%;
  width: 44%;
  height: 86%;
  transform: rotate(-3deg);
  z-index: -1;
  filter: blur(4px);
  opacity: 0.55;
  background:
    var(--mv-shade);
}

.sx-media-viewer__art[data-art="shelf"] {
  background:
    linear-gradient(var(--mv-paper), var(--mv-paper)) 69.149% 34.077% / 6% 1.4% no-repeat,
    linear-gradient(var(--sx-success), var(--sx-success)) 71.348% 33.511% / 11% 6% no-repeat,
    linear-gradient(var(--mv-tape), var(--mv-tape)) 70.329% 23.288% / 2.6% 27% no-repeat,
    linear-gradient(var(--mv-kraft-hi), var(--mv-kraft-hi)) 76% 23.288% / 25% 27% no-repeat,
    linear-gradient(var(--mv-kraft-lo), var(--mv-kraft-lo)) 45.238% 32.53% / 16% 17% no-repeat,
    linear-gradient(var(--mv-tape), var(--mv-tape)) 25.154% 27.273% / 2.6% 23% no-repeat,
    linear-gradient(var(--mv-kraft), var(--mv-kraft)) 19.753% 27.273% / 19% 23% no-repeat,
    linear-gradient(var(--mv-kraft-lo), var(--mv-kraft-lo)) 21.918% 78.378% / 27% 26% no-repeat,
    linear-gradient(var(--mv-kraft), var(--mv-kraft)) 56.098% 80.247% / 18% 19% no-repeat,
    linear-gradient(var(--mv-tape), var(--mv-tape)) 75.975% 77.143% / 2.6% 30% no-repeat,
    linear-gradient(var(--mv-kraft-hi), var(--mv-kraft-hi)) 79.762% 77.143% / 16% 30% no-repeat,
    linear-gradient(var(--mv-metal-hi), var(--mv-metal-hi)) 50% 45.596% / 80% 3.5% no-repeat,
    linear-gradient(var(--mv-metal-hi), var(--mv-metal-hi)) 50% 87.047% / 80% 3.5% no-repeat,
    linear-gradient(var(--mv-metal), var(--mv-metal)) 10.309% 100% / 3% 96% no-repeat,
    linear-gradient(var(--mv-metal), var(--mv-metal)) 89.691% 100% / 3% 96% no-repeat,
    linear-gradient(180deg, var(--mv-wall-3) 0 92%, var(--mv-floor) 92%);
}

@media (prefers-reduced-motion: reduce) {
  .sx-media-viewer__bar,
  .sx-media-viewer__strip,
  .sx-media-viewer__box[data-state="open"] :is(.sx-media-viewer__bar, .sx-media-viewer__strip) {
    transform: none;
  }

  .sx-media-viewer__thumb:hover > .sx-media-viewer__art {
    transform: none;
  }
}


/* ---- Callout (callout) ---- */
/* ==========================================================================
   Callout — inline message: tone, icon, title, body, actions and dismiss
   Root: data-tone="info | success | warning | danger", data-state="open | closed",
         data-appear while a newly added callout waits to slide in.
   The root is a one-row grid. Closing turns the row from 1fr to 0fr so the space folds away and
   the callouts below glide up; opening grows it back. The gap to the next callout sits inside the
   clipped child, so a folded callout leaves nothing behind.
   ========================================================================== */

.sx-callout {
  --cl-ink: var(--sx-info-ink);
  --cl-soft: var(--sx-info-soft);
  --cl-line: var(--sx-info-line);
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-callout[data-tone="success"] {
  --cl-ink: var(--sx-success-ink);
  --cl-soft: var(--sx-success-soft);
  --cl-line: var(--sx-success-line);
}

.sx-callout[data-tone="warning"] {
  --cl-ink: var(--sx-warning-ink);
  --cl-soft: var(--sx-warning-soft);
  --cl-line: var(--sx-warning-line);
}

.sx-callout[data-tone="danger"] {
  --cl-ink: var(--sx-danger-ink);
  --cl-soft: var(--sx-danger-soft);
  --cl-line: var(--sx-danger-line);
}

.sx-callout__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-callout__box {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 10px 12px 12px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--cl-soft);
  box-shadow: inset 0 0 0 1px var(--cl-line);
  transform-origin: 50% 0;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    margin-top var(--sx-dur-3) var(--sx-ease-in-out);
}

/* Space above every callout that has an open one before it. It sits inside the clip, so it folds
   away with its own callout, and it eases in step when the callout above opens or closes, so a
   stack never jumps when one is added or removed at either end. */
.sx-callout[data-state="open"] ~ .sx-callout > .sx-callout__clip > .sx-callout__box {
  margin-top: 10px;
}

.sx-callout__icon {
  display: grid;
  place-items: center;
  height: 20px;
  flex: none;
  color: var(--cl-ink);
  --sx-icon-size: 16px;
}

.sx-callout__body {
  flex: 1;
  min-width: 0;
}

.sx-callout__title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  line-height: 20px;
  color: var(--sx-ink);
}

.sx-callout__text {
  margin-top: 1px;
  font-size: var(--sx-fs-sm);
  line-height: 18px;
  color: var(--sx-ink-2);
  text-wrap: pretty;
}

.sx-callout__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

/* The main action sits on a raised fill with a tone hairline, so it reads on every tint. */
.sx-callout__actions > .sx-btn:not(.sx-btn--ghost) {
  --_bg: var(--sx-raised);
  --_bg-hover: var(--sx-raised-hover);
  --_bg-active: var(--sx-raised-hover);
  --_border: var(--cl-line);
}

/* Ghost icon button from base.css, pulled into the corner so its icon lines up with the title. */
.sx-callout__close {
  margin: -4px -4px 0 0;
}

/* ---------- States ---------- */

/* Closing: the row folds (quicker than opening) while the box fades and settles. */
.sx-callout[data-state="closed"] {
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-in-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-callout[data-state="closed"] > .sx-callout__clip > .sx-callout__box {
  opacity: 0;
  transform: scale(0.98);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-in-out);
}

/* A callout added later waits closed with its box lifted, then slides down into place. */
.sx-callout[data-appear] > .sx-callout__clip > .sx-callout__box {
  transform: translateY(-6px);
}

/* ---------- Demo: a fixed, top-aligned box so the stage never re-centres ---------- */
.sx-callout-demo {
  display: grid;
  align-content: start;
  width: 460px;
  height: 300px;
}

@media (prefers-reduced-motion: reduce) {
  .sx-callout[data-state="closed"] > .sx-callout__clip > .sx-callout__box,
  .sx-callout[data-appear] > .sx-callout__clip > .sx-callout__box {
    transform: none;
  }
}


/* ---- Top Notice (top-notice) ---- */
/* ==========================================================================
   Top Notice — slim announcement bar above the page
   Root: role="region", data-state="open | closed". The bar opens with the grid-rows trick, so the
   page below moves down with it, and slides out from behind the top edge.
   Notices are stacked in one grid cell: [data-active] is shown, [data-leaving] is the one that just
   left (it drifts up while the next rises in), the rest wait below, blurred and inert.
   Pager dots: aria-current="true" on the active one.
   ========================================================================== */

.sx-top-notice {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-in-out);
}

.sx-top-notice[data-state="open"] {
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-top-notice__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-top-notice__bar {
  --tn-side: 96px;
  display: grid;
  grid-template-columns: minmax(var(--tn-side), 1fr) minmax(0, auto) minmax(var(--tn-side), 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: calc(var(--sx-h-md) + 6px);
  padding: 0 8px;
  font-size: var(--sx-fs-base);
  line-height: 1.3;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow:
    var(--sx-inset-highlight),
    inset 0 -1px 0 color-mix(in srgb, var(--sx-on-primary) 10%, transparent);
  opacity: 0;
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform var(--sx-dur-3) var(--sx-ease-in-out),
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-top-notice[data-state="open"] .sx-top-notice__bar {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s;
}

.sx-top-notice__bar :focus-visible {
  outline-color: color-mix(in srgb, var(--sx-on-primary) 70%, transparent);
}

/* ---------- Notices ---------- */
.sx-top-notice__track {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
}

.sx-top-notice__item {
  grid-area: 1 / 1;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  white-space: nowrap;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(4px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    filter var(--sx-dur-4) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-top-notice__item[data-leaving] {
  transform: translateY(-4px);
}

/* The incoming notice starts a beat later, so the two never read on top of each other. */
.sx-top-notice__item[data-active] {
  opacity: 1;
  filter: none;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 70ms,
    filter var(--sx-dur-4) var(--sx-ease-out) 70ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 70ms,
    visibility 0s;
}

.sx-top-notice__label {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  background: color-mix(in srgb, var(--sx-on-primary) 15%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-on-primary) 14%, transparent);
}

.sx-top-notice__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-top-notice__link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 4px;
  border-radius: var(--sx-r-xs);
  font-weight: 500;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-top-notice__link > .sx-icon {
  --sx-icon-size: 13px;
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-top-notice__link:hover {
  text-decoration-color: currentColor;
}

.sx-top-notice__link:hover > .sx-icon {
  transform: translateX(2px);
}

/* ---------- Pager and close ---------- */
.sx-top-notice__side {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-top-notice__dots {
  display: flex;
  align-items: center;
}

.sx-top-notice__dot {
  position: relative;
  width: 16px;
  height: 24px;
  border-radius: var(--sx-r-xs);
}

/* One pill per dot, clipped to a circle until it is the current notice. */
.sx-top-notice__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 6px;
  margin-top: -3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--sx-on-primary) 36%, transparent);
  clip-path: inset(0 5px round 3px);
  transition:
    clip-path var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-top-notice__dot:hover::before {
  background: color-mix(in srgb, var(--sx-on-primary) 62%, transparent);
}

.sx-top-notice__dot[aria-current="true"]::before {
  background: var(--sx-on-primary);
  clip-path: inset(0 0 round 3px);
}

.sx-top-notice__close {
  display: grid;
  place-items: center;
  width: var(--sx-h-sm);
  height: var(--sx-h-sm);
  border-radius: var(--sx-r-sm);
  color: color-mix(in srgb, var(--sx-on-primary) 72%, transparent);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-top-notice__close:hover {
  color: var(--sx-on-primary);
  background: color-mix(in srgb, var(--sx-on-primary) 12%, transparent);
}

.sx-top-notice__close:active {
  transform: scale(0.94);
}

/* ---------- Demo: a small app page under the bar ---------- */
.sx-top-notice-demo {
  display: grid;
  align-content: start;
  width: 720px;
  height: 420px;
  overflow: hidden;
  isolation: isolate;
}

.sx-top-notice-demo__head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-top-notice-demo__mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: 14px;
}

.sx-top-notice-demo__brand {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-top-notice-demo__nav {
  display: flex;
  gap: 2px;
  margin: 0 auto 0 10px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-top-notice-demo__nav > span {
  padding: 4px 9px;
  border-radius: var(--sx-r-sm);
}

.sx-top-notice-demo__nav > [aria-current] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-top-notice-demo__page {
  display: grid;
  gap: 16px;
  padding: 20px 20px 0;
}

.sx-top-notice-demo__hello {
  font-size: var(--sx-fs-xl);
}

.sx-top-notice-demo__lede {
  margin-top: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-top-notice-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sx-top-notice-demo__stat {
  display: grid;
  gap: 3px;
  padding: 11px 14px 12px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-top-notice-demo__stat strong {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-top-notice-demo__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-top-notice-demo__row {
  display: grid;
  grid-template-columns: 20px 112px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  height: 42px;
  padding: 0 14px;
  font-size: var(--sx-fs-sm);
}

.sx-top-notice-demo__row + .sx-top-notice-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-top-notice-demo__row > .sx-avatar[data-tone="1"] {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-top-notice-demo__row > .sx-avatar[data-tone="2"] {
  --sx-avatar-bg: var(--sx-success-soft);
  --sx-avatar-ink: var(--sx-success-ink);
}

.sx-top-notice-demo__row > .sx-avatar[data-tone="3"] {
  --sx-avatar-bg: var(--sx-warning-soft);
  --sx-avatar-ink: var(--sx-warning-ink);
}

.sx-top-notice-demo__name {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-top-notice-demo__subject {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink-2);
}

.sx-top-notice-demo__time {
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sx-top-notice__bar,
  .sx-top-notice[data-state="open"] .sx-top-notice__bar,
  .sx-top-notice__item,
  .sx-top-notice__item[data-leaving],
  .sx-top-notice__link:hover > .sx-icon,
  .sx-top-notice__close:active {
    transform: none;
  }
}


/* ---- Blank State (blank-state) ---- */
/* ==========================================================================
   Blank State — empty screens that explain the space and offer the first step
   Root:  .sx-blank-state[data-variant="first-use | no-results | error"]
   Views: .sx-blank-state__view, stacked in one grid cell. data-state="active | leaving";
          data-enter marks a view that arrived after the first render, so the initial content
          never animates in. The leaving view fades out faster than the new one sharpens in.
   Art:   inline SVG painted only through the .sx-blank-state__p-* classes (tokens), its
          .sx-blank-state__part groups rise in one after another (--bs-i).
   ========================================================================== */

.sx-blank-state {
  display: grid;
  width: 100%;
  min-width: 0;
  text-align: center;
  color: var(--sx-ink);
}

.sx-blank-state__view {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 24px 28px;
}

/* ---------- Illustration ---------- */
.sx-blank-state__art {
  width: 132px;
  height: 96px;
  margin-bottom: 18px;
}

.sx-blank-state__svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sx-blank-state__part {
  transform-box: fill-box;
  transform-origin: center;
}

.sx-blank-state__p-ground {
  fill: var(--sx-fill);
}

.sx-blank-state__p-back,
.sx-blank-state__p-line {
  fill: var(--sx-fill-strong);
}

.sx-blank-state__p-faint {
  fill: var(--sx-fill);
}

.sx-blank-state__p-card,
.sx-blank-state__p-tray {
  fill: var(--sx-surface);
  stroke: var(--sx-line-strong);
  stroke-width: 1;
}

.sx-blank-state__p-tray {
  fill: var(--sx-surface-3);
}

.sx-blank-state__p-dash {
  fill: none;
  stroke: var(--sx-line-strong);
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.sx-blank-state__p-accent {
  fill: var(--sx-accent);
}

.sx-blank-state__p-soft {
  fill: var(--sx-accent-soft);
  stroke: var(--sx-accent-line);
  stroke-width: 1;
}

.sx-blank-state__p-lens {
  fill: var(--sx-accent-soft);
  stroke: var(--sx-accent);
  stroke-width: 3.5;
}

.sx-blank-state__p-glint {
  fill: none;
  stroke: var(--sx-accent-line);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sx-blank-state__p-handle {
  fill: none;
  stroke: var(--sx-muted);
  stroke-width: 7;
  stroke-linecap: round;
}

.sx-blank-state__p-cable {
  fill: none;
  stroke: var(--sx-faint);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.sx-blank-state__p-metal {
  fill: var(--sx-muted);
}

.sx-blank-state__p-alert {
  fill: var(--sx-danger-soft);
  stroke: var(--sx-danger-line);
  stroke-width: 1;
}

.sx-blank-state__p-danger {
  fill: var(--sx-danger);
}

.sx-blank-state__p-spark {
  fill: none;
  stroke: var(--sx-danger);
  stroke-width: 1.6;
  stroke-linecap: round;
}

/* ---------- Copy ---------- */
.sx-blank-state__title {
  max-width: 340px;
  font-size: var(--sx-fs-lg);
}

.sx-blank-state__text {
  max-width: 320px;
  margin-top: 6px;
  color: var(--sx-muted);
  text-wrap: balance;
}

.sx-blank-state__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  margin-top: 20px;
}

.sx-blank-state__link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--sx-h-md);
  padding: 0 6px;
  border-radius: var(--sx-r-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  text-decoration: none;
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-blank-state__link > span {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blank-state__link > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-blank-state__link:hover {
  color: var(--sx-ink);
}

.sx-blank-state__link:hover > span {
  text-decoration-color: var(--sx-line-strong);
}

.sx-blank-state__link:hover > .sx-icon {
  color: var(--sx-ink);
  transform: translateX(2px);
}

/* ---------- Crossfade between views ---------- */
.sx-blank-state__view[data-enter][data-state="active"] {
  animation: bs-view-in var(--sx-dur-4) var(--sx-ease-out) 60ms both;
}

.sx-blank-state__view[data-state="leaving"] {
  pointer-events: none;
  user-select: none;
  animation: bs-view-out var(--sx-dur-2) var(--sx-ease-out) forwards;
}

.sx-blank-state__view[data-enter] .sx-blank-state__part {
  animation: bs-part-rise var(--sx-dur-4) var(--sx-ease-out) both;
  animation-delay: calc(90ms + var(--bs-i, 0) * 70ms);
}

.sx-blank-state__view[data-enter] .sx-blank-state__part--lift {
  animation-name: bs-part-lift;
}

.sx-blank-state__view[data-enter] .sx-blank-state__part--pop {
  animation-name: bs-part-pop;
  animation-timing-function: var(--sx-ease-spring);
}

.sx-blank-state__view[data-enter] .sx-blank-state__part--slide {
  animation-name: bs-part-slide;
}

.sx-blank-state__view[data-enter] .sx-blank-state__part--left {
  animation-name: bs-part-left;
}

.sx-blank-state__view[data-enter] .sx-blank-state__part--right {
  animation-name: bs-part-right;
}

/* ---------- Demo layout: a fixed panel, so changing views never moves the stage ---------- */
.sx-blank-state-demo {
  display: grid;
  width: 460px;
  height: 320px;
  overflow: hidden;
}

.sx-blank-state-demo > .sx-blank-state {
  height: 100%;
}

@keyframes bs-view-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(6px);
  }
}

@keyframes bs-view-out {
  to {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(-4px);
  }
}

@keyframes bs-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes bs-part-rise {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes bs-part-lift {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

@keyframes bs-part-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes bs-part-slide {
  from {
    opacity: 0;
    transform: translate(10px, 4px) rotate(-8deg);
  }
}

@keyframes bs-part-left {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

@keyframes bs-part-right {
  from {
    opacity: 0;
    transform: translateX(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-blank-state__view[data-enter][data-state="active"] {
    animation-name: sx-fade-in;
  }

  .sx-blank-state__view[data-state="leaving"] {
    animation-name: bs-fade-out;
  }

  .sx-blank-state__view[data-enter] .sx-blank-state__part {
    animation: none;
  }

  .sx-blank-state__link:hover > .sx-icon {
    transform: none;
  }
}


/* ---- Page Steps (page-steps) ---- */
/* ==========================================================================
   Page Steps — pagination with a gliding current-page thumb
   Root: <nav class="sx-page-steps" aria-label="Pagination">, [data-ready] turns the glide on.
   Page list: a fixed number of slots (page buttons and gaps, keyed by data-flip-key) so the
   list keeps its width; the current page has aria-current="page".
   Script writes --ps-x / --ps-w on .sx-page-steps__pages from the current button's offset box.
   ========================================================================== */

.sx-page-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-page-steps__info,
.sx-page-steps__nav {
  display: flex;
  align-items: center;
  min-width: 0;
}

.sx-page-steps__info {
  gap: 10px;
}

.sx-page-steps__nav {
  gap: 2px;
}

/* ---------- Range label ----------
   The visible text and an invisible copy of the widest possible label share one grid cell,
   so the cell keeps its width whatever page is shown. */
.sx-page-steps__range {
  display: inline-grid;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-page-steps__range > * {
  grid-area: 1 / 1;
}

.sx-page-steps__range strong {
  color: var(--sx-ink);
  font-weight: var(--sx-strong-weight);
}

.sx-page-steps__range-text {
  animation: ps-range-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-page-steps__range-sizer {
  visibility: hidden;
}

/* ---------- Rows per page ---------- */
.sx-page-steps__size {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.sx-page-steps__select {
  height: var(--sx-h-sm);
  padding: 0 24px 0 9px;
  border: 0;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-page-steps__select:hover {
  box-shadow: inset 0 0 0 1px var(--sx-faint);
}

.sx-page-steps__select:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-page-steps__size > .sx-icon {
  position: absolute;
  right: 7px;
  --sx-icon-size: 13px;
  color: var(--sx-muted);
  pointer-events: none;
}

/* ---------- Page list ---------- */
.sx-page-steps__pages {
  --ps-pad: 2px;
  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--sx-h-sm);
  padding: var(--ps-pad);
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
  user-select: none;
}

.sx-page-steps__page,
.sx-page-steps__gap {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: calc(var(--sx-h-sm) - 4px);
  padding: 0 5px;
  border-radius: calc(var(--sx-r-md) - var(--ps-pad));
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.sx-page-steps__page {
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-page-steps__page:hover {
    color: var(--sx-ink-2);
  }
}

.sx-page-steps__page[aria-current="page"] {
  color: var(--sx-ink);
  font-weight: 600;
}

.sx-page-steps__page:focus-visible {
  outline-offset: 0;
}

.sx-page-steps__gap {
  color: var(--sx-faint);
}

/* One thumb under the current page; it glides instead of each button lighting up. */
.sx-page-steps__thumb {
  position: absolute;
  z-index: 0;
  top: var(--ps-pad);
  bottom: var(--ps-pad);
  left: 0;
  width: var(--ps-w, 0px);
  border-radius: calc(var(--sx-r-md) - var(--ps-pad));
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--ps-x, 0px));
  pointer-events: none;
}

.sx-page-steps[data-ready] .sx-page-steps__thumb {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Jump to page ---------- */
.sx-page-steps__jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 6px;
  white-space: nowrap;
}

.sx-page-steps__jump-input.sx-input {
  width: 38px;
  height: var(--sx-h-sm);
  padding: 0 5px;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* ---------- Demo: an orders table with the pager in its footer ---------- */
.sx-page-steps-demo {
  width: 620px;
  overflow: hidden;
}

.sx-page-steps-demo__head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 16px 18px 8px;
}

.sx-page-steps-demo__title {
  font-size: var(--sx-fs-lg);
}

.sx-page-steps-demo__count {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* The last row fades out: the page holds more rows than the preview shows. */
.sx-page-steps-demo__body {
  padding: 0 10px;
  -webkit-mask-image: linear-gradient(to bottom, var(--sx-ink) 64%, transparent);
  mask-image: linear-gradient(to bottom, var(--sx-ink) 64%, transparent);
}

.sx-page-steps-demo__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sx-fs-sm);
}

.sx-page-steps-demo__table th {
  height: 32px;
  padding: 0 8px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  text-align: left;
  color: var(--sx-muted);
  border-bottom: 1px solid var(--sx-line-soft);
}

.sx-page-steps-demo__table td {
  height: 40px;
  padding: 0 8px;
  color: var(--sx-ink-2);
  white-space: nowrap;
  border-bottom: 1px solid var(--sx-line-soft);
}

.sx-page-steps-demo__table td:first-child {
  width: 96px;
  color: var(--sx-ink);
}

.sx-page-steps-demo__table td:nth-child(3) {
  width: 110px;
}

.sx-page-steps-demo__table .sx-page-steps-demo__num {
  width: 96px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-page-steps-demo__row {
  animation: ps-row-in var(--sx-dur-3) var(--sx-ease-out) both;
  animation-delay: calc(var(--i, 0) * 28ms);
}

.sx-page-steps-demo__foot {
  padding: 11px 12px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@keyframes ps-range-in {
  from {
    opacity: 0.2;
    filter: blur(2px);
  }
}

@keyframes ps-row-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-page-steps[data-ready] .sx-page-steps__thumb {
    transition: none;
  }

  .sx-page-steps__range-text {
    animation-name: sx-fade-in;
  }

  .sx-page-steps-demo__row {
    animation-name: sx-fade-in;
    animation-delay: 0s;
  }
}


/* ---- Site Chat (site-chat) ---- */
/* ==========================================================================
   Site Chat — a launcher bubble that opens a conversation panel on a website
   Root (.sx-site-chat): data-open, data-status="online | offline", data-nudge="a | b"
   while the bubble nudges. It sits in the bottom-right corner of its positioned
   container (add .sx-site-chat--fixed to pin it to the viewport instead).
   Panel and teaser use data-state="open"; messages carry data-from="agent | visitor"
   and data-new while they slide in; quick replies collapse with data-state="hidden".
   ========================================================================== */

.sx-site-chat {
  --sc-panel-w: 340px;
  --sc-panel-h: 444px;
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: var(--sx-z-pop);
  width: 52px;
  height: 52px;
}

.sx-site-chat--fixed {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.sx-site-chat .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-site-chat .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-site-chat .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-site-chat .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-site-chat .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

/* Soft tones are translucent: lay them on the surface so nothing shows through. */
.sx-site-chat .sx-avatar {
  background: linear-gradient(var(--sx-avatar-bg, var(--sx-surface-3)), var(--sx-avatar-bg, var(--sx-surface-3))), var(--sx-surface);
}

/* ---------- Quick Run ---------- */
.sx-site-chat__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-inset-highlight), var(--sx-shadow-primary), var(--sx-shadow-pop);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring), box-shadow var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 22px;
}

@media (hover: hover) {
  .sx-site-chat__launcher:hover {
    transform: scale(1.05);
  }
}

.sx-site-chat__launcher:active {
  transform: scale(0.95);
}

.sx-site-chat__launcher > .sx-icon {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-site-chat__launcher > .sx-site-chat__icon-close {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}

.sx-site-chat[data-open] .sx-site-chat__icon-open {
  opacity: 0;
  transform: rotate(90deg) scale(0.6);
}

.sx-site-chat[data-open] .sx-site-chat__icon-close {
  opacity: 1;
  transform: none;
}

.sx-site-chat__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 19px;
  height: 19px;
  font-size: var(--sx-fs-2xs);
  box-shadow: 0 0 0 2px var(--sx-surface);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-site-chat__badge[data-empty] {
  opacity: 0;
  transform: scale(0.4);
}

.sx-site-chat[data-nudge="a"] .sx-site-chat__launcher { animation: sc-nudge-a 0.9s var(--sx-ease-out); }
.sx-site-chat[data-nudge="b"] .sx-site-chat__launcher { animation: sc-nudge-b 0.9s var(--sx-ease-out); }

/* ---------- Teaser: the greeting peeking out next to the bubble ---------- */
.sx-site-chat__teaser {
  position: absolute;
  right: 0;
  bottom: 66px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 236px;
  padding: 10px 12px 11px 10px;
  border-radius: var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xs) var(--sx-r-xl);
  text-align: left;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  transform-origin: right bottom;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-site-chat__teaser:not([data-state="open"]) {
  opacity: 0;
  transform: translateY(8px) scale(0.92);
  visibility: hidden;
  pointer-events: none;
}

.sx-site-chat__teaser[data-state="open"] {
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-spring),
    visibility 0s;
}

.sx-site-chat__teaser-text {
  display: -webkit-box;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-ink-2);
}

.sx-site-chat__teaser-text strong {
  display: block;
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

/* ---------- Panel ---------- */
.sx-site-chat__panel {
  position: absolute;
  right: 0;
  bottom: 66px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: var(--sc-panel-w);
  height: var(--sc-panel-h);
  overflow: hidden;
  border-radius: var(--sx-r-2xl);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  transform-origin: calc(100% - 26px) calc(100% + 40px);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-in),
    visibility 0s linear var(--sx-dur-3);
}

.sx-site-chat__panel:not([data-state="open"]) {
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  visibility: hidden;
  pointer-events: none;
}

.sx-site-chat__panel[data-state="open"] {
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s;
}

.sx-site-chat__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 8px;
  padding: 16px 12px 15px 16px;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-inset-highlight);
}

.sx-site-chat__team {
  --sx-avatar-size: 28px;
}

.sx-site-chat__team > .sx-avatar {
  box-shadow: 0 0 0 2px var(--sx-primary), inset 0 0 0 1px var(--sx-line);
}

.sx-site-chat__team > .sx-avatar + .sx-avatar {
  margin-left: -4px;
}

.sx-site-chat__min {
  align-self: start;
  margin: -4px -2px 0 0;
  color: color-mix(in srgb, var(--sx-on-primary) 80%, transparent);
}

@media (hover: hover) {
  .sx-site-chat__min:hover:not(:disabled) {
    color: var(--sx-on-primary);
  }
}

.sx-site-chat__who {
  display: grid;
  grid-column: 1 / -1;
  gap: 2px;
}

.sx-site-chat__brand {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-site-chat__reply-time {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  color: color-mix(in srgb, var(--sx-on-primary) 74%, transparent);
}

.sx-site-chat__reply-time > .sx-dot {
  color: var(--sx-success);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--sx-success) 30%, transparent);
}

.sx-site-chat[data-status="offline"] .sx-site-chat__reply-time > .sx-dot {
  color: var(--sx-faint);
  box-shadow: none;
}

/* ---------- Messages ---------- */
.sx-site-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 14px 12px;
  background: var(--sx-surface);
}

.sx-site-chat__msg {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  max-width: 86%;
}

.sx-site-chat__msg[data-from="visitor"] {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.sx-site-chat__msg[data-new] {
  animation: sc-msg-in var(--sx-dur-4) var(--sx-ease-out) both;
  transform-origin: left bottom;
}

.sx-site-chat__msg[data-new][data-from="visitor"] {
  transform-origin: right bottom;
}

.sx-site-chat__msg > .sx-avatar {
  margin-bottom: 2px;
}

.sx-site-chat__bubble {
  min-width: 0;
  padding: 8px 12px;
  border-radius: var(--sx-r-2xl) var(--sx-r-2xl) var(--sx-r-2xl) var(--sx-r-xs);
  font-size: var(--sx-fs-base);
  line-height: 1.45;
  color: var(--sx-ink);
  background: var(--sx-surface-3);
  overflow-wrap: anywhere;
}

.sx-site-chat__msg[data-from="visitor"] .sx-site-chat__bubble {
  border-radius: var(--sx-r-2xl) var(--sx-r-2xl) var(--sx-r-xs) var(--sx-r-2xl);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-inset-highlight);
}

/* Typing: three dots in an agent bubble. */
.sx-site-chat__dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 35px;
  padding: 0 13px;
}

.sx-site-chat__dots > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-muted);
  opacity: 0.35;
  animation: sc-dot 1.25s var(--sx-ease-in-out) infinite;
}

.sx-site-chat__dots > span:nth-child(2) { animation-delay: 0.16s; }
.sx-site-chat__dots > span:nth-child(3) { animation-delay: 0.32s; }

/* Quick replies: under the greeting until the visitor writes. */
.sx-site-chat__chips {
  display: grid;
  grid-template-rows: 1fr;
  margin: 0 0 4px 31px;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out), margin var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-site-chat__chips[data-state="hidden"] {
  grid-template-rows: 0fr;
  margin-bottom: -8px;
}

.sx-site-chat__chips-clip {
  min-height: 0;
  overflow: hidden;
}

.sx-site-chat__chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-site-chat__chips[data-state="hidden"] .sx-site-chat__chip-row {
  opacity: 0;
  transform: translateY(-4px);
}

.sx-site-chat__chip {
  height: 28px;
  padding: 0 11px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-1) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-site-chat__chip:hover {
    background: var(--sx-raised-hover);
    box-shadow: inset 0 0 0 1px var(--sx-faint);
  }
}

.sx-site-chat__chip:active {
  transform: scale(0.97);
}

.sx-site-chat__away-note {
  align-self: stretch;
  padding: 10px 12px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  color: var(--sx-ink-2);
  background: var(--sx-fill);
}

/* ---------- Footer: composer, or the email form when offline ---------- */
.sx-site-chat__foot {
  padding: 10px 12px 12px;
  background: var(--sx-surface);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-site-chat__composer {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 5px 0 12px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-site-chat__composer:focus-within,
.sx-site-chat__composer[data-focused] {
  background: var(--sx-surface);
  box-shadow: var(--sx-focus-ring);
}

.sx-site-chat__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: transparent;
  outline: none;
}

.sx-site-chat__send {
  --_r: 50%;
}

.sx-site-chat__away {
  display: grid;
  gap: 8px;
}

.sx-site-chat__away-row {
  display: flex;
  gap: 6px;
}

.sx-site-chat__away .sx-input {
  flex: 1;
  min-width: 0;
}

.sx-site-chat__away .sx-error-text,
.sx-site-chat__away .sx-hint {
  padding: 0 2px;
}

.sx-site-chat__thanks {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
  animation: sc-fade-up var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

/* ---------- Demo: a small shop page behind the widget ---------- */
.sx-site-chat-demo {
  position: relative;
  width: 420px;
  height: 560px;
  overflow: hidden;
  isolation: isolate;
}

.sx-site-chat-demo__site {
  display: grid;
  align-content: start;
  gap: 18px;
  height: 100%;
  padding: 0 22px;
  color: var(--sx-ink);
  user-select: none;
}

.sx-site-chat-demo__nav {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin: 0 -22px;
  padding: 0 22px;
  font-size: var(--sx-fs-sm);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-site-chat-demo__logo {
  width: 18px;
  height: 18px;
  border-radius: var(--sx-r-xs);
  background: conic-gradient(from 45deg, var(--sx-c2), var(--sx-c3), var(--sx-c2));
}

.sx-site-chat-demo__brand {
  flex: 1;
  font-weight: var(--sx-heading-weight);
}

.sx-site-chat-demo__links {
  display: flex;
  gap: 14px;
  color: var(--sx-muted);
}

.sx-site-chat-demo__nav > .sx-icon {
  margin-left: 6px;
  color: var(--sx-ink-2);
  --sx-icon-size: 16px;
}

.sx-site-chat-demo__hero {
  display: grid;
  gap: 8px;
  justify-items: start;
  padding-top: 8px;
}

.sx-site-chat-demo__eyebrow {
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--sx-accent-ink);
}

.sx-site-chat-demo__title {
  max-width: 280px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.15;
}

.sx-site-chat-demo__lede {
  max-width: 290px;
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
}

.sx-site-chat-demo__cta {
  display: inline-flex;
  align-items: center;
  height: 32px;
  margin-top: 4px;
  padding: 0 14px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
}

.sx-site-chat-demo__products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sx-site-chat-demo__product {
  display: grid;
  gap: 3px;
  font-size: var(--sx-fs-sm);
}

.sx-site-chat-demo__product > span:last-child {
  color: var(--sx-muted);
}

.sx-site-chat-demo__photo {
  height: 150px;
  margin-bottom: 6px;
  border-radius: var(--sx-r-lg);
  background:
    radial-gradient(60% 48% at 50% 64%, color-mix(in srgb, var(--sx-c2) 26%, transparent), transparent 70%),
    linear-gradient(160deg, var(--sx-surface-3), var(--sx-surface-2));
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-site-chat-demo__product + .sx-site-chat-demo__product .sx-site-chat-demo__photo {
  background:
    radial-gradient(56% 44% at 48% 62%, color-mix(in srgb, var(--sx-c3) 24%, transparent), transparent 70%),
    linear-gradient(200deg, var(--sx-surface-3), var(--sx-surface-2));
}

/* ---------- Keyframes ---------- */
@keyframes sc-nudge-a {
  0%, 100% { transform: none; }
  18% { transform: translateY(-6px) scale(1.06); }
  34% { transform: rotate(-10deg) scale(1.06); }
  48% { transform: rotate(8deg) scale(1.04); }
  62% { transform: rotate(-5deg); }
  76% { transform: rotate(2deg); }
}

@keyframes sc-nudge-b {
  0%, 100% { transform: none; }
  18% { transform: translateY(-6px) scale(1.06); }
  34% { transform: rotate(-10deg) scale(1.06); }
  48% { transform: rotate(8deg) scale(1.04); }
  62% { transform: rotate(-5deg); }
  76% { transform: rotate(2deg); }
}

@keyframes sc-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
}

@keyframes sc-dot {
  0%, 62%, 100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2.5px);
  }
}

@keyframes sc-fade-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-site-chat[data-nudge] .sx-site-chat__launcher {
    animation: none;
  }

  .sx-site-chat__launcher:hover,
  .sx-site-chat__launcher:active,
  .sx-site-chat__launcher > .sx-icon,
  .sx-site-chat__teaser:not([data-state="open"]),
  .sx-site-chat__panel:not([data-state="open"]),
  .sx-site-chat__chips[data-state="hidden"] .sx-site-chat__chip-row {
    transform: none;
  }

  .sx-site-chat__msg[data-new],
  .sx-site-chat__thanks {
    animation-name: sx-fade-in;
  }

  .sx-site-chat__dots > span {
    animation-name: sx-pulse;
  }
}


/* ---- Typing Dots (typing-dots) ---- */
/* ==========================================================================
   Typing Dots — "someone is typing" for chats, tickets and comment threads
   Root: role="status", data-variant="bubble | line", data-state="on | off".
   "off" fades the indicator out but keeps its space, so nothing below jumps.
   Parts: __avatars (avatar stack; data-enter / data-leaving while people come and go),
          __dots (three __dot; a chat bubble in the bubble variant), __label > __text.
   ========================================================================== */

.sx-typing-dots {
  --td-dot: 6px;
  --td-gap: 4px;
  position: relative;
  display: inline-flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 100%;
  vertical-align: middle;
  transform-origin: left bottom;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    filter var(--sx-dur-3) var(--sx-ease-out);
}

/* Exits are quicker than entrances. */
.sx-typing-dots[data-state="off"] {
  opacity: 0;
  filter: blur(3px);
  transform: translateY(5px) scale(0.94);
  pointer-events: none;
  transition-duration: var(--sx-dur-2);
}

.sx-typing-dots[data-state="off"] .sx-typing-dots__dot {
  animation-play-state: paused;
}

/* ---------- Avatars ---------- */
.sx-typing-dots .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-typing-dots .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-typing-dots .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-typing-dots .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-typing-dots .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

.sx-typing-dots__avatars {
  flex: none;
  margin-bottom: 2px;
}

.sx-typing-dots__avatars > .sx-avatar + .sx-avatar {
  margin-left: -4px;
}

/* Soft tones are translucent: lay them on the card colour so stacked faces don't show through. */
.sx-typing-dots__avatars > .sx-avatar {
  background: linear-gradient(var(--sx-avatar-bg, var(--sx-surface-3)), var(--sx-avatar-bg, var(--sx-surface-3))), var(--sx-card-bg);
}

.sx-typing-dots__avatars > .sx-avatar[data-enter] {
  animation: td-avatar-in var(--sx-dur-4) var(--sx-ease-spring) both;
}

.sx-typing-dots__avatars > .sx-avatar[data-leaving] {
  animation: td-avatar-out var(--sx-dur-2) var(--sx-ease-in) both;
}

/* ---------- Dots ---------- */
.sx-typing-dots__dots {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--td-gap);
}

.sx-typing-dots[data-variant="bubble"] .sx-typing-dots__dots {
  height: 34px;
  padding: 0 13px;
  border-radius: var(--sx-r-2xl) var(--sx-r-2xl) var(--sx-r-2xl) var(--sx-r-xs);
  background: var(--sx-surface-3);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-typing-dots__dot {
  width: var(--td-dot);
  height: var(--td-dot);
  flex: none;
  border-radius: 50%;
  background: var(--sx-muted);
  opacity: 0.35;
  animation: td-pulse 1.25s var(--sx-ease-in-out) infinite;
}

.sx-typing-dots__dot:nth-child(2) {
  animation-delay: 0.16s;
}

.sx-typing-dots__dot:nth-child(3) {
  animation-delay: 0.32s;
}

/* ---------- Label ---------- */
.sx-typing-dots__label {
  align-self: center;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: var(--sx-lh-tight);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-typing-dots__text {
  display: inline-block;
  animation: td-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-typing-dots__label strong {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

/* ---------- Line: the footer under a composer ---------- */
.sx-typing-dots[data-variant="line"] {
  --td-dot: 4px;
  --td-gap: 3px;
  align-items: center;
  gap: 7px;
  height: 18px;
  padding-left: 2px;
}

.sx-typing-dots[data-variant="line"] .sx-typing-dots__dot {
  background: var(--sx-ink-2);
}

/* ---------- Demo: three places the indicator lives ---------- */
.sx-typing-dots-demo {
  display: grid;
  width: 360px;
  padding: 6px 18px;
}

.sx-typing-dots-demo__row {
  display: grid;
  gap: 7px;
  justify-items: start;
  padding: 14px 0;
}

.sx-typing-dots-demo__row + .sx-typing-dots-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-typing-dots-demo__composer {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: var(--sx-h-md);
  padding: 0 4px 0 12px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-typing-dots-demo__composer > span:first-child {
  flex: 1;
  min-width: 0;
}

.sx-typing-dots-demo__send {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--sx-r-sm);
  color: var(--sx-faint);
  background: var(--sx-fill);
  --sx-icon-size: 14px;
}

/* ---------- Keyframes ---------- */
@keyframes td-pulse {
  0%, 62%, 100% {
    opacity: 0.35;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-2.5px);
  }
}

@keyframes td-swap {
  from {
    opacity: 0;
    filter: blur(2px);
    transform: translateY(3px);
  }
}

@keyframes td-avatar-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@keyframes td-avatar-out {
  to {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-typing-dots,
  .sx-typing-dots[data-state="off"] {
    transform: none;
  }

  .sx-typing-dots__dot {
    animation-name: sx-pulse;
  }

  .sx-typing-dots__text,
  .sx-typing-dots__avatars > .sx-avatar[data-enter] {
    animation-name: sx-fade-in;
  }

  .sx-typing-dots__avatars > .sx-avatar[data-leaving] {
    animation: none;
    opacity: 0;
  }
}


/* ---- Dial Pad (dial-pad) ---- */
/* ==========================================================================
   Dial Pad — number display, 3×4 keypad, call and delete, recent contacts
   Root: data-state="idle | calling", data-valid when the number can be called.
   Keys: data-pressed="a | b" plays the press ripple (the value alternates so quick
   repeats restart it), data-holding while 0 is held for +. The hint carries data-tone.
   ========================================================================== */

.sx-dial-pad {
  --dp-key-h: 44px;
  display: grid;
  width: 300px;
  padding: 16px 20px 0;
  overflow: hidden;
}

.sx-dial-pad .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-dial-pad .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-dial-pad .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-dial-pad .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-dial-pad .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

/* ---------- Display ---------- */
.sx-dial-pad__display {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-bottom: 12px;
}

.sx-dial-pad__input {
  width: 100%;
  height: 38px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-2xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  text-align: center;
  color: var(--sx-ink);
  background: transparent;
  outline: none;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), font-size var(--sx-dur-2) var(--sx-ease-out);
}

.sx-dial-pad__input::placeholder {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-text-weight);
  letter-spacing: 0;
  color: var(--sx-faint);
}

.sx-dial-pad__input:focus-visible {
  box-shadow: var(--sx-focus-ring);
}

.sx-dial-pad__input[data-size="sm"] {
  font-size: var(--sx-fs-xl);
}

.sx-dial-pad__hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-height: 20px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-dial-pad__hint > * {
  animation: dp-hint-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-dial-pad__hint > .sx-icon {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.25;
}

.sx-dial-pad__hint > .sx-avatar {
  --sx-avatar-size: 18px;
  font-size: calc(var(--sx-fs-2xs) - 3px);
}

.sx-dial-pad__hint[data-tone="success"] { color: var(--sx-success-ink); }
.sx-dial-pad__hint[data-tone="info"] { color: var(--sx-info-ink); }
.sx-dial-pad__hint[data-tone="warning"] { color: var(--sx-warning-ink); }
.sx-dial-pad__hint[data-tone="contact"] { color: var(--sx-ink); font-weight: 500; }

/* ---------- Keypad ---------- */
.sx-dial-pad__keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 10px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-dial-pad[data-state="calling"] .sx-dial-pad__keys {
  opacity: 0.55;
}

.sx-dial-pad__key {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  height: var(--dp-key-h);
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-dial-pad__key:hover {
    background: var(--sx-raised-hover);
  }
}

.sx-dial-pad__key:active {
  transform: scale(0.96);
}

.sx-dial-pad__key:focus-visible {
  outline-offset: 2px;
}

.sx-dial-pad__digit {
  font-size: calc(var(--sx-fs-xl) + 2px);
  font-weight: 450;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sx-dial-pad__letters {
  min-height: 11px;
  font-size: calc(var(--sx-fs-2xs) - 1px);
  font-weight: 600;
  line-height: 11px;
  letter-spacing: 0.14em;
  color: var(--sx-muted);
  transition: color var(--sx-dur-4) var(--sx-ease-out), transform var(--sx-dur-4) var(--sx-ease-spring);
}

/* The ripple: a soft disc that grows from the centre and fades. */
.sx-dial-pad__key::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: auto;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sx-fill-strong);
  opacity: 0;
  pointer-events: none;
}

.sx-dial-pad__key[data-pressed="a"]::after { animation: dp-ripple-a 460ms var(--sx-ease-out); }
.sx-dial-pad__key[data-pressed="b"]::after { animation: dp-ripple-b 460ms var(--sx-ease-out); }

/* Holding 0: the plus lights up as the hold completes. */
.sx-dial-pad__key[data-holding] {
  transform: scale(0.96);
  background: var(--sx-fill);
}

.sx-dial-pad__key[data-holding] .sx-dial-pad__letters {
  color: var(--sx-accent-ink);
  transform: scale(1.35);
}

/* ---------- Call and delete ---------- */
.sx-dial-pad__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0 14px;
}

.sx-dial-pad__call {
  --_tone: var(--sx-success);
  display: grid;
  place-items: center;
  grid-column: 2;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: var(--sx-on-success);
  background: var(--_tone);
  box-shadow: var(--sx-inset-highlight), 0 1px 2px color-mix(in srgb, var(--_tone) 40%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--_tone) 70%, transparent);
  transition:
    transform var(--sx-dur-4) var(--sx-ease-spring),
    opacity var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 22px;
}

.sx-dial-pad__call > .sx-icon {
  transition: transform var(--sx-dur-4) var(--sx-ease-spring);
}

@media (hover: hover) {
  .sx-dial-pad__call:not(:disabled):hover {
    background: color-mix(in oklab, var(--_tone), var(--sx-on-success) 10%);
  }
}

.sx-dial-pad__call:not(:disabled):active {
  transform: scale(0.94);
}

.sx-dial-pad__call:disabled {
  opacity: 0.38;
  transform: scale(0.9);
  box-shadow: none;
}

.sx-dial-pad[data-state="calling"] .sx-dial-pad__call {
  --_tone: var(--sx-danger);
  color: var(--sx-on-danger);
}

.sx-dial-pad[data-state="calling"] .sx-dial-pad__call > .sx-icon {
  transform: rotate(135deg);
}

.sx-dial-pad__back {
  justify-self: center;
  grid-column: 3;
  --sx-icon-size: 20px;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    background-color 0.15s ease,
    color 0.15s ease;
}

.sx-dial-pad__back[data-empty] {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.sx-dial-pad__back[data-pressed] {
  --_bg-active: var(--sx-fill-strong);
  color: var(--sx-ink);
  transform: scale(0.94);
}

/* ---------- Recent contacts ---------- */
.sx-dial-pad__recents {
  display: grid;
  gap: 4px;
  margin: 0 -20px;
  padding: 9px 16px 10px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-dial-pad__recents-label {
  padding: 0 4px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-dial-pad__contacts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}

.sx-dial-pad__contact {
  display: grid;
  justify-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 2px 4px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-dial-pad__contact:hover,
.sx-dial-pad__contact[aria-current="true"] {
  background: var(--sx-fill);
}

.sx-dial-pad__contact[aria-current="true"] {
  color: var(--sx-ink);
}

.sx-dial-pad__contact > .sx-avatar {
  --sx-avatar-size: 28px;
  font-size: var(--sx-fs-2xs);
}

.sx-dial-pad__contact > span:last-child {
  max-width: 100%;
}

@keyframes dp-ripple-a {
  0% { opacity: 1; transform: scale(0.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes dp-ripple-b {
  0% { opacity: 1; transform: scale(0.1); }
  100% { opacity: 0; transform: scale(1); }
}

@keyframes dp-flash {
  from { opacity: 0.9; }
  to { opacity: 0; }
}

@keyframes dp-hint-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-dial-pad__key:active,
  .sx-dial-pad__key[data-holding],
  .sx-dial-pad__call:disabled,
  .sx-dial-pad__call:not(:disabled):active,
  .sx-dial-pad__back[data-empty],
  .sx-dial-pad__back[data-pressed] {
    transform: none;
  }

  .sx-dial-pad__key[data-pressed]::after {
    animation-name: dp-flash;
  }

  .sx-dial-pad__hint > * {
    animation-name: sx-fade-in;
  }
}


/* ---- Call Bar (call-bar) ---- */
/* ==========================================================================
   Call Bar — live call status with controls
   Root: data-state="connecting | connected | transferring | ended", data-held, data-muted,
   data-recording. Toggle buttons use aria-pressed; panel buttons aria-expanded.
   Panels (__keypad, __transfer) open with data-state="open" and the grid-rows trick; they
   sit one after the other, so switching between them morphs the height in one motion.
   ========================================================================== */

.sx-call-bar {
  width: 500px;
  overflow: hidden;
}

.sx-call-bar .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-call-bar .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-call-bar .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-call-bar .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-call-bar .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

/* ---------- Caller row ---------- */
.sx-call-bar__main {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px 13px 16px;
}

.sx-call-bar__avatar,
.sx-call-bar__who,
.sx-call-bar__meter {
  transition: opacity var(--sx-dur-4) var(--sx-ease-out), filter var(--sx-dur-4) var(--sx-ease-out);
}

.sx-call-bar__avatar {
  --sx-avatar-size: 38px;
  font-size: var(--sx-fs-md);
}

.sx-call-bar__who {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-call-bar__name {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  line-height: var(--sx-lh-tight);
}

.sx-call-bar__number {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* Audio level: bars scale from the middle, driven by script. */
.sx-call-bar__meter {
  display: flex;
  align-items: center;
  gap: 2.5px;
  height: 22px;
}

.sx-call-bar__level {
  width: 3px;
  height: 100%;
  border-radius: var(--sx-r-pill);
  background: var(--sx-success);
  transform: scaleY(0.14);
  transition: transform 110ms linear, background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-call-bar:not([data-state="connected"]) .sx-call-bar__level,
.sx-call-bar[data-held] .sx-call-bar__level {
  background: var(--sx-faint);
}

.sx-call-bar__status {
  display: grid;
  justify-items: end;
  gap: 1px;
  min-width: 104px;
}

.sx-call-bar__label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-call-bar[data-state="connected"]:not([data-held]) .sx-call-bar__label {
  color: var(--sx-success-ink);
}

.sx-call-bar__label .sx-tabular {
  min-width: 3.2ch;
}

.sx-call-bar__time {
  font-size: var(--sx-fs-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.15;
  transition: color var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-call-bar[data-state="connecting"] .sx-call-bar__time {
  opacity: 0.35;
}

/* ---------- Hold: the caller fades back, the hold time comes forward ---------- */
.sx-call-bar[data-held] .sx-call-bar__avatar,
.sx-call-bar[data-held] .sx-call-bar__who,
.sx-call-bar[data-held] .sx-call-bar__meter,
.sx-call-bar[data-state="ended"] .sx-call-bar__avatar,
.sx-call-bar[data-state="ended"] .sx-call-bar__who,
.sx-call-bar[data-state="ended"] .sx-call-bar__meter {
  opacity: 0.45;
  filter: grayscale(0.7);
}

.sx-call-bar[data-held] .sx-call-bar__label {
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-call-bar[data-held] .sx-call-bar__time,
.sx-call-bar[data-state="ended"] .sx-call-bar__time {
  color: var(--sx-muted);
}

/* ---------- Controls ---------- */
.sx-call-bar__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* Pressed and open states go through the button's own variables, so hover keeps them. */
.sx-call-bar__ctl[aria-pressed="true"],
.sx-call-bar__ctl[aria-expanded="true"] {
  --_bg: var(--sx-fill-strong);
  --_bg-hover: var(--sx-fill-strong);
  color: var(--sx-ink);
}

.sx-call-bar__ctl[data-tone="warning"][aria-pressed="true"] {
  --_bg: var(--sx-warning-soft);
  --_bg-hover: var(--sx-warning-soft);
  --_border: var(--sx-warning-line);
  --_border-hover: var(--sx-warning-line);
  color: var(--sx-warning-ink);
}

.sx-call-bar__record {
  margin-left: auto;
}

.sx-call-bar__rec-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px currentColor;
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-call-bar__record[aria-pressed="true"] {
  color: var(--sx-danger-ink);
}

.sx-call-bar__record[aria-pressed="true"] .sx-call-bar__rec-dot {
  background: var(--sx-danger);
  box-shadow: 0 0 0 3px var(--sx-danger-soft);
}

.sx-call-bar[data-state="connected"]:not([data-held]) .sx-call-bar__record[aria-pressed="true"] .sx-call-bar__rec-dot {
  animation: cb-rec 1.6s var(--sx-ease-in-out) infinite;
}

/* The handset turned down reads as hang up. */
.sx-call-bar__hangup {
  transform: rotate(135deg);
}

/* ---------- Panels ---------- */
.sx-call-bar__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-call-bar__panel[data-state="open"] {
  grid-template-rows: 1fr;
}

.sx-call-bar__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-call-bar__sheet {
  display: grid;
  gap: 9px;
  padding: 11px 12px 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-call-bar__panel[data-state="open"] .sx-call-bar__sheet {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.sx-call-bar__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 18px;
  padding: 0 4px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-call-bar__tones {
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--sx-ink);
}

.sx-call-bar__keys {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.sx-call-bar__key {
  position: relative;
  height: 34px;
  overflow: hidden;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-call-bar__key:hover {
  background: var(--sx-raised-hover);
}

.sx-call-bar__key:active,
.sx-call-bar__key[data-pressed] {
  background: var(--sx-fill-strong);
  transform: scale(0.94);
}

.sx-call-bar__people {
  display: grid;
  gap: 2px;
}

.sx-call-bar__person {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  text-align: left;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-call-bar__person:not(:disabled):hover,
.sx-call-bar__person[data-active="true"] {
  background: var(--sx-fill);
}

.sx-call-bar__person:disabled {
  opacity: 0.5;
}

.sx-call-bar__person-name {
  flex: 1;
  min-width: 0;
}

.sx-call-bar__person-go {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-call-bar__person:not(:disabled):is(:hover, :focus-visible, [data-active="true"]) .sx-call-bar__person-go {
  opacity: 1;
  transform: none;
}

@keyframes cb-rec {
  0%, 100% {
    box-shadow: 0 0 0 3px var(--sx-danger-soft);
  }
  50% {
    box-shadow: 0 0 0 5px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-call-bar__level {
    transition: none;
  }

  .sx-call-bar__sheet {
    transform: none;
  }

  .sx-call-bar__key:active,
  .sx-call-bar__key[data-pressed] {
    transform: none;
  }
}


/* ---- Incoming Call (incoming-call) ---- */
/* ==========================================================================
   Incoming Call — a ringing card that folds into a small connected bar
   Root: data-state="ringing | connected | declined | ended", data-replying while the
   quick replies sheet is open (sheet: data-state="open").
   Two views share the card: __ringing (big) and __live (compact). Each opens and closes
   with the grid-rows trick, so the card height morphs between them.
   ========================================================================== */

.sx-incoming-call {
  width: 360px;
  overflow: hidden;
  isolation: isolate;
  animation: ic-ring-in var(--sx-dur-5) var(--sx-ease-spring) both;
}

.sx-incoming-call .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-incoming-call .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-incoming-call .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-incoming-call .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-incoming-call .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

/* ---------- The two views ---------- */
.sx-incoming-call__view {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-incoming-call__clip {
  min-height: 0;
  overflow: hidden;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.12s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.12s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.08s;
}

.sx-incoming-call__view[inert] {
  grid-template-rows: 0fr;
}

/* Leaving view: quick fade with a little blur, no delay. */
.sx-incoming-call__view[inert] > .sx-incoming-call__clip {
  opacity: 0;
  filter: blur(4px);
  transform: scale(0.97);
  transition-duration: var(--sx-dur-2);
  transition-delay: 0s;
}

/* ---------- Ringing ---------- */
.sx-incoming-call__ringing-body {
  display: grid;
  justify-items: center;
  padding: 14px 20px 12px;
  text-align: center;
}

.sx-incoming-call__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-self: stretch;
  width: 100%;
}

.sx-incoming-call__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-incoming-call__eyebrow > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-success);
  transform-origin: 50% 60%;
}

.sx-incoming-call[data-state="ringing"] .sx-incoming-call__eyebrow > .sx-icon {
  animation: ic-wiggle 1.8s var(--sx-ease-in-out) infinite;
}

/* Avatar with a soft ring that keeps pulsing outwards while the call rings. */
.sx-incoming-call__halo {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin: 6px 0 0;
}

.sx-incoming-call__halo::before,
.sx-incoming-call__halo::after {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-success) 13%, transparent);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  opacity: 0;
}

.sx-incoming-call[data-state="ringing"] .sx-incoming-call__halo::before,
.sx-incoming-call[data-state="ringing"] .sx-incoming-call__halo::after {
  animation: ic-halo 2.4s var(--sx-ease-out) infinite;
}

.sx-incoming-call[data-state="ringing"] .sx-incoming-call__halo::after {
  animation-delay: 1.2s;
}

.sx-incoming-call__avatar {
  --sx-avatar-size: 60px;
  z-index: 1;
  font-size: calc(var(--sx-fs-xl) + 3px);
  box-shadow: 0 0 0 3px var(--sx-card-bg), inset 0 0 0 1px var(--sx-line);
}

.sx-incoming-call__name {
  font-size: var(--sx-fs-xl);
}

.sx-incoming-call__number {
  margin-top: 3px;
  font-size: var(--sx-fs-base);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-incoming-call__context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 6px 11px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
}

.sx-incoming-call__context > .sx-icon {
  --sx-icon-size: 13px;
  color: var(--sx-muted);
}

.sx-incoming-call__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 16px;
}

.sx-incoming-call__accept {
  --_tone: var(--sx-success);
  --_on: var(--sx-on-success);
  --_bg: var(--_tone);
  --_bg-hover: color-mix(in oklab, var(--_tone), var(--_on) 10%);
  --_bg-active: color-mix(in oklab, var(--_tone), var(--_on) 16%);
  --_border: transparent;
  --_border-hover: transparent;
  --_shadow: var(--sx-inset-highlight), 0 1px 2px color-mix(in srgb, var(--_tone) 40%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--_tone) 55%, transparent);
  color: var(--_on);
}

/* The handset turned down reads as hang up. */
.sx-incoming-call__hangup {
  transform: rotate(135deg);
}

.sx-incoming-call__reply-toggle {
  margin-top: 6px;
}

.sx-incoming-call__reply-toggle[aria-expanded="true"] {
  color: var(--sx-ink);
}

/* ---------- Quick replies sheet ---------- */
.sx-incoming-call__scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--sx-card-bg) 45%, transparent);
  backdrop-filter: blur(1.5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear var(--sx-dur-3);
}

.sx-incoming-call[data-replying] .sx-incoming-call__scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.sx-incoming-call__sheet {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  z-index: 3;
  min-width: 0;
  transform: translateY(calc(100% + 12px));
  visibility: hidden;
  transition:
    transform var(--sx-dur-3) var(--sx-ease-in-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-incoming-call__sheet[data-state="open"] {
  transform: none;
  visibility: visible;
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s;
}

.sx-incoming-call__sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 2px 8px;
}

.sx-incoming-call__sheet-head .sx-menu__label {
  padding: 0;
}

.sx-incoming-call__replies {
  display: grid;
}

.sx-incoming-call__reply {
  justify-content: space-between;
  min-height: 34px;
}

.sx-incoming-call__reply > .sx-icon {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-incoming-call__reply:is(:hover, :focus-visible, [data-active="true"]) > .sx-icon {
  opacity: 1;
  transform: none;
}

/* ---------- Connected, declined, ended ---------- */
.sx-incoming-call__live-body {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 12px 12px 14px;
}

.sx-incoming-call__live-who {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 1px;
}

.sx-incoming-call__live-name {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
}

.sx-incoming-call__status {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-incoming-call__status .sx-tabular {
  min-width: 3.2ch;
}

.sx-incoming-call[data-state="connected"] .sx-incoming-call__status {
  color: var(--sx-success-ink);
}

.sx-incoming-call[data-state="declined"] .sx-incoming-call__status {
  color: var(--sx-danger-ink);
}

.sx-incoming-call__live-actions {
  display: flex;
  gap: 6px;
}

.sx-incoming-call__live-actions[hidden] {
  display: none;
}

.sx-incoming-call__mute[aria-pressed="true"] {
  --_bg: var(--sx-warning-soft);
  --_bg-hover: var(--sx-warning-soft);
  --_border: var(--sx-warning-line);
  --_border-hover: var(--sx-warning-line);
  color: var(--sx-warning-ink);
}

/* ---------- Keyframes ---------- */
@keyframes ic-ring-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
}

@keyframes ic-halo {
  0% {
    opacity: 0.95;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.62);
  }
}

@keyframes ic-wiggle {
  0%, 56%, 100% { transform: rotate(0deg); }
  62% { transform: rotate(-14deg); }
  68% { transform: rotate(12deg); }
  74% { transform: rotate(-9deg); }
  80% { transform: rotate(6deg); }
  86% { transform: rotate(-2deg); }
}

@keyframes ic-halo-fade {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.85; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-incoming-call {
    animation-name: sx-fade-in;
  }

  .sx-incoming-call[data-state="ringing"] .sx-incoming-call__eyebrow > .sx-icon {
    animation: none;
  }

  .sx-incoming-call[data-state="ringing"] .sx-incoming-call__halo::before {
    inset: 12px;
    animation-name: ic-halo-fade;
  }

  .sx-incoming-call[data-state="ringing"] .sx-incoming-call__halo::after {
    animation: none;
  }

  .sx-incoming-call__view > *,
  .sx-incoming-call__view[inert] > .sx-incoming-call__clip {
    filter: none;
    transform: none;
  }

  .sx-incoming-call__sheet {
    transform: none;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
  }

  .sx-incoming-call__sheet[data-state="open"] {
    opacity: 1;
  }
}


/* ---- History Line (history-line) ---- */
/* ==========================================================================
   History Line — a vertical timeline grouped by day
   Events: data-tone="accent | info | success | warning | danger | mark | neutral",
   data-open when expanded (its toggle has aria-expanded), data-new while it slides in.
   Day groups and events open with the grid-rows trick, so arrivals push the list down
   smoothly instead of jumping.
   ========================================================================== */

.sx-history-line {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ---------- Header ---------- */
.sx-history-line__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-history-line__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-history-line__heading h3 {
  font-size: var(--sx-fs-lg);
}

.sx-history-line__heading p {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-history-line__count {
  font-variant-numeric: tabular-nums;
}

/* ---------- Scrolling list ---------- */
.sx-history-line__scroll {
  padding: 0 18px 18px;
  -webkit-mask-image: linear-gradient(to bottom, var(--sx-ink) calc(100% - 28px), transparent);
  mask-image: linear-gradient(to bottom, var(--sx-ink) calc(100% - 28px), transparent);
}

.sx-history-line__day {
  display: grid;
  grid-template-rows: 1fr;
}

.sx-history-line__day[data-new] {
  animation: hl-open var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-history-line__day > .sx-history-line__clip {
  min-height: 0;
}

.sx-history-line__day[data-new] > .sx-history-line__clip {
  overflow: hidden;
}

.sx-history-line__day-label {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 14px 0 8px;
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sx-muted);
  background: linear-gradient(var(--sx-card-bg) 78%, transparent);
}

.sx-history-line__events {
  display: grid;
}

/* ---------- One event ---------- */
.sx-history-line__event {
  --hl-tone: var(--sx-muted);
  --hl-soft: var(--sx-fill);
  --hl-line: var(--sx-line);
  --hl-ink: var(--sx-ink-2);
  display: grid;
  grid-template-rows: 1fr;
}

.sx-history-line__event[data-tone="accent"] { --hl-tone: var(--sx-accent); --hl-soft: var(--sx-accent-soft); --hl-line: var(--sx-accent-line); --hl-ink: var(--sx-accent-ink); }
.sx-history-line__event[data-tone="info"] { --hl-tone: var(--sx-info); --hl-soft: var(--sx-info-soft); --hl-line: var(--sx-info-line); --hl-ink: var(--sx-info-ink); }
.sx-history-line__event[data-tone="success"] { --hl-tone: var(--sx-success); --hl-soft: var(--sx-success-soft); --hl-line: var(--sx-success-line); --hl-ink: var(--sx-success-ink); }
.sx-history-line__event[data-tone="warning"] { --hl-tone: var(--sx-warning); --hl-soft: var(--sx-warning-soft); --hl-line: var(--sx-warning-line); --hl-ink: var(--sx-warning-ink); }
.sx-history-line__event[data-tone="danger"] { --hl-tone: var(--sx-danger); --hl-soft: var(--sx-danger-soft); --hl-line: var(--sx-danger-line); --hl-ink: var(--sx-danger-ink); }
.sx-history-line__event[data-tone="mark"] { --hl-tone: var(--sx-mark); --hl-soft: var(--sx-mark-soft); --hl-line: var(--sx-mark-line); --hl-ink: var(--sx-mark-ink); }

.sx-history-line__event[data-new] {
  animation: hl-open var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-history-line__event > .sx-history-line__clip {
  min-height: 0;
}

.sx-history-line__event[data-new] > .sx-history-line__clip {
  overflow: hidden;
}

.sx-history-line__item {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 12px;
  padding-bottom: 12px;
}

.sx-history-line__event[data-new] .sx-history-line__item {
  animation: hl-rise var(--sx-dur-4) var(--sx-ease-out) 60ms both;
}

/* The thread joining one icon to the next inside a day. */
.sx-history-line__item::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: 2px;
  width: 1px;
  border-radius: 1px;
  background: var(--sx-line);
}

.sx-history-line__event:last-child .sx-history-line__item::before {
  display: none;
}

.sx-history-line__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: var(--hl-ink);
  background: linear-gradient(var(--hl-soft), var(--hl-soft)), var(--sx-card-bg);
  box-shadow: inset 0 0 0 1px var(--hl-line);
  --sx-icon-size: 14px;
}

.sx-history-line__body {
  display: grid;
  min-width: 0;
  padding-top: 4px;
}

.sx-history-line__row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: calc(100% + 12px);
  min-height: 24px;
  margin: -2px -6px 0;
  padding: 2px 6px;
  border-radius: var(--sx-r-sm);
  text-align: left;
}

button.sx-history-line__row {
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

button.sx-history-line__row:hover {
  background: var(--sx-fill);
}

.sx-history-line__title {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-history-line__time {
  flex: none;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-history-line__chev {
  --sx-icon-size: 14px;
  align-self: center;
  color: var(--sx-faint);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-history-line__row[aria-expanded="true"] .sx-history-line__chev {
  color: var(--sx-ink-2);
  transform: rotate(180deg);
}

.sx-history-line__summary {
  margin-top: 1px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Details ---------- */
.sx-history-line__details {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-history-line__event[data-open] .sx-history-line__details {
  grid-template-rows: 1fr;
}

.sx-history-line__details > .sx-history-line__clip {
  min-height: 0;
  overflow: hidden;
}

.sx-history-line__panel {
  margin-top: 8px;
  padding: 9px 11px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-history-line__event[data-open] .sx-history-line__panel {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

.sx-history-line__grid {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 5px 14px;
  margin: 0;
}

.sx-history-line__grid dt {
  color: var(--sx-muted);
}

.sx-history-line__grid dd {
  min-width: 0;
  margin: 0;
  color: var(--sx-ink);
  overflow-wrap: anywhere;
}

.sx-history-line__note {
  color: var(--sx-ink-2);
  line-height: 1.45;
}

/* ---------- Demo layout ---------- */
.sx-history-line-demo {
  width: 420px;
  max-width: 100%;
  height: 372px;
}

@keyframes hl-open {
  from {
    grid-template-rows: 0fr;
  }
}

@keyframes hl-rise {
  from {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-history-line__event[data-new] .sx-history-line__item {
    animation-name: sx-fade-in;
  }

  .sx-history-line__panel,
  .sx-history-line__event[data-open] .sx-history-line__panel {
    transform: none;
  }
}


/* ---- Sticky Wall (sticky-wall) ---- */
/* ==========================================================================
   Sticky Wall — post-it notes on a dotted board
   Notes are positioned with --x / --y (offset pixels inside the board) and tilted with
   --tilt; z-index follows the order they were last touched.
   Note states: data-tone="warning | success | info | mark | danger", data-dragging (lifted;
   with data-gliding the move itself animates), data-editing, data-new (drops in),
   data-leaving (shrinks out). The palette opens with data-state="open".
   ========================================================================== */

.sx-sticky-wall {
  --sw-note-w: 156px;
  --sw-note-h: 140px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 720px;
  height: 440px;
  overflow: hidden;
}

.sx-sticky-wall .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-sticky-wall .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-sticky-wall .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-sticky-wall .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-sticky-wall .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

.sx-sticky-wall .sx-avatar {
  background: linear-gradient(var(--sx-avatar-bg, var(--sx-surface-3)), var(--sx-avatar-bg, var(--sx-surface-3))), var(--sx-surface);
}

/* ---------- Header ---------- */
.sx-sticky-wall__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px 13px 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-sticky-wall__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-sticky-wall__heading h3 {
  font-size: var(--sx-fs-lg);
}

.sx-sticky-wall__heading p {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-sticky-wall__count {
  font-variant-numeric: tabular-nums;
}

.sx-sticky-wall__head .sx-avatar-stack > .sx-avatar + .sx-avatar {
  margin-left: -4px;
}

/* ---------- Board ---------- */
.sx-sticky-wall__board {
  position: relative;
  margin: 10px;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  background-color: var(--sx-surface-2);
  background-image: radial-gradient(circle, var(--sx-line-strong) 1px, transparent 1.5px);
  background-size: 18px 18px;
  background-position: 9px 9px;
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

/* ---------- Note ---------- */
.sx-sticky-wall__note {
  --sn-tone: var(--sx-warning);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  width: var(--sw-note-w);
  height: var(--sw-note-h);
  padding: 16px 12px 9px 13px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-ink);
  background-color: color-mix(in oklab, var(--sn-tone) 21%, var(--sx-surface));
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--sx-surface) 26%, transparent), transparent 46%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sn-tone) 24%, transparent),
    0 1px 2px color-mix(in srgb, var(--sx-ink) 10%, transparent),
    0 8px 16px -10px color-mix(in srgb, var(--sx-ink) 28%, transparent);
  translate: var(--x, 0px) var(--y, 0px);
  rotate: var(--tilt, 0deg);
  scale: 1;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition:
    translate var(--sx-dur-3) var(--sx-ease-out),
    rotate var(--sx-dur-4) var(--sx-ease-spring),
    scale var(--sx-dur-4) var(--sx-ease-spring),
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sticky-wall__note[data-tone="success"] { --sn-tone: var(--sx-success); }
.sx-sticky-wall__note[data-tone="info"] { --sn-tone: var(--sx-info); }
.sx-sticky-wall__note[data-tone="mark"] { --sn-tone: var(--sx-mark); }
.sx-sticky-wall__note[data-tone="danger"] { --sn-tone: var(--sx-danger); }

/* A strip of tape holding it to the wall. */
.sx-sticky-wall__note::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sx-surface) 58%, transparent);
  box-shadow: 0 0 0 1px var(--sx-line-soft), 0 1px 2px color-mix(in srgb, var(--sx-ink) 8%, transparent);
  rotate: -3deg;
  pointer-events: none;
}

.sx-sticky-wall__note:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: 3px;
}

/* Lifted: straightens, grows a little and casts a longer shadow. */
.sx-sticky-wall__note[data-dragging] {
  rotate: 0deg;
  scale: 1.05;
  cursor: grabbing;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sn-tone) 26%, transparent),
    0 4px 8px -2px color-mix(in srgb, var(--sx-ink) 14%, transparent),
    0 22px 36px -12px color-mix(in srgb, var(--sx-ink) 40%, transparent);
  transition:
    rotate var(--sx-dur-3) var(--sx-ease-out),
    scale var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sticky-wall__note[data-dragging][data-gliding] {
  transition:
    translate var(--sx-dur-5) var(--sx-ease-in-out),
    rotate var(--sx-dur-3) var(--sx-ease-out),
    scale var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sticky-wall__note[data-editing] {
  rotate: 0deg;
  cursor: auto;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sn-tone) 30%, transparent),
    0 0 0 4px color-mix(in srgb, var(--sn-tone) 16%, transparent),
    0 12px 24px -12px color-mix(in srgb, var(--sx-ink) 32%, transparent);
}

.sx-sticky-wall__note[data-new] {
  animation: sw-drop var(--sx-dur-5) var(--sx-ease-spring) both;
}

.sx-sticky-wall__note[data-leaving] {
  opacity: 0;
  scale: 0.85;
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-in), scale var(--sx-dur-2) var(--sx-ease-in);
}

.sx-sticky-wall__text {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  resize: none;
  font-size: var(--sx-fs-base);
  font-weight: 450;
  line-height: 1.42;
  color: inherit;
  background: transparent;
  outline: none;
  pointer-events: none;
}

.sx-sticky-wall__note[data-editing] .sx-sticky-wall__text {
  pointer-events: auto;
  cursor: text;
}

.sx-sticky-wall__text::placeholder {
  color: color-mix(in srgb, var(--sx-ink) 45%, transparent);
}

.sx-sticky-wall__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  height: 24px;
}

.sx-sticky-wall__tools {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-sticky-wall__note:is(:hover, :focus-within, [data-editing]) .sx-sticky-wall__tools,
.sx-sticky-wall__note:has(.sx-sticky-wall__palette[data-state="open"]) .sx-sticky-wall__tools {
  opacity: 1;
}

@media (hover: none) {
  .sx-sticky-wall__tools {
    opacity: 1;
  }
}

.sx-sticky-wall__tool {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: var(--sx-r-sm);
  color: color-mix(in srgb, var(--sx-ink) 62%, transparent);
  cursor: pointer;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-sticky-wall__tool:hover,
.sx-sticky-wall__tool[aria-expanded="true"] {
  color: var(--sx-ink);
  background: color-mix(in srgb, var(--sx-ink) 9%, transparent);
}

/* ---------- Palette ---------- */
.sx-sticky-wall__palette {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 7px;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  padding: 5px 6px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  transform-origin: right bottom;
  cursor: auto;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-sticky-wall__palette:not([data-state="open"]) {
  opacity: 0;
  transform: translateY(4px) scale(0.9);
  visibility: hidden;
  pointer-events: none;
}

.sx-sticky-wall__palette[data-state="open"] {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring),
    visibility 0s;
}

.sx-sticky-wall__swatch {
  --sn-tone: var(--sx-warning);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--sn-tone) 42%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-tone) 45%, transparent);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-sticky-wall__swatch[data-tone="success"] { --sn-tone: var(--sx-success); }
.sx-sticky-wall__swatch[data-tone="info"] { --sn-tone: var(--sx-info); }
.sx-sticky-wall__swatch[data-tone="mark"] { --sn-tone: var(--sx-mark); }
.sx-sticky-wall__swatch[data-tone="danger"] { --sn-tone: var(--sx-danger); }

.sx-sticky-wall__swatch:hover,
.sx-sticky-wall__swatch[data-active="true"] {
  transform: scale(1.15);
}

.sx-sticky-wall__swatch[aria-checked="true"] {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sn-tone) 45%, transparent), 0 0 0 2px var(--sx-surface), 0 0 0 3.5px var(--sn-tone);
}

@keyframes sw-drop {
  0% {
    opacity: 0;
    scale: 1.25;
    rotate: calc(var(--tilt, 0deg) - 6deg);
  }
  60% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-sticky-wall__note[data-dragging],
  .sx-sticky-wall__note[data-editing] {
    rotate: var(--tilt, 0deg);
    scale: 1;
  }

  .sx-sticky-wall__note[data-new] {
    animation-name: sx-fade-in;
  }

  .sx-sticky-wall__note[data-dragging][data-gliding] {
    transition-duration: 0s;
  }

  .sx-sticky-wall__palette:not([data-state="open"]) {
    transform: none;
  }
}


/* ---- Line Trend (line-trend) ---- */
/* ==========================================================================
   Line Trend — line and area chart for values over time, with a crosshair readout
   Root: data-variant="line | area", data-state="intro | ready" (intro hides the lines so they
   can draw in), data-hover while the readout shows, data-glide once it may slide between days.
   Series colours: data-color="1…6" -> --sx-c1 … --sx-c6. Hidden series carry data-hidden; in the
   area variant only the first visible series (data-fill) is filled, so washes never overlap.
   The SVG is drawn in CSS pixels (440 x 208), so text and strokes never stretch.
   ========================================================================== */

.sx-line-trend {
  --lt-c: var(--sx-c1);
  --lt-tx: 0px;
  --lt-ty: 0px;
  width: 480px;
  padding: 18px 20px 14px;
}

.sx-line-trend [data-color="1"] { --lt-c: var(--sx-c1); }
.sx-line-trend [data-color="2"] { --lt-c: var(--sx-c2); }
.sx-line-trend [data-color="3"] { --lt-c: var(--sx-c3); }
.sx-line-trend [data-color="4"] { --lt-c: var(--sx-c4); }
.sx-line-trend [data-color="5"] { --lt-c: var(--sx-c5); }
.sx-line-trend [data-color="6"] { --lt-c: var(--sx-c6); }

/* ---------- Header ---------- */
.sx-line-trend__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sx-line-trend__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-line-trend__title {
  font-size: var(--sx-fs-md);
}

.sx-line-trend__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  animation: lt-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

/* Chart type: two equal options with a raised thumb that slides between them. */
.sx-line-trend__switch {
  position: relative;
  display: inline-grid;
  flex: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

.sx-line-trend__switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-line-trend[data-variant="area"] .sx-line-trend__switch::before {
  transform: translateX(100%);
}

.sx-line-trend__option {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend__option:hover {
  color: var(--sx-ink-2);
}

.sx-line-trend__option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-line-trend__option:focus-visible {
  outline-offset: 0;
}

/* ---------- Legend: each entry toggles its series ---------- */
.sx-line-trend__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 12px 0 0 -7px;
}

.sx-line-trend__toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-line-trend__toggle:hover {
  background: var(--sx-fill);
}

.sx-line-trend__toggle[aria-pressed="false"] {
  color: var(--sx-muted);
}

/* The key mirrors the mark: a short line in the series colour. */
.sx-line-trend__key {
  width: 12px;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--lt-c);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-line-trend__toggle[aria-pressed="false"] .sx-line-trend__key {
  opacity: 0.3;
  transform: scaleX(0.6);
}

/* ---------- Plot ---------- */
.sx-line-trend__plot {
  position: relative;
  width: 440px;
  height: 208px;
  margin-top: 8px;
  border-radius: var(--sx-r-sm);
  cursor: crosshair;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always land on the plot itself. */
.sx-line-trend__plot > * {
  pointer-events: none;
}

.sx-line-trend__plot:focus-visible {
  outline-offset: 4px;
}

.sx-line-trend__svg {
  display: block;
  width: 440px;
  height: 208px;
  overflow: visible;
}

.sx-line-trend__grid line {
  stroke: var(--sx-line-soft);
  stroke-width: 1;
}

.sx-line-trend__grid line:first-child {
  stroke: var(--sx-line);
}

.sx-line-trend__yaxis,
.sx-line-trend__xaxis {
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
  animation: lt-fade var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-line-trend__series {
  transition: opacity var(--sx-dur-4) var(--sx-ease-out);
}

.sx-line-trend__series[data-hidden] {
  opacity: 0;
}

.sx-line-trend__line {
  fill: none;
  stroke: var(--lt-c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* pathLength="1" on the path: one dash covers it, so the offset draws it in. */
  stroke-dasharray: 1 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1100ms var(--sx-ease-out) calc(var(--lt-i, 0) * 140ms);
}

.sx-line-trend__area {
  stroke: none;
  opacity: 1;
  clip-path: inset(-2px -2px -2px -2px);
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out),
    clip-path 1100ms var(--sx-ease-out) calc(var(--lt-i, 0) * 140ms);
}

.sx-line-trend[data-variant="line"] .sx-line-trend__area,
.sx-line-trend__series:not([data-fill]) .sx-line-trend__area {
  opacity: 0;
}

.sx-line-trend__stop {
  stop-color: var(--lt-c);
  stop-opacity: 0.2;
}

.sx-line-trend__stop + .sx-line-trend__stop {
  stop-opacity: 0;
}

.sx-line-trend[data-state="intro"] .sx-line-trend__line {
  stroke-dashoffset: 1;
  transition: none;
}

.sx-line-trend[data-state="intro"] .sx-line-trend__area {
  clip-path: inset(-2px 100% -2px -2px);
  transition: none;
}

/* Crosshair: a hairline and one ringed dot per series, gliding between days. */
.sx-line-trend__cross {
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend[data-hover] .sx-line-trend__cross {
  opacity: 1;
}

.sx-line-trend[data-glide] .sx-line-trend__cross {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend__guide {
  stroke: var(--sx-line-strong);
  stroke-width: 1;
}

.sx-line-trend__dot {
  fill: var(--lt-c);
  stroke: var(--sx-card-bg);
  stroke-width: 2;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend[data-glide] .sx-line-trend__dot {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend__dot[data-hidden] {
  opacity: 0;
}

/* ---------- Tooltip: kept inside the plot, flips to the left near the right edge ---------- */
.sx-line-trend__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 150px;
  padding: 8px 10px 9px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--lt-tx), var(--lt-ty)) scale(0.97);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-line-trend[data-hover] .sx-line-trend__tip {
  opacity: 1;
  transform: translate(var(--lt-tx), var(--lt-ty));
}

.sx-line-trend:not([data-glide]) .sx-line-trend__tip {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend__tip-date {
  margin-bottom: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-line-trend__tip-rows {
  display: grid;
  gap: 4px;
}

.sx-line-trend__tip-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sx-line-trend__tip-row > dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  color: var(--sx-ink-2);
}

.sx-line-trend__tip-row > dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-line-trend__tip-row .sx-line-trend__key {
  width: 10px;
  height: 2px;
}

/* ---------- Demo layout: a filter row above the card, as on a dashboard ---------- */
.sx-line-trend-demo {
  display: grid;
  gap: 10px;
  justify-items: start;
}

.sx-line-trend-demo__filters {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-line-trend-demo__range {
  height: 24px;
  padding: 0 10px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-line-trend-demo__range:hover {
  color: var(--sx-ink-2);
}

.sx-line-trend-demo__range[aria-pressed="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

@keyframes lt-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes lt-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Lines and fills fade in instead of drawing across. */
  .sx-line-trend__line,
  .sx-line-trend__area {
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-line-trend[data-state="intro"] .sx-line-trend__line {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  .sx-line-trend[data-state="intro"] .sx-line-trend__area {
    clip-path: inset(-2px);
    opacity: 0;
  }

  .sx-line-trend__sub {
    animation-name: lt-fade;
  }

  .sx-line-trend__switch::before,
  .sx-line-trend__key {
    transition-property: opacity;
  }

  .sx-line-trend[data-glide] .sx-line-trend__cross,
  .sx-line-trend[data-glide] .sx-line-trend__dot,
  .sx-line-trend__tip,
  .sx-line-trend[data-hover] .sx-line-trend__tip {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-line-trend__tip,
  .sx-line-trend[data-hover] .sx-line-trend__tip {
    transform: translate(var(--lt-tx), var(--lt-ty));
  }
}


/* ---- Column Bars (column-bars) ---- */
/* ==========================================================================
   Column Bars — vertical bars, grouped or stacked, with a readout per column
   Root: data-mode="grouped | stacked", data-entering while the columns rise, data-hover while a
   column is read out, data-glide once the readout may slide between columns.
   Series colours: data-color="1…6" -> --sx-c1 … --sx-c6.
   The SVG is drawn in CSS pixels (440 x 216). Columns rise from the zero line with
   transform-box: fill-box; layout switches and new data are tweened in script.
   ========================================================================== */

.sx-column-bars {
  --cb-c: var(--sx-c1);
  --cb-tx: 0px;
  --cb-bx: 0px;
  width: 480px;
  padding: 18px 20px 14px;
}

.sx-column-bars [data-color="1"] { --cb-c: var(--sx-c1); }
.sx-column-bars [data-color="2"] { --cb-c: var(--sx-c2); }
.sx-column-bars [data-color="3"] { --cb-c: var(--sx-c3); }
.sx-column-bars [data-color="4"] { --cb-c: var(--sx-c4); }
.sx-column-bars [data-color="5"] { --cb-c: var(--sx-c5); }
.sx-column-bars [data-color="6"] { --cb-c: var(--sx-c6); }

/* ---------- Header ---------- */
.sx-column-bars__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sx-column-bars__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-column-bars__title {
  font-size: var(--sx-fs-md);
}

.sx-column-bars__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* Layout switch: two equal options with a raised thumb that slides between them. */
.sx-column-bars__switch {
  position: relative;
  display: inline-grid;
  flex: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

.sx-column-bars__switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-column-bars[data-mode="stacked"] .sx-column-bars__switch::before {
  transform: translateX(100%);
}

.sx-column-bars__option {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars__option:hover {
  color: var(--sx-ink-2);
}

.sx-column-bars__option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-column-bars__option:focus-visible {
  outline-offset: 0;
}

/* ---------- Legend ---------- */
.sx-column-bars__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-column-bars__legend > li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Legends mirror the mark: a small rounded rectangle for bars. */
.sx-column-bars__swatch {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 2.5px;
  background: var(--cb-c);
}

/* ---------- Plot ---------- */
.sx-column-bars__plot {
  position: relative;
  width: 440px;
  height: 216px;
  margin-top: 10px;
  border-radius: var(--sx-r-sm);
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always land on the plot itself. */
.sx-column-bars__plot > * {
  pointer-events: none;
}

.sx-column-bars__plot:focus-visible {
  outline-offset: 4px;
}

.sx-column-bars__svg {
  display: block;
  width: 440px;
  height: 216px;
  overflow: visible;
}

.sx-column-bars__grid line {
  stroke: var(--sx-line-soft);
  stroke-width: 1;
}

.sx-column-bars__zero {
  stroke: var(--sx-line-strong);
  stroke-width: 1;
}

.sx-column-bars__yaxis,
.sx-column-bars__xaxis {
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
}

.sx-column-bars__yaxis {
  animation: cb-fade var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-column-bars__xaxis text {
  transition: fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars__xaxis text[data-active] {
  fill: var(--sx-ink);
}

/* Hovered column: a soft band behind it; the other columns step back. */
.sx-column-bars__band {
  fill: var(--sx-fill);
  opacity: 0;
  transform: translateX(var(--cb-bx));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars[data-hover] .sx-column-bars__band {
  opacity: 1;
}

.sx-column-bars[data-glide] .sx-column-bars__band {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-column-bars__col {
  transform-box: fill-box;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars[data-hover] .sx-column-bars__col:not([data-active]) {
  opacity: 0.42;
}

.sx-column-bars[data-entering] .sx-column-bars__col {
  animation: cb-grow 760ms var(--sx-ease-out) both;
  animation-delay: calc(var(--cb-i, 0) * 55ms);
}

.sx-column-bars__bar {
  fill: var(--cb-c);
}

/* Value labels for the hovered column: above each bar, or inside a stacked segment that fits. */
.sx-column-bars__labels {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  fill: var(--sx-ink-2);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars[data-hover] .sx-column-bars__labels {
  opacity: 1;
}

.sx-column-bars__labels [data-inside] {
  /* White or near-black, whichever reads better on the segment's fill. */
  fill: var(--sx-card-bg);
}

@supports (color: oklch(from red l c h)) {
  .sx-column-bars__labels [data-inside] {
    fill: oklch(from var(--cb-c) clamp(0.16, (0.72 - l) * 1000, 1) 0 0);
  }
}

.sx-column-bars__labels [data-total] {
  font-weight: 600;
  fill: var(--sx-ink);
}

/* ---------- Tooltip: kept inside the plot, beside the hovered column ---------- */
.sx-column-bars__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  min-width: 168px;
  padding: 8px 10px 9px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--cb-tx), 10px) scale(0.97);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-column-bars[data-hover] .sx-column-bars__tip {
  opacity: 1;
  transform: translate(var(--cb-tx), 10px);
}

.sx-column-bars:not([data-glide]) .sx-column-bars__tip {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-column-bars__tip-head {
  margin-bottom: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-column-bars__tip-rows {
  display: grid;
  grid-template-columns: 1fr auto auto;
  row-gap: 4px;
  align-items: center;
}

.sx-column-bars__tip-row {
  display: contents;
}

.sx-column-bars__tip-row > dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--sx-ink-2);
}

.sx-column-bars__tip-row > dd {
  margin: 0;
  padding-left: 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-column-bars__tip-value {
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-column-bars__tip-share {
  min-width: 44px;
  color: var(--sx-muted);
}

.sx-column-bars__tip-row--total > * {
  padding-top: 6px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-column-bars__tip-row--total > dt {
  color: var(--sx-ink);
}

/* Tooltip rows key their series with a short stroke, not a box. */
.sx-column-bars__key {
  width: 10px;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--cb-c);
}

@keyframes cb-grow {
  from {
    transform: scaleY(0);
  }
}

@keyframes cb-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-column-bars[data-entering] .sx-column-bars__col {
    animation-name: cb-fade;
    animation-delay: 0ms;
  }

  .sx-column-bars__switch::before {
    transition-property: opacity;
  }

  .sx-column-bars[data-glide] .sx-column-bars__band,
  .sx-column-bars__tip,
  .sx-column-bars[data-hover] .sx-column-bars__tip {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-column-bars__tip,
  .sx-column-bars[data-hover] .sx-column-bars__tip {
    transform: translate(var(--cb-tx), 10px);
  }
}


/* ---- Ranked Bars (ranked-bars) ---- */
/* ==========================================================================
   Ranked Bars — horizontal bars sorted by value, with a dashed target line
   Rows are HTML so a re-sort can glide with FLIP. Each row carries --rb-f (bar length as a
   fraction of the track) and --rb-lf / --rb-lp (where its name sits: a fraction plus pixels).
   The name is drawn twice: once in ink, once inside the bar's clip, so wherever it sits the
   part over the bar reads on the fill and the rest reads on the card.
   Root: data-hover while a row is read out, data-glide once the readout may slide between rows.
   ========================================================================== */

.sx-ranked-bars {
  --rb-row: 24px;
  --rb-gap: 6px;
  --rb-value-w: 40px;
  --rb-tx: 0px;
  --rb-ty: 0px;
  width: 440px;
  padding: 18px 20px 14px;
}

/* ---------- Header ---------- */
.sx-ranked-bars__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sx-ranked-bars__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-ranked-bars__title {
  font-size: var(--sx-fs-md);
}

.sx-ranked-bars__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-ranked-bars__live {
  flex: none;
  gap: 6px;
  color: var(--sx-ink-2);
}

.sx-ranked-bars__live > .sx-dot {
  color: var(--sx-success);
}

/* ---------- Plot ---------- */
.sx-ranked-bars__plot {
  position: relative;
  margin-top: 14px;
  padding-top: 18px;
  border-radius: var(--sx-r-sm);
  touch-action: pan-y;
}

.sx-ranked-bars__plot > * {
  pointer-events: none;
}

.sx-ranked-bars__plot:focus-visible {
  outline-offset: 4px;
}

/* Gridlines and the target sit over the track column only. */
.sx-ranked-bars__scale {
  position: absolute;
  top: 0;
  bottom: 18px;
  left: 0;
  right: calc(var(--rb-value-w) + 12px);
}

.sx-ranked-bars__grid {
  position: absolute;
  top: 18px;
  bottom: 0;
  left: calc(var(--rb-at) * 100%);
  width: 1px;
  background: var(--sx-line-soft);
}

.sx-ranked-bars__grid:first-child {
  background: var(--sx-line-strong);
}

/* A full-width layer slid by the target's fraction: no pixel measuring needed. */
.sx-ranked-bars__target {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform: translateX(calc(var(--rb-t) * 100%));
  transition: transform var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-ranked-bars__target::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: -4px;
  left: -0.5px;
  border-left: 1px dashed var(--sx-ink-2);
  opacity: 0.7;
}

.sx-ranked-bars__target-label {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  line-height: 14px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-ranked-bars__rows {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--rb-gap);
}

.sx-ranked-bars__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rb-value-w);
  align-items: center;
  gap: 12px;
  height: var(--rb-row);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-ranked-bars[data-hover] .sx-ranked-bars__row:not([data-active]) {
  opacity: 0.5;
}

.sx-ranked-bars__track {
  position: relative;
  height: 100%;
}

/* The bar: full track width, clipped to its value, square at the baseline, rounded at the end. */
.sx-ranked-bars__bar {
  position: absolute;
  inset: 0;
  background: var(--sx-c1);
  clip-path: inset(0 calc((1 - var(--rb-f, 0)) * 100%) 0 0 round 0 4px 4px 0);
}

.sx-ranked-bars__name {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
  transform: translateX(calc(var(--rb-lf, 0) * 100% + var(--rb-lp, 8px)));
}

/* The copy inside the bar is clipped by it and wears the colour that reads on the fill. */
.sx-ranked-bars__bar > .sx-ranked-bars__name {
  color: var(--sx-card-bg);
}

@supports (color: oklch(from red l c h)) {
  .sx-ranked-bars__bar > .sx-ranked-bars__name {
    color: oklch(from var(--sx-c1) clamp(0.16, (0.72 - l) * 1000, 1) 0 0);
  }
}

.sx-ranked-bars__value {
  text-align: right;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-ranked-bars__axis {
  position: relative;
  height: 18px;
  margin-right: calc(var(--rb-value-w) + 12px);
  font-size: var(--sx-fs-2xs);
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-ranked-bars__axis > span {
  position: absolute;
  top: 2px;
  left: calc(var(--rb-at) * 100%);
  transform: translateX(-50%);
}

.sx-ranked-bars__axis > span:first-child {
  transform: none;
}

/* ---------- Tooltip ---------- */
.sx-ranked-bars__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  min-width: 132px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--rb-tx), var(--rb-ty)) scale(0.97);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-ranked-bars[data-hover] .sx-ranked-bars__tip {
  opacity: 1;
  transform: translate(var(--rb-tx), var(--rb-ty));
}

.sx-ranked-bars:not([data-glide]) .sx-ranked-bars__tip {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-ranked-bars__tip-name {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-ranked-bars__tip-value {
  color: var(--sx-muted);
}

.sx-ranked-bars__tip-value > strong {
  font-size: var(--sx-fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-ranked-bars__tip-delta {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

@media (prefers-reduced-motion: reduce) {
  .sx-ranked-bars__target {
    transition: none;
  }

  .sx-ranked-bars__tip,
  .sx-ranked-bars[data-hover] .sx-ranked-bars__tip {
    transform: translate(var(--rb-tx), var(--rb-ty));
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }
}


/* ---- Share Donut (share-donut) ---- */
/* ==========================================================================
   Share Donut — parts of a whole as a donut or a pie, with a legend that reads the numbers
   Root: data-variant="donut | pie", data-active while a slice is read out (from the chart,
   the legend or the keyboard), data-glide once the readout may slide between slices.
   The donut reads out in its centre; the pie has no centre, so it shows a tooltip over the slice.
   Slice colours: data-color="1…6" -> --sx-c1 … --sx-c6. A 2px stroke in the card colour is
   the gap between slices. The SVG is drawn in CSS pixels (176 x 176).
   ========================================================================== */

.sx-share-donut {
  --sd-c: var(--sx-c1);
  --sd-tx: 0px;
  --sd-ty: 0px;
  width: 420px;
  padding: 18px 20px 18px;
}

.sx-share-donut [data-color="1"] { --sd-c: var(--sx-c1); }
.sx-share-donut [data-color="2"] { --sd-c: var(--sx-c2); }
.sx-share-donut [data-color="3"] { --sd-c: var(--sx-c3); }
.sx-share-donut [data-color="4"] { --sd-c: var(--sx-c4); }
.sx-share-donut [data-color="5"] { --sd-c: var(--sx-c5); }
.sx-share-donut [data-color="6"] { --sd-c: var(--sx-c6); }

/* ---------- Header ---------- */
.sx-share-donut__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sx-share-donut__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-share-donut__title {
  font-size: var(--sx-fs-md);
}

.sx-share-donut__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* Donut or pie: two equal options with a raised thumb that slides between them. */
.sx-share-donut__switch {
  position: relative;
  display: inline-grid;
  flex: none;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

.sx-share-donut__switch::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: calc(var(--sx-r-md) - 2px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-share-donut[data-variant="pie"] .sx-share-donut__switch::before {
  transform: translateX(100%);
}

.sx-share-donut__option {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-share-donut__option:hover {
  color: var(--sx-ink-2);
}

.sx-share-donut__option[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-share-donut__option:focus-visible {
  outline-offset: 0;
}

/* ---------- Body: chart on the left, legend with the numbers on the right ---------- */
.sx-share-donut__body {
  position: relative;
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  margin-top: 16px;
}

.sx-share-donut__chart {
  position: relative;
  width: 176px;
  height: 176px;
  border-radius: 50%;
  touch-action: pan-y;
}

.sx-share-donut__chart:focus-visible {
  outline-offset: 6px;
}

.sx-share-donut__svg {
  display: block;
  width: 176px;
  height: 176px;
  overflow: visible;
}

.sx-share-donut__slice {
  fill: var(--sd-c);
  stroke: var(--sx-card-bg);
  stroke-width: 2;
  stroke-linejoin: round;
  cursor: pointer;
  transform: translate(0, 0);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* The read-out slice lifts outward along its middle; the others step back. */
.sx-share-donut__slice[data-active] {
  transform: translate(calc(var(--sd-ux, 0) * 5px), calc(var(--sd-uy, 0) * 5px));
}

.sx-share-donut[data-active] .sx-share-donut__slice:not([data-active]) {
  opacity: 0.45;
}

/* Centre: the total, or the share of the slice being read. */
.sx-share-donut__centre {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1px;
  text-align: center;
  pointer-events: none;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-share-donut[data-variant="pie"] .sx-share-donut__centre {
  opacity: 0;
  transform: scale(0.9);
}

.sx-share-donut__value {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  animation: sd-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-share-donut__label {
  max-width: 96px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  animation: sd-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

/* Legend: the direct labels, so no number depends on hovering. */
.sx-share-donut__legend {
  display: grid;
  gap: 2px;
}

.sx-share-donut__item {
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto 40px;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-share-donut__item[data-active] {
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-share-donut[data-active] .sx-share-donut__item:not([data-active]) {
  opacity: 0.6;
}

.sx-share-donut__swatch {
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  background: var(--sd-c);
}

.sx-share-donut__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sx-share-donut__amount,
.sx-share-donut__share {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-share-donut__amount {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-share-donut__share {
  color: var(--sx-muted);
}

/* ---------- Tooltip (pie): over the slice, kept inside the card body ---------- */
.sx-share-donut__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--sd-tx), var(--sd-ty)) scale(0.97);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-share-donut[data-variant="pie"][data-active] .sx-share-donut__tip {
  opacity: 1;
  transform: translate(var(--sd-tx), var(--sd-ty));
}

.sx-share-donut:not([data-glide]) .sx-share-donut__tip {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-share-donut__tip-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-share-donut__key {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--sd-c);
}

.sx-share-donut__tip-value {
  color: var(--sx-muted);
}

.sx-share-donut__tip-value > strong {
  font-size: var(--sx-fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-share-donut__tip-share {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

@keyframes sd-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes sd-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-share-donut__slice[data-active] {
    transform: none;
  }

  .sx-share-donut__slice {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-share-donut__value,
  .sx-share-donut__label {
    animation-name: sd-fade;
  }

  .sx-share-donut__switch::before {
    transition-property: opacity;
  }

  .sx-share-donut[data-variant="pie"] .sx-share-donut__centre {
    transform: none;
  }

  .sx-share-donut__tip,
  .sx-share-donut[data-variant="pie"][data-active] .sx-share-donut__tip {
    transform: translate(var(--sd-tx), var(--sd-ty));
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  /* The slices fade in instead of sweeping round. */
  .sx-share-donut__svg {
    animation: sd-fade var(--sx-dur-4) var(--sx-ease-out) both;
  }
}


/* ---- Radial Gauge (radial-gauge) ---- */
/* ==========================================================================
   Radial Gauge — one value on a semicircle with poor, fair and good bands
   Sizes: default (card 340px) and .sx-radial-gauge--sm (card 170px, no scale labels).
   Bands carry data-tone="danger | warning | success" (status colours, with a label beside them);
   the band the needle sits in carries data-current and shows in full colour.
   Root: data-hover while a band or the target is read out (pointer or keyboard),
   data-glide once the readout may slide between them.
   ========================================================================== */

.sx-radial-gauge {
  --rg-tone: var(--sx-muted);
  --rg-tx: 0px;
  --rg-ty: 0px;
  width: 340px;
  padding: 18px 20px 18px;
}

.sx-radial-gauge [data-tone="danger"] { --rg-tone: var(--sx-danger); }
.sx-radial-gauge [data-tone="warning"] { --rg-tone: var(--sx-warning); }
.sx-radial-gauge [data-tone="success"] { --rg-tone: var(--sx-success); }

/* ---------- Header ---------- */
.sx-radial-gauge__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-radial-gauge__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-radial-gauge__title {
  font-size: var(--sx-fs-md);
}

.sx-radial-gauge__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-radial-gauge__status {
  flex: none;
  animation: rg-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

/* ---------- Dial ---------- */
.sx-radial-gauge__dial {
  position: relative;
  width: 300px;
  height: 172px;
  margin: 14px auto 0;
  border-radius: var(--sx-r-md);
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer positions are always read off the dial itself. */
.sx-radial-gauge__dial > * {
  pointer-events: none;
}

.sx-radial-gauge__dial:focus-visible {
  outline-offset: 4px;
}

.sx-radial-gauge__svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sx-radial-gauge__track {
  fill: var(--sx-c-track);
}

.sx-radial-gauge__band {
  fill: color-mix(in srgb, var(--rg-tone) 17%, transparent);
  transition: fill var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radial-gauge__band[data-current] {
  fill: var(--rg-tone);
}

/* Reading a band steps the other bands back; reading the target leaves them as they are. */
.sx-radial-gauge__svg:has(.sx-radial-gauge__band[data-active]) .sx-radial-gauge__band:not([data-active]) {
  opacity: 0.55;
}

.sx-radial-gauge__scale {
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
}

.sx-radial-gauge__target {
  stroke: var(--sx-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.sx-radial-gauge__needle {
  fill: var(--sx-ink);
}

.sx-radial-gauge__hub {
  fill: var(--sx-card-bg);
}

/* ---------- Value: rolls beneath the needle ---------- */
.sx-radial-gauge__readout {
  display: grid;
  justify-items: center;
  gap: 2px;
  margin-top: 6px;
  text-align: center;
}

.sx-radial-gauge__value {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-radial-gauge__meta {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* ---------- Tooltip: over the dial, kept inside the card ---------- */
.sx-radial-gauge__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: grid;
  gap: 2px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--rg-tx), var(--rg-ty)) scale(0.97);
  transform-origin: left top;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-radial-gauge[data-hover] .sx-radial-gauge__tip {
  opacity: 1;
  transform: translate(var(--rg-tx), var(--rg-ty));
}

.sx-radial-gauge:not([data-glide]) .sx-radial-gauge__tip {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radial-gauge__tip-name {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-radial-gauge__key {
  width: 10px;
  height: 2px;
  border-radius: 2px;
  background: var(--rg-tone);
}

.sx-radial-gauge__key[data-target] {
  background: var(--sx-ink);
}

.sx-radial-gauge__tip-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* ---------- Small: a compact card for rows of gauges ---------- */
.sx-radial-gauge--sm {
  width: 170px;
  padding: 12px 14px 12px;
}

.sx-radial-gauge--sm .sx-radial-gauge__title {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-radial-gauge--sm .sx-radial-gauge__dial {
  width: 142px;
  height: 80px;
  margin-top: 8px;
}

.sx-radial-gauge--sm .sx-radial-gauge__target {
  stroke-width: 1.5;
}

.sx-radial-gauge--sm .sx-radial-gauge__readout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
}

.sx-radial-gauge--sm .sx-radial-gauge__value {
  font-size: var(--sx-fs-xl);
}

/* ---------- Demo layout: one headline gauge beside two small ones ---------- */
.sx-radial-gauge-demo {
  display: grid;
  grid-template-columns: auto auto;
  align-items: start;
  gap: 12px;
}

.sx-radial-gauge-demo__side {
  display: grid;
  gap: 12px;
}

@keyframes rg-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes rg-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-radial-gauge__status {
    animation-name: rg-fade;
  }

  .sx-radial-gauge__tip,
  .sx-radial-gauge[data-hover] .sx-radial-gauge__tip {
    transform: translate(var(--rg-tx), var(--rg-ty));
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  /* The dial fades in instead of sweeping. */
  .sx-radial-gauge__svg {
    animation: rg-fade var(--sx-dur-4) var(--sx-ease-out) both;
  }
}


/* ---- Radar Web (radar-web) ---- */
/* ==========================================================================
   Radar Web — a profile across several measures, compared with a baseline
   Root: data-state="intro | ready" (intro only matters under reduced motion: the plot fades in).
   Plot: one SVG in CSS px (380 x 272). Shapes are redrawn from data on every frame of a morph.
   Series colours: data-series="1 | 2" -> --sx-c1 (the selected profile), --sx-c2 (the baseline).
   Active axis: .sx-radar-web__plot[data-active]. The tooltip is HTML placed with --rw-tx / --rw-ty in
   the plot corner nearest the axis that no label occupies, so it never covers the shapes it reads.
   ========================================================================== */

.sx-radar-web {
  width: 420px;
  padding: 18px 20px 16px;
}

.sx-radar-web [data-series="1"] {
  --rw-c: var(--sx-c1);
}

.sx-radar-web [data-series="2"] {
  --rw-c: var(--sx-c2);
}

/* ---------- Header ---------- */
.sx-radar-web__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-radar-web__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-radar-web__title {
  font-size: var(--sx-fs-md);
}

.sx-radar-web__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* Segmented choice of the profile; the checked option is raised. */
.sx-radar-web__switch {
  display: inline-flex;
  flex: none;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-radar-web__switch-option {
  padding: 0 9px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radar-web__switch-option:hover {
  color: var(--sx-ink-2);
}

.sx-radar-web__switch-option[aria-checked="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-radar-web__switch-option:focus-visible {
  outline-offset: 0;
}

/* ---------- Plot ---------- */
.sx-radar-web__plot {
  position: relative;
  width: 380px;
  height: 272px;
  margin-top: 4px;
  border-radius: var(--sx-r-md);
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-radar-web__plot > * {
  pointer-events: none;
}

.sx-radar-web__plot:focus-visible {
  outline-offset: 2px;
}

.sx-radar-web__svg {
  display: block;
  width: 380px;
  height: 272px;
  overflow: visible;
}

.sx-radar-web__ring {
  fill: none;
  stroke: var(--sx-line-soft);
  stroke-width: 1px;
}

.sx-radar-web__ring:last-of-type {
  stroke: var(--sx-line);
}

.sx-radar-web__spoke {
  stroke: var(--sx-line-soft);
  stroke-width: 1px;
  transition: stroke var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radar-web__spoke[data-active] {
  stroke: var(--sx-line-strong);
}

.sx-radar-web__tick {
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-faint);
}

.sx-radar-web__label {
  font-size: var(--sx-fs-xs);
  fill: var(--sx-muted);
  transition: fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radar-web__label[data-active] {
  fill: var(--sx-ink);
}

.sx-radar-web__series {
  transition: opacity var(--sx-dur-4) var(--sx-ease-out);
}

.sx-radar-web__area {
  fill: var(--rw-c);
  fill-opacity: 0.13;
  stroke: var(--rw-c);
  stroke-width: 2px;
  stroke-linejoin: round;
}

/* The baseline is a lighter wash, so where the two overlap the colour stays clean. */
.sx-radar-web__series[data-series="2"] .sx-radar-web__area {
  fill-opacity: 0.07;
}

/* One dot per series on the active axis, ringed in the card colour so it reads over the lines. */
.sx-radar-web__dot {
  fill: var(--rw-c);
  stroke: var(--sx-card-bg);
  stroke-width: 2px;
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radar-web__plot[data-active] .sx-radar-web__dot {
  opacity: 1;
}

/* Glide between axes only once the dots are showing; they appear in place. */
.sx-radar-web__plot[data-glide] .sx-radar-web__dot {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Tooltip ---------- */
.sx-radar-web__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--rw-tx, 0px), var(--rw-ty, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-radar-web__tip[data-show] {
  opacity: 1;
}

.sx-radar-web__tip-title {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-radar-web__tip-rows {
  display: grid;
  gap: 2px;
}

/* Values lead, names follow; a short stroke of the series colour keys each row. */
.sx-radar-web__tip-row {
  display: grid;
  grid-template-columns: 10px 22px auto;
  align-items: center;
  gap: 7px;
}

.sx-radar-web__tip-row b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-radar-web__tip-row span {
  color: var(--sx-muted);
}

.sx-radar-web__key {
  width: 10px;
  height: 2px;
  border-radius: 1px;
  background: var(--rw-c);
}

/* ---------- Legend ---------- */
.sx-radar-web__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 6px;
  padding-top: 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-radar-web__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Areas are keyed with a small filled square, the shape the legend stands for. */
.sx-radar-web__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
  background: color-mix(in srgb, var(--rw-c) 22%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--rw-c);
}

.sx-radar-web__legend-value {
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-radar-web__legend-unit {
  margin-left: -3px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  /* Shapes appear at full size and fade in instead of growing. */
  .sx-radar-web[data-state="intro"] .sx-radar-web__series {
    opacity: 0;
  }

  .sx-radar-web__plot[data-glide] .sx-radar-web__dot {
    transition-property: opacity;
  }
}


/* ---- Bubble Plot (bubble-plot) ---- */
/* ==========================================================================
   Bubble Plot — two measures and a size, by group
   Root: data-view="scatter | bubble", data-state="intro | ready".
   Plot: one SVG in CSS px (440 x 262); points are redrawn from data on every frame of a morph.
   Group colours: data-series="1 | 2 | 3" -> --sx-c1 .. --sx-c3 (any two can sit side by side,
   so three groups at most). The legend buttons filter groups (aria-pressed).
   Active point: .sx-bubble-plot__plot[data-active]; the crosshair and halo follow it, the axis tags
   and the tooltip are HTML placed with --bp-* custom properties.
   ========================================================================== */

.sx-bubble-plot {
  width: 480px;
  padding: 18px 20px 14px;
}

.sx-bubble-plot [data-series="1"] {
  --bp-c: var(--sx-c1);
}

.sx-bubble-plot [data-series="2"] {
  --bp-c: var(--sx-c2);
}

.sx-bubble-plot [data-series="3"] {
  --bp-c: var(--sx-c3);
}

/* ---------- Header ---------- */
.sx-bubble-plot__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-bubble-plot__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-bubble-plot__title {
  font-size: var(--sx-fs-md);
}

.sx-bubble-plot__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-bubble-plot__switch {
  display: inline-flex;
  flex: none;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-bubble-plot__switch-option {
  padding: 0 9px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__switch-option:hover {
  color: var(--sx-ink-2);
}

.sx-bubble-plot__switch-option[aria-checked="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-bubble-plot__switch-option:focus-visible {
  outline-offset: 0;
}

/* ---------- Plot ---------- */
.sx-bubble-plot__plot {
  position: relative;
  width: 440px;
  height: 262px;
  margin-top: 12px;
  border-radius: var(--sx-r-md);
  cursor: crosshair;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-bubble-plot__plot > * {
  pointer-events: none;
}

.sx-bubble-plot__plot:focus-visible {
  outline-offset: 4px;
}

.sx-bubble-plot__svg {
  display: block;
  width: 440px;
  height: 262px;
  overflow: visible;
}

.sx-bubble-plot__grid line {
  stroke: var(--sx-line-soft);
  stroke-width: 1px;
}

.sx-bubble-plot__grid .sx-bubble-plot__axis-line {
  stroke: var(--sx-line);
}

.sx-bubble-plot__tick,
.sx-bubble-plot__axis-title {
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
}

.sx-bubble-plot__axis-title {
  fill: var(--sx-ink-2);
}

.sx-bubble-plot__tick {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* A tick label under an axis tag steps aside while the tag is showing. */
.sx-bubble-plot__tick[data-covered] {
  opacity: 0;
}

/* Quadrants: two hairlines at the thresholds and a quiet name in each corner. */
.sx-bubble-plot__quad-line {
  stroke: var(--sx-line-strong);
  stroke-width: 1px;
}

.sx-bubble-plot__quad-label {
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  fill: var(--sx-faint);
}

.sx-bubble-plot__point {
  fill: var(--bp-c);
  fill-opacity: 0.82;
  stroke: var(--sx-card-bg);
  stroke-width: 1.5px;
  transition:
    fill-opacity var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* Big bubbles overlap, so they turn translucent; the ring keeps each edge readable. */
.sx-bubble-plot[data-view="bubble"] .sx-bubble-plot__point {
  fill-opacity: 0.5;
}

.sx-bubble-plot__plot[data-active] .sx-bubble-plot__point:not([data-active]) {
  opacity: 0.45;
}

.sx-bubble-plot__plot[data-active] .sx-bubble-plot__point[data-active] {
  fill-opacity: 0.95;
}

/* Crosshair from the active point to both axes, and a halo around the point. */
.sx-bubble-plot__cross line {
  stroke: var(--sx-line-strong);
  stroke-width: 1px;
}

.sx-bubble-plot__halo {
  fill: none;
  stroke: var(--sx-ink-2);
  stroke-width: 1.5px;
}

.sx-bubble-plot__cross,
.sx-bubble-plot__halo {
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__plot[data-active] :is(.sx-bubble-plot__cross, .sx-bubble-plot__halo) {
  opacity: 1;
}

/* Value tags on the axes, where the crosshair lands. */
.sx-bubble-plot__tag {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 1px 5px;
  border-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__tag--x {
  transform: translate(calc(var(--bp-x, 0px) - 50%), var(--bp-y, 0px));
}

.sx-bubble-plot__tag--y {
  transform: translate(calc(var(--bp-x, 0px) - 100%), calc(var(--bp-y, 0px) - 50%));
}

.sx-bubble-plot__plot[data-active] .sx-bubble-plot__tag {
  opacity: 1;
}

/* ---------- Tooltip ---------- */
.sx-bubble-plot__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--bp-tx, 0px), var(--bp-ty, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__tip[data-show] {
  opacity: 1;
}

.sx-bubble-plot__plot[data-glide] .sx-bubble-plot__tip {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-bubble-plot__tip-title {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-bubble-plot__tip-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-muted);
}

.sx-bubble-plot__tip-rows {
  display: grid;
  gap: 2px;
  padding-top: 4px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* Values lead, labels follow. */
.sx-bubble-plot__tip-row {
  display: grid;
  grid-template-columns: 64px auto;
  align-items: baseline;
  gap: 7px;
}

.sx-bubble-plot__tip-row b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-bubble-plot__tip-row span {
  color: var(--sx-muted);
}

/* ---------- Legend: toggles that filter groups ---------- */
.sx-bubble-plot__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 10px;
  padding-top: 10px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-bubble-plot__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -7px;
}

.sx-bubble-plot__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--sx-h-xs);
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__legend-item:hover {
  background: var(--sx-fill);
}

.sx-bubble-plot__legend-item[aria-pressed="false"] {
  color: var(--sx-faint);
}

.sx-bubble-plot__legend-item:focus-visible {
  outline-offset: 0;
}

/* Dots key the points; a switched-off group keeps only the ring of its colour. */
.sx-bubble-plot__swatch {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--bp-c);
  box-shadow: inset 0 0 0 1.5px var(--bp-c);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-bubble-plot__legend-item[aria-pressed="false"] .sx-bubble-plot__swatch {
  background: transparent;
}

.sx-bubble-plot__legend-count {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* In bubble mode a note says what the size means. */
.sx-bubble-plot__size-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-muted);
  opacity: 0;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-bubble-plot[data-view="bubble"] .sx-bubble-plot__size-note {
  opacity: 1;
}

.sx-bubble-plot__size-key {
  display: block;
  overflow: visible;
}

.sx-bubble-plot__size-key circle {
  fill: none;
  stroke: var(--sx-muted);
  stroke-width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  /* Points appear at full size and fade in instead of growing. */
  .sx-bubble-plot[data-state="intro"] .sx-bubble-plot__points {
    opacity: 0;
  }

  .sx-bubble-plot__points {
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-bubble-plot__plot[data-glide] .sx-bubble-plot__tip {
    transition-property: opacity;
  }
}


/* ---- Conversion Funnel (conversion-funnel) ---- */
/* ==========================================================================
   Conversion Funnel — steps from first visit to purchase, with the drop-off between each
   Root: data-period (the period shown), data-state="intro | ready". Variants: default (a centred funnel, steps top to bottom)
   and .sx-conversion-funnel--compact (steps left to right, each with a thin share bar).
   Plot: one SVG in CSS px, redrawn from data on every frame of a morph. The active step is
   .sx-conversion-funnel__plot[data-active] plus data-active on that step's marks; the tooltip
   is HTML placed with --cf-tx / --cf-ty.
   Bars use --sx-c1; what dropped off shows as the track (--sx-c-track).
   ========================================================================== */

.sx-conversion-funnel {
  width: 480px;
  padding: 18px 20px 14px;
}

/* ---------- Header ---------- */
.sx-conversion-funnel__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-conversion-funnel__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-conversion-funnel__title {
  font-size: var(--sx-fs-md);
}

.sx-conversion-funnel__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* The period line is a fresh node for every period, so it swaps in with a soft blur. */
.sx-conversion-funnel__sub {
  animation: cf-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-conversion-funnel__switch {
  display: inline-flex;
  flex: none;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-conversion-funnel__switch-option {
  padding: 0 9px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-conversion-funnel__switch-option:hover {
  color: var(--sx-ink-2);
}

.sx-conversion-funnel__switch-option[aria-checked="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-conversion-funnel__switch-option:focus-visible {
  outline-offset: 0;
}

/* ---------- Plot ---------- */
.sx-conversion-funnel__plot {
  position: relative;
  width: 440px;
  margin-top: 16px;
  border-radius: var(--sx-r-md);
  touch-action: pan-y;
}

.sx-conversion-funnel--compact .sx-conversion-funnel__plot {
  margin-top: 14px;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-conversion-funnel__plot > * {
  pointer-events: none;
}

.sx-conversion-funnel__plot:focus-visible {
  outline-offset: 4px;
}

.sx-conversion-funnel__svg {
  display: block;
  overflow: visible;
}

.sx-conversion-funnel__bar {
  fill: var(--sx-c1);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* Between two steps: the track is what dropped off, the soft band is what carried on. */
.sx-conversion-funnel__link {
  fill: var(--sx-c-track);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-conversion-funnel__flow {
  fill: color-mix(in srgb, var(--sx-c1) 16%, transparent);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-conversion-funnel__track {
  fill: var(--sx-c-track);
}

.sx-conversion-funnel__chevron {
  fill: none;
  stroke: var(--sx-faint);
  stroke-width: 1.5px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* While a step is read, the other steps step back. */
.sx-conversion-funnel__plot[data-active] :is(.sx-conversion-funnel__bar, .sx-conversion-funnel__link, .sx-conversion-funnel__flow):not([data-active]) {
  opacity: 0.45;
}

.sx-conversion-funnel__name {
  font-size: var(--sx-fs-sm);
  fill: var(--sx-ink-2);
  transition: fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-conversion-funnel--compact .sx-conversion-funnel__name {
  font-size: var(--sx-fs-xs);
  fill: var(--sx-muted);
}

.sx-conversion-funnel__count {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-ink);
}

.sx-conversion-funnel--compact .sx-conversion-funnel__count {
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-conversion-funnel__name[data-active] {
  fill: var(--sx-ink);
}

.sx-conversion-funnel__drop {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
}

.sx-conversion-funnel__drop-count {
  fill: var(--sx-ink-2);
  font-weight: var(--sx-strong-weight);
}

/* ---------- Tooltip ---------- */
.sx-conversion-funnel__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--cf-tx, 0px), var(--cf-ty, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-conversion-funnel__tip[data-show] {
  opacity: 1;
}

/* Glide between steps only once the tooltip is showing; it appears in place. */
.sx-conversion-funnel__plot[data-glide] .sx-conversion-funnel__tip {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-conversion-funnel__tip-title {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-conversion-funnel__tip-rows {
  display: grid;
  gap: 2px;
}

/* Values lead, labels follow. */
.sx-conversion-funnel__tip-row {
  display: grid;
  grid-template-columns: 44px auto;
  align-items: baseline;
  gap: 7px;
}

.sx-conversion-funnel__tip-row b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-conversion-funnel__tip-row span {
  color: var(--sx-muted);
}

/* ---------- Foot: overall conversion and the legend ---------- */
.sx-conversion-funnel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 11px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-conversion-funnel__summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: var(--sx-fs-sm);
}

.sx-conversion-funnel__summary b {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-conversion-funnel__legend {
  display: flex;
  gap: 14px;
}

.sx-conversion-funnel__legend > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sx-conversion-funnel__swatch {
  width: 10px;
  height: 8px;
  flex: none;
  border-radius: 2px;
  background: var(--sx-c1);
}

.sx-conversion-funnel__swatch[data-key="dropped"] {
  background: var(--sx-c-track);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

@keyframes cf-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-conversion-funnel__sub {
    animation-name: sx-fade-in;
  }

  .sx-conversion-funnel__plot[data-glide] .sx-conversion-funnel__tip {
    transition-property: opacity;
  }

  /* The marks appear at full size and fade in instead of growing. */
  .sx-conversion-funnel[data-state="intro"] .sx-conversion-funnel__svg {
    opacity: 0;
  }

  .sx-conversion-funnel__svg {
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }
}

/* ---------- Demo layout: the default funnel above a compact one ---------- */
.sx-conversion-funnel-demo {
  display: grid;
  gap: 10px;
  width: 480px;
}


/* ---- Heat Calendar (heat-calendar) ---- */
/* ==========================================================================
   Heat Calendar — daily activity as squares, one column per week
   Root: data-metric (the metric shown), data-state="intro | ready" (intro shows every day as
   the empty track; ready fills the squares in a wave from the first week to the last).
   Cells: data-level="0..5". 0 is no activity (the track); 1–5 mix --sx-c1 into the track.
   The week column (--hc-col) staggers the fill, so a metric change washes across the year.
   Active day: .sx-heat-calendar__plot[data-active] plus a ring moved with --hc-x / --hc-y;
   the tooltip is HTML placed with --hc-tx / --hc-ty.
   ========================================================================== */

.sx-heat-calendar {
  width: 644px;
  padding: 18px 18px 14px;
}

/* ---------- Header ---------- */
.sx-heat-calendar__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.sx-heat-calendar__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-heat-calendar__title {
  font-size: var(--sx-fs-md);
}

/* The metric line is a fresh node for every metric, so it swaps in with a soft blur. */
.sx-heat-calendar__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  animation: hc-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-heat-calendar__switch {
  display: inline-flex;
  flex: none;
  height: var(--sx-h-sm);
  padding: 2px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-heat-calendar__switch-option {
  padding: 0 9px;
  border-radius: calc(var(--sx-r-md) - 2px);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-heat-calendar__switch-option:hover {
  color: var(--sx-ink-2);
}

.sx-heat-calendar__switch-option[aria-checked="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-heat-calendar__switch-option:focus-visible {
  outline-offset: 0;
}

/* ---------- Plot ---------- */
.sx-heat-calendar__plot {
  position: relative;
  width: max-content;
  margin-top: 16px;
  border-radius: var(--sx-r-xs);
  cursor: default;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-heat-calendar__plot > * {
  pointer-events: none;
}

.sx-heat-calendar__plot:focus-visible {
  outline-offset: 4px;
}

.sx-heat-calendar__svg {
  display: block;
  overflow: visible;
}

.sx-heat-calendar__month,
.sx-heat-calendar__day {
  font-size: var(--sx-fs-2xs);
  fill: var(--sx-muted);
}

.sx-heat-calendar__cell {
  --hc-v: 0;
  width: var(--hc-cell, 9px);
  height: var(--hc-cell, 9px);
  rx: var(--hc-r, 2px);
  ry: var(--hc-r, 2px);
  fill: color-mix(in oklab, var(--sx-c1) calc(var(--hc-v) * 100%), var(--sx-c-track));
  transition: fill var(--sx-dur-4) var(--sx-ease-out) calc(var(--hc-col, 0) * var(--sx-dur-1) / 20);
}

.sx-heat-calendar__cell[data-level="1"] {
  --hc-v: 0.12;
}

.sx-heat-calendar__cell[data-level="2"] {
  --hc-v: 0.34;
}

.sx-heat-calendar__cell[data-level="3"] {
  --hc-v: 0.56;
}

.sx-heat-calendar__cell[data-level="4"] {
  --hc-v: 0.78;
}

.sx-heat-calendar__cell[data-level="5"] {
  --hc-v: 1;
}

/* Before the reveal every day is the empty track. */
.sx-heat-calendar[data-state="intro"] .sx-heat-calendar__cell {
  --hc-v: 0;
  transition: none;
}

/* One ring for the active day; it glides from day to day once it is showing. */
.sx-heat-calendar__ring {
  x: -2px;
  y: -2px;
  width: calc(var(--hc-cell, 9px) + 4px);
  height: calc(var(--hc-cell, 9px) + 4px);
  rx: calc(var(--hc-r, 2px) + 1.5px);
  ry: calc(var(--hc-r, 2px) + 1.5px);
  fill: none;
  stroke: var(--sx-ink);
  stroke-width: 1.5px;
  opacity: 0;
  transform: translate(var(--hc-x, 0px), var(--hc-y, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-heat-calendar__plot[data-active] .sx-heat-calendar__ring {
  opacity: 1;
}

.sx-heat-calendar__plot[data-glide] .sx-heat-calendar__ring {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

/* ---------- Tooltip (above the day; it may rise over the header, never past the card) ---------- */
.sx-heat-calendar__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 6px 9px 7px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.3;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--hc-tx, 0px), var(--hc-ty, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-heat-calendar__tip[data-show] {
  opacity: 1;
}

.sx-heat-calendar__plot[data-glide] .sx-heat-calendar__tip {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-heat-calendar__tip-day {
  color: var(--sx-muted);
}

.sx-heat-calendar__tip-value {
  color: var(--sx-muted);
}

.sx-heat-calendar__tip-value b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* ---------- Foot: busiest day, total and the scale ---------- */
.sx-heat-calendar__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 14px;
  padding-top: 11px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-heat-calendar__summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: var(--sx-fs-sm);
}

.sx-heat-calendar__stat {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

.sx-heat-calendar__stat b {
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* The busiest day is a fresh node whenever it changes, so it swaps in like the subtitle. */
.sx-heat-calendar__peak {
  animation: hc-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-heat-calendar__scale {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sx-heat-calendar__scale-step {
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--sx-c1) calc(var(--hc-v, 0) * 100%), var(--sx-c-track));
}

.sx-heat-calendar__scale-step:first-of-type {
  margin-left: 5px;
}

.sx-heat-calendar__scale-step:last-of-type {
  margin-right: 5px;
}

@keyframes hc-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Colours still cross-fade, but all at once instead of as a wave. */
  .sx-heat-calendar__cell {
    transition-delay: 0s;
  }

  .sx-heat-calendar__sub,
  .sx-heat-calendar__peak {
    animation-name: sx-fade-in;
  }

  .sx-heat-calendar__plot[data-glide] .sx-heat-calendar__ring,
  .sx-heat-calendar__plot[data-glide] .sx-heat-calendar__tip {
    transition-property: opacity;
  }
}


/* ---- Tile Map (tile-map) ---- */
/* ==========================================================================
   Tile Map — a squarified treemap of categories and their products, sized by value
   Root: data-zoom (the category zoomed into; absent at the top), data-state="intro | ready".
   Plot: one SVG in CSS px (480 x 264), clipped to its box so tiles can fly out while zooming.
   Every product is a tile; at the top level a category is the group of its tiles. Tiles are
   redrawn from data on every frame of a zoom. Category colours: data-series="1..6" -> --sx-c1..6,
   as a soft tint so ink labels read on top in both modes.
   Labels show only where they fit ([data-show]); the tooltip is HTML placed with --tm-tx / --tm-ty.
   ========================================================================== */

.sx-tile-map {
  width: 520px;
  padding: 18px 20px 14px;
}

.sx-tile-map [data-series="1"] {
  --tm-c: var(--sx-c1);
}

.sx-tile-map [data-series="2"] {
  --tm-c: var(--sx-c2);
}

.sx-tile-map [data-series="3"] {
  --tm-c: var(--sx-c3);
}

.sx-tile-map [data-series="4"] {
  --tm-c: var(--sx-c4);
}

.sx-tile-map [data-series="5"] {
  --tm-c: var(--sx-c5);
}

.sx-tile-map [data-series="6"] {
  --tm-c: var(--sx-c6);
}

/* ---------- Header and breadcrumbs ---------- */
.sx-tile-map__heading {
  display: grid;
  gap: 3px;
}

.sx-tile-map__title {
  font-size: var(--sx-fs-md);
}

.sx-tile-map__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-tile-map__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--sx-h-xs);
  margin-top: 12px;
}

.sx-tile-map__crumbs > ol {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: -6px;
}

.sx-tile-map__crumbs li {
  display: inline-flex;
  align-items: center;
  animation: tm-crumb-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-tile-map__crumb {
  display: inline-flex;
  align-items: center;
  height: var(--sx-h-xs);
  padding: 0 6px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
}

button.sx-tile-map__crumb {
  color: var(--sx-muted);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

button.sx-tile-map__crumb:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

button.sx-tile-map__crumb:focus-visible {
  outline-offset: 0;
}

.sx-tile-map__crumb-sep {
  color: var(--sx-faint);
  --sx-icon-size: 13px;
}

.sx-tile-map__total {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-tile-map__total b {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* ---------- Plot ---------- */
.sx-tile-map__plot {
  position: relative;
  width: 480px;
  height: 264px;
  margin-top: 8px;
  border-radius: var(--sx-r-md);
  cursor: pointer;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-tile-map__plot > * {
  pointer-events: none;
}

.sx-tile-map__plot:focus-visible {
  outline-offset: 3px;
}

.sx-tile-map__plot[data-level="1"] {
  cursor: default;
}

.sx-tile-map__svg {
  display: block;
  width: 480px;
  height: 264px;
  overflow: hidden;
  clip-path: inset(0 round var(--sx-r-md));
}

.sx-tile-map__tile {
  fill: color-mix(in oklab, var(--tm-c) 22%, var(--sx-card-bg));
  transition: fill var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tile-map__tile[data-active] {
  fill: color-mix(in oklab, var(--tm-c) 38%, var(--sx-card-bg));
}

/* Labels: the name, then the value and its share. Ink on a soft tint reads in every theme. */
.sx-tile-map__label {
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

/* Labels arriving with a zoom wait for the tiles to settle. */
.sx-tile-map__label[data-show] {
  opacity: 1;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) var(--sx-dur-4);
}

.sx-tile-map[data-state="intro"] .sx-tile-map__label[data-show] {
  opacity: 0;
  transition: none;
}

.sx-tile-map__label-name {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  fill: var(--sx-ink);
}

.sx-tile-map__label-value {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  fill: var(--sx-ink-2);
}

.sx-tile-map__label-share {
  fill: var(--sx-muted);
}

/* A tile with room for one line keeps the name and drops the value. */
.sx-tile-map__label[data-show="name"] .sx-tile-map__label-value {
  opacity: 0;
}

/* ---------- Tooltip ---------- */
.sx-tile-map__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: grid;
  gap: 4px;
  padding: 7px 10px 8px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  line-height: 1.25;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--tm-tx, 0px), var(--tm-ty, 0px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tile-map__tip[data-show] {
  opacity: 1;
}

.sx-tile-map__plot[data-glide] .sx-tile-map__tip {
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-tile-map__tip-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-tile-map__tip-rows {
  display: grid;
  gap: 2px;
}

/* Values lead, labels follow. */
.sx-tile-map__tip-row {
  display: grid;
  grid-template-columns: 66px auto;
  align-items: baseline;
  gap: 7px;
}

.sx-tile-map__tip-row b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-tile-map__tip-row span {
  color: var(--sx-muted);
}

.sx-tile-map__tip-hint {
  padding-top: 4px;
  color: var(--sx-muted);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* ---------- Legend: one button per category, which zooms into it ---------- */
.sx-tile-map__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 10px 0 0 -7px;
}

.sx-tile-map__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--sx-h-xs);
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  color: var(--sx-ink-2);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-tile-map__legend-item:hover {
  background: var(--sx-fill);
}

.sx-tile-map__legend-item[aria-pressed="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-tile-map[data-zoom] .sx-tile-map__legend-item[aria-pressed="false"] {
  color: var(--sx-muted);
}

.sx-tile-map__legend-item:focus-visible {
  outline-offset: 0;
}

.sx-tile-map__swatch {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 3px;
  background: color-mix(in oklab, var(--tm-c) 22%, var(--sx-card-bg));
  box-shadow: inset 0 0 0 1.5px var(--tm-c);
}

@keyframes tm-crumb-in {
  from {
    opacity: 0;
    transform: translateX(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-tile-map__crumbs li {
    animation-name: sx-fade-in;
  }

  /* Tiles appear in place and fade in instead of growing. */
  .sx-tile-map[data-state="intro"] .sx-tile-map__tiles {
    opacity: 0;
  }

  .sx-tile-map__tiles {
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-tile-map__label[data-show] {
    transition-delay: 0s;
  }

  .sx-tile-map__plot[data-glide] .sx-tile-map__tip {
    transition-property: opacity;
  }
}


/* ---- Lead Score (lead-score) ---- */
/* ==========================================================================
   Lead Score — a 0–100 score, the grade it earns and the signals behind it
   Root data-grade="hot | warm | cold" sets the tone of the ring, the grade chip and the
        new-row highlight; data-intro is present while the first roll plays (rows rise in
        one after another).
   Ring: .sx-lead-score__arc reads --ls-value (0–100) for its dash. The figure and the arc
         are driven by the same tween, so they always agree.
   Rows: data-tone="up | down"; a row that arrives after the first paint carries data-enter
         and opens with the grid-rows trick, pushing the rows below it down smoothly.
   ========================================================================== */

.sx-lead-score {
  --ls-tone: var(--sx-warning);
  --ls-tone-ink: var(--sx-warning-ink);
  --ls-tone-soft: var(--sx-warning-soft);
  --ls-tone-line: var(--sx-warning-line);
  --ls-ring: 84px;
  width: 384px;
  overflow: hidden;
}

.sx-lead-score[data-grade="hot"] {
  --ls-tone: var(--sx-danger);
  --ls-tone-ink: var(--sx-danger-ink);
  --ls-tone-soft: var(--sx-danger-soft);
  --ls-tone-line: var(--sx-danger-line);
}

.sx-lead-score[data-grade="cold"] {
  --ls-tone: var(--sx-info);
  --ls-tone-ink: var(--sx-info-ink);
  --ls-tone-soft: var(--sx-info-soft);
  --ls-tone-line: var(--sx-info-line);
}

/* ---------- Head: ring and the person ---------- */
.sx-lead-score__head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 16px 14px;
}

.sx-lead-score__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--ls-ring);
  height: var(--ls-ring);
  flex: none;
}

.sx-lead-score__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}

.sx-lead-score__track,
.sx-lead-score__arc {
  fill: none;
  stroke-width: 7;
}

.sx-lead-score__track {
  stroke: var(--sx-c-track);
}

.sx-lead-score__arc {
  stroke: var(--ls-tone);
  stroke-linecap: round;
  stroke-dasharray: var(--ls-value, 0) 100;
  transition: stroke var(--sx-dur-4) var(--sx-ease-out);
}

.sx-lead-score__figure {
  position: relative;
  display: grid;
  justify-items: center;
  line-height: 1;
}

/* Reserved width: the figure never shifts while it rolls from one digit count to another. */
.sx-lead-score__value {
  width: 3ch;
  font-size: var(--sx-fs-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sx-lead-score__of {
  margin-top: 5px;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-lead-score__info {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-lead-score__name {
  font-size: var(--sx-fs-md);
}

.sx-lead-score__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-lead-score__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 9px;
}

.sx-lead-score__grade {
  color: var(--ls-tone-ink);
  background: var(--ls-tone-soft);
  box-shadow: inset 0 0 0 1px var(--ls-tone-line);
  transition:
    color var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out),
    box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-lead-score__grade > .sx-dot {
  background: var(--ls-tone);
  transition: background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-lead-score__change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-lead-score__change > .sx-icon {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2;
}

.sx-lead-score__change > strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-lead-score__change[data-trend="up"] > .sx-icon,
.sx-lead-score__change[data-trend="up"] > strong {
  color: var(--sx-success-ink);
}

.sx-lead-score__change[data-trend="down"] > .sx-icon,
.sx-lead-score__change[data-trend="down"] > strong {
  color: var(--sx-danger-ink);
}

/* Text that changes in place sharpens in from a short blur. */
.sx-lead-score__swap {
  display: inline-flex;
  align-items: center;
  animation: ls-swap var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-lead-score__change.sx-lead-score__swap {
  gap: 4px;
}

/* ---------- Signals ---------- */
.sx-lead-score__signals {
  padding: 2px 8px 10px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-lead-score__label {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 8px 4px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-lead-score__label > span:last-child {
  font-weight: var(--sx-text-weight);
}

.sx-lead-score__signal {
  display: grid;
  grid-template-rows: 1fr;
  border-radius: var(--sx-r-md);
}

/* The row's own track sets its height, so the item can collapse to 0 when it opens. */
.sx-lead-score__row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 48px 4ch;
  grid-template-rows: 30px;
  align-items: center;
  column-gap: 10px;
  min-height: 0;
  padding: 0 8px;
  overflow: hidden;
}

.sx-lead-score__row > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
}

.sx-lead-score__text {
  min-width: 0;
  color: var(--sx-ink-2);
}

.sx-lead-score__bar {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-lead-score__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sx-success);
  transform-origin: left center;
  transform: scaleX(var(--ls-w, 0));
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-lead-score__weight {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sx-success-ink);
}

.sx-lead-score__signal[data-tone="down"] .sx-lead-score__fill {
  background: var(--sx-danger);
}

.sx-lead-score__signal[data-tone="down"] .sx-lead-score__weight {
  color: var(--sx-danger-ink);
}

/* ---------- Motion ---------- */
.sx-lead-score[data-intro] .sx-lead-score__signal {
  animation: ls-rise var(--sx-dur-4) var(--sx-ease-out) both;
  animation-delay: calc(160ms + var(--i, 0) * 70ms);
}

.sx-lead-score[data-intro] .sx-lead-score__fill {
  animation: ls-grow var(--sx-dur-5) var(--sx-ease-out) both;
  animation-delay: calc(260ms + var(--i, 0) * 70ms);
}

.sx-lead-score__signal[data-enter] {
  --ls-flash: var(--sx-success-soft);
  animation:
    ls-open var(--sx-dur-4) var(--sx-ease-out) both,
    ls-flash 1.8s var(--sx-ease-out) both;
}

.sx-lead-score__signal[data-enter][data-tone="down"] {
  --ls-flash: var(--sx-danger-soft);
}

.sx-lead-score__signal[data-enter] .sx-lead-score__fill {
  animation: ls-grow var(--sx-dur-5) var(--sx-ease-out) 160ms both;
}

@keyframes ls-rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes ls-grow {
  from {
    transform: scaleX(0);
  }
}

@keyframes ls-open {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

@keyframes ls-flash {
  0%,
  35% {
    background-color: var(--ls-flash);
  }

  100% {
    background-color: transparent;
  }
}

@keyframes ls-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-lead-score[data-intro] .sx-lead-score__signal {
    animation-name: sx-fade-in;
    animation-delay: 0s;
  }

  .sx-lead-score[data-intro] .sx-lead-score__fill,
  .sx-lead-score__signal[data-enter] .sx-lead-score__fill {
    animation: none;
  }

  .sx-lead-score__signal[data-enter] {
    animation:
      sx-fade-in var(--sx-dur-3) var(--sx-ease-out) both,
      ls-flash 1.8s var(--sx-ease-out) both;
  }

  .sx-lead-score__swap {
    animation-name: sx-fade-in;
  }
}


/* ---- Deal Card (deal-card) ---- */
/* ==========================================================================
   Deal Card — an opportunity with its stage, value, chance, next step and owner
   Root data-status="open | won | lost"; data-menu while the actions menu is open.
   Stages: <ol> of five <li>; finished ones carry data-done, the current one aria-current="step".
           Each segment fill scales in from the left, one after another.
   Figures roll (value, chance, weighted); the rolling text is aria-hidden and a hidden
           sibling carries the final value.
   Due chip: data-overdue turns it amber when the next step has slipped.
   Menu: .sx-menu inside .sx-pop under the trigger, kept inside the card.
   ========================================================================== */

.sx-deal-card {
  --dc-tone: var(--sx-primary);
  width: 400px;
}

.sx-deal-card[data-status="won"] {
  --dc-tone: var(--sx-success);
}

.sx-deal-card[data-status="lost"] {
  --dc-tone: var(--sx-faint);
}

/* ---------- Head ---------- */
.sx-deal-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 12px 4px 16px;
}

.sx-deal-card__logo {
  --sx-avatar-size: 36px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-deal-card__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sx-deal-card__title {
  font-size: var(--sx-fs-md);
}

.sx-deal-card__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-deal-card__status {
  animation: dc-swap var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-deal-card__status[data-tone="won"] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-deal-card__status[data-tone="lost"] {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-deal-card__more[aria-expanded="true"] {
  color: var(--sx-ink);
  background-color: var(--sx-fill);
}

/* ---------- Stage bar ---------- */
.sx-deal-card__stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 14px 16px 4px;
}

.sx-deal-card__stage {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.sx-deal-card__seg {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-deal-card__seg-fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--dc-tone);
  transform-origin: left center;
  transform: scaleX(0);
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-deal-card__stage:is([data-done], [aria-current="step"]) .sx-deal-card__seg-fill {
  transform: scaleX(1);
}

.sx-deal-card__stage-name {
  overflow: hidden;
  font-size: var(--sx-fs-2xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-deal-card__stage[data-done] .sx-deal-card__stage-name {
  color: var(--sx-ink-2);
}

.sx-deal-card__stage[aria-current="step"] .sx-deal-card__stage-name {
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-deal-card[data-status="lost"] .sx-deal-card__stage-name {
  color: var(--sx-faint);
}

/* ---------- Figures ---------- */
.sx-deal-card__figures {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 16px;
  margin: 0;
  padding: 14px 16px 16px;
}

.sx-deal-card__figure {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-deal-card__figure > dt {
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-deal-card__figure > dd {
  margin: 0;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Reserved widths, so a figure that gains a digit never nudges its neighbours. */
.sx-deal-card__num {
  display: inline-block;
  min-width: 12ch;
}

.sx-deal-card__figure[data-figure="chance"] .sx-deal-card__num {
  min-width: 4ch;
}

.sx-deal-card__figure[data-figure="weighted"] > dd {
  color: var(--sx-ink);
}

.sx-deal-card[data-status="lost"] .sx-deal-card__figure > dd {
  color: var(--sx-muted);
}

/* ---------- Next step ---------- */
.sx-deal-card__next {
  display: grid;
  gap: 6px;
  margin: 0 12px;
  padding: 10px 12px 11px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-deal-card__next-label {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-deal-card__next-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-deal-card__next-row > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
}

.sx-deal-card__task {
  flex: 1;
  min-width: 0;
  color: var(--sx-ink);
}

.sx-deal-card[data-status="lost"] .sx-deal-card__task {
  color: var(--sx-muted);
  text-decoration: line-through;
  text-decoration-color: var(--sx-faint);
}

.sx-deal-card__due {
  flex: none;
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    color var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out),
    box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-deal-card__due[data-overdue] {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-deal-card__swap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  animation: dc-swap var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-deal-card__swap > .sx-icon {
  --sx-icon-size: 12px;
}

/* ---------- Foot ---------- */
.sx-deal-card__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 12px 16px;
}

.sx-deal-card__owner {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-deal-card__owner > span:last-child {
  color: var(--sx-muted);
}

.sx-deal-card__owner .sx-avatar {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

/* Wide enough for the longest label, so the button keeps its size as the stage moves. */
.sx-deal-card__advance {
  min-width: 164px;
}

/* ---------- Menu ---------- */
.sx-deal-card__menu {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: 50px;
  right: 12px;
  width: 196px;
  --sx-pop-origin: top right;
}

.sx-deal-card__menu .sx-menu__item:focus-visible {
  outline-offset: -2px;
  background: var(--sx-fill);
  color: var(--sx-ink);
}

.sx-deal-card__menu .sx-menu__item > .sx-deal-card__check {
  margin-left: auto;
  color: var(--sx-ink);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-deal-card__menu .sx-menu__item[aria-checked="true"] > .sx-deal-card__check {
  opacity: 1;
}

.sx-deal-card__menu .sx-menu__item[data-tone="danger"] {
  color: var(--sx-danger-ink);
}

.sx-deal-card__menu .sx-menu__item[data-tone="danger"] > .sx-icon {
  color: var(--sx-danger);
}

@keyframes dc-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-deal-card__seg-fill {
    transition: background-color var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-deal-card__swap,
  .sx-deal-card__status {
    animation-name: sx-fade-in;
  }
}


/* ---- Contact Peek (contact-peek) ---- */
/* ==========================================================================
   Contact Peek — names that open a hover card with the contact's details
   Root .sx-contact-peek wraps any text or list; it is the box the card stays inside.
   Names: .sx-contact-peek__name buttons with data-contact, aria-haspopup="dialog" and
          aria-expanded.
   Card:  .sx-contact-peek__anchor is placed by script (--cp-x, --cp-y from offset metrics)
          and carries data-glide while it moves from one name to another; inside it the
          .sx-pop card fades and scales in. The body swaps softly when the contact changes.
   ========================================================================== */

.sx-contact-peek {
  position: relative;
}

.sx-contact-peek__name {
  display: inline;
  margin: 0 -2px;
  padding: 0 2px;
  border-radius: var(--sx-r-xs);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: var(--sx-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    text-decoration-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-peek__name:hover,
.sx-contact-peek__name[aria-expanded="true"] {
  background: var(--sx-fill);
  text-decoration-color: currentColor;
}

.sx-contact-peek__name:focus-visible {
  outline-offset: 1px;
}

/* ---------- Card ---------- */
.sx-contact-peek__anchor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--sx-z-pop);
  transform: translate(var(--cp-x, 0px), var(--cp-y, 0px));
  pointer-events: none;
}

.sx-contact-peek__anchor[data-glide] {
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-contact-peek__card {
  width: 272px;
  padding: 12px;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: auto;
}

.sx-contact-peek__anchor[data-side="top"] .sx-contact-peek__card {
  --sx-pop-origin: bottom center;
}

.sx-contact-peek__anchor[data-side="right"] .sx-contact-peek__card {
  --sx-pop-origin: left center;
}

.sx-contact-peek__anchor[data-side="left"] .sx-contact-peek__card {
  --sx-pop-origin: right center;
}

.sx-contact-peek__body {
  display: grid;
  gap: 10px;
  animation: cp-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-contact-peek__who {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-contact-peek__who > .sx-avatar {
  --sx-avatar-size: 36px;
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-contact-peek__person {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-contact-peek__title {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-contact-peek__role {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-contact-peek__channels {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.sx-contact-peek__recent {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-peek__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-contact-peek__event {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: 18px;
}

.sx-contact-peek__event::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--sx-line-strong);
}

.sx-contact-peek__event > span {
  flex: 1;
  min-width: 0;
  color: var(--sx-ink-2);
}

.sx-contact-peek__event > time {
  flex: none;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-contact-peek__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding-top: 2px;
}

@keyframes cp-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

/* ---------- Demo: an activity feed with a pointer ---------- */
.sx-contact-peek-demo {
  position: relative;
}

.sx-contact-peek-demo__panel {
  width: 460px;
  height: 332px;
  overflow: hidden;
}

.sx-contact-peek-demo__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 6px;
}

.sx-contact-peek-demo__title {
  font-size: var(--sx-fs-md);
}

.sx-contact-peek-demo__feed {
  padding: 0 8px;
}

.sx-contact-peek-demo__row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px;
}

.sx-contact-peek-demo__row + .sx-contact-peek-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-peek-demo__row > p {
  min-width: 0;
  color: var(--sx-ink-2);
}

.sx-contact-peek-demo__row > time {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-contact-peek-demo__pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: calc(var(--sx-z-pop) + 1);
  opacity: 0;
  transform: translate(var(--pt-x, 0px), var(--pt-y, 0px));
  transition:
    transform var(--sx-dur-5) var(--sx-ease-in-out),
    opacity var(--sx-dur-3) var(--sx-ease-out);
  pointer-events: none;
}

.sx-contact-peek-demo__pointer[data-visible] {
  opacity: 1;
}

.sx-contact-peek-demo__pointer > .sx-icon {
  --sx-icon-size: 20px;
  --sx-icon-stroke: 1.5;
  fill: var(--sx-ink);
  stroke: var(--sx-card-bg);
  filter: drop-shadow(0 1px 2px var(--sx-overlay));
}

@media (prefers-reduced-motion: reduce) {
  .sx-contact-peek__anchor[data-glide] {
    transition: none;
  }

  .sx-contact-peek__body {
    animation-name: sx-fade-in;
  }

  .sx-contact-peek-demo__pointer {
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }
}


/* ---- Score Survey (score-survey) ---- */
/* ==========================================================================
   Score Survey — a 0 to 10 question with a follow-up and a thank-you
   Root data-state="asking | sending | sent".
   Scale: role="radiogroup" of eleven role="radio" buttons. The group carries
          data-band="low | mid | high" (0–6, 7–8, 9–10) for the score being shown, and
          data-hovering while the pointer previews a value. Options up to that value carry
          data-lit; the chosen one is aria-checked.
   Follow-up: data-open on .sx-score-survey__follow opens it with the grid-rows trick.
   The form and the thank-you share one grid cell, so the card keeps its size when it swaps.
   ========================================================================== */

.sx-score-survey {
  width: 420px;
  overflow: hidden;
}

.sx-score-survey__stack {
  display: grid;
}

.sx-score-survey__stack > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 0.1s,
    filter var(--sx-dur-4) var(--sx-ease-out) 0.1s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.1s,
    visibility 0s;
}

.sx-score-survey__stack > [inert] {
  opacity: 0;
  filter: blur(4px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-score-survey__thanks[inert] {
  transform: translateY(6px);
}

.sx-score-survey__form[inert] {
  transform: translateY(-6px);
}

/* ---------- Question ---------- */
.sx-score-survey__form {
  display: grid;
  padding: 16px 16px 14px;
}

.sx-score-survey__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sx-score-survey__tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 18px;
}

.sx-score-survey__heading {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-score-survey__title {
  font-size: var(--sx-fs-md);
}

.sx-score-survey__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Scale ---------- */
.sx-score-survey__scale {
  --ss-tone: var(--sx-warning);
  --ss-tone-ink: var(--sx-warning-ink);
  --ss-tone-soft: var(--sx-warning-soft);
  --ss-tone-line: var(--sx-warning-line);
  --ss-on-tone: var(--sx-on-warning);
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 4px;
  margin-top: 16px;
}

.sx-score-survey__scale[data-band="low"] {
  --ss-tone: var(--sx-danger);
  --ss-tone-ink: var(--sx-danger-ink);
  --ss-tone-soft: var(--sx-danger-soft);
  --ss-tone-line: var(--sx-danger-line);
  --ss-on-tone: var(--sx-on-danger);
}

.sx-score-survey__scale[data-band="high"] {
  --ss-tone: var(--sx-success);
  --ss-tone-ink: var(--sx-success-ink);
  --ss-tone-soft: var(--sx-success-soft);
  --ss-tone-line: var(--sx-success-line);
  --ss-on-tone: var(--sx-on-success);
}

.sx-score-survey__option {
  height: var(--sx-h-md);
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-score-survey__option[data-lit] {
  color: var(--ss-tone-ink);
  background: var(--ss-tone-soft);
  box-shadow: inset 0 0 0 1px var(--ss-tone-line);
}

/* The value under the pointer stands out a little from the ones it lights up. */
.sx-score-survey__option[data-peak] {
  box-shadow: inset 0 0 0 1.5px var(--ss-tone);
  transform: translateY(-1px);
}

.sx-score-survey__scale:not([data-hovering]) .sx-score-survey__option[aria-checked="true"] {
  color: var(--ss-on-tone);
  background: var(--ss-tone);
  box-shadow: none;
}

.sx-score-survey__scale[data-hovering] .sx-score-survey__option[aria-checked="true"]:not([data-lit]) {
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
}

.sx-score-survey__option:focus-visible {
  outline-offset: 1px;
}

.sx-score-survey__ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* ---------- Follow-up ---------- */
.sx-score-survey__follow {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out);
}

.sx-score-survey__follow[data-open] {
  grid-template-rows: 1fr;
}

/* The negative margin gives the textarea's focus ring room inside the clip. */
.sx-score-survey__follow-in {
  display: grid;
  gap: 7px;
  min-height: 0;
  margin: 0 -4px;
  padding: 0 4px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-score-survey__follow[data-open] .sx-score-survey__follow-in {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

.sx-score-survey__ask {
  display: block;
  padding-top: 14px;
  font-size: var(--sx-fs-base);
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-score-survey__ask > span {
  display: inline-block;
  animation: ss-swap var(--sx-dur-4) var(--sx-ease-out) both;
}

/* The counter sits in the textarea's corner; the bottom padding keeps text clear of it. */
.sx-score-survey__field {
  position: relative;
  display: grid;
  padding-bottom: 4px;
}

.sx-score-survey__text.sx-input {
  min-height: 64px;
  height: 64px;
  padding-bottom: 22px;
  resize: none;
}

.sx-score-survey__count {
  position: absolute;
  right: 10px;
  bottom: 11px;
  font-size: var(--sx-fs-xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  pointer-events: none;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-score-survey__count[data-near] {
  color: var(--sx-warning-ink);
}

/* ---------- Foot ---------- */
.sx-score-survey__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.sx-score-survey__note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-score-survey__note > .sx-icon {
  --sx-icon-size: 13px;
}

/* ---------- Thank-you ---------- */
.sx-score-survey__thanks {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
}

.sx-score-survey__check {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 6px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 22px;
  --sx-icon-stroke: 2;
}

.sx-score-survey__thanks:not([inert]) .sx-score-survey__check {
  animation: sx-pop-in var(--sx-dur-4) var(--sx-ease-spring) 0.12s both;
}

.sx-score-survey__thanks-title {
  font-size: var(--sx-fs-lg);
}

/* Focus lands here only so it is not lost when the form goes inert. */
.sx-score-survey__thanks-title:focus {
  outline: none;
}

.sx-score-survey__thanks-text {
  max-width: 300px;
  color: var(--sx-muted);
}

/* The answer, echoed back so the visitor sees what was sent. */
.sx-score-survey__quote {
  display: -webkit-box;
  max-width: 320px;
  margin-top: 10px;
  padding: 8px 12px;
  overflow: hidden;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sx-score-survey__quote::before {
  content: "\201C";
}

.sx-score-survey__quote::after {
  content: "\201D";
}

.sx-score-survey__thanks-text strong {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

/* ---------- Demo: a pointer that sweeps the scale ---------- */
.sx-score-survey-demo {
  position: relative;
}

.sx-score-survey-demo__pointer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  opacity: 0;
  transform: translate(var(--pt-x, 0px), var(--pt-y, 0px));
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out);
  pointer-events: none;
}

.sx-score-survey-demo__pointer[data-visible] {
  opacity: 1;
}

.sx-score-survey-demo__pointer > .sx-icon {
  --sx-icon-size: 20px;
  --sx-icon-stroke: 1.5;
  fill: var(--sx-ink);
  stroke: var(--sx-card-bg);
  filter: drop-shadow(0 1px 2px var(--sx-overlay));
}

@keyframes ss-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-score-survey__option[data-peak] {
    transform: none;
  }

  .sx-score-survey__follow {
    transition: none;
  }

  .sx-score-survey__thanks[inert],
  .sx-score-survey__form[inert] {
    transform: none;
  }

  .sx-score-survey__ask > span {
    animation-name: sx-fade-in;
  }

  .sx-score-survey-demo__pointer {
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }
}


/* ---- Guardrail Notice (guardrail-notice) ---- */
/* ==========================================================================
   Guardrail Notice — an agent stopped itself before acting
   Root data-state="pending | resolved"; once resolved data-choice="approved | edited | handed"
        data-open      details are shown (the trigger and the plan; after a decision, the history)
        data-editing   the plan is being changed before it goes out
   Inside a .sx-guardrail-notice__swap only the layer with data-active shows; folds
   (.sx-guardrail-notice__fold) open with data-active. The notice animates in when it is added.
   ========================================================================== */

.sx-guardrail-notice {
  width: 440px;
  overflow: hidden;
  animation: gn-arrive var(--sx-dur-5) var(--sx-ease-out) 0.15s both;
}

/* ---------- Head: stays put while the card opens, edits and folds ---------- */
.sx-guardrail-notice__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
}

.sx-guardrail-notice__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 18px;
}

.sx-guardrail-notice[data-state="pending"] .sx-guardrail-notice__tile {
  color: var(--sx-warning-ink);
}

/* Two soft rings after the notice lands, then it stays still */
.sx-guardrail-notice__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

.sx-guardrail-notice[data-state="pending"] .sx-guardrail-notice__tile::after {
  animation: gn-ping 1.5s var(--sx-ease-out) 0.75s 2;
}

.sx-guardrail-notice__badge {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: var(--sx-on-success);
  background: var(--sx-success);
  box-shadow: 0 0 0 2px var(--sx-card-bg);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 10px;
  --sx-icon-stroke: 3.2;
}

.sx-guardrail-notice[data-state="resolved"] .sx-guardrail-notice__badge {
  opacity: 1;
  transform: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out) 0.2s, transform var(--sx-dur-4) var(--sx-ease-spring) 0.2s;
}

.sx-guardrail-notice[data-choice="handed"] .sx-guardrail-notice__badge {
  color: var(--sx-card-bg);
  background: var(--sx-ink-2);
  --sx-icon-stroke: 2.6;
}

.sx-guardrail-notice__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sx-guardrail-notice__title {
  font-size: var(--sx-fs-md);
}

.sx-guardrail-notice__meta {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guardrail-notice__meta > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sx-guardrail-notice__meta > [data-for="pending"] {
  color: var(--sx-warning-ink);
}

.sx-guardrail-notice__meta > [data-for="resolved"] {
  color: var(--sx-success-ink);
}

.sx-guardrail-notice[data-choice="handed"] .sx-guardrail-notice__meta > [data-for="resolved"] {
  color: var(--sx-muted);
}

.sx-guardrail-notice__meta .sx-icon {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.25;
}

.sx-guardrail-notice__toggle {
  align-self: center;
}

.sx-guardrail-notice__toggle > .sx-icon {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-guardrail-notice__toggle[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

/* ---------- Swap: layers share one cell; the leaving one blurs out, the new one sharpens in ---------- */
.sx-guardrail-notice__swap {
  display: grid;
  min-width: 0;
}

.sx-guardrail-notice__swap > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

.sx-guardrail-notice__swap > :not([data-active]) {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(5px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

/* The first layer leaves upward, so the motion reads as one step forward */
.sx-guardrail-notice__swap > :first-child:not([data-active]) {
  transform: translateY(-5px);
}

/* ---------- Folds: grid rows 0fr <-> 1fr ---------- */
.sx-guardrail-notice__body,
.sx-guardrail-notice__details,
.sx-guardrail-notice__foot,
.sx-guardrail-notice__fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-guardrail-notice__body > *,
.sx-guardrail-notice__details > *,
.sx-guardrail-notice__foot > *,
.sx-guardrail-notice__fold > * {
  min-height: 0;
  overflow: hidden;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.06s,
    visibility 0s;
}

.sx-guardrail-notice[data-state="resolved"]:not([data-open]) .sx-guardrail-notice__body,
.sx-guardrail-notice:not([data-open]) .sx-guardrail-notice__details,
.sx-guardrail-notice[data-state="resolved"] .sx-guardrail-notice__foot,
.sx-guardrail-notice__fold:not([data-active]) {
  grid-template-rows: 0fr;
}

.sx-guardrail-notice[data-state="resolved"]:not([data-open]) .sx-guardrail-notice__body > *,
.sx-guardrail-notice:not([data-open]) .sx-guardrail-notice__details > *,
.sx-guardrail-notice[data-state="resolved"] .sx-guardrail-notice__foot > *,
.sx-guardrail-notice__fold:not([data-active]) > * {
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

/* ---------- Rule that fired ---------- */
.sx-guardrail-notice__rule {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 16px 14px;
  padding: 7px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
  --sx-icon-size: 14px;
}

.sx-guardrail-notice__rule > .sx-icon {
  margin-top: 2px;
}

.sx-guardrail-notice__rule strong {
  font-weight: var(--sx-strong-weight);
}

/* ---------- Details: trigger and plan ---------- */
.sx-guardrail-notice__rows {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0 16px 14px;
}

.sx-guardrail-notice__row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.sx-guardrail-notice__row > dt {
  padding-top: 8px;
  font-size: var(--sx-fs-sm);
  line-height: 20px;
  color: var(--sx-muted);
}

.sx-guardrail-notice__row > dd {
  min-width: 0;
  margin: 0;
}

.sx-guardrail-notice__quote,
.sx-guardrail-notice__plan {
  display: grid;
  margin: 0;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-guardrail-notice__quote {
  gap: 5px;
  padding: 8px 10px 9px;
}

.sx-guardrail-notice__quote > p {
  color: var(--sx-ink);
}

.sx-guardrail-notice__quote mark {
  padding: 1px 2px;
  border-radius: var(--sx-r-xs);
  color: inherit;
  background: var(--sx-warning-soft);
  box-shadow: inset 0 -1px 0 var(--sx-warning-line);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sx-guardrail-notice__from {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guardrail-notice__plan {
  gap: 2px;
  padding: 6px 10px 9px;
}

.sx-guardrail-notice__amount-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
}

.sx-guardrail-notice__verb {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-guardrail-notice__amount {
  flex: none;
  align-items: center;
}

.sx-guardrail-notice__amount > strong {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: -0.01em;
  color: var(--sx-ink);
}

.sx-guardrail-notice__money {
  position: relative;
  display: flex;
  align-items: center;
  width: 132px;
}

.sx-guardrail-notice__currency {
  position: absolute;
  left: 9px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-guardrail-notice__money > .sx-input {
  height: var(--sx-h-sm);
  padding: 0 8px 0 29px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sx-guardrail-notice__money[data-focus] > .sx-input {
  box-shadow: var(--sx-focus-ring);
}

.sx-guardrail-notice__limit {
  margin-left: auto;
  justify-items: end;
}

.sx-guardrail-notice__target {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guardrail-notice__reply {
  display: grid;
  margin-top: 6px;
}

/* Room for the field's focus ring inside the clipped fold */
.sx-guardrail-notice__fold > * {
  margin: -3px;
  padding: 3px;
}

.sx-guardrail-notice__message {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

textarea.sx-input.sx-guardrail-notice__textarea {
  display: block;
  min-height: 0;
  padding: 6px 9px;
  font-size: var(--sx-fs-sm);
  resize: none;
}

/* ---------- Footer: actions, or Cancel and Send while editing ---------- */
.sx-guardrail-notice__band {
  padding: 12px 16px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-guardrail-notice__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sx-guardrail-notice__spacer {
  flex: 1;
}

/* ---------- Demo: a fixed box, so opening and folding never move the head ---------- */
.sx-guardrail-notice-demo {
  height: 400px;
}

@keyframes gn-arrive {
  from {
    opacity: 0;
    filter: blur(4px);
    transform: translateY(10px) scale(0.985);
  }
}

@keyframes gn-ping {
  0% {
    opacity: 1;
    box-shadow: 0 0 0 0 var(--sx-warning-line);
  }
  100% {
    opacity: 0;
    box-shadow: 0 0 0 7px var(--sx-warning-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-guardrail-notice {
    animation-name: sx-fade-in;
  }

  .sx-guardrail-notice__tile::after {
    animation: none !important;
  }

  .sx-guardrail-notice__swap > *,
  .sx-guardrail-notice__badge {
    transform: none !important;
  }
}


/* ---- Escalation Banner (escalation-banner) ---- */
/* ==========================================================================
   Escalation Banner — an agent hands a conversation to a person
   Root data-state="escalated | handling | assigned | returned"
        data-summary   the three-point summary is open
        data-noting    the "Send back" note is open (escalated only)
        data-wait="calm | warn | late"   how long the customer has waited
   Layers inside .sx-escalation-banner__swap carry data-for and show with data-active;
   folds (.sx-escalation-banner__fold) open with data-active. The banner unrolls when added.
   ========================================================================== */

.sx-escalation-banner {
  --eb-soft: var(--sx-warning-soft);
  --eb-line: var(--sx-warning-line);
  --eb-ink: var(--sx-warning-ink);
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  border-radius: var(--sx-r-xl);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-shadow-1);
  isolation: isolate;
  animation: eb-in var(--sx-dur-5) var(--sx-ease-out) 0.35s backwards;
}

.sx-escalation-banner[data-state="handling"] {
  --eb-soft: var(--sx-success-soft);
  --eb-line: var(--sx-success-line);
  --eb-ink: var(--sx-success-ink);
}

.sx-escalation-banner[data-state="assigned"] {
  --eb-soft: var(--sx-info-soft);
  --eb-line: var(--sx-info-line);
  --eb-ink: var(--sx-info-ink);
}

.sx-escalation-banner[data-state="returned"] {
  --eb-soft: var(--sx-fill);
  --eb-line: var(--sx-line);
  --eb-ink: var(--sx-ink-2);
}

/* The tint sits on its own layer so its colour can cross-fade between states */
.sx-escalation-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-color: var(--eb-soft);
  box-shadow: inset 0 0 0 1px var(--eb-line);
  transition: background-color var(--sx-dur-4) var(--sx-ease-out), box-shadow var(--sx-dur-4) var(--sx-ease-out);
  pointer-events: none;
}

.sx-escalation-banner__frame {
  position: relative;
  display: grid;
  min-height: 0;
  padding: 12px 12px 12px 14px;
}

/* ---------- Head ---------- */
.sx-escalation-banner__head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
}

.sx-escalation-banner__tile {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--eb-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 18px;
}

.sx-escalation-banner__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 3px;
}

.sx-escalation-banner__title {
  font-size: var(--sx-fs-md);
}

.sx-escalation-banner__meta {
  min-height: 20px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-escalation-banner__meta > * {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sx-escalation-banner__reasons .sx-chip {
  background: var(--sx-raised);
}

.sx-escalation-banner__reasons .sx-chip > .sx-icon {
  color: var(--eb-ink);
}

.sx-escalation-banner__aside {
  flex: none;
  align-self: flex-start;
  justify-items: end;
}

.sx-escalation-banner__wait {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 9px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

/* The clock keeps its width as it ticks */
.sx-escalation-banner__clock {
  display: inline-block;
  min-width: 3.6ch;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.sx-escalation-banner[data-wait="warn"] .sx-escalation-banner__wait {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-escalation-banner[data-wait="late"] .sx-escalation-banner__wait {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

/* ---------- Swap: layers share one cell ---------- */
.sx-escalation-banner__swap {
  display: grid;
  min-width: 0;
}

.sx-escalation-banner__swap > * {
  grid-area: 1 / 1;
  min-width: 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

.sx-escalation-banner__swap > :not([data-active]) {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(5px);
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-escalation-banner__tile > :not([data-active]) {
  transform: scale(0.6);
}

/* ---------- Folds ---------- */
.sx-escalation-banner__fold {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out);
}

.sx-escalation-banner__fold > * {
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-4);
}

.sx-escalation-banner__fold[data-active] {
  grid-template-rows: 1fr;
}

.sx-escalation-banner__fold[data-active] > * {
  opacity: 1;
  filter: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    filter var(--sx-dur-3) var(--sx-ease-out) 0.08s,
    visibility 0s;
}

/* Sections line up with the title, and leave room for focus rings inside the clip */
.sx-escalation-banner__section {
  margin: 0 -4px 0 44px;
  padding: 0 4px;
}

/* ---------- Summary ---------- */
.sx-escalation-banner__summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin: 8px 0 0 -6px;
  padding: 0 6px;
  border-radius: var(--sx-r-sm);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-escalation-banner__summary-toggle:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-escalation-banner__summary-toggle > .sx-icon {
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-escalation-banner__summary-toggle[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

.sx-escalation-banner__points {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 2px 0 2px;
  list-style: none;
  counter-reset: eb-point;
}

.sx-escalation-banner__points > li {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  counter-increment: eb-point;
}

.sx-escalation-banner__points > li::before {
  content: counter(eb-point);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* ---------- Actions and the send-back note ---------- */
.sx-escalation-banner__controls {
  padding: 10px 0 1px;
}

.sx-escalation-banner__actions,
.sx-escalation-banner__note {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sx-escalation-banner__note .sx-input {
  flex: 1;
  min-width: 0;
  height: var(--sx-h-sm);
  font-size: var(--sx-fs-sm);
}

.sx-escalation-banner__trigger > .sx-icon:last-child {
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-escalation-banner__trigger[aria-expanded="true"] > .sx-icon:last-child {
  transform: rotate(180deg);
}

/* ---------- Assign menu ---------- */
.sx-escalation-banner__menu {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: var(--eb-menu-y, 0px);
  left: var(--eb-menu-x, 0px);
  width: 220px;
  --sx-pop-origin: top left;
}

.sx-escalation-banner__menu[data-side="top"] {
  --sx-pop-origin: bottom left;
}

.sx-escalation-banner__menu .sx-menu__item {
  font-size: var(--sx-fs-sm);
}

.sx-escalation-banner__menu .sx-menu__item:focus-visible {
  outline: none;
  background: var(--sx-fill);
  color: var(--sx-ink);
  box-shadow: inset 0 0 0 1px var(--sx-focus);
}

.sx-escalation-banner__menu .sx-avatar {
  --sx-avatar-size: 20px;
}

.sx-escalation-banner__person {
  flex: 1;
  min-width: 0;
}

.sx-escalation-banner__role {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* Demo-only press state (previewPress) */
.sx-escalation-banner .sx-btn[data-pressed] {
  transform: scale(0.97);
}

/* ---------- Demo: a conversation the banner sits above ---------- */
.sx-escalation-banner-demo {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 520px;
  height: 370px;
  overflow: hidden;
}

.sx-escalation-banner-demo__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-escalation-banner-demo__who {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: var(--sx-lh-tight);
}

.sx-escalation-banner-demo__who > strong {
  font-weight: var(--sx-heading-weight);
}

.sx-escalation-banner-demo__who > span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-escalation-banner-demo__slot {
  position: relative;
  z-index: 1;
  padding: 12px 12px 0;
}

.sx-escalation-banner-demo__thread {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  min-height: 0;
  padding: 12px 16px 16px;
  overflow: hidden;
  /* Older messages fade out under the banner instead of being cut */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 28px);
  mask-image: linear-gradient(to bottom, transparent 0, black 28px);
}

.sx-escalation-banner-demo__msg {
  display: grid;
  gap: 3px;
  max-width: 78%;
}

.sx-escalation-banner-demo__msg[data-from="agent"] {
  align-self: flex-end;
  justify-items: end;
}

.sx-escalation-banner-demo__msg > span {
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-escalation-banner-demo__msg > p {
  padding: 7px 11px;
  border-radius: var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xs);
  background: var(--sx-surface-3);
}

.sx-escalation-banner-demo__msg[data-from="agent"] > p {
  border-radius: var(--sx-r-xl) var(--sx-r-xl) var(--sx-r-xs) var(--sx-r-xl);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

@keyframes eb-in {
  from {
    grid-template-rows: 0fr;
    opacity: 0;
    transform: translateY(-6px);
    clip-path: inset(-8px round var(--sx-r-xl));
  }
  to {
    grid-template-rows: 1fr;
    opacity: 1;
    transform: none;
    clip-path: inset(-8px round var(--sx-r-xl));
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-escalation-banner {
    animation-name: sx-fade-in;
  }

  .sx-escalation-banner__swap > *,
  .sx-escalation-banner__tile > *,
  .sx-escalation-banner .sx-btn[data-pressed] {
    transform: none !important;
  }
}


/* ---- Cash Keypad (cash-keypad) ---- */
/* ==========================================================================
   Cash Keypad — cash tender: amount due, received, quick notes, rolling change
   Root:  data-state="empty | short | enough | paid", data-focused while the display has focus
   Keys:  [data-pressed] while pressed (pointer, physical keyboard or script)
   Notes: aria-pressed="true" when the received amount equals that note
   ========================================================================== */

.sx-cash-keypad {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: 100%;
  min-width: 0;
  padding: 20px;
  overflow: hidden;
}

/* ---------- Left: due, received, result, quick notes ---------- */
.sx-cash-keypad__side {
  flex: 232 1 232px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 12px;
  min-width: 0;
}

.sx-cash-keypad__due {
  display: grid;
  gap: 2px;
}

.sx-cash-keypad__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-cash-keypad__due-value {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* The received amount: a fixed box, right-aligned tabular figures, so typing never shifts it. */
.sx-cash-keypad__display {
  display: grid;
  gap: 1px;
  padding: 8px 12px 9px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  cursor: text;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-cash-keypad__display:focus-visible {
  outline: none;
}

.sx-cash-keypad[data-focused] .sx-cash-keypad__display {
  background: var(--sx-surface);
  box-shadow: var(--sx-focus-ring);
}

.sx-cash-keypad__amount {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 30px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-cash-keypad__amount[data-empty] {
  color: var(--sx-faint);
}

.sx-cash-keypad__caret {
  width: 1.5px;
  height: 22px;
  margin-left: 3px;
  border-radius: 1px;
  background: var(--sx-accent);
  opacity: 0;
}

.sx-cash-keypad[data-focused] .sx-cash-keypad__caret {
  animation: sx-blink 1.05s steps(1) infinite;
}

/* Result strip: hint, still needed (warning) or change (success), crossfading in one slot. */
.sx-cash-keypad__result {
  display: grid;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px transparent;
  transition:
    color var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-cash-keypad__result[data-nudge] {
  animation: sx-shake 0.42s var(--sx-ease-out);
}

.sx-cash-keypad__line {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-cash-keypad__line strong {
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-cash-keypad[data-state="empty"] .sx-cash-keypad__line[data-line="hint"],
.sx-cash-keypad[data-state="short"] .sx-cash-keypad__line[data-line="short"],
.sx-cash-keypad:is([data-state="enough"], [data-state="paid"]) .sx-cash-keypad__line[data-line="change"] {
  opacity: 1;
  transform: none;
}

.sx-cash-keypad[data-state="short"] .sx-cash-keypad__result {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-cash-keypad:is([data-state="enough"], [data-state="paid"]) .sx-cash-keypad__result {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-cash-keypad__notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: end;
  gap: 8px;
}

.sx-cash-keypad__notes-label {
  grid-column: 1 / -1;
  margin-bottom: -2px;
}

.sx-cash-keypad__note {
  font-variant-numeric: tabular-nums;
}

.sx-cash-keypad__note[aria-pressed="true"] {
  --_bg: var(--sx-accent-soft);
  --_bg-hover: var(--sx-accent-soft);
  --_border: var(--sx-accent-line);
  --_border-hover: var(--sx-accent-line);
  color: var(--sx-accent-ink);
}

/* ---------- Right: keypad and confirm ---------- */
.sx-cash-keypad__main {
  flex: 240 1 240px;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.sx-cash-keypad__keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 6px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-cash-keypad__key {
  display: grid;
  place-items: center;
  height: 50px;
  border-radius: var(--sx-r-lg);
  font-size: 19px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  transition:
    transform var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-cash-keypad__key[data-key="000"] {
  font-size: var(--sx-fs-lg);
  letter-spacing: 0.02em;
}

.sx-cash-keypad__key[data-key="back"] {
  color: var(--sx-muted);
  --sx-icon-size: 19px;
}

@media (hover: hover) {
  .sx-cash-keypad__key:hover {
    background: var(--sx-raised-hover);
  }

  .sx-cash-keypad__key[data-key="back"]:hover {
    color: var(--sx-ink);
  }
}

.sx-cash-keypad__key:is(:active, [data-pressed]) {
  transform: scale(0.94);
  background: var(--sx-surface-3);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition-duration: 60ms;
}

.sx-cash-keypad__key:focus-visible {
  outline-offset: 1px;
}

.sx-cash-keypad__confirm[aria-disabled="true"] {
  opacity: 0.4;
}

/* ---------- Paid ---------- */
.sx-cash-keypad__paid {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  border-radius: inherit;
  background: var(--sx-card-bg);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.985);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-cash-keypad[data-state="paid"] .sx-cash-keypad__paid {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s;
}

.sx-cash-keypad__paid-badge {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 22px;
  --sx-icon-stroke: 2;
}

.sx-cash-keypad[data-state="paid"] .sx-cash-keypad__paid-badge {
  animation: ck-pop var(--sx-dur-4) var(--sx-ease-spring) 80ms both;
}

.sx-cash-keypad__paid-title {
  font-size: var(--sx-fs-lg);
}

.sx-cash-keypad__paid-label {
  margin-top: 10px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-cash-keypad__paid-change {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}

.sx-cash-keypad__paid-sub {
  margin-bottom: 14px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

@keyframes ck-flash {
  40% {
    box-shadow: inset 0 0 0 2px var(--sx-warning);
  }
}

@keyframes ck-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-cash-keypad__line {
    transform: none;
  }

  .sx-cash-keypad__result[data-nudge] {
    animation: ck-flash 0.48s var(--sx-ease-out);
  }

  .sx-cash-keypad__key:is(:active, [data-pressed]) {
    transform: none;
  }

  .sx-cash-keypad__paid {
    transform: none;
  }

  .sx-cash-keypad[data-state="paid"] .sx-cash-keypad__paid-badge {
    animation-name: sx-fade-in;
  }
}

/* ---------- Demo layout ---------- */
.sx-cash-keypad-demo {
  width: 532px;
  max-width: 100%;
}


/* ---- Order Ticket (order-ticket) ---- */
/* ==========================================================================
   Order Ticket — one kitchen ticket with an age timer, tick-off items and bump
   Root:  data-tone="fresh | warning | late" (age), data-state="open | bumped", data-done (all ticked)
   Items: <button aria-pressed> strike through when done
   The undo bar shares the ticket's grid cell, so bumping never changes the box size.
   ========================================================================== */

.sx-order-ticket {
  --ot-tone: var(--sx-line-strong);
  position: relative;
  display: grid;
  width: 320px;
}

.sx-order-ticket[data-tone="warning"] {
  --ot-tone: var(--sx-warning);
}

.sx-order-ticket[data-tone="late"] {
  --ot-tone: var(--sx-danger);
}

.sx-order-ticket > *,
.sx-order-ticket::before {
  grid-area: 1 / 1;
}

/* The ticket's place on the rail, outlined once it has been bumped */
.sx-order-ticket::before {
  content: "";
  border: 1.5px dashed var(--sx-line-strong);
  border-radius: var(--sx-card-radius);
  opacity: 0;
  transform: scale(0.98);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket[data-state="bumped"]::before {
  opacity: 1;
  transform: none;
  transition: opacity var(--sx-dur-4) var(--sx-ease-out) 120ms, transform var(--sx-dur-4) var(--sx-ease-out) 120ms;
}

/* ---------- Ticket ---------- */
.sx-order-ticket__ticket {
  display: grid;
  overflow: hidden;
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket__stripe {
  height: 4px;
  background: var(--ot-tone);
  transition: background-color var(--sx-dur-5) var(--sx-ease-out);
}

.sx-order-ticket__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 0;
}

.sx-order-ticket__id {
  display: grid;
  gap: 1px;
}

.sx-order-ticket__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-order-ticket__number {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* Age: a chip whose colour follows the ticket's tone */
.sx-order-ticket__age {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    color var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-4) var(--sx-ease-out),
    box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-order-ticket__age > .sx-icon {
  --sx-icon-size: 15px;
}

.sx-order-ticket__clock {
  min-width: 4ch;
  text-align: right;
}

.sx-order-ticket[data-tone="warning"] .sx-order-ticket__age {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-order-ticket[data-tone="late"] .sx-order-ticket__age {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-order-ticket[data-tone]:not([data-tone="fresh"]) .sx-order-ticket__age > .sx-icon {
  animation: ot-nudge var(--sx-dur-5) var(--sx-ease-out);
}

.sx-order-ticket__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 16px 12px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-order-ticket__meta strong {
  font-weight: 500;
  color: var(--sx-ink);
}

/* ---------- Items ---------- */
.sx-order-ticket__items {
  display: grid;
  gap: 2px;
  padding: 8px 8px 6px;
}

.sx-order-ticket__item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 20px;
  align-items: start;
  gap: 8px;
  width: 100%;
  padding: 7px 8px;
  border-radius: var(--sx-r-md);
  text-align: left;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-3) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-order-ticket__item:hover {
    background: var(--sx-fill);
  }
}

.sx-order-ticket__item:focus-visible {
  outline-offset: 0;
}

.sx-order-ticket__item[aria-pressed="true"] {
  color: var(--sx-muted);
}

.sx-order-ticket__qty {
  font-size: var(--sx-fs-md);
  font-weight: 650;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
}

.sx-order-ticket__body {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-order-ticket__name {
  font-size: var(--sx-fs-md);
  font-weight: 500;
  line-height: 20px;
  text-decoration: line-through 1.5px;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket__item[aria-pressed="true"] .sx-order-ticket__name {
  text-decoration-color: currentColor;
}

.sx-order-ticket__mods {
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket__note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-warning-ink);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket__note > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-order-ticket__item[aria-pressed="true"] :is(.sx-order-ticket__mods, .sx-order-ticket__note) {
  color: var(--sx-faint);
}

.sx-order-ticket__tick {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-order-ticket__tick > .sx-icon {
  --sx-icon-size: 12px;
  --sx-icon-stroke: 3;
  transform: scale(0.4);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-order-ticket__item[aria-pressed="true"] .sx-order-ticket__tick {
  color: var(--sx-on-success);
  background: var(--sx-success);
  box-shadow: none;
}

.sx-order-ticket__item[aria-pressed="true"] .sx-order-ticket__tick > .sx-icon {
  transform: none;
}

/* ---------- Footer ---------- */
.sx-order-ticket__foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 16px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-order-ticket__progress {
  display: grid;
  gap: 6px;
}

.sx-order-ticket__count {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-order-ticket__count strong {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-order-ticket__progress .sx-progress {
  height: 4px;
}

.sx-order-ticket[data-done] .sx-order-ticket__progress .sx-progress__bar {
  --sx-progress-color: var(--sx-success);
}

/* ---------- Bumped: the ticket slides off, the undo bar takes its place ---------- */
.sx-order-ticket[data-state="bumped"] .sx-order-ticket__ticket {
  opacity: 0;
  transform: translateX(64px) rotate(2deg) scale(0.97);
  pointer-events: none;
  transition:
    transform var(--sx-dur-3) var(--sx-ease-in),
    opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-order-ticket__undo {
  z-index: 1;
  align-self: center;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 7px 7px 14px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-base);
  white-space: nowrap;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-order-ticket__undo > .sx-icon {
  --sx-icon-size: 16px;
  color: var(--sx-success);
}

.sx-order-ticket[data-state="bumped"] .sx-order-ticket__undo {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 140ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 140ms,
    visibility 0s;
}

@keyframes ot-nudge {
  30% {
    transform: rotate(-14deg);
  }

  60% {
    transform: rotate(10deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-order-ticket[data-state="bumped"] .sx-order-ticket__ticket,
  .sx-order-ticket__undo,
  .sx-order-ticket::before {
    transform: none;
  }

  .sx-order-ticket[data-tone]:not([data-tone="fresh"]) .sx-order-ticket__age > .sx-icon {
    animation: none;
  }

  .sx-order-ticket__tick > .sx-icon {
    transform: none;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-order-ticket__item[aria-pressed="true"] .sx-order-ticket__tick > .sx-icon {
    opacity: 1;
  }
}


/* ---- Receipt Slip (receipt-slip) ---- */
/* ==========================================================================
   Receipt Slip — thermal-paper receipt with a torn edge, a QR code and send actions
   Root:  data-feed="in | out" (paper hidden in the printer or fed out),
          data-channel="whatsapp | email" (send form open), data-send="idle | sending | sent | error"
   Print: the paper is cloned into .sx-receipt-slip-print, the only thing shown in print.
   ========================================================================== */

.sx-receipt-slip {
  display: grid;
  grid-template-columns: 344px 236px;
  overflow: hidden;
}

/* ---------- Printer side ---------- */
.sx-receipt-slip__printer {
  padding: 16px 16px 20px;
  border-radius: var(--sx-card-radius) 0 0 var(--sx-card-radius);
  background: var(--sx-surface-2);
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

/* The slot the paper comes out of */
.sx-receipt-slip__slot {
  position: relative;
  z-index: 1;
  height: 12px;
  margin: 0 -4px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-overlay);
  box-shadow: inset 0 2px 3px var(--sx-overlay), 0 1px 0 var(--sx-line-soft);
}

/* The shadow lives on a wrapper so it follows the torn edge of the masked paper. */
.sx-receipt-slip__feed {
  margin: -6px 6px 0;
  filter:
    drop-shadow(0 0 0.5px var(--sx-line-strong))
    drop-shadow(0 6px 8px color-mix(in srgb, var(--sx-overlay) 30%, transparent));
}

/* Paper colours are local so a printed copy can swap them for print-safe ones. */
.sx-receipt-slip__paper {
  --rs-paper: var(--sx-raised);
  --rs-ink: var(--sx-ink);
  --rs-muted: var(--sx-muted);
  --rs-rule: var(--sx-line-strong);
  --rs-tooth: 6px;
  display: grid;
  padding: 18px 16px calc(12px + var(--rs-tooth));
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--rs-ink);
  background: var(--rs-paper);
  -webkit-mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--rs-tooth) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, black 90deg, transparent 0) bottom / calc(var(--rs-tooth) * 2) var(--rs-tooth) repeat-x;
  mask:
    linear-gradient(black, black) top / 100% calc(100% - var(--rs-tooth) + 1px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, black 90deg, transparent 0) bottom / calc(var(--rs-tooth) * 2) var(--rs-tooth) repeat-x;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path calc(var(--sx-dur-5) * 2.2) var(--sx-ease-in-out),
    transform calc(var(--sx-dur-5) * 2.2) var(--sx-ease-in-out);
}

.sx-receipt-slip[data-feed="in"] .sx-receipt-slip__paper {
  clip-path: inset(0 0 100% 0);
  transform: translateY(-14px);
  transition-duration: var(--sx-dur-3);
}

.sx-receipt-slip[data-instant] .sx-receipt-slip__paper {
  transition: none;
}

.sx-receipt-slip__shop {
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
}

.sx-receipt-slip__name {
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-receipt-slip__address {
  font-size: var(--sx-fs-xs);
  color: var(--rs-muted);
}

.sx-receipt-slip__rule {
  height: 0;
  margin: 8px 0;
  border: 0;
  border-top: 1px dashed var(--rs-rule);
}

.sx-receipt-slip__rows {
  display: grid;
  gap: 1px;
}

.sx-receipt-slip__meta {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--rs-muted);
}

.sx-receipt-slip__meta > time {
  color: var(--rs-ink);
}

.sx-receipt-slip__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-receipt-slip__row > dt {
  color: var(--rs-muted);
}

.sx-receipt-slip__row > dd {
  margin: 0;
  text-align: right;
}

.sx-receipt-slip__row--total {
  margin-top: 3px;
  font-size: var(--sx-fs-lg);
  font-weight: 600;
}

.sx-receipt-slip__row--total > dt {
  color: var(--rs-ink);
}

.sx-receipt-slip__ref {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-xs);
  letter-spacing: 0;
}

.sx-receipt-slip__items {
  display: grid;
  gap: 2px;
}

/* name, qty × unit price, line total */
.sx-receipt-slip__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 62px;
  align-items: baseline;
  column-gap: 8px;
}

.sx-receipt-slip__item-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-receipt-slip__item-each {
  font-size: var(--sx-fs-xs);
  text-align: right;
  white-space: nowrap;
  color: var(--rs-muted);
}

.sx-receipt-slip__item-sum {
  text-align: right;
  white-space: nowrap;
}

/* QR: always dark modules on a light tile, in light and dark mode, so it scans. */
.sx-receipt-slip__qr {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
}

.sx-receipt-slip__code {
  width: 66px;
  height: 66px;
  border-radius: var(--sx-r-sm);
  background: var(--sx-surface);
  background: light-dark(var(--sx-surface), var(--sx-ink));
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  fill: var(--sx-ink);
  fill: light-dark(var(--sx-ink), var(--sx-surface));
}

.sx-receipt-slip__qr-text {
  display: grid;
  gap: 2px;
  font-size: var(--sx-fs-xs);
  color: var(--rs-muted);
}

.sx-receipt-slip__qr-text strong {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--rs-ink);
}

.sx-receipt-slip__thanks {
  margin-top: 10px;
  font-size: var(--sx-fs-xs);
  text-align: center;
  color: var(--rs-muted);
}

/* ---------- Actions side ---------- */
.sx-receipt-slip__panel {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 22px 20px;
}

.sx-receipt-slip__head {
  display: grid;
  gap: 3px;
}

.sx-receipt-slip__title {
  font-size: var(--sx-fs-lg);
}

.sx-receipt-slip__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-receipt-slip__actions {
  display: grid;
  gap: 8px;
}

.sx-receipt-slip__action {
  justify-content: flex-start;
}

.sx-receipt-slip__action > .sx-icon {
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-receipt-slip__action > .sx-receipt-slip__chev {
  margin-left: auto;
  transition: transform var(--sx-dur-3) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-receipt-slip__action[aria-expanded="true"] {
  --_bg: var(--sx-accent-soft);
  --_bg-hover: var(--sx-accent-soft);
  --_border: var(--sx-accent-line);
  --_border-hover: var(--sx-accent-line);
  color: var(--sx-accent-ink);
}

.sx-receipt-slip__action[aria-expanded="true"] > .sx-icon {
  color: currentColor;
}

.sx-receipt-slip__action[aria-expanded="true"] > .sx-receipt-slip__chev {
  transform: rotate(90deg);
}

/* Send form opens with the grid-rows trick */
.sx-receipt-slip__send {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -14px;
  opacity: 0;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    margin-top var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-receipt-slip[data-channel]:not([data-send="sent"]) .sx-receipt-slip__send {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-out),
    margin-top var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-3) var(--sx-ease-out) 60ms;
}

.sx-receipt-slip__send-inner {
  min-height: 0;
  overflow: hidden;
}

.sx-receipt-slip__form {
  display: grid;
  gap: 8px;
  padding: 2px;
}

.sx-receipt-slip__form .sx-input[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-receipt-slip__msg {
  min-height: 18px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-receipt-slip[data-send="error"] .sx-receipt-slip__msg {
  color: var(--sx-danger-ink);
}

.sx-receipt-slip__sent {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-receipt-slip[data-send="sent"] .sx-receipt-slip__sent {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out) 80ms;
}

.sx-receipt-slip__sent-inner {
  min-height: 0;
  overflow: hidden;
}

.sx-receipt-slip__sent-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-receipt-slip__sent-line > .sx-icon {
  --sx-icon-size: 15px;
  margin-top: 1px;
}

.sx-receipt-slip[data-send="sent"] .sx-receipt-slip__sent-line > .sx-icon {
  animation: rs-pop var(--sx-dur-4) var(--sx-ease-spring) 120ms both;
}

@keyframes rs-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-receipt-slip__paper,
  .sx-receipt-slip[data-feed="in"] .sx-receipt-slip__paper {
    clip-path: none;
    transform: none;
    transition: opacity var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-receipt-slip[data-feed="in"] .sx-receipt-slip__paper {
    opacity: 0;
  }

  .sx-receipt-slip[data-send="sent"] .sx-receipt-slip__sent-line > .sx-icon {
    animation-name: sx-fade-in;
  }
}

/* ---------- Print: only the receipt being printed ---------- */
@media screen {
  .sx-receipt-slip-print {
    display: none;
  }
}

@media print {
  body > :not(.sx-receipt-slip-print) {
    display: none !important;
  }

  .sx-receipt-slip-print {
    display: block;
    width: 80mm;
    margin: 0 auto;
    color-scheme: light;
  }

  .sx-receipt-slip-print .sx-receipt-slip__paper {
    --rs-paper: Canvas;
    --rs-ink: CanvasText;
    --rs-muted: CanvasText;
    --rs-rule: CanvasText;
    clip-path: none;
    transform: none;
    -webkit-mask: none;
    mask: none;
    font-size: 9pt;
  }

  .sx-receipt-slip-print .sx-receipt-slip__item-name {
    white-space: normal;
  }

  .sx-receipt-slip-print .sx-receipt-slip__code {
    background: Canvas;
    fill: CanvasText;
    box-shadow: none;
  }
}


/* ---- Split Bill (split-bill) ---- */
/* ==========================================================================
   Split Bill — split a bill evenly, by items or by amount, shares rolling as you go
   Root:  data-mode="even | items | amount", data-done (nothing left to assign),
          data-over (amounts add up to more than the bill), data-confirmed
   Items: <button aria-pressed> marks the item being assigned (By items)
   People: <button aria-pressed> means "shares the picked item" (By items)
   ========================================================================== */

.sx-split-bill {
  display: grid;
  gap: 14px;
  width: 568px;
  padding: 18px;
}

/* ---------- Head ---------- */
.sx-split-bill__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sx-split-bill__title {
  font-size: var(--sx-fs-lg);
}

.sx-split-bill__sub {
  margin-top: 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-split-bill__sub strong {
  font-weight: 600;
  color: var(--sx-ink);
}

/* Segmented control with a sliding thumb (positioned from the checked option's offset box) */
.sx-split-bill__modes {
  --sbm-pad: 2px;
  position: relative;
  display: inline-flex;
  height: var(--sx-h-sm);
  padding: var(--sbm-pad);
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  isolation: isolate;
}

.sx-split-bill__mode {
  position: relative;
  z-index: 1;
  padding: 0 10px;
  border-radius: calc(var(--sx-r-md) - var(--sbm-pad));
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-split-bill__mode:hover {
  color: var(--sx-ink-2);
}

.sx-split-bill__mode[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-split-bill__mode:focus-visible {
  outline-offset: 0;
}

.sx-split-bill__thumb {
  position: absolute;
  z-index: 0;
  top: var(--sbm-pad);
  bottom: var(--sbm-pad);
  left: 0;
  width: var(--sbm-w, 0px);
  border-radius: calc(var(--sx-r-md) - var(--sbm-pad));
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--sbm-x, 0px));
  pointer-events: none;
}

.sx-split-bill__modes[data-ready] .sx-split-bill__thumb {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), width var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Body ---------- */
.sx-split-bill__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
  align-items: start;
}

.sx-split-bill__label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-split-bill__items {
  display: grid;
  gap: 2px;
}

.sx-split-bill__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--sx-r-md);
  text-align: left;
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-split-bill__item:disabled {
  cursor: default;
}

@media (hover: hover) {
  .sx-split-bill__item:not(:disabled):hover {
    background: var(--sx-fill);
  }
}

.sx-split-bill__item[aria-pressed="true"] {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-split-bill__item:focus-visible {
  outline-offset: 0;
}

.sx-split-bill__item-name {
  min-width: 0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-split-bill__item-name small {
  font-size: inherit;
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

/* Who shares an item: little avatars, or an empty dashed slot */
.sx-split-bill__who {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 18px;
  height: 18px;
}

.sx-split-bill__who-empty {
  width: 16px;
  height: 16px;
  border: 1.5px dashed var(--sx-line-strong);
  border-radius: 50%;
}

.sx-split-bill:not([data-mode="items"]) .sx-split-bill__who {
  display: none;
}

.sx-split-bill__item-price {
  min-width: 9ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-split-bill .sx-avatar {
  --sx-avatar-bg: color-mix(in srgb, var(--sb-tint, var(--sx-c6)) 18%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--sb-tint, var(--sx-c6)) 70%, var(--sx-ink));
}

.sx-split-bill__who .sx-avatar {
  --sx-avatar-size: 16px;
  font-size: 8.5px;
  box-shadow: 0 0 0 1.5px var(--sx-card-bg);
  animation: sb-pop var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-split-bill__who .sx-avatar + .sx-avatar {
  margin-left: -4px;
}

.sx-split-bill__item[aria-pressed="true"] .sx-split-bill__who .sx-avatar {
  box-shadow: 0 0 0 1.5px var(--sx-surface);
}

/* ---------- People and shares ---------- */
.sx-split-bill__side {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.sx-split-bill__people {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-split-bill__person,
.sx-split-bill__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-split-bill__person .sx-avatar {
  --sx-avatar-size: 20px;
}

.sx-split-bill__person:disabled {
  cursor: default;
}

.sx-split-bill__person:not(:disabled):active,
.sx-split-bill__add:active {
  transform: scale(0.96);
}

.sx-split-bill__person[aria-pressed="true"] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-split-bill__add {
  padding: 0 10px 0 8px;
  color: var(--sx-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-split-bill__add:hover {
  color: var(--sx-ink);
}

.sx-split-bill__add > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-split-bill__add:disabled {
  opacity: 0.45;
}

.sx-split-bill__shares {
  display: grid;
}

.sx-split-bill__share {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 36px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-split-bill__share-name {
  font-weight: 500;
}

/* The figure and the By amount input share one cell and crossfade */
.sx-split-bill__share-value {
  display: grid;
  align-items: center;
  justify-items: end;
}

.sx-split-bill__share-value > * {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
}

.sx-split-bill__amount-figure {
  min-width: 11ch;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-split-bill__amount-field {
  display: flex;
  align-items: center;
  width: 128px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--sx-r-sm);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-split-bill__amount-field:focus-within,
.sx-split-bill__amount-field[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-split-bill__amount-field > span {
  margin-right: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-split-bill__amount-input {
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: transparent;
  outline: none;
}

.sx-split-bill:not([data-mode="amount"]) .sx-split-bill__amount-field,
.sx-split-bill[data-mode="amount"] .sx-split-bill__amount-figure {
  opacity: 0;
  visibility: hidden;
}

.sx-split-bill[data-mode="amount"] .sx-split-bill__amount-field,
.sx-split-bill:not([data-mode="amount"]) .sx-split-bill__amount-figure {
  transition-delay: 0s;
}

.sx-split-bill__remaining {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-radius: var(--sx-r-md);
  font-weight: 500;
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-split-bill__remaining strong {
  min-width: 11ch;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-split-bill[data-done] .sx-split-bill__remaining {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-split-bill[data-over] .sx-split-bill__remaining {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

/* ---------- Foot ---------- */
.sx-split-bill__foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding-top: 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-split-bill__status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-split-bill__status > .sx-icon {
  --sx-icon-size: 14px;
  flex: none;
  margin-top: 1.5px;
}

.sx-split-bill[data-done] .sx-split-bill__status {
  color: var(--sx-success-ink);
}

.sx-split-bill[data-over] .sx-split-bill__status {
  color: var(--sx-warning-ink);
}

.sx-split-bill__confirm[aria-disabled="true"] {
  opacity: 0.4;
}

@keyframes sb-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-split-bill__who .sx-avatar {
    animation-name: sx-fade-in;
  }

  .sx-split-bill__person:not(:disabled):active,
  .sx-split-bill__add:active {
    transform: none;
  }
}


/* ---- Modifier Sheet (modifier-sheet) ---- */
/* ==========================================================================
   Modifier Sheet — choose a product's size, levels, extras and note, then add it
   Root:   data-state="idle | added"
   Groups: data-required, data-invalid (required and still empty after Add), data-shake
   The options scroll inside the sheet; the Add bar stays at the bottom.
   ========================================================================== */

.sx-modifier-sheet {
  container: modifier-sheet / inline-size;
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  /* Beside each other the product and the options span the first two rows; stacked, the options get
     the flexible one and scroll there. */
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  min-width: 0;
  overflow: hidden;
}

/* ---------- Product ---------- */
.sx-modifier-sheet__product {
  display: grid;
  align-content: start;
  gap: 10px;
  grid-row: 1 / span 2;
  padding: 20px;
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-modifier-sheet__tile {
  position: relative;
  display: grid;
  place-items: center;
  height: 124px;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  color: var(--sx-on-accent);
  background:
    radial-gradient(90% 80% at 85% 10%, color-mix(in srgb, var(--sx-c4) 70%, transparent), transparent 70%),
    linear-gradient(150deg, color-mix(in srgb, var(--sx-c2) 72%, var(--sx-surface)), var(--sx-c2));
  box-shadow: var(--sx-inset-highlight), inset 0 0 0 1px var(--sx-line-soft);
  --sx-icon-size: 40px;
  --sx-icon-stroke: 1.5;
}

.sx-modifier-sheet__tile::after {
  content: "";
  position: absolute;
  inset: auto -20% -55% -20%;
  height: 80%;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-surface) 22%, transparent);
}

.sx-modifier-sheet__tile > .sx-icon {
  position: relative;
  z-index: 1;
}

.sx-modifier-sheet__name {
  font-size: var(--sx-fs-lg);
}

.sx-modifier-sheet__desc {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-modifier-sheet__base {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-modifier-sheet__base strong {
  font-weight: 600;
  color: var(--sx-ink);
}

/* ---------- Options (the scroll area) ---------- */
.sx-modifier-sheet__options {
  position: relative;
  grid-row: 1 / span 2;
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 18px 20px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-modifier-sheet__group {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sx-modifier-sheet__legend {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 0;
  font-size: var(--sx-fs-base);
  font-weight: 600;
}

.sx-modifier-sheet__legend small {
  margin-left: 6px;
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-modifier-sheet__group[data-shake] .sx-modifier-sheet__legend {
  animation: sx-shake 0.42s var(--sx-ease-out);
}

/* Required marker: amber until chosen, then a quiet check; red after a failed Add */
.sx-modifier-sheet__req {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.sx-modifier-sheet__req > .sx-icon {
  display: none;
}

.sx-modifier-sheet__group[data-done] .sx-modifier-sheet__req {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-modifier-sheet__group[data-done] .sx-modifier-sheet__req > .sx-icon {
  display: block;
}

.sx-modifier-sheet__group[data-invalid] .sx-modifier-sheet__req {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-modifier-sheet__error {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
  opacity: 0;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out), margin-top var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modifier-sheet__error > span {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

.sx-modifier-sheet__error .sx-icon {
  --sx-icon-size: 14px;
}

.sx-modifier-sheet__group[data-invalid] .sx-modifier-sheet__error {
  grid-template-rows: 1fr;
  margin-top: 0;
  opacity: 1;
}

/* Rows: size and extras */
.sx-modifier-sheet__rows {
  display: grid;
  gap: 6px;
}

.sx-modifier-sheet__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--sx-r-md);
  cursor: pointer;
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modifier-sheet__row:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-modifier-sheet__row:has(input:checked) {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-modifier-sheet__row:has(input:focus-visible) {
  box-shadow: var(--sx-focus-ring);
}

.sx-modifier-sheet__group[data-invalid] .sx-modifier-sheet__row {
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-modifier-sheet__row > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sx-modifier-sheet__radio {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modifier-sheet__radio::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-on-primary);
  transform: scale(0);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-modifier-sheet__row > input:checked + .sx-modifier-sheet__radio {
  background: var(--sx-primary);
  box-shadow: none;
}

.sx-modifier-sheet__row > input:checked + .sx-modifier-sheet__radio::after {
  transform: scale(1);
}

.sx-modifier-sheet__row-label {
  flex: 1;
  min-width: 0;
  font-weight: 500;
}

.sx-modifier-sheet__price {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* Levels: small pill radios */
.sx-modifier-sheet__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-modifier-sheet__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  cursor: pointer;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-modifier-sheet__pill > input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.sx-modifier-sheet__pill:has(input:checked) {
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: none;
}

.sx-modifier-sheet__pill:has(input:focus-visible) {
  box-shadow: var(--sx-focus-ring);
}

/* Note */
.sx-modifier-sheet__note {
  display: grid;
  gap: 4px;
}

.sx-modifier-sheet__note textarea {
  min-height: 60px;
  resize: none;
}

.sx-modifier-sheet__count {
  justify-self: end;
  font-size: var(--sx-fs-xs);
  color: var(--sx-faint);
  font-variant-numeric: tabular-nums;
}

/* ---------- Add bar ---------- */
.sx-modifier-sheet__bar {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 20px;
  background: var(--sx-card-bg);
  box-shadow: inset 0 1px 0 var(--sx-line), 0 -8px 16px -12px var(--sx-overlay);
}

.sx-modifier-sheet__qty {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-modifier-sheet__step {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: transform var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-modifier-sheet__step:hover:not(:disabled) {
  background: var(--sx-raised-hover);
}

.sx-modifier-sheet__step:is(:active, [data-pressed]):not(:disabled) {
  transform: scale(0.9);
}

.sx-modifier-sheet__step:disabled {
  opacity: 0.4;
  box-shadow: none;
}

.sx-modifier-sheet__qty-value {
  min-width: 3ch;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sx-modifier-sheet__qty-value > span {
  display: inline-block;
  animation: ms-tick var(--sx-dur-3) var(--sx-ease-out);
}

.sx-modifier-sheet__add {
  min-width: 228px;
  justify-content: space-between;
}

.sx-modifier-sheet__add-total {
  min-width: 10ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-modifier-sheet[data-state="added"] .sx-modifier-sheet__add {
  --_tone: var(--sx-success);
  --_on: var(--sx-on-success);
}

/* Confirmation strip, sliding up out of the bar */
.sx-modifier-sheet__added {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(100% + 10px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-success-line), var(--sx-shadow-pop);
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
}

.sx-modifier-sheet__added > .sx-icon {
  --sx-icon-size: 15px;
  flex: none;
}

.sx-modifier-sheet[data-state="added"] .sx-modifier-sheet__added {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s;
}

/* ---------- Narrow column: the product becomes a compact header above the options ---------- */
@container modifier-sheet (max-width: 519px) {
  .sx-modifier-sheet__product {
    grid-column: 1 / -1;
    grid-row: 1;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;
    gap: 2px 12px;
    padding: 14px 16px;
    box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  }

  .sx-modifier-sheet__tile {
    grid-row: 1 / span 3;
    height: 64px;
    border-radius: var(--sx-r-lg);
    --sx-icon-size: 24px;
  }

  .sx-modifier-sheet__name {
    font-size: var(--sx-fs-md);
  }

  .sx-modifier-sheet__desc {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .sx-modifier-sheet__options {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 14px 16px 16px;
  }

  .sx-modifier-sheet__bar {
    padding: 10px 16px;
  }

  .sx-modifier-sheet__add {
    flex: 1;
    min-width: 0;
  }
}

/* The phone column: the Add button takes a row of its own under the quantity. */
@container modifier-sheet (max-width: 379px) {
  .sx-modifier-sheet__bar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .sx-modifier-sheet__add {
    flex-basis: 100%;
  }
}

@keyframes ms-tick {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-modifier-sheet__group[data-shake] .sx-modifier-sheet__legend {
    animation: none;
  }

  .sx-modifier-sheet__qty-value > span {
    animation-name: sx-fade-in;
  }

  .sx-modifier-sheet__added,
  .sx-modifier-sheet__step:is(:active, [data-pressed]):not(:disabled) {
    transform: none;
  }
}

/* ---------- Demo layout ---------- */
.sx-modifier-sheet-demo {
  width: 600px;
  max-width: 100%;
  height: 404px;
}


/* ---- Shift Close (shift-close) ---- */
/* ==========================================================================
   Shift Close — count the cash drawer, compare it with expected cash, close the shift
   Root:  data-state="open | closed", data-diff="pending | even | short | over",
          data-note-error (a note is needed before closing)
   The count and the closed summary share one grid cell and crossfade.
   ========================================================================== */

.sx-shift-close {
  container: shift-close / inline-size;
  display: grid;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.sx-shift-close > * {
  grid-area: 1 / 1;
}

.sx-shift-close__count,
.sx-shift-close__closed {
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-shift-close__count {
  display: grid;
  grid-template-columns: minmax(0, 318px) minmax(0, 1fr);
  gap: 22px;
  padding: 18px 20px 20px;
}

.sx-shift-close[data-state="closed"] .sx-shift-close__count {
  opacity: 0;
  transform: scale(0.985);
  visibility: hidden;
}

/* ---------- Drawer ---------- */
.sx-shift-close__drawer {
  display: grid;
  align-content: start;
}

.sx-shift-close__kind {
  display: flex;
  justify-content: space-between;
  padding: 0 2px 4px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-shift-close__kind + .sx-shift-close__rows {
  margin-bottom: 10px;
}

.sx-shift-close__rows {
  display: grid;
}

.sx-shift-close__row {
  display: grid;
  grid-template-columns: 82px auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: 28px;
  padding: 0 2px;
  border-radius: var(--sx-r-sm);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-shift-close__row:focus-within,
.sx-shift-close__row[data-focused] {
  background: var(--sx-fill);
}

.sx-shift-close__denom {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sx-shift-close__stepper {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-shift-close__step {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-1) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-shift-close__step:hover:not(:disabled) {
  background: var(--sx-raised-hover);
}

.sx-shift-close__step:active:not(:disabled) {
  transform: scale(0.9);
}

.sx-shift-close__step:disabled {
  opacity: 0.35;
  box-shadow: none;
}

.sx-shift-close__input {
  width: 40px;
  height: 22px;
  padding: 0 4px;
  border: 0;
  border-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-shift-close__input:focus,
.sx-shift-close__row[data-focused] .sx-shift-close__input {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-shift-close__line {
  font-size: var(--sx-fs-sm);
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-shift-close__line[data-some] {
  color: var(--sx-ink-2);
}

/* ---------- Summary ---------- */
.sx-shift-close__side {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
}

.sx-shift-close__title {
  font-size: var(--sx-fs-lg);
}

.sx-shift-close__sub {
  margin-top: 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-shift-close__counted {
  display: grid;
  gap: 1px;
}

.sx-shift-close__label {
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-shift-close__big {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sx-shift-close__sums {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  background: var(--sx-fill);
}

.sx-shift-close__sum {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-shift-close__sum > dt {
  color: var(--sx-muted);
}

.sx-shift-close__sum > dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.sx-shift-close__sum--total {
  margin-top: 3px;
  padding-top: 4px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 var(--sx-line);
}

.sx-shift-close__sum--total > dt {
  color: var(--sx-ink);
}

/* Difference: words and colour */
.sx-shift-close__diff {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  padding: 8px 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px transparent;
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-shift-close__diff > .sx-icon {
  grid-row: span 2;
  margin-top: 2px;
  --sx-icon-size: 15px;
}

.sx-shift-close__diff-title {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-shift-close__diff-text {
  font-size: var(--sx-fs-xs);
  line-height: 1.4;
  color: var(--sx-ink-2);
}

.sx-shift-close[data-diff="even"] .sx-shift-close__diff {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-shift-close[data-diff="short"] .sx-shift-close__diff {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-shift-close[data-diff="over"] .sx-shift-close__diff {
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-shift-close__note {
  display: grid;
  gap: 4px;
}

.sx-shift-close__note .sx-input {
  min-height: 52px;
  resize: none;
  font-size: var(--sx-fs-sm);
}

.sx-shift-close__note .sx-input[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-shift-close__note-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-shift-close__note-label small {
  font-size: inherit;
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-shift-close[data-note-error] .sx-shift-close__note-label small {
  color: var(--sx-danger-ink);
}

.sx-shift-close__close[aria-disabled="true"] {
  opacity: 0.45;
}

/* ---------- Closed summary ---------- */
.sx-shift-close__closed {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 22px 24px;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
}

.sx-shift-close[data-state="closed"] .sx-shift-close__closed {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 80ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 80ms,
    visibility 0s;
}

.sx-shift-close__done {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sx-shift-close__badge {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 19px;
}

.sx-shift-close[data-state="closed"] .sx-shift-close__badge {
  animation: sc-pop var(--sx-dur-4) var(--sx-ease-spring) 160ms both;
}

.sx-shift-close__report {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.sx-shift-close__report .sx-shift-close__sums {
  padding: 10px 12px;
}

.sx-shift-close__report .sx-shift-close__handover {
  margin-top: 8px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-shift-close__quote {
  padding: 10px 12px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-shift-close__quote strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-shift-close__actions {
  display: flex;
  justify-content: flex-end;
}

/* ---------- Narrow column: the drawer count and the totals stack ---------- */
@container shift-close (max-width: 559px) {
  .sx-shift-close__count {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    padding: 16px;
  }

  .sx-shift-close__report {
    grid-template-columns: minmax(0, 1fr);
  }
}

@keyframes sc-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-shift-close[data-state="closed"] .sx-shift-close__count,
  .sx-shift-close__closed,
  .sx-shift-close__step:active:not(:disabled) {
    transform: none;
  }

  .sx-shift-close[data-state="closed"] .sx-shift-close__badge {
    animation-name: sx-fade-in;
  }
}

/* ---------- Demo layout ---------- */
.sx-shift-close-demo {
  width: 628px;
  max-width: 100%;
}


/* ---- Card Preview (card-preview) ---- */
/* ==========================================================================
   Card Preview — payment card that fills in as you type and flips for the code
   Root: data-network="visa | mastercard | amex | jcb | discover | unionpay | diners" (when known),
         data-field="number | name | expiry | cvc" (field being edited), data-flipped,
         data-state="idle | invalid | valid"
   ========================================================================== */

.sx-card-preview {
  --cp-w: 272px;
  --cp-h: 172px;
  display: grid;
  grid-template-columns: var(--cp-w) 232px;
  gap: 24px;
  align-items: start;
  padding: 22px;
}

/* ---------- Card ---------- */
.sx-card-preview__side {
  display: grid;
  gap: 12px;
}

.sx-card-preview__scene {
  width: var(--cp-w);
  height: var(--cp-h);
  perspective: 1100px;
}

.sx-card-preview__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--sx-dur-5) var(--sx-ease-in-out);
}

.sx-card-preview[data-flipped] .sx-card-preview__card {
  transform: rotateY(180deg);
}

.sx-card-preview__face {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  border-radius: var(--sx-r-2xl);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-3), var(--sx-inset-highlight);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: opacity var(--sx-dur-4) var(--sx-ease-out);
}

/* Sheen, and a soft tint once the network is known */
.sx-card-preview__face::before,
.sx-card-preview__face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sx-card-preview__face::before {
  background:
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--sx-on-primary) 9%, transparent), transparent 62%),
    linear-gradient(115deg, transparent 38%, color-mix(in srgb, var(--sx-on-primary) 7%, transparent) 50%, transparent 62%);
}

.sx-card-preview__face::after {
  background: radial-gradient(110% 95% at 100% 0%, color-mix(in srgb, var(--cp-tint, var(--sx-accent)) 52%, transparent), transparent 64%);
  opacity: 0;
  transition: opacity var(--sx-dur-5) var(--sx-ease-out);
}

.sx-card-preview[data-network] .sx-card-preview__face::after {
  opacity: 1;
}

.sx-card-preview[data-network="visa"] { --cp-tint: var(--sx-c1); }
.sx-card-preview[data-network="mastercard"] { --cp-tint: var(--sx-c2); }
.sx-card-preview[data-network="amex"] { --cp-tint: var(--sx-c3); }
.sx-card-preview[data-network="jcb"] { --cp-tint: var(--sx-c5); }
.sx-card-preview[data-network="discover"] { --cp-tint: var(--sx-c2); }
.sx-card-preview[data-network="unionpay"] { --cp-tint: var(--sx-c4); }
.sx-card-preview[data-network="diners"] { --cp-tint: var(--sx-c6); }

.sx-card-preview__front {
  grid-template-rows: auto 1fr auto;
  padding: 18px 20px 16px;
}

.sx-card-preview__front > *,
.sx-card-preview__back > * {
  position: relative;
  z-index: 1;
}

.sx-card-preview__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sx-card-preview__chip {
  width: 36px;
  height: 27px;
  border-radius: 6px;
  background:
    linear-gradient(90deg, transparent 32%, color-mix(in srgb, var(--sx-on-warning) 22%, transparent) 33% 35%, transparent 36% 64%, color-mix(in srgb, var(--sx-on-warning) 22%, transparent) 65% 67%, transparent 68%),
    linear-gradient(0deg, transparent 46%, color-mix(in srgb, var(--sx-on-warning) 22%, transparent) 47% 53%, transparent 54%),
    linear-gradient(140deg, color-mix(in srgb, var(--sx-warning) 45%, var(--sx-surface)), var(--sx-warning));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-on-warning) 18%, transparent);
}

.sx-card-preview__network {
  font-size: var(--sx-fs-md);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-card-preview__network[data-unknown] {
  opacity: 0.55;
  font-weight: 500;
}

.sx-card-preview__network > span {
  display: inline-block;
  animation: cp-swap var(--sx-dur-4) var(--sx-ease-out) both;
}

/* Every editable area can light up while its field is being edited */
.sx-card-preview__spot {
  margin: -4px -8px;
  padding: 4px 8px;
  border-radius: var(--sx-r-md);
  box-shadow: 0 0 0 1.5px transparent;
  transition: box-shadow var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-card-preview[data-field="number"] .sx-card-preview__spot[data-for="number"],
.sx-card-preview[data-field="name"] .sx-card-preview__spot[data-for="name"],
.sx-card-preview[data-field="expiry"] .sx-card-preview__spot[data-for="expiry"],
.sx-card-preview[data-field="cvc"] .sx-card-preview__spot[data-for="cvc"] {
  background: color-mix(in srgb, var(--sx-on-primary) 8%, transparent);
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--sx-on-primary) 42%, transparent);
}

.sx-card-preview__number {
  align-self: center;
  justify-self: start;
  display: flex;
  gap: 11px;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}

.sx-card-preview__group {
  display: flex;
}

.sx-card-preview__digit {
  display: inline-block;
  width: 0.66em;
  text-align: center;
}

.sx-card-preview__digit[data-empty] {
  opacity: 0.5;
}

.sx-card-preview__digit:not([data-empty]) {
  animation: cp-char-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-card-preview__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
}

.sx-card-preview__cap {
  display: block;
  font-size: 9.5px;
  line-height: 1.3;
  opacity: 0.62;
}

.sx-card-preview__value {
  display: block;
  min-height: 18px;
  font-size: var(--sx-fs-base);
  font-weight: 500;
  letter-spacing: 0.05em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-card-preview__spot[data-for="name"] {
  min-width: 0;
  max-width: 172px;
}

.sx-card-preview__spot[data-for="name"] .sx-card-preview__value {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.sx-card-preview__value[data-empty] {
  opacity: 0.5;
  letter-spacing: 0;
  text-transform: none;
}

/* American Express prints its 4-digit code on the front, above the number */
.sx-card-preview__cid {
  position: absolute;
  top: 54px;
  right: 20px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  opacity: 0;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-card-preview[data-network="amex"] .sx-card-preview__cid {
  opacity: 0.85;
}

/* Back */
.sx-card-preview__back {
  grid-template-rows: 20px 36px auto 1fr;
  transform: rotateY(180deg);
}

.sx-card-preview__stripe {
  grid-row: 2;
  background: var(--sx-overlay);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--sx-on-primary) 10%, transparent);
}

.sx-card-preview__sign {
  grid-row: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 16px 20px 0;
}

.sx-card-preview__strip {
  flex: 1;
  height: 30px;
  border-radius: var(--sx-r-xs);
  background: repeating-linear-gradient(-12deg, color-mix(in srgb, var(--sx-on-primary) 16%, transparent) 0 4px, color-mix(in srgb, var(--sx-on-primary) 9%, transparent) 4px 8px);
}

.sx-card-preview__code {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.sx-card-preview__code-box {
  display: grid;
  place-items: center;
  min-width: 52px;
  height: 30px;
  padding: 0 10px;
  border-radius: var(--sx-r-xs);
  font-size: var(--sx-fs-md);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-surface);
}

.sx-card-preview__fine {
  grid-row: 4;
  align-self: end;
  padding: 0 20px 14px;
  font-size: 9.5px;
  line-height: 1.4;
  opacity: 0.6;
}

/* ---------- Form ---------- */
.sx-card-preview__form {
  display: grid;
  gap: 12px;
}

.sx-card-preview__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sx-card-preview__form .sx-input {
  font-variant-numeric: tabular-nums;
}

.sx-card-preview__form .sx-input[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

/* Under the card: the hint, the first problem, or the all-clear */
.sx-card-preview__status {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  min-height: 34px;
  padding: 0 2px;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-card-preview__status > .sx-icon {
  --sx-icon-size: 14px;
  margin-top: 1.5px;
}

.sx-card-preview[data-state="invalid"] .sx-card-preview__status {
  color: var(--sx-danger-ink);
}

.sx-card-preview[data-state="valid"] .sx-card-preview__status {
  color: var(--sx-success-ink);
}

.sx-card-preview[data-state="valid"] .sx-card-preview__status > .sx-icon {
  animation: cp-pop var(--sx-dur-4) var(--sx-ease-spring) both;
}

@keyframes cp-char-in {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

@keyframes cp-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@keyframes cp-pop {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* Reduced motion: no turning card; the faces crossfade instead. */
@media (prefers-reduced-motion: reduce) {
  .sx-card-preview__card,
  .sx-card-preview[data-flipped] .sx-card-preview__card,
  .sx-card-preview__back {
    transform: none;
  }

  .sx-card-preview__back {
    opacity: 0;
  }

  .sx-card-preview[data-flipped] .sx-card-preview__front {
    opacity: 0;
  }

  .sx-card-preview[data-flipped] .sx-card-preview__back {
    opacity: 1;
  }

  .sx-card-preview__digit:not([data-empty]) {
    animation-name: sx-fade-in;
  }

  .sx-card-preview[data-state="valid"] .sx-card-preview__status > .sx-icon {
    animation-name: sx-fade-in;
  }
}


/* ---- Batch Expiry (batch-expiry) ---- */
/* ==========================================================================
   Batch Expiry — lots soonest-expiry first, with discount, transfer and write-off
   Rows: data-tone="neutral | warning | danger | expired", data-selected,
         data-hidden (filtered out) and data-leaving (written off) both fold the row away
   Filter: aria-pressed on .sx-batch-expiry__filter. Popovers: .sx-pop + data-state="open | closed"
   Text that changes (days left, the date, the count) arrives in a span with data-roll.
   ========================================================================== */

.sx-batch-expiry {
  --be-cols: 16px minmax(0, 1fr) 40px 50px 118px;
  --be-row-h: 44px;
  --be-rows: 5;
  width: 552px;
}

/* ---------- Header ---------- */
.sx-batch-expiry__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px 18px;
}

.sx-batch-expiry__heading {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-batch-expiry__title {
  font-size: var(--sx-fs-md);
}

.sx-batch-expiry__sub {
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-batch-expiry__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

/* Filter toggle: a secondary button that turns accent while pressed */
.sx-batch-expiry__filter[aria-pressed="true"] {
  --_bg: var(--sx-accent-soft);
  --_bg-hover: color-mix(in srgb, var(--sx-accent) 14%, transparent);
  --_bg-active: color-mix(in srgb, var(--sx-accent) 18%, transparent);
  --_border: var(--sx-accent-line);
  --_border-hover: var(--sx-accent-line);
  color: var(--sx-accent-ink);
}

.sx-batch-expiry__count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-batch-expiry__filter[aria-pressed="true"] .sx-batch-expiry__count {
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

/* Date stepper */
.sx-batch-expiry__day {
  display: inline-flex;
  align-items: center;
  height: var(--sx-h-sm);
  padding: 0 2px;
  border-radius: var(--sx-r-md);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-batch-expiry__step {
  --sx-icon-size: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-batch-expiry__step:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-batch-expiry__step:active {
  background: var(--sx-fill-strong);
}

.sx-batch-expiry__step:focus-visible {
  outline-offset: 0;
}

.sx-batch-expiry__today {
  --sx-icon-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 88px;
  padding: 0 4px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-batch-expiry__today > .sx-icon {
  color: var(--sx-muted);
}

/* Rolling text: every holder keeps one span; a changed value arrives in a new one */
.sx-batch-expiry__today > span,
.sx-batch-expiry__count > span,
.sx-batch-expiry__days > span {
  display: inline-block;
}

.sx-batch-expiry [data-roll] {
  animation: be-roll var(--sx-dur-4) var(--sx-ease-out) both;
}

/* ---------- Table ---------- */
.sx-batch-expiry__cols,
.sx-batch-expiry__row {
  display: grid;
  grid-template-columns: var(--be-cols);
  column-gap: 12px;
  align-items: center;
  padding: 0 16px 0 18px;
}

.sx-batch-expiry__cols {
  height: 30px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  white-space: nowrap;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft), inset 0 -1px 0 var(--sx-line);
}

/* Fixed height, so filtering or writing off never changes the size of the card */
.sx-batch-expiry__body {
  position: relative;
  height: calc(var(--be-rows) * var(--be-row-h));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-batch-expiry__row {
  --be-tone: var(--sx-c6);
  --be-tone-ink: var(--sx-ink-2);
  position: relative;
  grid-template-rows: var(--be-row-h);
  overflow: hidden;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-in-out),
    opacity var(--sx-dur-3) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-batch-expiry__row:hover {
  background: var(--sx-fill);
}

.sx-batch-expiry__row[data-selected] {
  background: var(--sx-accent-soft);
}

.sx-batch-expiry__row[data-selected]:hover {
  background: color-mix(in srgb, var(--sx-accent) 14%, var(--sx-card-bg));
}

/* Filtered out or written off: the row folds to nothing and the rows below glide up */
.sx-batch-expiry__row:is([data-hidden], [data-leaving]) {
  grid-template-rows: 0px;
  opacity: 0;
}

.sx-batch-expiry__row[data-tone="warning"] {
  --be-tone: var(--sx-warning);
  --be-tone-ink: var(--sx-warning-ink);
}

.sx-batch-expiry__row:is([data-tone="danger"], [data-tone="expired"]) {
  --be-tone: var(--sx-danger);
  --be-tone-ink: var(--sx-danger-ink);
}

/* ---------- Cells ---------- */
.sx-batch-expiry__select {
  display: flex;
  align-items: center;
}

/* A larger hit area around the 16px box */
.sx-batch-expiry__select > .sx-check {
  margin: -8px;
  padding: 8px;
}

.sx-batch-expiry__product {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-batch-expiry__name {
  overflow: hidden;
  font-weight: 500;
  line-height: 18px;
  color: var(--sx-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-batch-expiry__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 18px;
  overflow: hidden;
}

.sx-batch-expiry__lot {
  flex: none;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-batch-expiry__chip {
  flex: none;
  height: 18px;
  padding: 0 6px;
  font-size: var(--sx-fs-2xs);
  animation: be-chip-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-batch-expiry__qty {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-batch-expiry__row .sx-batch-expiry__qty {
  color: var(--sx-ink-2);
}

.sx-batch-expiry__date {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  white-space: nowrap;
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-batch-expiry__row[data-tone="expired"] .sx-batch-expiry__date {
  color: var(--sx-danger-ink);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Days left: the label over a bar that shrinks as the date nears */
.sx-batch-expiry__left {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sx-batch-expiry__days {
  height: 15px;
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  line-height: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--be-tone-ink);
  white-space: nowrap;
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-batch-expiry__bar {
  position: relative;
  height: 5px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-batch-expiry__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--be-tone);
  clip-path: inset(0 calc(100% - var(--be-fill, 0) * 100%) 0 0 round 3px);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-batch-expiry__row[data-tone="expired"] .sx-batch-expiry__bar {
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

/* Nothing left to show (text comes from data-empty on the body) */
.sx-batch-expiry__body::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  pointer-events: none;
}

.sx-batch-expiry__body:not(:has(> .sx-batch-expiry__row:not([data-hidden], [data-leaving])))::after {
  content: attr(data-empty);
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out) var(--sx-dur-3) both;
}

/* ---------- Footer: status and actions ---------- */
.sx-batch-expiry__foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 48px;
  padding: 0 12px 0 18px;
  box-shadow: inset 0 1px 0 var(--sx-line);
}

.sx-batch-expiry__status {
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-batch-expiry__status strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-batch-expiry__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 6px;
}

.sx-batch-expiry__action {
  position: relative;
}

/* Popovers open upwards from the footer, inside the card */
.sx-batch-expiry__menu,
.sx-batch-expiry__confirm {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: var(--sx-z-pop);
}

.sx-batch-expiry__menu {
  --sx-pop-origin: bottom left;
  left: 0;
  min-width: 172px;
}

.sx-batch-expiry__menu .sx-menu__item:focus-visible {
  outline: none;
  color: var(--sx-ink);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-focus);
}

.sx-batch-expiry__confirm {
  --sx-pop-origin: bottom right;
  right: 0;
  display: grid;
  gap: 12px;
  width: 276px;
  padding: 14px 14px 12px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
}

.sx-batch-expiry__menu:not([data-state="open"]),
.sx-batch-expiry__confirm:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-batch-expiry__confirm-head {
  display: grid;
  gap: 3px;
}

.sx-batch-expiry__confirm-title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-batch-expiry__confirm-text {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-batch-expiry__reasons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-batch-expiry__reason {
  height: 26px;
  padding: 0 11px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition:
    color var(--sx-dur-2) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-batch-expiry__reason:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-batch-expiry__reason[aria-checked="true"] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-batch-expiry__confirm-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

@keyframes be-roll {
  from {
    opacity: 0;
    transform: translateY(45%);
    filter: blur(2px);
  }
}

@keyframes be-chip-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Rows fade; their space closes after the fade and opens before the fade-in */
  .sx-batch-expiry__row {
    transition:
      opacity var(--sx-dur-3) var(--sx-ease-out),
      background-color var(--sx-dur-1) var(--sx-ease-out),
      grid-template-rows 0s;
  }

  .sx-batch-expiry__row:is([data-hidden], [data-leaving]) {
    transition:
      opacity var(--sx-dur-3) var(--sx-ease-out),
      background-color var(--sx-dur-1) var(--sx-ease-out),
      grid-template-rows 0s linear var(--sx-dur-3);
  }

  .sx-batch-expiry [data-roll],
  .sx-batch-expiry__chip {
    animation-name: sx-fade-in;
  }

  .sx-batch-expiry__menu:not([data-state="open"]),
  .sx-batch-expiry__confirm:not([data-state="open"]) {
    transform: none;
  }
}


/* ---- People Card (people-card) ---- */
/* ==========================================================================
   People Card — an employee's card that turns over to show their manager and team
   Root (.sx-people-card) holds the perspective and the state:
     data-status="office | remote | leave | away"   presence: the avatar dot and the words follow it
     data-flipped                                   the back is showing
   The two faces (.sx-card) share one grid cell, so the card keeps the height of the taller face
   and never changes size when it turns. The hidden face is inert and aria-hidden.
   Reduced motion crossfades the faces instead of turning them.
   ========================================================================== */

.sx-people-card {
  --pc-pad: 18px;
  --pc-label: 84px;
  --pc-status: var(--sx-success);
  --pc-status-ink: var(--sx-success-ink);
  display: grid;
  width: 340px;
  perspective: 1200px;
}

.sx-people-card[data-status="remote"] {
  --pc-status: var(--sx-info);
  --pc-status-ink: var(--sx-info-ink);
}

.sx-people-card[data-status="leave"] {
  --pc-status: var(--sx-warning);
  --pc-status-ink: var(--sx-warning-ink);
}

.sx-people-card[data-status="away"] {
  --pc-status: var(--sx-faint);
  --pc-status-ink: var(--sx-muted);
}

/* ---------- Turning ---------- */
.sx-people-card__inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform var(--sx-dur-5) var(--sx-ease-in-out);
}

.sx-people-card[data-flipped] .sx-people-card__inner {
  transform: rotateY(180deg);
}

.sx-people-card__face {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.sx-people-card__back {
  transform: rotateY(180deg);
}

/* ---------- Head ---------- */
.sx-people-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: var(--pc-pad) var(--pc-pad) 16px;
}

.sx-people-card__back .sx-people-card__head {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sx-people-card__flip {
  align-self: start;
  margin: -5px -7px 0 0;
}

.sx-people-card__avatar {
  position: relative;
  display: inline-grid;
}

.sx-people-card__avatar > .sx-avatar {
  --sx-avatar-size: 52px;
  font-size: var(--sx-fs-xl);
}

/* Presence dot on the avatar's edge; it pops each time the status changes. */
.sx-people-card__presence {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--pc-status);
  box-shadow: 0 0 0 2.5px var(--sx-card-bg);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-people-card[data-status="office"] .sx-people-card__presence { animation: pc-pop-office var(--sx-dur-4) var(--sx-ease-spring); }
.sx-people-card[data-status="remote"] .sx-people-card__presence { animation: pc-pop-remote var(--sx-dur-4) var(--sx-ease-spring); }
.sx-people-card[data-status="leave"] .sx-people-card__presence { animation: pc-pop-leave var(--sx-dur-4) var(--sx-ease-spring); }
.sx-people-card[data-status="away"] .sx-people-card__presence { animation: pc-pop-away var(--sx-dur-4) var(--sx-ease-spring); }

.sx-people-card__who {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sx-people-card__name {
  overflow: hidden;
  font-size: var(--sx-fs-lg);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-people-card__role {
  overflow: hidden;
  color: var(--sx-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-people-card__back .sx-people-card__role {
  color: var(--sx-muted);
}

/* The four words share one cell, so swapping them is a crossfade that never shifts anything. */
.sx-people-card__status {
  display: inline-grid;
  justify-items: start;
  margin-top: 3px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--pc-status-ink);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-people-card__status-word {
  grid-area: 1 / 1;
  white-space: nowrap;
  opacity: 0;
  filter: blur(3px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), filter var(--sx-dur-2) var(--sx-ease-out);
}

.sx-people-card[data-status="office"] .sx-people-card__status-word[data-value="office"],
.sx-people-card[data-status="remote"] .sx-people-card__status-word[data-value="remote"],
.sx-people-card[data-status="leave"] .sx-people-card__status-word[data-value="leave"],
.sx-people-card[data-status="away"] .sx-people-card__status-word[data-value="away"] {
  opacity: 1;
  filter: none;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 60ms, filter var(--sx-dur-3) var(--sx-ease-out) 60ms;
}

/* ---------- Facts ---------- */
.sx-people-card__facts {
  display: grid;
  align-content: start;
  gap: 9px;
  margin: 0;
  padding: 14px var(--pc-pad) 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-people-card__fact {
  display: grid;
  grid-template-columns: var(--pc-label) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 22px;
}

.sx-people-card__fact > dt {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-people-card__fact > dd {
  min-width: 0;
  margin: 0;
  color: var(--sx-ink);
}

.sx-people-card__fact > .sx-people-card__inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
}

.sx-people-card__time {
  font-weight: 500;
}

.sx-people-card__person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sx-people-card__person > .sx-avatar {
  --sx-avatar-size: 28px;
}

.sx-people-card__person-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-people-card__person-name,
.sx-people-card__person-role {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-people-card__person-name {
  font-weight: 500;
}

.sx-people-card__person-role,
.sx-people-card__tenure {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-people-card__count {
  color: var(--sx-ink-2);
}

/* ---------- Foot: contact buttons on the front, skills on the back ---------- */
.sx-people-card__foot {
  margin-top: auto;
  padding: 12px 14px;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-people-card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.sx-people-card__actions > .sx-btn:not(.sx-btn--primary) {
  --_bg: var(--sx-raised);
  --_bg-hover: var(--sx-raised-hover);
}

.sx-people-card__label {
  margin-bottom: 7px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-people-card__skills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* ---------- Avatar tints ---------- */
.sx-people-card .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-people-card .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-people-card .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-people-card .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-people-card .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }
.sx-people-card .sx-avatar[data-tone="violet"] {
  --sx-avatar-bg: color-mix(in oklab, var(--sx-c5) 16%, var(--sx-card-bg));
  --sx-avatar-ink: color-mix(in oklab, var(--sx-c5) 72%, var(--sx-ink));
}

@keyframes pc-pop-office { from { transform: scale(0.45); } }
@keyframes pc-pop-remote { from { transform: scale(0.45); } }
@keyframes pc-pop-leave { from { transform: scale(0.45); } }
@keyframes pc-pop-away { from { transform: scale(0.45); } }

/* ---------- Reduced motion: no turning, the faces crossfade ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-people-card__inner,
  .sx-people-card[data-flipped] .sx-people-card__inner,
  .sx-people-card__back {
    transform: none;
  }

  .sx-people-card__face {
    transition:
      opacity var(--sx-dur-3) var(--sx-ease-out),
      box-shadow var(--sx-dur-3) var(--sx-ease-out),
      background-color var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-people-card__back,
  .sx-people-card[data-flipped] .sx-people-card__front {
    opacity: 0;
  }

  .sx-people-card[data-flipped] .sx-people-card__back {
    opacity: 1;
  }

  .sx-people-card[data-status] .sx-people-card__presence {
    animation: none;
  }

  .sx-people-card__status-word {
    filter: none;
  }
}


/* ---- Slide Rail (slide-rail) ---- */
/* ==========================================================================
   Slide Rail — a carousel of cards on CSS scroll-snap
   Root: <section aria-roledescription="carousel">; data-playing while autoplay is on (it
         still holds while hovered, focused, offscreen or in a hidden tab).
   Track: native horizontal scroller with mandatory snap, so touch swipe and trackpads just
          work; slides are role="group" aria-roledescription="slide" aria-label="2 of 5".
   Slide tiles take their colours from data-tone="1…5" (series tokens mixed into the surface).
   Dots: the active one carries aria-current and grows into a pill; while autoplay runs, its
         fill is animated by script (Web Animations) so pausing holds it exactly.
   Buttons pressed by a preview carry data-pressed.
   ========================================================================== */

.sx-slide-rail {
  --sr-slide: 360px;
  --sr-gap: 10px;
  --sr-pad: 16px;
  width: 440px;
  overflow: hidden;
}

/* ---------- Head ---------- */
.sx-slide-rail__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px 12px var(--sr-pad);
}

.sx-slide-rail__heading {
  display: grid;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.sx-slide-rail__title {
  font-size: var(--sx-fs-md);
}

.sx-slide-rail__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-slide-rail__controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- Track ---------- */
.sx-slide-rail__track {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--sr-slide);
  gap: var(--sr-gap);
  padding: 2px var(--sr-pad) 4px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--sr-pad);
  scrollbar-width: none;
  border-radius: var(--sx-r-md);
}

.sx-slide-rail__track::-webkit-scrollbar {
  display: none;
}

.sx-slide-rail__track:focus-visible {
  outline-offset: -2px;
}

.sx-slide-rail__slide {
  min-width: 0;
  scroll-snap-align: start;
}

/* ---------- Tile ---------- */
.sx-slide-rail__tile {
  --sr-a: var(--sx-c1);
  --sr-b: var(--sx-c5);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 172px;
  padding: 14px 16px 16px;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  background:
    radial-gradient(110% 120% at 100% 0%, color-mix(in oklab, var(--sr-b) 26%, transparent), transparent 62%),
    linear-gradient(155deg, color-mix(in oklab, var(--sr-a) 20%, var(--sx-surface)), color-mix(in oklab, var(--sr-a) 6%, var(--sx-surface)) 70%);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sr-a) 16%, transparent);
  isolation: isolate;
}

.sx-slide-rail__slide[data-tone="2"] .sx-slide-rail__tile {
  --sr-a: var(--sx-c3);
  --sr-b: var(--sx-c1);
}

.sx-slide-rail__slide[data-tone="3"] .sx-slide-rail__tile {
  --sr-a: var(--sx-c5);
  --sr-b: var(--sx-c4);
}

.sx-slide-rail__slide[data-tone="4"] .sx-slide-rail__tile {
  --sr-a: var(--sx-c2);
  --sr-b: var(--sx-c4);
}

.sx-slide-rail__slide[data-tone="5"] .sx-slide-rail__tile {
  --sr-a: var(--sx-c4);
  --sr-b: var(--sx-c3);
}

.sx-slide-rail__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sx-slide-rail__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--sx-r-lg);
  color: color-mix(in oklab, var(--sr-a) 70%, var(--sx-ink));
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 17px;
}

.sx-slide-rail__tag {
  color: var(--sx-ink-2);
  background: color-mix(in oklab, var(--sx-raised) 70%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sr-a) 22%, transparent);
}

/* A large faint copy of the icon fills the right side, clear of the copy. */
.sx-slide-rail__art {
  position: absolute;
  top: 46px;
  right: -12px;
  z-index: -1;
  color: color-mix(in oklab, var(--sr-a) 30%, transparent);
  --sx-icon-size: 104px;
  --sx-icon-stroke: 1.25;
}

.sx-slide-rail__copy {
  grid-row: 3;
  display: grid;
  gap: 4px;
  max-width: 232px;
}

.sx-slide-rail__copy > h4 {
  font-size: var(--sx-fs-lg);
}

.sx-slide-rail__copy > p {
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

/* ---------- Dots ---------- */
.sx-slide-rail__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px 12px;
}

.sx-slide-rail__dots {
  display: flex;
  align-items: center;
}

.sx-slide-rail__dot {
  display: grid;
  place-items: center;
  height: 20px;
  padding: 0 3px;
  border-radius: var(--sx-r-pill);
}

.sx-slide-rail__dot:focus-visible {
  outline-offset: 0;
}

.sx-slide-rail__pip {
  position: relative;
  width: 6px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-line-strong);
  transition:
    width var(--sx-dur-4) var(--sx-ease-out),
    background-color var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-slide-rail__dot:hover .sx-slide-rail__pip {
  background: var(--sx-faint);
}

.sx-slide-rail__dot[aria-current="true"] .sx-slide-rail__pip {
  width: 24px;
  background: var(--sx-c-track);
}

.sx-slide-rail__dot[data-pressed] .sx-slide-rail__pip {
  transform: scale(0.8);
}

.sx-slide-rail__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--sx-ink-2);
  transform-origin: left center;
  transform: scaleX(0);
}

/* Without autoplay the current pill is simply full. */
.sx-slide-rail:not([data-playing]) .sx-slide-rail__dot[aria-current="true"] .sx-slide-rail__fill {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .sx-slide-rail__pip {
    transition: background-color var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-slide-rail__dot[data-pressed] .sx-slide-rail__pip {
    transform: none;
  }
}


/* ---- Focus Fade (focus-fade) ---- */
/* ==========================================================================
   Focus Fade — swaps content through a short blur instead of a hard cut
   Root: .sx-focus-fade (inline, the width eases) or .sx-focus-fade--block (panels).
         data-align="center | end" anchors the outgoing copy; data-ready is set after the
         first paint so the initial content never animates in.
   Items: .sx-focus-fade__item; the outgoing copy carries data-phase="out" and overlaps
          the incoming one until it has faded.
   ========================================================================== */

.sx-focus-fade {
  --ss-blur: 0.24em;
  --ss-in: var(--sx-dur-4);
  --ss-out: var(--sx-dur-3);
  position: relative;
  display: inline-block;
  white-space: nowrap;
  transition: width var(--sx-dur-4) var(--sx-ease-out);
}

.sx-focus-fade__item {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-gap, 0.42em);
  white-space: nowrap;
  transition:
    opacity var(--ss-in) var(--sx-ease-out) 40ms,
    filter var(--ss-in) var(--sx-ease-out) 40ms,
    transform var(--ss-in) var(--sx-ease-out) 40ms;
}

.sx-focus-fade__item > .sx-icon {
  --sx-icon-size: 1.08em;
}

/* Incoming copy: sharpens into place from a soft blur */
@starting-style {
  .sx-focus-fade[data-ready] > .sx-focus-fade__item {
    opacity: 0;
    filter: blur(var(--ss-blur));
    transform: scale(0.97);
  }
}

/* Outgoing copy: leaves the flow, overlaps the new one and fades faster than it arrives */
.sx-focus-fade > .sx-focus-fade__item[data-phase="out"] {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  filter: blur(var(--ss-blur));
  transform: scale(1.02);
  pointer-events: none;
  user-select: none;
  transition-duration: var(--ss-out);
  transition-delay: 0s;
}

.sx-focus-fade[data-align="center"] > .sx-focus-fade__item[data-phase="out"] {
  left: 50%;
  translate: -50% 0;
}

.sx-focus-fade[data-align="end"] > .sx-focus-fade__item[data-phase="out"] {
  left: auto;
  right: 0;
}

/* Block: whole panels swap in place; the size does not ease */
.sx-focus-fade--block {
  display: block;
  white-space: normal;
  transition: none;
}

.sx-focus-fade--block > .sx-focus-fade__item {
  display: block;
  white-space: normal;
}

.sx-focus-fade--block > .sx-focus-fade__item[data-phase="out"] {
  right: 0;
}

@media (prefers-reduced-motion: reduce) {
  .sx-focus-fade {
    transition: none;
  }

  .sx-focus-fade > .sx-focus-fade__item,
  .sx-focus-fade > .sx-focus-fade__item[data-phase="out"] {
    transform: none;
  }

  @starting-style {
    .sx-focus-fade[data-ready] > .sx-focus-fade__item {
      transform: none;
    }
  }
}

/* ---------- Demo: product hero with a rotating word, a save button and a status line ---------- */
.sx-focus-fade-demo {
  width: 420px;
  overflow: hidden;
}

.sx-focus-fade-demo__body {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 28px 24px;
  text-align: center;
}

.sx-focus-fade-demo__title {
  margin-top: 4px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.22;
}

.sx-focus-fade-demo__word {
  color: var(--sx-accent-ink);
}

.sx-focus-fade-demo__sub {
  max-width: 330px;
  color: var(--sx-muted);
}

.sx-focus-fade-demo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px 11px 16px;
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-focus-fade-demo__status {
  display: flex;
  align-items: center;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-focus-fade-demo__status .sx-focus-fade {
  --ss-gap: 8px;
}

.sx-focus-fade-demo__dot {
  color: var(--sx-faint);
}

.sx-focus-fade-demo__dot[data-tone="warning"] {
  color: var(--sx-warning);
}

.sx-focus-fade-demo__dot[data-tone="accent"] {
  color: var(--sx-accent);
}

.sx-focus-fade-demo__dot[data-tone="success"] {
  color: var(--sx-success);
}

.sx-focus-fade-demo__save .sx-spinner {
  --sx-spinner-size: 12px;
}

.sx-focus-fade-demo__save .sx-icon {
  --sx-icon-size: 14px;
  --sx-icon-stroke: 2.25;
}


/* ---- Digit Roll (digit-roll) ---- */
/* ==========================================================================
   Digit Roll — numbers that roll digit by digit
   Root: .sx-digit-roll (data-ready enables the roll after the first paint)
   Each digit is a column holding a vertical strip 0–9 (__strip) that moves with transform:
   --cu-d is the digit, --cu-i its position for the stagger. Separators (__sep) and the
   prefix and suffix (__affix) hold still. Screen readers get the plain text.
   ========================================================================== */

.sx-digit-roll {
  --cu-h: 1.25em;
  --cu-dur: 900ms;
  --cu-stagger: 26ms;
  position: relative;
  display: inline-flex;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-digit-roll__track {
  display: inline-flex;
  height: var(--cu-h);
  line-height: var(--cu-h);
  user-select: none;
}

.sx-digit-roll__affix,
.sx-digit-roll__sep {
  white-space: pre;
}

.sx-digit-roll__digit {
  position: relative;
  height: var(--cu-h);
  overflow: hidden;
  /* Soft top and bottom edges while digits roll through */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, black 15%, black 85%, transparent 100%);
}

/* One digit per line: the strip is as narrow as a single tabular digit */
.sx-digit-roll__strip {
  display: block;
  width: min-content;
  white-space: normal;
  word-break: break-all;
  text-align: center;
  transform: translateY(calc(var(--cu-d, 0) * -10%));
}

.sx-digit-roll[data-ready] .sx-digit-roll__strip {
  transition: transform var(--cu-dur) var(--sx-ease-out) calc(var(--cu-i, 0) * var(--cu-stagger));
}

/* A new leading digit rolls up from 0 and fades in */
.sx-digit-roll[data-ready] .sx-digit-roll__digit,
.sx-digit-roll[data-ready] .sx-digit-roll__sep {
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

@starting-style {
  .sx-digit-roll[data-ready] .sx-digit-roll__digit,
  .sx-digit-roll[data-ready] .sx-digit-roll__sep {
    opacity: 0;
  }

  .sx-digit-roll[data-ready] .sx-digit-roll__strip {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-digit-roll[data-ready] .sx-digit-roll__strip {
    transition: none;
  }
}

/* ---------- Demo: three stat cards ---------- */
.sx-digit-roll-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 420px;
}

.sx-digit-roll-demo__card {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 14px 16px 15px;
}

.sx-digit-roll-demo__card--wide {
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
}

.sx-digit-roll-demo__main {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-digit-roll-demo__label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-digit-roll-demo__label > .sx-icon {
  --sx-icon-size: 14px;
}

.sx-digit-roll-demo__value {
  font-size: 26px;
  font-weight: var(--sx-heading-weight);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--sx-ink);
}

.sx-digit-roll-demo__value .sx-digit-roll__affix {
  color: var(--sx-muted);
  font-weight: 500;
}

.sx-digit-roll-demo__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-digit-roll-demo__meta > .sx-chip .sx-icon {
  --sx-icon-size: 11px;
  --sx-icon-stroke: 2.25;
}

/* Mini week chart in the wide card; today's bar grows with the total */
.sx-digit-roll-demo__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 62px;
  align-self: center;
}

.sx-digit-roll-demo__bar {
  width: 9px;
  height: 100%;
  border-radius: 3px;
  background: var(--sx-c-track);
  transform-origin: bottom;
  transform: scaleY(var(--h, 0.5));
  transition: transform var(--sx-dur-5) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-digit-roll-demo__bar[data-today] {
  background: var(--sx-c1);
}


/* ---- Glint Placeholder (glint-placeholder) ---- */
/* ==========================================================================
   Glint Placeholder — placeholders shaped like the content, with one soft sweep
   Root: .sx-glint-placeholder[data-state="loading | loaded"], aria-busy while loading.
         __placeholder (aria-hidden) and __content share one grid cell and crossfade.
   Blocks: .sx-skeleton plus __avatar, __line, __chip (width in --sk-w).
   The sweep is one band in the placeholder's coordinates: script writes each block's
   offset (--sk-x, --sk-y) and the placeholder size (--sk-w-all, --sk-h-all), so every
   block shows a slice of the same band. Without script each block sweeps on its own.
   ========================================================================== */

.sx-glint-placeholder {
  --sk-pad-y: 10px;
  --sk-pad-x: 16px;
  --sk-avatar: 32px;
  --sk-gap: 12px;
  --sk-line: 20px;
  --sk-line-gap: 2px;
  position: relative;
  display: grid;
}

.sx-glint-placeholder > .sx-glint-placeholder__placeholder,
.sx-glint-placeholder > .sx-glint-placeholder__content {
  grid-area: 1 / 1;
  min-width: 0;
}

.sx-glint-placeholder__placeholder {
  position: relative;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear 0s;
}

.sx-glint-placeholder__content {
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 60ms,
    filter var(--sx-dur-4) var(--sx-ease-out) 60ms,
    visibility 0s linear 0s;
}

/* Loading: content steps back quickly, the placeholder fades in */
.sx-glint-placeholder[data-state="loading"] > .sx-glint-placeholder__content {
  opacity: 0;
  filter: blur(3px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    filter var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

/* Loaded: content sharpens in over the placeholder while it fades out */
.sx-glint-placeholder[data-state="loaded"] > .sx-glint-placeholder__placeholder {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear var(--sx-dur-3);
}

/* ---------- Blocks ---------- */
.sx-glint-placeholder__avatar {
  display: block;
  width: var(--sk-avatar);
  height: var(--sk-avatar);
  flex: none;
  border-radius: 50%;
}

.sx-glint-placeholder__line {
  display: block;
  width: var(--sk-w, 100%);
  min-width: 0;
  height: var(--sk-h, 8px);
  flex: 0 1 auto;
  border-radius: var(--sx-r-xs);
}

.sx-glint-placeholder__chip {
  display: block;
  width: var(--sk-w, 56px);
  height: 20px;
  flex: none;
  border-radius: var(--sx-r-pill);
}

/* Blocks sit one step above the base skeleton so they still read on a white card */
.sx-glint-placeholder .sx-skeleton {
  background: var(--sx-fill-strong);
}

/* One band across the whole placeholder, slightly angled */
.sx-glint-placeholder .sx-skeleton::after {
  inset: auto;
  top: calc(var(--sk-y, 0px) * -1);
  left: calc(var(--sk-x, 0px) * -1);
  width: var(--sk-w-all, 100%);
  height: var(--sk-h-all, 100%);
  background: linear-gradient(102deg, transparent 36%, color-mix(in oklab, var(--sx-ink) 8%, transparent) 50%, transparent 64%);
  transform: translateX(-70%);
  animation: sk-shine 1.9s var(--sx-ease-in-out) infinite;
}

.sx-glint-placeholder[data-state="loaded"] .sx-skeleton::after {
  animation-play-state: paused;
}

/* ---------- Conversation row (the default placeholder) ---------- */
.sx-glint-placeholder__row {
  display: grid;
  grid-template-columns: var(--sk-avatar) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sk-gap);
  padding: var(--sk-pad-y) var(--sk-pad-x);
}

.sx-glint-placeholder__row + .sx-glint-placeholder__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-glint-placeholder__lines {
  display: grid;
  gap: var(--sk-line-gap);
  min-width: 0;
}

.sx-glint-placeholder__text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: var(--sk-line);
}

@keyframes sk-shine {
  to { transform: translateX(70%); }
}

@keyframes sk-breathe {
  50% { opacity: 0.55; }
}

/* Reduced motion: no sweep, the blocks breathe instead */
@media (prefers-reduced-motion: reduce) {
  .sx-glint-placeholder .sx-skeleton::after {
    animation: none;
    opacity: 0;
  }

  .sx-glint-placeholder[data-state="loading"] .sx-skeleton {
    animation: sk-breathe 1.8s var(--sx-ease-in-out) infinite;
  }

  .sx-glint-placeholder > .sx-glint-placeholder__content {
    filter: none;
  }
}

/* ---------- Demo: an inbox that loads, then refreshes ---------- */
.sx-glint-placeholder-demo {
  width: 400px;
  overflow: hidden;
}

.sx-glint-placeholder-demo__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-glint-placeholder-demo__title {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
}

.sx-glint-placeholder-demo__count {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-glint-placeholder-demo__refresh {
  margin-left: auto;
  color: var(--sx-muted);
}

.sx-glint-placeholder-demo[data-loading] .sx-glint-placeholder-demo__refresh > .sx-icon {
  animation: sx-spin 0.9s linear infinite;
}

.sx-glint-placeholder-demo__list {
  display: grid;
}

/* Real rows use the same metrics as the placeholder rows, so nothing moves on load */
.sx-glint-placeholder-demo__row {
  display: grid;
  grid-template-columns: var(--sk-avatar) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sk-gap);
  padding: var(--sk-pad-y) var(--sk-pad-x);
}

.sx-glint-placeholder-demo__row + .sx-glint-placeholder-demo__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-glint-placeholder-demo__row > .sx-avatar {
  --sx-avatar-size: var(--sk-avatar);
}

.sx-glint-placeholder-demo__row > .sx-avatar[data-tone="accent"] {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-glint-placeholder-demo__row > .sx-avatar[data-tone="mark"] {
  --sx-avatar-bg: var(--sx-mark-soft);
  --sx-avatar-ink: var(--sx-mark-ink);
}

.sx-glint-placeholder-demo__row > .sx-avatar[data-tone="success"] {
  --sx-avatar-bg: var(--sx-success-soft);
  --sx-avatar-ink: var(--sx-success-ink);
}

.sx-glint-placeholder-demo__row > .sx-avatar[data-tone="warning"] {
  --sx-avatar-bg: var(--sx-warning-soft);
  --sx-avatar-ink: var(--sx-warning-ink);
}

.sx-glint-placeholder-demo__lines {
  display: grid;
  gap: var(--sk-line-gap);
  min-width: 0;
}

.sx-glint-placeholder-demo__text {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--sk-line);
  min-width: 0;
}

.sx-glint-placeholder-demo__name {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-glint-placeholder-demo__time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-glint-placeholder-demo__time > .sx-dot {
  color: var(--sx-accent);
}

.sx-glint-placeholder-demo__preview {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}


/* ---- Rising Headline (rising-headline) ---- */
/* ==========================================================================
   Rising Headline — a headline that rises in word by word out of a soft blur
   Root: .sx-rising-headline[data-state="idle | play"]. Words (__word) carry --wr-i; the subline
   (__sub) carries --wr-n (the word count) so it follows the last word.
   Timing: --wr-stagger (gap between words), --wr-delay (before the first word).
   Replaying = restarting the animation: script swaps the word elements or toggles the state.
   ========================================================================== */

.sx-rising-headline {
  --wr-stagger: 70ms;
  --wr-delay: 0ms;
  --wr-dur: var(--sx-dur-5);
  display: grid;
  gap: 10px;
}

.sx-rising-headline__word {
  display: inline-block;
}

.sx-rising-headline[data-state="idle"] .sx-rising-headline__word,
.sx-rising-headline[data-state="idle"] .sx-rising-headline__sub {
  opacity: 0;
}

.sx-rising-headline[data-state="play"] .sx-rising-headline__word {
  animation: wr-rise var(--wr-dur) var(--sx-ease-out) both;
  animation-delay: calc(var(--wr-delay) + var(--wr-i, 0) * var(--wr-stagger));
}

.sx-rising-headline[data-state="play"] .sx-rising-headline__sub {
  animation: wr-follow var(--wr-dur) var(--sx-ease-out) both;
  animation-delay: calc(var(--wr-delay) + var(--wr-n, 0) * var(--wr-stagger) + 140ms);
}

@keyframes wr-rise {
  from {
    opacity: 0;
    transform: translateY(0.42em);
    filter: blur(0.2em);
  }
}

@keyframes wr-follow {
  from {
    opacity: 0;
    transform: translateY(6px);
    filter: blur(3px);
  }
}

/* Reduced motion: the whole line fades in at once */
@media (prefers-reduced-motion: reduce) {
  .sx-rising-headline[data-state="play"] .sx-rising-headline__word,
  .sx-rising-headline[data-state="play"] .sx-rising-headline__sub {
    animation-name: sx-fade-in;
    animation-delay: var(--wr-delay);
  }
}

/* ---------- Demo: a what's-new card that cycles through headlines ---------- */
.sx-rising-headline-demo {
  display: grid;
  justify-items: center;
  gap: 16px;
  width: 460px;
  padding: 28px 32px 14px;
  text-align: center;
}

.sx-rising-headline-demo .sx-rising-headline {
  justify-items: center;
}

.sx-rising-headline-demo .sx-rising-headline__title {
  max-width: 390px;
  font-size: 30px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.14;
}

.sx-rising-headline-demo .sx-rising-headline__sub {
  max-width: 340px;
  color: var(--sx-muted);
}

.sx-rising-headline-demo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  justify-self: stretch;
  margin-top: 6px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-rising-headline-demo__dots {
  display: flex;
  gap: 6px;
}

.sx-rising-headline-demo__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-line-strong);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-rising-headline-demo__dot[aria-current="true"] {
  background: var(--sx-ink);
}

.sx-rising-headline-demo__replay {
  color: var(--sx-muted);
}


/* ---- Depth Card (depth-card) ---- */
/* ==========================================================================
   Depth Card — tilts toward the pointer, layers shift at different depths
   Root: .sx-depth-card (the untransformed hit area). Script writes, every frame:
     --pc-rx / --pc-ry   tilt in degrees (within ±8)
     --pc-px / --pc-py   pointer from the centre, -1…1, already scaled by the tilt amount
     --pc-mx / --pc-my   highlight position; --pc-glow its strength (0…1)
     --pc-cx / --pc-cy   virtual cursor position in px (previews only)
   data-active while the pointer is over the card; data-virtual while a preview drives it.
   Parts: __surface (the card that tilts), __layer (--pc-depth: shift per depth unit),
          __glare, __cursor; content parts __art, __body, __tile, __title, __text.
   ========================================================================== */

.sx-depth-card {
  --pc-max-shift: 5px;
  position: relative;
  width: 360px;
  touch-action: pan-y;
}

.sx-depth-card__surface {
  position: relative;
  overflow: hidden;
  pointer-events: none;
  transform:
    perspective(900px)
    rotateX(calc(var(--pc-rx, 0) * 1deg))
    rotateY(calc(var(--pc-ry, 0) * 1deg))
    scale(calc(1 + var(--pc-glow, 0) * 0.012));
  transition: box-shadow var(--sx-dur-4) var(--sx-ease-out);
  will-change: transform;
}

.sx-depth-card[data-active] .sx-depth-card__surface {
  box-shadow: var(--sx-shadow-3);
}

.sx-depth-card__layer {
  transform: translate3d(
    calc(var(--pc-px, 0) * var(--pc-depth, 1) * var(--pc-max-shift)),
    calc(var(--pc-py, 0) * var(--pc-depth, 1) * var(--pc-max-shift)),
    0
  );
}

.sx-depth-card__glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--pc-mx, 50%) var(--pc-my, 50%), var(--sx-glow-3), transparent 66%);
  opacity: calc(var(--pc-glow, 0) * 0.8);
}

/* Virtual cursor for previews: drawn where the script points */
.sx-depth-card__cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  display: grid;
  color: var(--sx-ink);
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--pc-cx, 0px), var(--pc-cy, 0px));
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  filter: drop-shadow(0 1px 1.5px var(--sx-overlay));
}

.sx-depth-card__cursor > .sx-icon {
  --sx-icon-size: 18px;
  --sx-icon-stroke: 1.6;
  fill: var(--sx-raised);
  translate: -3px -2px;
}

.sx-depth-card[data-virtual] .sx-depth-card__cursor {
  opacity: 1;
}

/* ---------- Content parts ---------- */
.sx-depth-card__art {
  position: relative;
  height: 150px;
  overflow: hidden;
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-depth-card__art > .sx-depth-card__layer {
  position: absolute;
}

.sx-depth-card__tile {
  position: absolute;
  top: 131px;
  left: 20px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
  --sx-icon-size: 18px;
}

.sx-depth-card__body {
  display: grid;
  gap: 5px;
  padding: 32px 20px 20px;
}

.sx-depth-card__title {
  font-size: var(--sx-fs-lg);
}

.sx-depth-card__text {
  color: var(--sx-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sx-depth-card__surface,
  .sx-depth-card__layer {
    transform: none;
  }
}

/* ---------- Demo illustration: a conversation being routed to an agent ---------- */
.sx-depth-card-demo__glow {
  inset: -24px;
  background:
    radial-gradient(130px 90px at 26% 34%, var(--sx-glow-3), transparent 72%),
    radial-gradient(150px 100px at 82% 66%, var(--sx-glow-1), transparent 72%);
}

.sx-depth-card-demo__grid {
  inset: -18px;
  background-image: radial-gradient(circle, var(--sx-line-strong) 1px, transparent 1.4px);
  background-size: 14px 14px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 50%, black 35%, transparent 78%);
}

.sx-depth-card-demo__panel {
  top: 22px;
  left: 26px;
  display: grid;
  gap: 7px;
  width: 170px;
  padding: 10px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
}

.sx-depth-card-demo__row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.sx-depth-card-demo__row + .sx-depth-card-demo__row {
  padding-top: 7px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-depth-card-demo__face {
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-fill-strong);
}

.sx-depth-card-demo__face[data-tone="accent"] { background: var(--sx-accent-soft); box-shadow: inset 0 0 0 1px var(--sx-accent-line); }
.sx-depth-card-demo__face[data-tone="mark"] { background: var(--sx-mark-soft); box-shadow: inset 0 0 0 1px var(--sx-mark-line); }
.sx-depth-card-demo__face[data-tone="success"] { background: var(--sx-success-soft); box-shadow: inset 0 0 0 1px var(--sx-success-line); }

.sx-depth-card-demo__bar {
  height: 6px;
  width: var(--w, 60%);
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill-strong);
}

.sx-depth-card-demo__bar[data-tone="ink"] {
  height: 7px;
  background: var(--sx-line-strong);
}

.sx-depth-card-demo__link {
  top: 50px;
  left: 198px;
  width: 44px;
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--sx-faint) 0 4px, transparent 4px 8px);
}

.sx-depth-card-demo__route {
  top: 36px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
}

.sx-depth-card-demo__route > .sx-avatar {
  --sx-avatar-size: 22px;
  --sx-avatar-bg: var(--sx-mark-soft);
  --sx-avatar-ink: var(--sx-mark-ink);
}

.sx-depth-card-demo__badge {
  top: 84px;
  right: 46px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--sx-on-accent);
  background: var(--sx-accent-bg);
  box-shadow: var(--sx-shadow-accent), var(--sx-inset-highlight);
  --sx-icon-size: 15px;
  --sx-icon-stroke: 2;
}

.sx-depth-card-demo__time {
  top: 106px;
  left: 112px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 8px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-success-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 11px;
}


/* ---- Pointer Dots (pointer-dots) ---- */
/* ==========================================================================
   Pointer Dots — a dotted canvas backdrop that brightens around the pointer
   Root: .sx-pointer-dots (position it and give it a size); __canvas fills it and is drawn by
   script with colours read from --sx-faint (dots) and --sx-accent (near the pointer).
   __content sits on top and lets the pointer through to the field.
   ========================================================================== */

.sx-pointer-dots {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.sx-pointer-dots__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  /* Fade the field toward the edges so it reads as a backdrop */
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, black 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 50%, black 45%, transparent 100%);
}

.sx-pointer-dots__content {
  position: relative;
  display: grid;
  place-items: center;
  height: 100%;
  pointer-events: none;
}

/* ---------- Demo: a calm-queue caption over the field ---------- */
.sx-pointer-dots-demo {
  width: 520px;
  height: 320px;
}

.sx-pointer-dots-demo__caption {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 288px;
  padding: 18px 20px;
  box-shadow: var(--sx-shadow-3);
}

.sx-pointer-dots-demo__caption .sx-dot {
  color: var(--sx-success);
}

.sx-pointer-dots-demo__title {
  margin-top: 2px;
  font-size: var(--sx-fs-xl);
}

.sx-pointer-dots-demo__text {
  color: var(--sx-muted);
}

.sx-pointer-dots-demo__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-pointer-dots-demo__foot .sx-avatar:nth-child(1) {
  --sx-avatar-bg: var(--sx-accent-soft);
  --sx-avatar-ink: var(--sx-accent-ink);
}

.sx-pointer-dots-demo__foot .sx-avatar:nth-child(2) {
  --sx-avatar-bg: var(--sx-mark-soft);
  --sx-avatar-ink: var(--sx-mark-ink);
}

.sx-pointer-dots-demo__foot .sx-avatar:nth-child(3) {
  --sx-avatar-bg: var(--sx-success-soft);
  --sx-avatar-ink: var(--sx-success-ink);
}


/* ---- Price Tiers (price-tiers) ---- */
/* ==========================================================================
   Price Tiers — pricing section: heading, billing switch, three plan cards
   Root: data-billing="monthly | yearly". The recommended plan carries data-featured.
   Composes Segment Rail (segment-rail.css) for the billing choice.
   ========================================================================== */

.sx-price-tiers {
  display: grid;
  gap: 22px;
  width: 920px;
  padding: 26px 32px 22px;
}

/* ---------- Heading ---------- */
.sx-price-tiers__head {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.sx-price-tiers__title {
  font-size: 30px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.12;
}

.sx-price-tiers__sub {
  max-width: 480px;
  font-size: var(--sx-fs-md);
  color: var(--sx-muted);
}

.sx-price-tiers__head > .sx-segment-rail {
  margin-top: 10px;
}

/* ---------- Plans ---------- */
.sx-price-tiers__plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.sx-price-tiers__plan {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
}

/* Raised: a little taller than its neighbours, a firmer ring and a deeper shadow. */
.sx-price-tiers__plan[data-featured] {
  z-index: 1;
  margin-block: -10px;
  padding-block: 30px;
  box-shadow: 0 0 0 1px var(--sx-primary), var(--sx-shadow-3);
}

.sx-price-tiers__plan-head {
  display: grid;
  gap: 3px;
}

.sx-price-tiers__name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 22px;
}

.sx-price-tiers__name {
  font-size: var(--sx-fs-lg);
}

.sx-price-tiers__desc {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Price ---------- */
.sx-price-tiers__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-height: 40px;
  margin-top: 16px;
}

.sx-price-tiers__amount {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font-size: 34px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
}

.sx-price-tiers__amount[data-kind="text"] {
  font-size: 30px;
}

.sx-price-tiers__cur {
  /* Sits high beside the figure; the figure alone sets the baseline that "/ month" follows. */
  align-self: flex-start;
  margin-top: 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sx-ink-2);
}

.sx-price-tiers__per {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-price-tiers__note {
  min-height: 18px;
  margin-top: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  animation: pp-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-price-tiers__note strong {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

/* ---------- Features ---------- */
.sx-price-tiers__features {
  display: grid;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-price-tiers__feature {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--sx-ink-2);
}

.sx-price-tiers__tick {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 1.5px;
  border-radius: 50%;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
  --sx-icon-size: 10px;
  --sx-icon-stroke: 3;
}

.sx-price-tiers__plan[data-featured] .sx-price-tiers__tick {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-price-tiers__feature[data-included="false"] {
  color: var(--sx-faint);
}

.sx-price-tiers__feature[data-included="false"] .sx-price-tiers__tick {
  color: var(--sx-faint);
  background: var(--sx-fill);
}

.sx-price-tiers__feature s {
  text-decoration-thickness: 1px;
}

/* The button sits at the foot of every card, so the three line up. */
.sx-price-tiers__foot {
  display: flex;
  flex: 1;
  align-items: flex-end;
  padding-top: 20px;
}

.sx-price-tiers__footnote {
  font-size: var(--sx-fs-xs);
  text-align: center;
  color: var(--sx-muted);
}

@keyframes pp-swap {
  from {
    opacity: 0;
    filter: blur(4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-price-tiers__note {
    animation-name: sx-fade-in;
  }
}


/* ---- Numbers Panel (numbers-panel) ---- */
/* ==========================================================================
   Numbers Panel — KPI strip and a multi-series line chart sharing one date range
   Root: data-range. Crosshair: .sx-numbers-panel__cross[data-visible]; the tooltip follows it.
   Series colours: data-series="1 | 2 | 3" -> --sx-c1 .. --sx-c3.
   Composes Segment Rail (segment-rail.css) for the range.
   ========================================================================== */

.sx-numbers-panel {
  width: 960px;
  padding: 20px 24px 16px;
}

/* ---------- Header ---------- */
.sx-numbers-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sx-numbers-panel__heading {
  display: grid;
  gap: 3px;
}

.sx-numbers-panel__title {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-numbers-panel__sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  animation: sb-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

/* ---------- KPI strip ---------- */
.sx-numbers-panel__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 18px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-numbers-panel__kpi {
  display: grid;
  gap: 8px;
  padding: 14px 16px 15px;
}

.sx-numbers-panel__kpi + .sx-numbers-panel__kpi {
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

.sx-numbers-panel__kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 20px;
}

.sx-numbers-panel__kpi-label {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-numbers-panel__kpi-top > .sx-chip {
  font-variant-numeric: tabular-nums;
  animation: sb-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-numbers-panel__kpi-value {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-numbers-panel__kpi-unit {
  font-size: var(--sx-fs-md);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sx-muted);
}

/* ---------- Chart ---------- */
.sx-numbers-panel__chart {
  margin-top: 18px;
}

.sx-numbers-panel__chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
}

.sx-numbers-panel__chart-title {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-strong-weight);
  letter-spacing: 0;
}

.sx-numbers-panel__legend {
  display: flex;
  gap: 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-numbers-panel__legend > li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sx-numbers-panel__swatch {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 2.5px;
  background: var(--sb-c);
}

.sx-numbers-panel [data-series="1"] {
  --sb-c: var(--sx-c1);
}

.sx-numbers-panel [data-series="2"] {
  --sb-c: var(--sx-c2);
}

.sx-numbers-panel [data-series="3"] {
  --sb-c: var(--sx-c3);
}

.sx-numbers-panel__plot {
  position: relative;
  width: 912px;
  height: 236px;
}

.sx-numbers-panel__svg {
  display: block;
  width: 912px;
  height: 236px;
  overflow: visible;
}

.sx-numbers-panel__grid line {
  stroke: var(--sx-line-soft);
  stroke-width: 1;
}

.sx-numbers-panel__grid line:first-of-type {
  stroke: var(--sx-line);
}

.sx-numbers-panel__svg text {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  fill: var(--sx-muted);
}

.sx-numbers-panel__ticks {
  animation: sb-fade var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-numbers-panel__area {
  fill: var(--sx-c1);
  opacity: 0.075;
}

.sx-numbers-panel__line {
  fill: none;
  stroke: var(--sb-c);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Crosshair: a guide line and one dot per series, gliding between points. */
.sx-numbers-panel__cross {
  opacity: 0;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-numbers-panel__cross[data-visible] {
  opacity: 1;
}

.sx-numbers-panel__guide {
  stroke: var(--sx-line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.sx-numbers-panel__dot {
  fill: var(--sx-card-bg);
  stroke: var(--sb-c);
  stroke-width: 2;
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-numbers-panel__hit {
  position: absolute;
  inset: 0;
  border-radius: var(--sx-r-md);
  cursor: crosshair;
}

.sx-numbers-panel__hit:focus-visible {
  outline-offset: 2px;
}

.sx-numbers-panel__tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 156px;
  padding: 9px 10px 8px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(var(--sb-tx, 0px), var(--sb-ty, 0px)) scale(0.97);
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-numbers-panel__tip[data-visible] {
  opacity: 1;
  transform: translate(var(--sb-tx, 0px), var(--sb-ty, 0px));
}

.sx-numbers-panel__tip-date {
  margin-bottom: 6px;
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-numbers-panel__tip-rows {
  display: grid;
  gap: 4px;
  margin: 0;
}

.sx-numbers-panel__tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--sx-ink-2);
}

.sx-numbers-panel__tip-row > dt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
}

.sx-numbers-panel__tip-row > dd {
  margin: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
}

.sx-numbers-panel__tip-row--total {
  margin-top: 3px;
  padding-top: 6px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

@keyframes sb-swap {
  from {
    opacity: 0;
    filter: blur(3px);
  }
}

@keyframes sb-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-numbers-panel__sub,
  .sx-numbers-panel__kpi-top > .sx-chip {
    animation-name: sb-fade;
  }

  .sx-numbers-panel__cross,
  .sx-numbers-panel__dot,
  .sx-numbers-panel__tip {
    transition-property: opacity;
  }
}


/* ---- Brand Ribbon (brand-ribbon) ---- */
/* ==========================================================================
   Brand Ribbon — a caption and an endless row of customer wordmarks
   Pure CSS: two identical tracks slide left by their own width; the copy is aria-hidden.
   Root states: data-paused (script or preview), data-offscreen (set by script);
   hover and focus pause it too. Speed: --ll-duration on the root.
   ========================================================================== */

.sx-brand-ribbon {
  --ll-duration: 42s;
  --ll-gap: 60px;
  display: grid;
  gap: 22px;
  width: 880px;
  padding: 30px 0 32px;
}

.sx-brand-ribbon__caption {
  padding-inline: 32px;
  font-size: var(--sx-fs-md);
  text-align: center;
  color: var(--sx-muted);
}

.sx-brand-ribbon__caption strong {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-brand-ribbon__viewport {
  display: flex;
  overflow: hidden;
  padding-block: 6px;
  border-radius: var(--sx-r-md);
  /* The mask only reads alpha; any opaque token works as the solid stop. */
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--sx-ink) 15%, var(--sx-ink) 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--sx-ink) 15%, var(--sx-ink) 85%, transparent);
}

.sx-brand-ribbon__viewport:focus-visible {
  outline-offset: -2px;
}

.sx-brand-ribbon__track {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--ll-gap);
  margin: 0;
  padding: 0 var(--ll-gap) 0 0;
  list-style: none;
  animation: ll-slide var(--ll-duration) linear infinite;
  will-change: transform;
}

.sx-brand-ribbon:hover .sx-brand-ribbon__track,
.sx-brand-ribbon:focus-within .sx-brand-ribbon__track,
.sx-brand-ribbon[data-paused] .sx-brand-ribbon__track,
.sx-brand-ribbon[data-offscreen] .sx-brand-ribbon__track {
  animation-play-state: paused;
}

.sx-brand-ribbon__item {
  flex: none;
}

/* ---------- Wordmarks ---------- */
.sx-brand-ribbon__logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  font-size: 19px;
  line-height: 1;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-brand-ribbon__logo:hover {
  color: var(--sx-ink);
}

.sx-brand-ribbon__mark {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}

.sx-brand-ribbon__word {
  font-weight: 600;
  letter-spacing: -0.02em;
}

.sx-brand-ribbon__word--lower {
  text-transform: lowercase;
}

.sx-brand-ribbon__word--caps {
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.sx-brand-ribbon__word--wide {
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sx-brand-ribbon__word--tight {
  font-weight: 700;
  letter-spacing: -0.045em;
}

.sx-brand-ribbon__word--light {
  font-size: 1.08em;
  font-weight: 450;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.sx-brand-ribbon__word--split {
  font-weight: 700;
  letter-spacing: -0.03em;
  text-transform: lowercase;
}

/* The second half sits in a small outlined tag. */
.sx-brand-ribbon__word--split .sx-brand-ribbon__alt {
  display: inline-block;
  margin-left: 1px;
  padding: 3px 5px 2px;
  border-radius: 5px;
  font-size: 0.62em;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.18em;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

.sx-brand-ribbon__word--duo .sx-brand-ribbon__alt {
  font-weight: 450;
  opacity: 0.7;
}

.sx-brand-ribbon__word--stack {
  display: inline-grid;
  gap: 2px;
  font-size: 0.86em;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.sx-brand-ribbon__word--stack .sx-brand-ribbon__alt {
  font-size: 0.6em;
  font-weight: 500;
  letter-spacing: 0.3em;
}

@keyframes ll-slide {
  to {
    transform: translateX(-100%);
  }
}

/* Reduced motion: no scrolling; the logos settle into a centred, wrapped grid. */
@media (prefers-reduced-motion: reduce) {
  .sx-brand-ribbon__viewport {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: 32px;
  }

  .sx-brand-ribbon__track {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px 44px;
    padding: 0;
    animation: none;
  }

  .sx-brand-ribbon__track[aria-hidden="true"] {
    display: none;
  }
}


/* ---- Stage Columns (stage-columns) ---- */
/* ==========================================================================
   Stage Columns — cards in lanes, moved by pointer drag or keyboard
   Card states: data-dragging (follows the pointer), data-grabbed (keyboard pick-up),
   data-flying (on its way to a new slot). A dashed placeholder holds the drop spot.
   The root is the offset parent of every card, so script can measure them in one space.
   ========================================================================== */

.sx-stage-columns {
  --kl-x: 0px;
  --kl-y: 0px;
  --kl-w: 200px;
  --kl-h: 80px;
  position: relative;
  width: 960px;
  padding: 18px 18px 18px;
}

/* ---------- Header ---------- */
.sx-stage-columns__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 4px;
}

.sx-stage-columns__heading {
  display: grid;
  gap: 3px;
}

.sx-stage-columns__title {
  font-size: var(--sx-fs-xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-stage-columns__hint {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-stage-columns__head .sx-avatar-stack > .sx-avatar {
  --sx-avatar-size: 28px;
}

.sx-stage-columns__head .sx-avatar-stack > .sx-avatar + .sx-avatar {
  margin-left: -4px;
}

/* ---------- Lanes ---------- */
.sx-stage-columns__lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.sx-stage-columns__lane {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 8px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-fill);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stage-columns__lane[data-over] {
  background: var(--sx-fill-strong);
}

.sx-stage-columns__lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 6px 8px;
}

.sx-stage-columns__lane-head > .sx-dot {
  color: var(--kl-tone, var(--sx-faint));
}

.sx-stage-columns__lane[data-tone="info"] { --kl-tone: var(--sx-info); }
.sx-stage-columns__lane[data-tone="warning"] { --kl-tone: var(--sx-warning); }
.sx-stage-columns__lane[data-tone="success"] { --kl-tone: var(--sx-success); }

.sx-stage-columns__lane-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-heading-weight);
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Count: the old figure rolls out as the new one rolls in. */
.sx-stage-columns__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-stage-columns__digit {
  grid-area: 1 / 1;
}

.sx-stage-columns__digit[data-roll="in"] {
  animation: kl-roll-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-stage-columns__digit[data-roll="out"] {
  animation: kl-roll-out var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-stage-columns__count[data-dir="down"] > [data-roll="in"] {
  animation-name: kl-roll-in-down;
}

.sx-stage-columns__count[data-dir="down"] > [data-roll="out"] {
  animation-name: kl-roll-out-down;
}

.sx-stage-columns__list {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 8px;
  min-height: 72px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Cards ---------- */
.sx-stage-columns__card {
  display: grid;
  gap: 7px;
  padding: 10px 11px 11px;
  border-radius: var(--sx-r-lg);
  cursor: grab;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.sx-stage-columns__card:hover {
  box-shadow: var(--sx-shadow-2);
}

.sx-stage-columns__card:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-stage-columns__card[data-flying] {
  z-index: 4;
  box-shadow: var(--sx-shadow-pop);
}

.sx-stage-columns__card[data-grabbed] {
  z-index: 4;
  scale: 1.03;
  rotate: -1deg;
  box-shadow: var(--sx-shadow-pop), var(--sx-focus-ring);
}

/* Following the pointer: lifted out of the list and positioned against the board. */
.sx-stage-columns__card[data-dragging] {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: var(--kl-w);
  translate: var(--kl-x) var(--kl-y);
  scale: 1.03;
  rotate: -1.5deg;
  box-shadow: var(--sx-shadow-pop);
  cursor: grabbing;
}

.sx-stage-columns__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sx-stage-columns__id {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-stage-columns__card-title {
  font-weight: 500;
  line-height: 1.38;
  color: var(--sx-ink);
}

.sx-stage-columns__card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
}

.sx-stage-columns__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-stage-columns .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-stage-columns .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-stage-columns .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-stage-columns .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-stage-columns .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }

/* The spot a card will land in. */
.sx-stage-columns__placeholder {
  height: var(--kl-h);
  border-radius: var(--sx-r-lg);
  border: 1.5px dashed var(--sx-line-strong);
  background: var(--sx-fill);
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

@keyframes kl-roll-in {
  from {
    opacity: 0;
    transform: translateY(90%);
  }
}

@keyframes kl-roll-out {
  to {
    opacity: 0;
    transform: translateY(-90%);
  }
}

@keyframes kl-roll-in-down {
  from {
    opacity: 0;
    transform: translateY(-90%);
  }
}

@keyframes kl-roll-out-down {
  to {
    opacity: 0;
    transform: translateY(90%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stage-columns__digit[data-roll="in"],
  .sx-stage-columns__count[data-dir="down"] > [data-roll="in"] {
    animation-name: sx-fade-in;
  }

  .sx-stage-columns__digit[data-roll="out"],
  .sx-stage-columns__count[data-dir="down"] > [data-roll="out"] {
    animation: none;
    visibility: hidden;
  }

  .sx-stage-columns__card[data-grabbed],
  .sx-stage-columns__card[data-dragging] {
    scale: none;
    rotate: none;
  }
}


/* ---- Answer Folds (answer-folds) ---- */
/* ==========================================================================
   Answer Folds — FAQ section in two columns, one answer open at a time
   Item: data-open when expanded; trigger: aria-expanded. Answers open with the grid-rows trick.
   ========================================================================== */

.sx-answer-folds {
  display: grid;
  gap: 26px;
  width: 880px;
  padding: 30px 32px 32px;
}

.sx-answer-folds__head {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

.sx-answer-folds__title {
  font-size: 30px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.12;
}

.sx-answer-folds__sub {
  max-width: 520px;
  font-size: var(--sx-fs-md);
  color: var(--sx-muted);
}

/* Two independent columns, so opening an answer never stretches the item beside it. */
.sx-answer-folds__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: start;
}

.sx-answer-folds__col {
  display: grid;
  gap: 10px;
}

.sx-answer-folds__item {
  border-radius: var(--sx-r-xl);
}

.sx-answer-folds__item[data-open] {
  box-shadow: var(--sx-shadow-2);
}

.sx-answer-folds__q {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
}

.sx-answer-folds__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px 12px 18px;
  border-radius: inherit;
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  line-height: 1.35;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--sx-ink);
}

.sx-answer-folds__trigger:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

/* Plus built from two bars; the vertical one folds away to leave a minus. */
.sx-answer-folds__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-answer-folds__icon::before,
.sx-answer-folds__icon::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-answer-folds__icon::after {
  transform: rotate(90deg);
}

.sx-answer-folds__trigger:hover .sx-answer-folds__icon {
  background: var(--sx-fill-strong);
}

.sx-answer-folds__item[data-open] .sx-answer-folds__icon {
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  transform: rotate(180deg);
}

.sx-answer-folds__item[data-open] .sx-answer-folds__icon::after {
  transform: rotate(90deg) scaleX(0);
}

/* Answer: rows 0fr -> 1fr; the inner box clips. Closing is quicker than opening. */
.sx-answer-folds__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-answer-folds__item[data-open] .sx-answer-folds__panel {
  grid-template-rows: 1fr;
  visibility: visible;
  transition:
    grid-template-rows var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s;
}

.sx-answer-folds__inner {
  min-height: 0;
  overflow: hidden;
}

.sx-answer-folds__answer {
  padding: 0 52px 16px 18px;
  color: var(--sx-muted);
  opacity: 0;
  transform: translateY(-4px);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-answer-folds__item[data-open] .sx-answer-folds__answer {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 70ms,
    transform var(--sx-dur-4) var(--sx-ease-out) 70ms;
}

@media (prefers-reduced-motion: reduce) {
  .sx-answer-folds__panel,
  .sx-answer-folds__item[data-open] .sx-answer-folds__panel {
    transition: visibility 0s;
  }

  .sx-answer-folds__answer,
  .sx-answer-folds__item[data-open] .sx-answer-folds__answer {
    transform: none;
  }

  .sx-answer-folds__item[data-open] .sx-answer-folds__icon {
    transform: none;
  }
}


/* ---- Team Conversations (team-conversations) ---- */
/* ==========================================================================
   Team Conversations — team inbox: conversation list, thread with composer, customer panel
   Rows: aria-current on the open one, data-unread when there is something new.
   Messages: data-from="customer | agent | note"; data-new plays the arrival; data-typing
   is the three-dot indicator. Composer: data-mode="reply | note", data-focused (preview).
   Composes Segment Rail (segment-rail.css) for the tabs and the reply / note toggle.
   ========================================================================== */

.sx-team-conversations {
  display: grid;
  grid-template-columns: 52px 272px minmax(0, 1fr) 236px;
  width: 1000px;
  height: 620px;
  overflow: hidden;
  font-size: var(--sx-fs-base);
}

.sx-team-conversations .sx-avatar[data-tone="accent"] { --sx-avatar-bg: var(--sx-accent-soft); --sx-avatar-ink: var(--sx-accent-ink); }
.sx-team-conversations .sx-avatar[data-tone="info"] { --sx-avatar-bg: var(--sx-info-soft); --sx-avatar-ink: var(--sx-info-ink); }
.sx-team-conversations .sx-avatar[data-tone="success"] { --sx-avatar-bg: var(--sx-success-soft); --sx-avatar-ink: var(--sx-success-ink); }
.sx-team-conversations .sx-avatar[data-tone="warning"] { --sx-avatar-bg: var(--sx-warning-soft); --sx-avatar-ink: var(--sx-warning-ink); }
.sx-team-conversations .sx-avatar[data-tone="mark"] { --sx-avatar-bg: var(--sx-mark-soft); --sx-avatar-ink: var(--sx-mark-ink); }
.sx-team-conversations .sx-avatar[data-tone="danger"] { --sx-avatar-bg: var(--sx-danger-soft); --sx-avatar-ink: var(--sx-danger-ink); }

/* ---------- Rail ---------- */
.sx-team-conversations__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 0 12px;
  background: var(--sx-surface-2);
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-team-conversations__brand {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-bottom: 12px;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: 16px;
}

.sx-team-conversations__nav {
  display: grid;
  gap: 4px;
}

.sx-team-conversations__nav-btn {
  color: var(--sx-muted);
}

.sx-team-conversations__nav-btn > .sx-icon {
  --sx-icon-size: 17px;
}

.sx-team-conversations__nav-btn[aria-current="page"] {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-team-conversations__me {
  position: relative;
  margin-top: auto;
}

.sx-team-conversations__me > .sx-avatar {
  --sx-avatar-size: 28px;
}

.sx-team-conversations__me::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sx-success);
  box-shadow: 0 0 0 2px var(--sx-surface-2);
}

/* ---------- Conversation list ---------- */
.sx-team-conversations__list {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
}

.sx-team-conversations__list-head {
  display: grid;
  gap: 10px;
  padding: 14px 14px 10px;
}

.sx-team-conversations__list-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
}

.sx-team-conversations__list-title {
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-team-conversations__search {
  position: relative;
  display: block;
}

.sx-team-conversations__search > .sx-icon {
  position: absolute;
  top: 50%;
  left: 9px;
  translate: 0 -50%;
  color: var(--sx-muted);
  pointer-events: none;
  --sx-icon-size: 14px;
}

.sx-team-conversations__search > .sx-input {
  padding-left: 30px;
  background: var(--sx-fill);
  box-shadow: none;
}

.sx-team-conversations__search > .sx-input:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-team-conversations__search > .sx-input:focus {
  background: var(--sx-surface);
  box-shadow: var(--sx-focus-ring);
}

.sx-team-conversations__rows {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 2px;
  min-height: 0;
  margin: 0;
  padding: 2px 8px 10px;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.sx-team-conversations__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 9px 8px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-team-conversations__row:hover {
  background: var(--sx-fill);
}

.sx-team-conversations__row[aria-current="true"] {
  background: var(--sx-fill-strong);
}

.sx-team-conversations__row:focus-visible {
  outline-offset: -2px;
}

.sx-team-conversations__row > .sx-avatar {
  --sx-avatar-size: 32px;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-team-conversations__row[data-unread] > .sx-avatar {
  box-shadow: 0 0 0 2px var(--sx-card-bg), 0 0 0 3.5px var(--sx-accent);
}

.sx-team-conversations__row-body {
  display: grid;
  flex: 1;
  gap: 2px;
  min-width: 0;
}

.sx-team-conversations__row-top,
.sx-team-conversations__row-bottom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.sx-team-conversations__name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-team-conversations__row[data-unread] .sx-team-conversations__name {
  font-weight: 600;
}

.sx-team-conversations__wait {
  flex: none;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-team-conversations__row[data-unread] .sx-team-conversations__wait {
  font-weight: 500;
  color: var(--sx-accent-ink);
}

.sx-team-conversations__row-bottom {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-team-conversations__row-bottom > .sx-icon {
  --sx-icon-size: 13px;
}

.sx-team-conversations__preview {
  flex: 1;
  min-width: 0;
}

.sx-team-conversations__row[data-unread] .sx-team-conversations__preview {
  color: var(--sx-ink-2);
}

/* Unread badge: figures roll; it fades away once the conversation is read. */
.sx-team-conversations__unread {
  overflow: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    scale var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-team-conversations__unread[data-empty] {
  opacity: 0;
  scale: 0.5;
}

.sx-team-conversations__digit {
  grid-area: 1 / 1;
}

.sx-team-conversations__digit[data-roll="in"] {
  animation: si-roll-in var(--sx-dur-4) var(--sx-ease-out) both;
}

.sx-team-conversations__digit[data-roll="out"] {
  animation: si-roll-out var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-team-conversations__unread[data-dir="down"] > [data-roll="in"] {
  animation-name: si-roll-in-down;
}

.sx-team-conversations__unread[data-dir="down"] > [data-roll="out"] {
  animation-name: si-roll-out-down;
}

.sx-team-conversations__empty {
  padding: 24px 12px;
  font-size: var(--sx-fs-sm);
  text-align: center;
  color: var(--sx-muted);
}

/* ---------- Thread ---------- */
.sx-team-conversations__thread {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--sx-surface-2);
}

.sx-team-conversations__thread-head {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 56px;
  padding: 0 14px;
  background: var(--sx-card-bg);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-team-conversations__thread-head > .sx-avatar {
  --sx-avatar-size: 30px;
}

.sx-team-conversations__who {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.sx-team-conversations__who-name {
  font-size: var(--sx-fs-base);
  font-weight: 600;
  letter-spacing: 0;
}

.sx-team-conversations__who-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  --sx-icon-size: 12px;
}

.sx-team-conversations__messages {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  padding: 14px 16px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  /* Older messages fade under the header as they scroll away. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, var(--sx-ink) 18px);
  mask-image: linear-gradient(to bottom, transparent, var(--sx-ink) 18px);
  animation: si-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

/* Few messages sit at the bottom, like a chat; many scroll. */
.sx-team-conversations__messages > :first-child {
  margin-top: auto;
}

.sx-team-conversations__event {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-team-conversations__event::before,
.sx-team-conversations__event::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sx-line-soft);
}

.sx-team-conversations__msg {
  display: grid;
  gap: 3px;
  max-width: 80%;
}

.sx-team-conversations__msg[data-from="customer"] {
  align-self: flex-start;
  justify-items: start;
}

.sx-team-conversations__msg[data-from="agent"],
.sx-team-conversations__msg[data-from="note"] {
  align-self: flex-end;
  justify-items: end;
}

.sx-team-conversations__msg[data-new] {
  animation: si-msg-in var(--sx-dur-4) var(--sx-ease-out) both;
  transform-origin: left bottom;
}

.sx-team-conversations__msg[data-new]:not([data-from="customer"]) {
  transform-origin: right bottom;
}

.sx-team-conversations__bubble {
  padding: 8px 11px;
  border-radius: 14px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-team-conversations__msg[data-from="customer"] .sx-team-conversations__bubble {
  border-bottom-left-radius: 5px;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
}

.sx-team-conversations__msg[data-from="agent"] .sx-team-conversations__bubble {
  border-bottom-right-radius: 5px;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-inset-highlight);
}

.sx-team-conversations__msg[data-from="note"] .sx-team-conversations__bubble {
  border-bottom-right-radius: 5px;
  color: var(--sx-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-team-conversations__note-label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  color: var(--sx-warning-ink);
  --sx-icon-size: 11px;
}

.sx-team-conversations__mention {
  font-weight: 600;
  color: var(--sx-warning-ink);
}

.sx-team-conversations__meta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  --sx-icon-size: 12px;
}

.sx-team-conversations__meta > .sx-icon {
  color: var(--sx-info);
}

/* Typing: three dots in a customer bubble. */
.sx-team-conversations__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 13px;
}

.sx-team-conversations__typing > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-faint);
  animation: si-dot 1.1s var(--sx-ease-in-out) infinite;
}

.sx-team-conversations__typing > span:nth-child(2) {
  animation-delay: 0.15s;
}

.sx-team-conversations__typing > span:nth-child(3) {
  animation-delay: 0.3s;
}

/* ---------- Composer ---------- */
.sx-team-conversations__composer {
  display: grid;
  gap: 4px;
  margin: 0 12px 12px;
  padding: 6px 8px 8px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-shadow-1);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-team-conversations__composer[data-mode="note"] {
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-team-conversations__composer:focus-within,
.sx-team-conversations__composer[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-team-conversations__input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 4px 4px;
  border: 0;
  resize: none;
  font: inherit;
  line-height: 1.45;
  color: var(--sx-ink);
  background: transparent;
  outline: none;
}

.sx-team-conversations__composer-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-team-conversations__tools {
  display: flex;
  gap: 1px;
}

.sx-team-conversations__tools > .sx-btn--ghost {
  color: var(--sx-muted);
}

.sx-team-conversations__send {
  margin-left: auto;
}

/* ---------- Customer panel ---------- */
.sx-team-conversations__panel {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 20px 16px;
  overflow-y: auto;
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
  animation: si-swap var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-team-conversations__profile {
  display: grid;
  justify-items: center;
  gap: 3px;
  text-align: center;
}

.sx-team-conversations__profile > .sx-avatar {
  --sx-avatar-size: 46px;
  margin-bottom: 6px;
}

.sx-team-conversations__profile-name {
  font-size: var(--sx-fs-md);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sx-team-conversations__profile-sub {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-team-conversations__section {
  display: grid;
  gap: 9px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-team-conversations__section-title {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--sx-ink);
}

.sx-team-conversations__fields {
  display: grid;
  gap: 8px;
  margin: 0;
}

.sx-team-conversations__field {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 8px;
  font-size: var(--sx-fs-sm);
}

.sx-team-conversations__field > dt {
  color: var(--sx-muted);
}

.sx-team-conversations__field > dd {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink);
  --sx-icon-size: 13px;
}

.sx-team-conversations__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------- Keyframes ---------- */
@keyframes si-swap {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

@keyframes si-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}

@keyframes si-dot {
  0%, 60%, 100% {
    opacity: 0.45;
    transform: none;
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

@keyframes si-roll-in {
  from {
    opacity: 0;
    transform: translateY(90%);
  }
}

@keyframes si-roll-out {
  to {
    opacity: 0;
    transform: translateY(-90%);
  }
}

@keyframes si-roll-in-down {
  from {
    opacity: 0;
    transform: translateY(-90%);
  }
}

@keyframes si-roll-out-down {
  to {
    opacity: 0;
    transform: translateY(90%);
  }
}

@keyframes si-fade {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-team-conversations__messages,
  .sx-team-conversations__panel,
  .sx-team-conversations__msg[data-new],
  .sx-team-conversations__digit[data-roll="in"],
  .sx-team-conversations__unread[data-dir="down"] > [data-roll="in"] {
    animation-name: si-fade;
  }

  .sx-team-conversations__digit[data-roll="out"],
  .sx-team-conversations__unread[data-dir="down"] > [data-roll="out"] {
    animation: none;
    visibility: hidden;
  }

  .sx-team-conversations__typing > span {
    animation-name: sx-pulse;
  }

  .sx-team-conversations__unread {
    transition-property: opacity;
  }
}


/* ---- Complete Form (complete-form) ---- */
/* ==========================================================================
   Complete Form — a full create page with every field (template, renders inside Product Frame)
   Root grid: head / scroll area / save bar. The fields scroll inside .__scroll, which is the
   positioned ancestor every popover measures against, so nothing escapes it unseen.
   State: .__field[data-state="error"] (fields without their own error prop),
   .__nav-item[aria-current] [data-complete] [data-errors], .__summary[data-focused] (previews),
   .__save-status[data-tone="info | danger | warning | success"].
   Detail mode: the completion bar, section ticks and counts and section notes carry data-sx-extra.
   .sx-complete-form is a size container; the layout follows its own width:
     > 860px   section list on the left, two field columns
     <= 860px  section list becomes a chip row above the fields
     <= 620px  one field column, head stacks, popovers fit the column
   ========================================================================== */

.sx-complete-form {
  --cf-pad-x: 28px;
  --cf-nav-w: 208px;
  container: complete-form / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
}

/* ---------- Head ---------- */

.sx-complete-form__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 32px;
  padding: 14px var(--cf-pad-x) 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-complete-form__heading {
  display: grid;
  gap: 8px;
  flex: 1 1 280px;
  min-width: 0;
}

.sx-complete-form__heading > .sx-breadcrumb-trail {
  margin-inline-start: -5px;
}

.sx-complete-form__title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-complete-form__title h1 {
  margin: 0;
  font-size: var(--sx-fs-xl, 20px);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

.sx-complete-form__progress {
  flex: 0 1 280px;
  min-width: 200px;
}

/* ---------- Scroll area and columns ---------- */

.sx-complete-form__scroll {
  position: relative;
  min-height: 0;
  overflow: hidden auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-complete-form__layout {
  display: grid;
  grid-template-columns: var(--cf-nav-w) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--cf-pad-x);
}

/* ---------- Section list ---------- */

.sx-complete-form__nav {
  position: sticky;
  top: 0;
  z-index: 1;
  display: grid;
  gap: 2px;
  padding: 20px 0;
}

.sx-complete-form__nav-ink {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cf-ink-h, 0px);
  border-radius: var(--sx-r-md);
  background: var(--sx-raised, var(--sx-surface));
  box-shadow: var(--sx-ring);
  opacity: var(--cf-ink-o, 0);
  transform: translateY(var(--cf-ink-y, 0px));
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    height var(--sx-dur-3) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-complete-form__nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 6px 10px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  line-height: 1.3;
  color: var(--sx-muted);
  text-decoration: none;
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-complete-form__nav-item:hover {
    color: var(--sx-ink);
  }
}

.sx-complete-form__nav-item:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-complete-form__nav-item[aria-current] {
  color: var(--sx-ink);
}

.sx-complete-form__nav-label {
  flex: 1 1 auto;
  min-width: 0;
}

.sx-complete-form__nav-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
  color: var(--sx-on-accent);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 10px;
}

.sx-complete-form__nav-mark .sx-icon {
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-complete-form__nav-item[data-complete] .sx-complete-form__nav-mark {
  background: var(--sx-success);
  box-shadow: inset 0 0 0 1.5px var(--sx-success);
}

.sx-complete-form__nav-item[data-complete] .sx-complete-form__nav-mark .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-complete-form__nav-item[data-errors] .sx-complete-form__nav-mark {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--sx-danger);
}

.sx-complete-form__nav-errors {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-danger-soft);
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-danger-ink);
}

.sx-complete-form__nav-errors[hidden] {
  display: none;
}

/* ---------- Fields column ---------- */

.sx-complete-form__main {
  min-width: 0;
  padding: 26px 0 72px;
}

.sx-complete-form__summary {
  border-radius: var(--sx-r-lg);
  outline: none;
  scroll-margin-top: 16px;
}

.sx-complete-form__summary:focus > .sx-callout[data-state="open"],
.sx-complete-form__summary[data-focused] > .sx-callout[data-state="open"] {
  border-radius: var(--sx-r-lg);
  box-shadow: 0 0 0 3px var(--sx-danger-soft), 0 0 0 1px var(--sx-danger);
}

.sx-complete-form__summary-text {
  margin: 0;
}

.sx-complete-form__summary-list {
  column-gap: 20px;
  column-width: 170px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.sx-complete-form__summary-list li {
  break-inside: avoid;
  padding: 2px 0;
}

.sx-complete-form__summary-link {
  border-radius: var(--sx-r-xs);
  color: var(--sx-danger-ink);
  font-weight: max(500, var(--sx-text-weight));
  text-decoration: underline;
  text-decoration-color: var(--sx-danger-line);
  text-underline-offset: 2px;
  transition: text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-complete-form__summary-link:hover {
    text-decoration-color: currentColor;
  }
}

.sx-complete-form__summary-link[data-active] {
  text-decoration-color: currentColor;
  background: var(--sx-danger-soft);
}

.sx-complete-form__summary-link:focus-visible {
  outline: none;
  box-shadow: var(--sx-focus-ring);
}

.sx-complete-form__section {
  display: grid;
  gap: 18px;
  padding: 28px 0;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-complete-form__section:last-child {
  padding-bottom: 0;
  box-shadow: none;
}

.sx-complete-form__summary + .sx-complete-form__section {
  padding-top: 0;
  transition: padding-top var(--sx-dur-3) var(--sx-ease-out);
}

.sx-complete-form__summary:has(> .sx-callout[data-state="open"]) + .sx-complete-form__section {
  padding-top: 22px;
}

.sx-complete-form__section-head {
  display: grid;
  gap: 3px;
}

.sx-complete-form__section-head h2 {
  margin: 0;
  font-size: var(--sx-fs-lg, 16px);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.3;
  outline: none;
}

.sx-complete-form__section-note {
  margin: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-complete-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 24px;
  align-items: start;
}

.sx-complete-form__stack {
  display: grid;
  gap: 20px;
  min-width: 0;
}

/* ---------- One field ---------- */

.sx-complete-form__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-complete-form__field[data-span="full"] {
  grid-column: 1 / -1;
}

/* Library items with a fixed preview width follow the column here. */
.sx-complete-form__field > :is(.sx-type-ahead, .sx-date-field, .sx-member-select, .sx-category-select, .sx-nested-categories, .sx-prose-editor, .sx-colour-mixer, .sx-passcode-boxes) {
  width: 100%;
  max-width: none;
}

/* TypeAhead and TagField name their list from the label text, so their marks come from here. */
.sx-complete-form__field[data-required] > .sx-type-ahead .sx-label::after {
  content: "*";
  margin-inline-start: 2px;
  color: var(--sx-danger-ink);
}

.sx-complete-form__field[data-optional-mark] .sx-label::after {
  content: var(--cf-optional);
  margin-inline-start: 6px;
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

/* A field in error: the tokens its parts already use, so nothing inside is restyled. A card takes
   the ring on its edge; everything else takes it on the lines of its own control. */
.sx-complete-form__field[data-state="error"] {
  --sx-card-shadow: 0 0 0 1px var(--sx-danger), 0 0 0 4px var(--sx-danger-soft);
}

.sx-complete-form__field[data-state="error"]:not(:has(> :is(.sx-card, .sx-star-score))) {
  --sx-line: var(--sx-danger);
  --sx-line-strong: var(--sx-danger);
  --sx-faint: var(--sx-danger);
}

.sx-complete-form__error {
  display: grid;
  grid-template-rows: 0fr;
  margin-top: -6px;
  transition: grid-template-rows var(--sx-dur-2) var(--sx-ease-out), margin var(--sx-dur-2) var(--sx-ease-out);
}

.sx-complete-form__error[data-open] {
  grid-template-rows: 1fr;
  margin-top: 0;
}

.sx-complete-form__error-in {
  min-height: 0;
  overflow: hidden;
}

.sx-complete-form__error p {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin: 0;
  line-height: 1.4;
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-complete-form__error[data-open] p {
  opacity: 1;
}

.sx-complete-form__error .sx-icon {
  flex: none;
  margin-top: 2px;
}

/* A promotion has nothing to be compared with. */
.sx-complete-form__field[data-field="promo"] .sx-date-range-picker__compare {
  display: none;
}

/* A date typed wrong already says what is wrong under the field. */
.sx-date-field[data-state="error"] ~ .sx-complete-form__error {
  display: none;
}

.sx-complete-form__switches {
  display: grid;
  gap: 14px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* ---------- Save bar ---------- */

.sx-complete-form__save {
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 10px var(--cf-pad-x);
  background: var(--sx-panel);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-complete-form__save-status {
  display: flex;
  flex: 1 1 140px;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-complete-form__save-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-line-strong);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-complete-form__save-status[data-tone="warning"] .sx-complete-form__save-dot { background: var(--sx-warning); }
.sx-complete-form__save-status[data-tone="danger"] .sx-complete-form__save-dot { background: var(--sx-danger); }
.sx-complete-form__save-status[data-tone="success"] .sx-complete-form__save-dot { background: var(--sx-success); }
.sx-complete-form__save-status[data-tone="info"] .sx-complete-form__save-dot { background: var(--sx-info); }

.sx-complete-form__save-status[data-tone="danger"] {
  color: var(--sx-danger-ink);
}

.sx-complete-form__save-status[data-tone="warning"],
.sx-complete-form__save-status[data-tone="success"],
.sx-complete-form__save-status[data-tone="info"] {
  color: var(--sx-ink-2);
}

.sx-complete-form__save-actions {
  display: flex;
  flex: none;
  gap: 8px;
}

/* The notes rise from above the save bar rather than the corner of the window. */
.sx-complete-form > .sx-flash-notes {
  position: absolute;
  right: 16px;
  bottom: 68px;
}

/* ---------- Narrow frames ---------- */

@container complete-form (max-width: 860px) {
  .sx-complete-form__layout {
    display: block;
    padding: 0;
  }

  .sx-complete-form__nav {
    display: flex;
    gap: 6px;
    padding: 8px var(--cf-pad-x);
    overflow-x: auto;
    background: var(--sx-panel);
    box-shadow: inset 0 -1px 0 var(--sx-line-soft);
    scrollbar-width: none;
  }

  .sx-complete-form__nav::-webkit-scrollbar {
    display: none;
  }

  .sx-complete-form__nav-ink {
    display: none;
  }

  .sx-complete-form__nav-item {
    flex: none;
    gap: 6px;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: var(--sx-r-pill);
    box-shadow: inset 0 0 0 1px var(--sx-line);
    white-space: nowrap;
  }

  .sx-complete-form__nav-item[aria-current] {
    background: var(--sx-raised, var(--sx-surface));
    box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  }

  .sx-complete-form__main {
    padding: 0 var(--cf-pad-x) 56px;
  }

  .sx-complete-form__summary {
    padding-top: 16px;
  }

  .sx-complete-form__summary:has(> .sx-callout[data-state="closed"]) {
    padding-top: 0;
    transition: padding var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-complete-form__summary + .sx-complete-form__section {
    padding-top: 20px;
  }
}

@container complete-form (max-width: 620px) {
  .sx-complete-form {
    --cf-pad-x: 16px;
  }

  .sx-complete-form__head {
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 12px;
  }

  .sx-complete-form__heading {
    flex-basis: 100%;
    gap: 4px;
  }

  .sx-complete-form__progress {
    flex: 1 1 100%;
  }

  .sx-complete-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-complete-form__summary-list {
    column-width: 120px;
  }

  /* The month and its quick picks stack, so the popover fits the column. */
  .sx-complete-form__field .sx-date-field__pop {
    right: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    width: auto;
  }

  .sx-complete-form__field .sx-date-field__quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 0 6px;
    box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  }

  .sx-complete-form__field .sx-date-field__quick .sx-date-field__clear {
    grid-column: 1 / -1;
    margin: 0;
  }

  .sx-complete-form__field .sx-date-field__cal {
    justify-self: center;
    padding: 0;
  }

  /* Items sized for a wider column: smaller boxes, a toolbar that wraps, no keyboard tips on touch. */
  .sx-complete-form__field .sx-passcode-boxes {
    --cf-cell-w: 34px;
    --cf-cell-h: 44px;
    --cf-gap: 5px;
  }

  .sx-complete-form__field .sx-passcode-boxes__head,
  .sx-complete-form__field .sx-passcode-boxes__body {
    padding-inline: 16px;
  }

  .sx-complete-form__field .sx-nested-categories__foot {
    justify-content: flex-end;
  }

  .sx-complete-form__field :is(.sx-nested-categories__hint, .sx-prose-editor__keys) {
    display: none;
  }

  .sx-complete-form__field .sx-prose-editor__toolbar {
    flex-wrap: wrap;
  }

  .sx-complete-form__save {
    flex-wrap: nowrap;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .sx-complete-form__save-status {
    flex: 1 1 0;
    line-height: 1.25;
  }

  .sx-complete-form__save-status .sx-truncate {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-complete-form__nav-ink {
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-complete-form__nav-mark .sx-icon {
    transform: none;
  }
}


/* ---- Sticky Ticket (sticky-ticket) ---- */
/* ==========================================================================
   Sticky Ticket — a kitchen wall of paper tickets (template, no Product Frame)
   .sx-sticky-ticket is a size container: the wall follows its frame, not the window.
     The grid fits as many papers as the frame allows; when they no longer fit the papers turn
     compact, and when that is not enough the rest moves to other pages with the oldest pinned.
     <= 760px  the all-day list drops to its own row in the bar.
   Paper colours are the --kds-paper-* properties below, mixed over --sx-* tokens. Set them from
   outside to use a colour the outlet chose; everything inside a paper derives from its ink.
   Sizes on the paper are in em, so font-size scales the whole ticket.
   State lives on the paper: data-age="normal | warn | late", data-variant="paper | note",
   data-compact, data-phase="enter | stay | leave | void", data-static. Items carry
   data-status="queued | working | done | void".
   Only transform and opacity animate, so a tablet can run this all day.
   ========================================================================== */

.sx-sticky-ticket {
  --kds-paper-normal: color-mix(in srgb, var(--sx-warning) 5%, var(--sx-surface));
  --kds-paper-normal-ink: var(--sx-ink);
  --kds-paper-warn: color-mix(in srgb, var(--sx-warning) 26%, var(--sx-surface));
  --kds-paper-warn-ink: var(--sx-ink);
  --kds-paper-late: color-mix(in srgb, var(--sx-danger) 26%, var(--sx-surface));
  --kds-paper-late-ink: var(--sx-ink);
  --kds-wall: var(--sx-shell);
  --kds-wall-ink: var(--sx-ink);
  --kds-gap: var(--sx-space-3);
  --kds-pad: var(--sx-space-3);
  --kds-undo-ms: 5000ms;
  /* Bar controls are pressed with a wet thumb, so the large button is a touch size here. */
  --sx-h-lg: 48px;
  container: sticky-ticket / inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-family: var(--sx-font);
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-text-weight);
  color: var(--kds-wall-ink);
  background: var(--kds-wall);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------- Bar ---------- */
.sx-sticky-ticket__bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  min-height: 64px;
  padding: var(--sx-space-2) var(--sx-space-3);
  font-size: var(--sx-fs-md);
  background: color-mix(in srgb, var(--kds-wall-ink) 5%, var(--kds-wall));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--kds-wall-ink) 12%, transparent);
}

.sx-sticky-ticket__bar[data-position="bottom"] {
  order: 2;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--kds-wall-ink) 12%, transparent);
}

.sx-sticky-ticket__station {
  display: grid;
  flex: none;
  max-width: 170px;
  line-height: 1.2;
}

.sx-sticky-ticket__station b {
  overflow: hidden;
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-sticky-ticket__station small {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--kds-wall-ink) 72%, transparent);
}

/* The auto margin pushes the controls right when there is no all-day list to fill the bar. */
.sx-sticky-ticket__open {
  display: flex;
  flex: none;
  align-items: baseline;
  gap: 0.35em;
  margin-inline-end: auto;
  padding-left: var(--sx-space-3);
  line-height: 1.1;
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--kds-wall-ink) 14%, transparent);
}

.sx-sticky-ticket__open b {
  min-width: 1.15em;
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-sticky-ticket__open span {
  max-width: 4.6em;
  font-size: var(--sx-fs-xs);
  line-height: 1.15;
  color: color-mix(in srgb, var(--kds-wall-ink) 76%, transparent);
}

.sx-sticky-ticket__all-day {
  display: flex;
  flex: 1 1 0;
  gap: var(--sx-space-2);
  min-width: 0;
  margin: 0;
  padding: var(--sx-space-1) 28px var(--sx-space-1) 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent);
}

.sx-sticky-ticket__all-day::-webkit-scrollbar {
  display: none;
}

.sx-sticky-ticket__all-day-chip {
  display: inline-flex;
  flex: none;
  align-items: baseline;
  gap: 0.35em;
  padding: 0.28em 0.7em;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  background: color-mix(in srgb, var(--kds-wall-ink) 8%, transparent);
}

.sx-sticky-ticket__all-day-chip b {
  font-size: 1.15em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-sticky-ticket__pager,
.sx-sticky-ticket__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sx-space-1);
}

.sx-sticky-ticket__pager-text {
  display: grid;
  justify-items: center;
  min-width: 3.6em;
  line-height: 1.15;
}

.sx-sticky-ticket__pager-text b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-sticky-ticket__pager-text small {
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

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

/* ---------- Wall ---------- */
.sx-sticky-ticket__area {
  position: relative;
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-height: 0;
}

.sx-sticky-ticket__wall {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  padding: var(--kds-gap);
  padding-top: calc(var(--kds-gap) + 6px);
  overflow: hidden;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--kds-wall-ink) 13%, transparent) 1px, transparent 1.5px);
  background-position: 9px 9px;
  background-size: 18px 18px;
}

.sx-sticky-ticket__measure {
  position: relative;
  width: 100%;
  height: 100%;
}

.sx-sticky-ticket__grid {
  display: grid;
  grid-template-columns: repeat(var(--wall-columns, 4), minmax(0, 1fr));
  grid-template-rows: repeat(var(--wall-rows, 1), minmax(0, 1fr));
  gap: calc(var(--kds-gap) + 6px) var(--kds-gap);
  height: 100%;
  animation: sx-sticky-ticket-page var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-sticky-ticket__cell {
  min-width: 0;
  min-height: 0;
}

.sx-sticky-ticket__cell[data-leaving] {
  z-index: 2;
}

.sx-sticky-ticket__stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
}

.sx-sticky-ticket__stack > * {
  flex: 0 1 auto;
}

.sx-sticky-ticket__center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sx-space-6);
  text-align: center;
  pointer-events: none;
}

.sx-sticky-ticket__center > * {
  pointer-events: auto;
}

/* The message itself is a paper on the wall, so the empty board still looks like the board. */
.sx-sticky-ticket__message {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--sx-space-2);
  width: min(340px, 100%);
  padding: var(--sx-space-6) var(--sx-space-5);
  border-radius: var(--sx-r-sm);
  color: var(--kds-paper-normal-ink);
  background: var(--kds-paper-normal);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--kds-paper-normal-ink) 14%, transparent),
    0 8px 16px -10px color-mix(in srgb, var(--sx-ink) 30%, transparent);
  rotate: -0.5deg;
  --sx-icon-size: 26px;
}

.sx-sticky-ticket__message b {
  font-size: var(--sx-fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sx-sticky-ticket__message p {
  font-size: var(--sx-fs-md);
  line-height: 1.4;
  color: color-mix(in srgb, var(--kds-paper-normal-ink) 72%, transparent);
}

.sx-sticky-ticket__message .sx-btn {
  margin-top: var(--sx-space-2);
}

/* ---------- Paper ---------- */
.sx-sticky-ticket__paper {
  --paper: var(--kds-paper-normal);
  --paper-ink: var(--kds-paper-normal-ink);
  --paper-soft: color-mix(in srgb, var(--paper-ink) 74%, transparent);
  --paper-line: color-mix(in srgb, var(--paper-ink) 18%, transparent);
  --paper-fill: color-mix(in srgb, var(--paper-ink) 8%, transparent);
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  max-height: 100%;
  border-radius: var(--sx-r-sm);
  color: var(--paper-ink);
  background-color: var(--paper);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--sx-surface) 16%, transparent), transparent 38%);
  box-shadow:
    0 0 0 1px var(--paper-line),
    0 1px 2px color-mix(in srgb, var(--sx-ink) 10%, transparent),
    0 8px 16px -10px color-mix(in srgb, var(--sx-ink) 30%, transparent);
  rotate: var(--tilt, 0deg);
  /* The one-second tick only recalculates inside this paper, never the whole wall. */
  contain: layout style;
  transition:
    background-color var(--sx-dur-4) var(--sx-ease-out),
    color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-sticky-ticket__paper[data-age="warn"] {
  --paper: var(--kds-paper-warn);
  --paper-ink: var(--kds-paper-warn-ink);
}

.sx-sticky-ticket__paper[data-age="late"] {
  --paper: var(--kds-paper-late);
  --paper-ink: var(--kds-paper-late-ink);
}

/* The tape holding it to the wall. */
.sx-sticky-ticket__paper::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  z-index: 1;
  width: 46px;
  height: 14px;
  margin-left: -23px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sx-surface) 58%, transparent);
  box-shadow: 0 0 0 1px var(--sx-line-soft), 0 1px 2px color-mix(in srgb, var(--sx-ink) 8%, transparent);
  rotate: -3deg;
  pointer-events: none;
}

/* ---------- Paper head: tap to mark everything ready ---------- */
.sx-sticky-ticket__head {
  display: grid;
  flex: none;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.2em 0.6em;
  width: 100%;
  min-height: 48px;
  padding: calc(var(--kds-pad) + 0.2em) var(--kds-pad) 0.55em;
  border: 0;
  border-bottom: 1.5px dashed var(--paper-line);
  border-radius: var(--sx-r-sm) var(--sx-r-sm) 0 0;
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-sticky-ticket__paper:not([data-static]) .sx-sticky-ticket__head:hover,
  .sx-sticky-ticket__paper:not([data-static]) .sx-sticky-ticket__item:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--paper-ink) 5%, transparent);
  }
}

.sx-sticky-ticket__head:active,
.sx-sticky-ticket__item:active:not(:disabled) {
  background-color: var(--paper-fill);
}

.sx-sticky-ticket__head:focus-visible,
.sx-sticky-ticket__item:focus-visible {
  outline: 2px solid var(--sx-focus);
  outline-offset: -2px;
}

.sx-sticky-ticket__paper[data-static] .sx-sticky-ticket__head,
.sx-sticky-ticket__paper[data-static] .sx-sticky-ticket__item {
  cursor: default;
}

.sx-sticky-ticket__target {
  overflow: hidden;
  font-size: 1.62em;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.sx-sticky-ticket__target small {
  margin-right: 0.2em;
  font-size: 0.56em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--paper-soft);
}

.sx-sticky-ticket__note-title {
  font-size: 1.05em;
  font-weight: 700;
  line-height: 1.3;
}

.sx-sticky-ticket__timer {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.1em 0.4em;
  border-radius: var(--sx-r-pill);
  font-size: 1.16em;
  font-weight: 600;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  --sx-icon-size: 0.85em;
}

.sx-sticky-ticket__timer[data-age="warn"] {
  font-weight: 700;
  box-shadow: inset 0 0 0 1.5px currentColor;
}

/* Late reads from across the room: heavy, inverted and blinking slowly. Opacity only, so the
   paper never has to repaint for it. */
.sx-sticky-ticket__timer[data-age="late"] {
  font-weight: 800;
  color: var(--paper);
  background: var(--paper-ink);
  animation: sx-sticky-ticket-blink 2.4s var(--sx-ease-in-out) infinite;
}

.sx-sticky-ticket__meta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2em 0.55em;
  font-size: 0.8em;
  line-height: 1.35;
}

.sx-sticky-ticket__meta-text {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--paper-soft);
  --sx-icon-size: 1em;
}

.sx-sticky-ticket__late {
  padding: 0.05em 0.45em;
  border-radius: var(--sx-r-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--paper);
  background: var(--paper-ink);
}

.sx-sticky-ticket__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  padding: 0 0.4em;
  border-radius: var(--sx-r-xs);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--paper-line);
  --sx-icon-size: 1em;
}

.sx-sticky-ticket__moved {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em var(--kds-pad);
  font-size: 0.82em;
  font-weight: 700;
  color: var(--paper);
  background: var(--paper-ink);
  --sx-icon-size: 1em;
  animation: sx-sticky-ticket-note-in var(--sx-dur-4) var(--sx-ease-out) both;
}

/* ---------- Items ---------- */
.sx-sticky-ticket__items {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  padding: 0.2em calc(var(--kds-pad) * 0.4) calc(var(--kds-pad) * 0.5);
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  scrollbar-width: none;
  /* Shade at the fold: the paper-coloured layers scroll with the list and cover it at the ends. */
  background:
    linear-gradient(var(--paper) 40%, transparent) top / 100% 1.4em no-repeat local,
    linear-gradient(transparent, var(--paper) 60%) bottom / 100% 1.4em no-repeat local,
    linear-gradient(color-mix(in srgb, var(--paper-ink) 26%, transparent), transparent) top / 100% 0.55em no-repeat scroll,
    linear-gradient(transparent, color-mix(in srgb, var(--paper-ink) 26%, transparent)) bottom / 100% 0.55em no-repeat scroll;
}

.sx-sticky-ticket__items::-webkit-scrollbar {
  display: none;
}

.sx-sticky-ticket__item {
  position: relative;
  display: grid;
  grid-template-columns: 2.05em minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.3em;
  width: 100%;
  min-height: 48px;
  padding: 0.42em calc(var(--kds-pad) * 0.6);
  border: 0;
  border-radius: var(--sx-r-sm);
  font: inherit;
  text-align: left;
  color: inherit;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-sticky-ticket__item:disabled {
  cursor: default;
}

.sx-sticky-ticket__qty {
  font-size: 1.32em;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sx-sticky-ticket__body {
  display: grid;
  gap: 0.1em;
  min-width: 0;
}

.sx-sticky-ticket__name {
  font-size: 1.08em;
  font-weight: 600;
  line-height: 1.26;
  text-decoration: line-through 0.12em;
  text-decoration-color: transparent;
  transition: text-decoration-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-sticky-ticket__mods {
  font-size: 0.84em;
  line-height: 1.3;
  color: var(--paper-soft);
}

/* A highlighter stroke in the paper's own ink, so it shows on every paper colour. */
.sx-sticky-ticket__note {
  display: flex;
  align-items: flex-start;
  gap: 0.3em;
  margin-top: 0.15em;
  padding: 0.12em 0.4em;
  border-radius: var(--sx-r-xs);
  font-size: 0.88em;
  font-weight: 700;
  line-height: 1.3;
  background: color-mix(in srgb, var(--paper-ink) 13%, transparent);
  --sx-icon-size: 1em;
}

.sx-sticky-ticket__note > .sx-icon {
  margin-top: 0.15em;
}

.sx-sticky-ticket__remake {
  font-size: 0.82em;
  font-weight: 700;
}

.sx-sticky-ticket__mark {
  display: inline-flex;
  align-self: start;
  justify-content: flex-end;
  min-width: 1.45em;
  padding-top: 0.08em;
}

.sx-sticky-ticket__tick {
  display: grid;
  place-items: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  color: transparent;
  box-shadow: inset 0 0 0 1.5px var(--paper-line);
  transition:
    background-color var(--sx-dur-2) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 0.85em;
  --sx-icon-stroke: 3;
}

.sx-sticky-ticket__tick > .sx-icon {
  transform: scale(0.4);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-sticky-ticket__stage {
  display: inline-flex;
  align-items: center;
  gap: 0.2em;
  padding: 0.08em 0.42em;
  border-radius: var(--sx-r-pill);
  font-size: 0.78em;
  font-weight: 700;
  white-space: nowrap;
  color: var(--paper);
  background: var(--paper-ink);
  --sx-icon-size: 1em;
  animation: sx-sticky-ticket-note-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-sticky-ticket__item[data-status="done"],
.sx-sticky-ticket__item[data-status="void"] {
  color: var(--paper-soft);
}

.sx-sticky-ticket__item[data-status="done"] .sx-sticky-ticket__name,
.sx-sticky-ticket__item[data-status="void"] .sx-sticky-ticket__name {
  text-decoration-color: currentColor;
}

.sx-sticky-ticket__item[data-status="done"] .sx-sticky-ticket__tick {
  color: var(--paper);
  background: var(--paper-ink);
  box-shadow: none;
}

.sx-sticky-ticket__item[data-status="done"] .sx-sticky-ticket__tick > .sx-icon {
  transform: none;
}

/* The VOID stamp stays red and tilted, on a paper-coloured base so a late paper cannot swallow it. */
.sx-sticky-ticket__stamp,
.sx-sticky-ticket__big-stamp {
  position: absolute;
  z-index: 1;
  border: 0.14em solid var(--sx-danger);
  border-radius: var(--sx-r-xs);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.1em;
  color: var(--sx-danger-ink);
  background: var(--paper);
  pointer-events: none;
}

.sx-sticky-ticket__stamp {
  top: 50%;
  right: 0.5em;
  padding: 0.05em 0.35em;
  font-size: 1.02em;
  transform: translateY(-50%) rotate(-8deg);
  animation: sx-sticky-ticket-stamp var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-sticky-ticket__big-stamp {
  top: 50%;
  left: 50%;
  padding: 0.08em 0.4em;
  font-size: 2.6em;
  transform: translate(-50%, -50%) rotate(-10deg);
  animation: sx-sticky-ticket-big-stamp var(--sx-dur-3) var(--sx-ease-spring) both;
}

/* ---------- The small paper for an added round, stuck on its parent ---------- */
.sx-sticky-ticket__paper[data-variant="note"] {
  flex: 0 1 auto;
  align-self: flex-end;
  width: 92%;
  /* Room for at least one item line, however long the parent is. */
  min-height: 6.6em;
  margin-top: -0.2em;
  font-size: 0.92em;
  rotate: calc(var(--tilt, 0deg) + 0.7deg);
  box-shadow:
    0 0 0 1px var(--paper-line),
    0 2px 4px color-mix(in srgb, var(--sx-ink) 14%, transparent),
    0 12px 20px -12px color-mix(in srgb, var(--sx-ink) 40%, transparent);
}

/* ---------- Compact, when the wall is full. Touch areas stay 48px. ---------- */
.sx-sticky-ticket__paper[data-compact] {
  font-size: 0.88em;
}

.sx-sticky-ticket__paper[data-compact] .sx-sticky-ticket__head {
  padding-top: calc(var(--kds-pad) * 0.8);
  padding-bottom: 0.35em;
}

/* One line only. What matters most (late, oldest) comes first, so only the extras get cut. */
.sx-sticky-ticket__paper[data-compact] .sx-sticky-ticket__meta {
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
}

.sx-sticky-ticket__paper[data-compact] .sx-sticky-ticket__meta > * {
  flex: none;
}

.sx-sticky-ticket__paper[data-compact] .sx-sticky-ticket__item {
  padding-block: 0.3em;
}

.sx-sticky-ticket__paper[data-compact] .sx-sticky-ticket__mods {
  font-size: 0.8em;
}

/* ---------- Arrive and leave ---------- */
.sx-sticky-ticket__paper[data-phase="enter"] {
  animation: sx-sticky-ticket-drop var(--sx-dur-5) var(--sx-ease-spring) both;
}

/* A new paper gets a ring that fades after a moment; opacity only, so the shadow never repaints. */
.sx-sticky-ticket__paper[data-phase="enter"]::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: calc(var(--sx-r-sm) + 3px);
  box-shadow: 0 0 0 3px var(--sx-accent);
  animation: sx-sticky-ticket-ring 2.2s var(--sx-ease-out) both;
  pointer-events: none;
}

.sx-sticky-ticket__paper[data-phase="leave"] {
  animation: sx-sticky-ticket-pull var(--sx-dur-4) var(--sx-ease-in) both;
  pointer-events: none;
}

.sx-sticky-ticket__paper[data-phase="void"] {
  pointer-events: none;
}

/* ---------- Undo ---------- */
.sx-sticky-ticket__undo-dock {
  position: absolute;
  bottom: var(--sx-space-4);
  left: 50%;
  z-index: var(--sx-z-pop);
  display: grid;
  gap: var(--sx-space-2);
  width: min(460px, calc(100% - var(--sx-space-6)));
  transform: translateX(-50%);
  pointer-events: none;
}

.sx-sticky-ticket__undo {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  padding: var(--sx-space-2) var(--sx-space-2) var(--sx-space-2) var(--sx-space-4);
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-md);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: auto;
  animation: sx-sticky-ticket-undo-in var(--sx-dur-3) var(--sx-ease-out) both;
  --sx-icon-size: 20px;
}

.sx-sticky-ticket__undo > .sx-icon {
  color: var(--sx-success);
}

.sx-sticky-ticket__undo .sx-btn {
  --_h: 44px;
  --_fs: var(--sx-fs-md);
}

.sx-sticky-ticket__undo-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-sticky-ticket__undo-bar {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--sx-accent);
  transform-origin: left;
  animation: sx-sticky-ticket-undo-count var(--kds-undo-ms) linear both;
}

/* ---------- Narrow frames: the all-day list gets its own row, controls stay in reach ---------- */
@container sticky-ticket (max-width: 760px) {
  .sx-sticky-ticket__bar {
    flex-wrap: wrap;
    gap: var(--sx-space-2);
    min-height: 0;
  }

  .sx-sticky-ticket__all-day {
    order: 5;
    flex: 1 0 100%;
  }
}

/* Phone: name, count and the switch on the first row; the list and the pager share the second. */
@container sticky-ticket (max-width: 480px) {
  .sx-sticky-ticket__station {
    flex: 1 1 40%;
    min-width: 0;
    max-width: none;
  }

  .sx-sticky-ticket__open {
    margin-inline-end: 0;
  }

  .sx-sticky-ticket__actions {
    order: 2;
  }

  .sx-sticky-ticket__all-day {
    order: 3;
    flex: 1 1 40%;
  }

  .sx-sticky-ticket__pager {
    order: 4;
  }

  .sx-sticky-ticket__actions .sx-btn > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sx-sticky-ticket__actions .sx-btn {
    width: var(--_h);
    padding: 0;
  }
}

/* ---------- Keyframes ---------- */
@keyframes sx-sticky-ticket-page {
  from { opacity: 0; }
}

@keyframes sx-sticky-ticket-drop {
  0% { opacity: 0; transform: translateY(-16px) scale(1.14) rotate(-3deg); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

@keyframes sx-sticky-ticket-ring {
  0%, 60% { opacity: 1; }
  100% { opacity: 0; }
}

/* Lifts a little at the tape, then comes off the wall. */
@keyframes sx-sticky-ticket-pull {
  0% { opacity: 1; transform: none; }
  32% { opacity: 1; transform: translateY(-8px) rotate(-1.4deg) scale(1.02); }
  100% { opacity: 0; transform: translateY(-72%) rotate(-5deg) scale(0.96); }
}

@keyframes sx-sticky-ticket-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

@keyframes sx-sticky-ticket-note-in {
  from { opacity: 0; transform: translateY(-3px); }
}

@keyframes sx-sticky-ticket-stamp {
  from { opacity: 0; transform: translateY(-50%) rotate(-14deg) scale(1.7); }
}

@keyframes sx-sticky-ticket-big-stamp {
  from { opacity: 0; transform: translate(-50%, -50%) rotate(-16deg) scale(1.8); }
}

@keyframes sx-sticky-ticket-undo-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

@keyframes sx-sticky-ticket-undo-count {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes sx-sticky-ticket-fade-in {
  from { opacity: 0; }
}

@keyframes sx-sticky-ticket-fade-out {
  to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-sticky-ticket__paper,
  .sx-sticky-ticket__paper[data-variant="note"],
  .sx-sticky-ticket__message {
    rotate: 0deg;
  }

  .sx-sticky-ticket__paper[data-phase="enter"] {
    animation-name: sx-sticky-ticket-fade-in;
  }

  .sx-sticky-ticket__paper[data-phase="leave"] {
    animation-name: sx-sticky-ticket-fade-out;
  }

  .sx-sticky-ticket__stage,
  .sx-sticky-ticket__moved,
  .sx-sticky-ticket__stamp,
  .sx-sticky-ticket__big-stamp {
    animation: none;
  }

  /* The slow blink is the warning itself, so late keeps its inverted timer and label but holds still. */
  .sx-sticky-ticket__timer[data-age="late"] {
    animation: none;
  }

  .sx-sticky-ticket__undo {
    animation-name: sx-sticky-ticket-fade-in;
  }

  .sx-sticky-ticket__tick > .sx-icon {
    transform: none;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-sticky-ticket__item[data-status="done"] .sx-sticky-ticket__tick > .sx-icon {
    opacity: 1;
  }
}


/* ---- Guest Menu (guest-menu) ---- */
/* ==========================================================================
   Guest Menu — the page a guest opens from the QR code on the table (template, no Product Frame)
   Built for a phone on a slow connection: tokens, base primitives and CSS animation only, no other
   library item. .sx-guest-menu is a size container. On a wide frame the page stays a phone-width
   column in the middle of the shell, like a menu card lying on a table.
   State on the root: data-screen="cover | menu | status | thanks", data-availability="open |
   table-closed | closed". The sheet layer opens with data-open and slides on a CSS transition, so
   closing needs no timer.
   Touch sizes live on the root as custom properties. --band-* and --tent-* carry the brand band and
   the table card, because --sx-primary turns light in dark mode. Set --guest-column to change the
   width of the column.
   ========================================================================== */

.sx-guest-menu {
  --sx-fs-2xs: 11px;
  --sx-fs-xs: 12px;
  --sx-fs-sm: 13px;
  --sx-fs-base: 15px;
  --sx-fs-md: 16px;
  --sx-fs-lg: 17px;
  --sx-fs-xl: 21px;
  --sx-fs-2xl: 27px;
  --sx-fs-3xl: 36px;
  --sx-h-xs: 30px;
  --sx-h-sm: 36px;
  --sx-h-md: 44px;
  --sx-h-lg: 52px;
  --page-gutter: 16px;
  --dock-height: 76px;
  --guest-column: 430px;
  --band-bg: var(--sx-primary);
  --band-ink: var(--sx-on-primary);
  --band-pop-bg: var(--sx-on-primary);
  --band-pop-ink: var(--sx-primary);
  --tent-bg: var(--sx-surface);
  --tent-ink: var(--sx-ink);
  --tent-muted: var(--sx-muted);
  --guest-action: var(--sx-primary);
  container: guest-menu / inline-size;
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-text-weight);
  line-height: 1.45;
  color: var(--sx-ink);
  background: var(--sx-shell);
}

/* In dark mode --sx-primary is pale, so the band becomes a dark surface tinted with the accent and
   the table card turns light. light-dark() reads the color-scheme the tokens already set. */
@supports (color: light-dark(white, black)) {
  .sx-guest-menu {
    --band-bg: light-dark(var(--sx-primary), color-mix(in srgb, var(--sx-accent) 16%, var(--sx-surface)));
    --band-ink: light-dark(var(--sx-on-primary), var(--sx-ink));
    --band-pop-bg: light-dark(var(--sx-on-primary), var(--sx-ink));
    --band-pop-ink: light-dark(var(--sx-primary), var(--sx-surface));
    --tent-bg: light-dark(var(--sx-surface), var(--sx-ink));
    --tent-ink: light-dark(var(--sx-ink), var(--sx-surface));
    --tent-muted: light-dark(var(--sx-muted), var(--sx-surface-3));
    --guest-action: light-dark(var(--sx-primary), var(--sx-ink));
  }
}

.sx-guest-menu__column {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: var(--guest-column);
  height: 100%;
  overflow: hidden;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line-soft);
}

.sx-guest-menu__views {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
}

.sx-guest-menu__view {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .sx-guest-menu__view,
  .sx-guest-menu__pills {
    scroll-behavior: smooth;
  }
}

.sx-guest-menu__offline {
  flex: none;
  padding: var(--sx-space-2) var(--page-gutter);
  font-size: var(--sx-fs-sm);
  text-align: center;
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
}

/* ---------- Cover ---------- */
.sx-guest-menu__cover {
  container: guest-cover / size;
  position: absolute;
  inset: 0;
  isolation: isolate;
  overflow: hidden;
  color: var(--band-ink);
  background: var(--band-bg);
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-guest-menu__cover-grid {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  height: 100%;
}

/* A soft light behind the card gives depth; the colour stays the brand's own. */
.sx-guest-menu__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 60% at 50% 42%, color-mix(in srgb, var(--band-ink) 10%, transparent), transparent 70%);
}

.sx-guest-menu__cover-head {
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  padding: max(var(--sx-space-4), env(safe-area-inset-top)) var(--page-gutter) 0;
}

.sx-guest-menu__outlet {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-guest-menu__stage {
  display: grid;
  align-content: center;
  justify-items: center;
  min-height: 0;
  padding: var(--sx-space-5) 0;
  perspective: 900px;
}

/* The table card stands up from its bottom edge, the only movement on load, so the guest knows at
   once that the code they scanned belongs to this table. */
.sx-guest-menu__tent {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  width: min(58cqw, 216px);
  aspect-ratio: 4 / 5;
  padding: var(--sx-space-4);
  border-radius: var(--sx-r-2xl);
  color: var(--tent-ink);
  background: var(--tent-bg);
  box-shadow: 0 24px 40px -18px var(--sx-overlay);
  transform-origin: 50% 100%;
  animation: sx-guest-menu-tent var(--sx-dur-5) var(--sx-ease-spring) both;
}

.sx-guest-menu__tent-label {
  font-size: var(--sx-fs-md);
  font-weight: 600;
  color: var(--tent-muted);
}

.sx-guest-menu__tent-number {
  align-self: center;
  max-width: 100%;
  font-size: calc(min(36cqw, 132px) * var(--number-scale, 1));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__tent-area {
  min-height: 1.4em;
  font-size: var(--sx-fs-sm);
  color: var(--tent-muted);
}

.sx-guest-menu__tent-shadow {
  width: min(52cqw, 196px);
  height: 16px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--sx-overlay);
  filter: blur(9px);
  animation: sx-fade-in var(--sx-dur-5) var(--sx-ease-out) both;
}

.sx-guest-menu__foot {
  display: grid;
  gap: var(--sx-space-3);
  padding: 0 var(--page-gutter) calc(var(--sx-space-5) + env(safe-area-inset-bottom));
}

.sx-guest-menu__name {
  font-size: var(--sx-fs-3xl);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.sx-guest-menu__lead {
  max-width: 40ch;
  font-size: var(--sx-fs-md);
  line-height: 1.45;
  color: color-mix(in srgb, var(--band-ink) 88%, transparent);
}

.sx-guest-menu__cover-actions {
  display: grid;
  gap: var(--sx-space-2);
  margin-top: var(--sx-space-2);
}

.sx-guest-menu__cta {
  --_h: 54px;
  --_fs: var(--sx-fs-lg);
  --_r: var(--sx-r-lg);
}

.sx-guest-menu__secondary,
.sx-guest-menu__secondary:hover:not(:disabled) {
  color: inherit;
}

/* A short phone: the card shrinks so the button is never pushed off the screen. */
@container guest-cover (max-height: 640px) {
  .sx-guest-menu__tent {
    width: min(42cqw, 150px);
  }

  .sx-guest-menu__tent-number {
    font-size: calc(min(26cqw, 92px) * var(--number-scale, 1));
  }

  .sx-guest-menu__name {
    font-size: var(--sx-fs-2xl);
  }
}

/* ---------- Top band ---------- */
.sx-guest-menu__top {
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  padding: max(var(--sx-space-3), env(safe-area-inset-top)) var(--page-gutter) var(--sx-space-3);
  color: var(--band-ink);
  background: var(--band-bg);
}

.sx-guest-menu__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  overflow: hidden;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-lg);
  font-weight: 700;
  color: var(--band-pop-ink);
  background: var(--band-pop-bg);
}

.sx-guest-menu__mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sx-guest-menu__brand {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-guest-menu__brand b {
  overflow: hidden;
  font-size: var(--sx-fs-md);
  font-weight: 700;
  letter-spacing: -0.012em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-guest-menu__brand span {
  font-size: var(--sx-fs-sm);
  color: color-mix(in srgb, var(--band-ink) 82%, transparent);
}

.sx-guest-menu__browse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-3);
  padding: var(--sx-space-3) var(--page-gutter);
  font-size: var(--sx-fs-sm);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
}

/* ---------- Categories and search ---------- */
.sx-guest-menu__sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--sx-surface);
  box-shadow: 0 1px 0 var(--sx-line-soft);
}

.sx-guest-menu__pill-row {
  display: flex;
  align-items: center;
  gap: var(--sx-space-1);
  padding-left: calc(var(--page-gutter) - 8px);
}

.sx-guest-menu__search-button,
.sx-guest-menu__search-close,
.sx-guest-menu__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: var(--sx-ink-2);
  --sx-icon-size: 20px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__search-button:active,
.sx-guest-menu__search-close:active,
.sx-guest-menu__close:active {
  background: var(--sx-fill);
}

.sx-guest-menu__pills {
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 1;
  gap: var(--sx-space-1);
  min-width: 0;
  padding: var(--sx-space-2) var(--page-gutter) var(--sx-space-2) 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.sx-guest-menu__pills::-webkit-scrollbar {
  display: none;
}

/* The position marker: one pill that slides under the category you are reading. */
.sx-guest-menu__marker {
  position: absolute;
  top: var(--sx-space-2);
  left: 0;
  z-index: -1;
  width: var(--marker-w, 0);
  height: 36px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-primary);
  transform: translateX(var(--marker-x, 0));
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-guest-menu__pill {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-base);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  color: var(--sx-ink-2);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

/* Inside a scroller the ring has to stay inside the pill, or the row would clip it. */
.sx-guest-menu__pill:focus-visible {
  outline-offset: -2px;
}

.sx-guest-menu__pill[aria-current="true"] {
  color: var(--sx-on-primary);
}

.sx-guest-menu__search-box {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
  height: 52px;
  padding: 0 var(--sx-space-1) 0 var(--page-gutter);
  color: var(--sx-muted);
  --sx-icon-size: 20px;
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

/* 16px: iOS Safari zooms the page into anything smaller. */
.sx-guest-menu__search-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: 0;
  font-size: 16px;
  color: var(--sx-ink);
  background: transparent;
  appearance: none;
}

.sx-guest-menu__search-input:focus,
.sx-guest-menu__search-input:focus-visible {
  outline: none;
}

.sx-guest-menu__search-input::-webkit-search-cancel-button {
  display: none;
}

/* ---------- Best sellers ---------- */
.sx-guest-menu__best {
  padding-top: var(--sx-space-5);
}

.sx-guest-menu__best-scroll {
  display: flex;
  gap: var(--sx-space-3);
  padding: 0 var(--page-gutter) var(--sx-space-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.sx-guest-menu__best-scroll::-webkit-scrollbar {
  display: none;
}

/* Without a photo it is a text card, because a letter or a placeholder only eats the screen. */
.sx-guest-menu__best-tile {
  display: grid;
  flex: none;
  align-content: start;
  gap: 2px;
  width: 148px;
  min-height: 84px;
  padding: var(--sx-space-3);
  border-radius: var(--sx-r-lg);
  text-align: left;
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  scroll-snap-align: start;
  scroll-margin-left: var(--page-gutter);
  transition: transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__best-tile:active {
  transform: scale(0.98);
}

.sx-guest-menu__best-star {
  margin-bottom: 2px;
  color: var(--sx-accent-ink);
  --sx-icon-size: 14px;
}

.sx-guest-menu__best-star > svg,
.sx-guest-menu__best-tag > svg {
  fill: currentColor;
}

.sx-guest-menu__best-name {
  font-size: var(--sx-fs-base);
  font-weight: 600;
  line-height: 1.25;
}

.sx-guest-menu__best-price {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- Printed menu ---------- */
.sx-guest-menu__section {
  padding-top: var(--sx-space-6);
}

.sx-guest-menu__section-title {
  margin-bottom: var(--sx-space-2);
  padding-inline: var(--page-gutter);
  font-size: var(--sx-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sx-guest-menu__best .sx-guest-menu__section-title {
  margin-bottom: var(--sx-space-3);
}

.sx-guest-menu__rows {
  display: grid;
}

.sx-guest-menu__row {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.sx-guest-menu__row + .sx-guest-menu__row::before {
  content: "";
  position: absolute;
  top: 0;
  right: var(--page-gutter);
  left: var(--page-gutter);
  height: 1px;
  background: var(--sx-line-soft);
}

.sx-guest-menu__row-main {
  display: flex;
  flex: 1;
  align-items: flex-start;
  gap: var(--sx-space-3);
  min-width: 0;
  min-height: 60px;
  padding: var(--sx-space-3) var(--sx-space-2) var(--sx-space-3) var(--page-gutter);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__row-main:focus-visible {
  outline-offset: -2px;
}

.sx-guest-menu__row-main:active {
  background: var(--sx-fill);
}

.sx-guest-menu__row-main:last-child {
  padding-right: var(--page-gutter);
}

.sx-guest-menu__thumb {
  flex: none;
  width: 72px;
  height: 72px;
  border-radius: var(--sx-r-lg);
  object-fit: cover;
  background: var(--sx-fill);
}

.sx-guest-menu__row-text {
  display: grid;
  flex: 1;
  gap: 3px;
  min-width: 0;
}

/* Dots from the name to the price, the way a printed card makes prices easy to read. */
.sx-guest-menu__row-line {
  display: flex;
  align-items: baseline;
  align-items: last baseline;
  gap: 6px;
}

.sx-guest-menu__row-name {
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.sx-guest-menu__row-dots {
  flex: 1 1 12px;
  min-width: 12px;
  border-bottom: 1.5px dotted var(--sx-line-strong);
}

.sx-guest-menu__row-price {
  flex: none;
  font-size: var(--sx-fs-base);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__row-description {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-muted);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.sx-guest-menu__row-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sx-space-1) var(--sx-space-2);
  margin-top: 2px;
}

.sx-guest-menu__best-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: var(--sx-fs-xs);
  font-weight: 600;
  color: var(--sx-accent-ink);
  --sx-icon-size: 12px;
}

.sx-guest-menu__options-tag {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-guest-menu__add {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin: 12px var(--page-gutter) 12px 0;
  border-radius: 50%;
  color: var(--guest-action);
  box-shadow: inset 0 0 0 1.5px var(--guest-action);
  --sx-icon-size: 18px;
  transition:
    transform var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-2) var(--sx-ease-out),
    color var(--sx-dur-2) var(--sx-ease-out);
}

/* A 36px circle with a 56px touch area around it. */
.sx-guest-menu__add::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
}

.sx-guest-menu__add:active {
  transform: scale(0.9);
}

.sx-guest-menu__add[data-count] {
  color: var(--sx-on-primary);
  background: var(--sx-primary);
}

/* Browse only: no add buttons, so the price lines up with the hairlines. */
.sx-guest-menu[data-availability]:not([data-availability="open"]) .sx-guest-menu__add {
  display: none;
}

.sx-guest-menu[data-availability]:not([data-availability="open"]) .sx-guest-menu__row-main {
  padding-right: var(--page-gutter);
}

.sx-guest-menu__add-count {
  font-size: var(--sx-fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

/* Sold out: greyed and not addable, but still readable. */
.sx-guest-menu__row[data-sold-out] .sx-guest-menu__row-name,
.sx-guest-menu__row[data-sold-out] .sx-guest-menu__row-price,
.sx-guest-menu__row[data-sold-out] .sx-guest-menu__row-description {
  color: var(--sx-muted);
}

.sx-guest-menu__row[data-sold-out] .sx-guest-menu__thumb {
  filter: grayscale(1);
  opacity: 0.55;
}

.sx-guest-menu__empty-text {
  padding: var(--sx-space-8) var(--page-gutter);
  text-align: center;
  color: var(--sx-muted);
}

.sx-guest-menu__dock-space {
  height: var(--dock-height);
}

/* ---------- Dock ---------- */
.sx-guest-menu__dock {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--page-gutter) calc(var(--sx-space-3) + env(safe-area-inset-bottom));
  pointer-events: none;
}

.sx-guest-menu__dock > * {
  pointer-events: auto;
}

.sx-guest-menu__bell {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sx-h-lg);
  height: var(--sx-h-lg);
  border-radius: var(--sx-r-pill);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-3);
  --sx-icon-size: 22px;
  transition: transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__bell:active {
  transform: scale(0.94);
}

.sx-guest-menu__bell[data-rung] > svg {
  transform-origin: 50% 20%;
  animation: sx-guest-menu-bell var(--sx-dur-5) var(--sx-ease-out);
}

.sx-guest-menu__dock-main {
  display: flex;
  flex: 1;
  align-items: center;
  gap: var(--sx-space-3);
  min-width: 0;
  height: var(--sx-h-lg);
  padding: 0 var(--sx-space-4);
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-md);
  font-weight: 600;
  color: var(--sx-on-primary);
  background: var(--sx-primary);
  box-shadow: var(--sx-shadow-3);
  --sx-icon-size: 20px;
  animation: sx-guest-menu-dock var(--sx-dur-3) var(--sx-ease-out);
  transition: transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__dock-main:active {
  transform: scale(0.98);
}

.sx-guest-menu__dock-main[data-tone="plain"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
}

.sx-guest-menu__dock-count {
  display: grid;
  place-items: center;
  flex: none;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-accent);
  background: var(--sx-accent);
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-guest-menu__dock-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-guest-menu__dock-total {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* ---------- Notice: a CSS animation shows and hides it, so there is no timer to clear ---------- */
.sx-guest-menu__notice {
  position: absolute;
  top: max(var(--sx-space-3), env(safe-area-inset-top));
  right: var(--page-gutter);
  left: var(--page-gutter);
  z-index: var(--sx-z-toast);
  display: flex;
  align-items: flex-start;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: none;
  animation: sx-guest-menu-notice 3.6s var(--sx-ease-out) both;
  --sx-icon-size: 20px;
}

.sx-guest-menu__notice > svg {
  margin-top: 1px;
}

.sx-guest-menu__notice[data-tone="success"] > svg {
  color: var(--sx-success-ink);
}

.sx-guest-menu__notice[data-tone="danger"] > svg {
  color: var(--sx-danger-ink);
}

/* ---------- Status: four stages ---------- */
.sx-guest-menu__status-head {
  display: grid;
  gap: 2px;
  padding: var(--sx-space-5) var(--page-gutter) var(--sx-space-3);
}

.sx-guest-menu__status-head h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.sx-guest-menu__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
}

.sx-guest-menu__rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: var(--sx-space-1) var(--page-gutter) var(--sx-space-4);
  padding: 0;
  list-style: none;
}

.sx-guest-menu__rail-stage {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
  color: var(--sx-muted);
}

/* The line between stages says they come in order. */
.sx-guest-menu__rail-stage + .sx-guest-menu__rail-stage::before {
  content: "";
  position: absolute;
  top: 19px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--sx-line);
}

.sx-guest-menu__rail-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sx-surface-3);
  --sx-icon-size: 18px;
  transition:
    background-color var(--sx-dur-3) var(--sx-ease-out),
    color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-guest-menu__rail-stage[data-active] {
  color: var(--sx-ink);
}

.sx-guest-menu__rail-stage[data-active] .sx-guest-menu__rail-dot {
  color: var(--sx-on-primary);
  background: var(--sx-primary);
}

.sx-guest-menu__rail-stage[data-active][data-stage="cooking"] .sx-guest-menu__rail-dot {
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

.sx-guest-menu__rail-stage[data-active][data-stage="ready"] .sx-guest-menu__rail-dot {
  color: var(--sx-on-success);
  background: var(--sx-success);
}

.sx-guest-menu__rail-label {
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-guest-menu__rail-count {
  font-size: var(--sx-fs-lg);
  font-weight: 700;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-guest-menu__waiting {
  display: flex;
  align-items: flex-start;
  gap: var(--sx-space-3);
  margin: 0 var(--page-gutter) var(--sx-space-3);
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  color: var(--sx-warning-ink);
  background: var(--sx-warning-soft);
  --sx-icon-size: 20px;
}

.sx-guest-menu__waiting > svg {
  margin-top: 1px;
}

.sx-guest-menu__waiting b {
  font-weight: 600;
}

.sx-guest-menu__waiting p {
  font-size: var(--sx-fs-sm);
}

.sx-guest-menu__rounds {
  display: grid;
  gap: var(--sx-space-3);
  padding: 0 var(--page-gutter);
}

.sx-guest-menu__slip {
  padding: var(--sx-space-3) var(--sx-space-4) var(--sx-space-1);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-guest-menu__slip[data-rejected] {
  background: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-guest-menu__slip-head {
  display: flex;
  align-items: baseline;
  gap: var(--sx-space-2);
  padding-bottom: var(--sx-space-2);
}

.sx-guest-menu__slip-head b {
  font-weight: 700;
}

.sx-guest-menu__slip-mine {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-guest-menu__slip-head time {
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__rejected {
  display: flex;
  align-items: flex-start;
  gap: var(--sx-space-2);
  padding-bottom: var(--sx-space-2);
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
  --sx-icon-size: 16px;
}

.sx-guest-menu__rejected > svg {
  margin-top: 2px;
}

.sx-guest-menu__slip-items {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-guest-menu__slip-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--sx-space-2);
  padding: var(--sx-space-2) 0;
  border-top: 1px dashed var(--sx-line);
}

.sx-guest-menu__slip-item[data-void] .sx-guest-menu__slip-name {
  color: var(--sx-muted);
  text-decoration: line-through;
}

.sx-guest-menu__slip-qty {
  font-weight: 600;
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__slip-name {
  display: grid;
  min-width: 0;
  font-weight: max(500, var(--sx-text-weight));
}

.sx-guest-menu__slip-name small {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  color: var(--sx-muted);
}

.sx-guest-menu__slip-name small:last-child {
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__stage-chip {
  height: 24px;
  padding: 0 9px;
  font-size: var(--sx-fs-xs);
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-guest-menu__stage-chip[data-stage="ready"] {
  color: var(--sx-on-success);
  background: var(--sx-success);
  box-shadow: none;
}

.sx-guest-menu__bill-box {
  display: grid;
  gap: var(--sx-space-3);
  margin: var(--sx-space-4) var(--page-gutter) 0;
}

.sx-guest-menu__bill-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-3);
  width: 100%;
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  text-align: left;
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  transition: transform var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__bill-row:active {
  transform: scale(0.99);
}

.sx-guest-menu__bill-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sx-space-2);
  font-weight: 600;
  --sx-icon-size: 18px;
}

.sx-guest-menu__bill-total {
  display: grid;
  justify-items: end;
}

.sx-guest-menu__bill-total small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-guest-menu__bill-total b {
  font-size: var(--sx-fs-xl);
  font-weight: 700;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__requested {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  --sx-icon-size: 18px;
}

/* ---------- Thank you ---------- */
.sx-guest-menu__thanks-body {
  display: grid;
  justify-items: center;
  gap: var(--sx-space-3);
  padding: var(--sx-space-8) var(--page-gutter) var(--sx-space-5);
  text-align: center;
}

.sx-guest-menu__thanks-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  color: var(--sx-on-success);
  background: var(--sx-success);
  --sx-icon-size: 36px;
  --sx-icon-stroke: 2.5;
}

.sx-guest-menu__view:not([hidden]) .sx-guest-menu__thanks-mark {
  animation: sx-pop-in var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-guest-menu__thanks-body h1 {
  font-size: var(--sx-fs-3xl);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.sx-guest-menu__thanks-body > p {
  max-width: 36ch;
  color: var(--sx-ink-2);
}

.sx-guest-menu__thanks-receipt {
  display: grid;
  gap: var(--sx-space-1);
  width: 100%;
  max-width: 340px;
  padding: var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-guest-menu__thanks-receipt span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guest-menu__thanks-receipt b {
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__thanks-actions {
  display: grid;
  gap: var(--sx-space-2);
  width: 100%;
  max-width: 340px;
}

.sx-guest-menu__thanks-note {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Sheet: item, cart and bill ---------- */
.sx-guest-menu__layer {
  position: absolute;
  inset: 0;
  z-index: var(--sx-z-panel);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--sx-dur-2);
}

.sx-guest-menu__layer[data-open] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sx-guest-menu__backdrop {
  position: absolute;
  inset: 0;
  background: var(--sx-overlay);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-in-out);
}

.sx-guest-menu__layer[data-open] .sx-guest-menu__backdrop {
  opacity: 1;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-guest-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 92%;
  border-radius: var(--sx-r-2xl) var(--sx-r-2xl) 0 0;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  transform: translateY(100%);
  transition: transform var(--sx-dur-2) var(--sx-ease-in-out);
}

.sx-guest-menu__layer[data-open] .sx-guest-menu__panel {
  transform: none;
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-guest-menu__panel:focus,
.sx-guest-menu__panel:focus-visible {
  outline: none;
}

.sx-guest-menu__sheet-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sx-space-3);
  min-height: 60px;
  padding: var(--sx-space-2) var(--sx-space-2) var(--sx-space-2) var(--page-gutter);
  border-bottom: 1px solid var(--sx-line-soft);
}

.sx-guest-menu__sheet-head h2 {
  flex: 1;
  min-width: 0;
  font-size: var(--sx-fs-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
}

.sx-guest-menu__close {
  color: var(--sx-muted);
}

.sx-guest-menu__sheet-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-guest-menu__sheet-foot {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--sx-space-3);
  padding: var(--sx-space-3) var(--page-gutter) calc(var(--sx-space-3) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--sx-line-soft);
  background: var(--sx-surface);
}

/* The item */
.sx-guest-menu__hero {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--sx-fill);
}

.sx-guest-menu__item-body {
  display: grid;
  gap: var(--sx-space-5);
  padding: var(--sx-space-4) var(--page-gutter) var(--sx-space-5);
}

.sx-guest-menu__item-head {
  display: grid;
  gap: var(--sx-space-1);
}

.sx-guest-menu__item-price {
  font-size: var(--sx-fs-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__item-description {
  color: var(--sx-ink-2);
}

.sx-guest-menu__sold-out-text {
  font-weight: 600;
  color: var(--sx-danger-ink);
}

.sx-guest-menu__contents h3,
.sx-guest-menu__group-name {
  font-size: var(--sx-fs-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sx-guest-menu__contents ul {
  margin: var(--sx-space-1) 0 0;
  padding: 0;
  list-style: none;
  color: var(--sx-ink-2);
}

.sx-guest-menu__group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.sx-guest-menu__group[data-shaking] {
  animation: sx-shake var(--sx-dur-4) var(--sx-ease-out);
}

.sx-guest-menu__group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-2);
  width: 100%;
  padding: 0 0 var(--sx-space-2);
}

.sx-guest-menu__group-head .sx-chip {
  flex: none;
  height: 24px;
}

.sx-guest-menu__group-error {
  padding-bottom: var(--sx-space-2);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  color: var(--sx-danger-ink);
}

.sx-guest-menu__option {
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  min-height: 48px;
  padding: var(--sx-space-1) 0;
  border-top: 1px solid var(--sx-line-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.sx-guest-menu__option[data-off] {
  color: var(--sx-muted);
  cursor: not-allowed;
}

.sx-guest-menu__option-mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-on-primary);
  box-shadow: inset 0 0 0 1.5px var(--sx-line-strong);
  --sx-icon-size: 14px;
  --sx-icon-stroke: 3;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__option-mark > svg {
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-guest-menu__option-mark[data-round] {
  border-radius: 50%;
}

.sx-guest-menu__option[data-checked] .sx-guest-menu__option-mark {
  background: var(--sx-primary);
  box-shadow: none;
}

.sx-guest-menu__option[data-checked] .sx-guest-menu__option-mark > svg {
  opacity: 1;
  transform: none;
}

.sx-guest-menu__option:has(input:focus-visible) .sx-guest-menu__option-mark {
  box-shadow: var(--sx-focus-ring);
}

.sx-guest-menu__option-name {
  flex: 1;
  min-width: 0;
}

.sx-guest-menu__option-price {
  flex: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__option-steps,
.sx-guest-menu__stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill);
}

.sx-guest-menu__option-steps {
  --sx-icon-size: 16px;
}

.sx-guest-menu__stepper {
  --sx-icon-size: 18px;
}

.sx-guest-menu__option-steps button,
.sx-guest-menu__stepper button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-guest-menu__option-steps button:active:not(:disabled),
.sx-guest-menu__stepper button:active:not(:disabled) {
  background: var(--sx-fill-strong);
}

.sx-guest-menu__option-steps button:disabled,
.sx-guest-menu__stepper button:disabled {
  color: var(--sx-faint);
}

.sx-guest-menu__option-steps output,
.sx-guest-menu__stepper output {
  min-width: 26px;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 16px: iOS Safari zooms the page into anything smaller. */
.sx-guest-menu__input {
  height: var(--sx-h-md);
  font-size: 16px;
}

.sx-guest-menu__add-action,
.sx-guest-menu__send {
  flex: 1;
  min-width: 0;
  --_h: 50px;
  --_fs: var(--sx-fs-md);
}

.sx-guest-menu__add-action {
  justify-content: space-between;
}

.sx-guest-menu__action-price {
  font-variant-numeric: tabular-nums;
}

/* The cart */
.sx-guest-menu__cart-lines {
  display: grid;
  padding: 0 var(--page-gutter);
}

.sx-guest-menu__cart-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sx-space-1) var(--sx-space-3);
  padding: var(--sx-space-3) 0;
  border-bottom: 1px solid var(--sx-line-soft);
}

.sx-guest-menu__cart-line[data-problem] .sx-guest-menu__cart-name {
  color: var(--sx-danger-ink);
}

.sx-guest-menu__cart-name {
  font-weight: 600;
}

.sx-guest-menu__cart-detail {
  grid-column: 1;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guest-menu__cart-problem {
  grid-column: 1 / -1;
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
}

.sx-guest-menu__cart-price {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__cart-controls {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: flex-end;
}

.sx-guest-menu__cart-summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sx-space-3);
  padding: var(--sx-space-3) var(--page-gutter) 0;
  font-weight: 700;
}

.sx-guest-menu__cart-summary b {
  font-size: var(--sx-fs-lg);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__cart-estimate {
  padding: var(--sx-space-1) var(--page-gutter) 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guest-menu__guest {
  display: grid;
  gap: var(--sx-space-3);
  margin: var(--sx-space-4) var(--page-gutter) var(--sx-space-5);
  padding: var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  background: var(--sx-fill);
}

.sx-guest-menu__consent {
  align-items: flex-start;
  gap: var(--sx-space-2);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-guest-menu__consent .sx-check__box {
  width: 20px;
  height: 20px;
}

.sx-guest-menu__form-error {
  display: flex;
  align-items: flex-start;
  gap: var(--sx-space-2);
  margin: var(--sx-space-3) var(--page-gutter) 0;
  padding: var(--sx-space-3);
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
  --sx-icon-size: 16px;
}

/* The bill: a slip of paper with a torn bottom edge. The mask uses a marker colour, not a visible one. */
.sx-guest-menu__bill {
  padding: var(--sx-space-4) var(--page-gutter) var(--sx-space-5);
}

.sx-guest-menu__bill-hint {
  margin-bottom: var(--sx-space-3);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guest-menu__paper {
  --tooth: 12px;
  padding: var(--sx-space-4) var(--sx-space-4) calc(var(--sx-space-5) + var(--tooth));
  background: var(--sx-surface-3);
  -webkit-mask:
    conic-gradient(from -45deg at 50% 100%, black 90deg, transparent 0) 50% 100% / var(--tooth) calc(var(--tooth) / 2) repeat-x,
    linear-gradient(black, black) 0 0 / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
  mask:
    conic-gradient(from -45deg at 50% 100%, black 90deg, transparent 0) 50% 100% / var(--tooth) calc(var(--tooth) / 2) repeat-x,
    linear-gradient(black, black) 0 0 / 100% calc(100% - var(--tooth) / 2 + 1px) no-repeat;
}

.sx-guest-menu__receipt-head {
  display: grid;
  justify-items: center;
  gap: 1px;
  margin-bottom: var(--sx-space-3);
  padding-bottom: var(--sx-space-3);
  text-align: center;
  border-bottom: 1px dashed var(--sx-line-strong);
}

.sx-guest-menu__receipt-head b {
  font-size: var(--sx-fs-md);
  font-weight: 700;
}

.sx-guest-menu__receipt-head span {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__bill-round + .sx-guest-menu__bill-round {
  margin-top: var(--sx-space-3);
  padding-top: var(--sx-space-3);
  border-top: 1px dashed var(--sx-line-strong);
}

.sx-guest-menu__bill-round-title {
  margin-bottom: var(--sx-space-1);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-guest-menu__bill-line {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  gap: var(--sx-space-2);
  padding: 3px 0;
}

.sx-guest-menu__bill-line[data-off] {
  color: var(--sx-muted);
}

.sx-guest-menu__bill-line small {
  display: block;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-guest-menu__bill-line > :first-child,
.sx-guest-menu__bill-line > :last-child {
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__bill-pending {
  margin-top: 2px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-warning-ink);
}

.sx-guest-menu__totals {
  display: grid;
  gap: 4px;
  margin-top: var(--sx-space-3);
  padding-top: var(--sx-space-3);
  border-top: 1px dashed var(--sx-line-strong);
}

.sx-guest-menu__totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sx-space-3);
  font-variant-numeric: tabular-nums;
}

.sx-guest-menu__totals dt {
  color: var(--sx-ink-2);
}

.sx-guest-menu__totals dd {
  margin: 0;
}

.sx-guest-menu__totals .sx-guest-menu__grand-total {
  margin-top: var(--sx-space-1);
  padding-top: var(--sx-space-2);
  border-top: 1px solid var(--sx-line-strong);
  font-size: var(--sx-fs-lg);
  font-weight: 700;
}

.sx-guest-menu__grand-total dt {
  color: var(--sx-ink);
}

/* ---------- Loading and full-page messages ---------- */
.sx-guest-menu__message {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--sx-space-3);
  padding: var(--sx-space-8) calc(var(--page-gutter) + 8px);
  text-align: center;
  background: var(--sx-surface);
}

.sx-guest-menu__message-icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 28px;
}

.sx-guest-menu__message h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.sx-guest-menu__message p {
  max-width: 34ch;
  color: var(--sx-ink-2);
}

.sx-guest-menu__skeleton {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  align-content: start;
  gap: var(--sx-space-5);
  padding: 0 var(--page-gutter);
  background: var(--sx-surface);
}

.sx-guest-menu__skeleton-bar {
  height: 62px;
  margin-inline: calc(var(--page-gutter) * -1);
  border-radius: 0;
}

.sx-guest-menu__skeleton-line {
  height: 16px;
}

.sx-guest-menu__skeleton-line:nth-child(odd) {
  width: 74%;
}

.sx-guest-menu__skeleton-line:nth-child(even) {
  width: 48%;
}

/* ---------- Hover, only where a pointer can hover ---------- */
@media (hover: hover) {
  .sx-guest-menu__row-main:hover,
  .sx-guest-menu__search-button:hover,
  .sx-guest-menu__search-close:hover,
  .sx-guest-menu__close:hover,
  .sx-guest-menu__option-steps button:hover:not(:disabled),
  .sx-guest-menu__stepper button:hover:not(:disabled) {
    background: var(--sx-fill);
  }

  .sx-guest-menu__pill:not([aria-current="true"]):hover {
    color: var(--sx-ink);
  }

  .sx-guest-menu__add:hover:not([data-count]) {
    background: var(--sx-fill);
  }

  .sx-guest-menu__bill-row:hover,
  .sx-guest-menu__best-tile:hover {
    background: color-mix(in srgb, var(--sx-accent) 14%, transparent);
  }

  .sx-guest-menu__option:not([data-off]):hover .sx-guest-menu__option-mark {
    box-shadow: inset 0 0 0 1.5px var(--sx-faint);
  }

  .sx-guest-menu__option[data-checked]:not([data-off]):hover .sx-guest-menu__option-mark {
    box-shadow: none;
  }
}

/* ---------- Keyframes ---------- */
@keyframes sx-guest-menu-tent {
  from { opacity: 0; transform: rotateX(-68deg); }
  35% { opacity: 1; }
}

@keyframes sx-guest-menu-bell {
  20% { transform: rotate(16deg); }
  45% { transform: rotate(-12deg); }
  70% { transform: rotate(6deg); }
}

@keyframes sx-guest-menu-dock {
  from { opacity: 0; transform: translateY(14px); }
}

@keyframes sx-guest-menu-notice {
  0% { opacity: 0; transform: translateY(-10px); }
  7%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translateY(-6px); visibility: hidden; }
}

@keyframes sx-guest-menu-notice-still {
  0%, 100% { opacity: 0; }
  7%, 92% { opacity: 1; }
  100% { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-guest-menu__tent,
  .sx-guest-menu__tent-shadow,
  .sx-guest-menu__add-count,
  .sx-guest-menu__search-box,
  .sx-guest-menu__dock-main,
  .sx-guest-menu__dock-count,
  .sx-guest-menu__bell[data-rung] > svg,
  .sx-guest-menu__rail-count,
  .sx-guest-menu__stage-chip,
  .sx-guest-menu__view:not([hidden]) .sx-guest-menu__thanks-mark,
  .sx-guest-menu__group[data-shaking],
  .sx-guest-menu__consent {
    animation: none;
  }

  .sx-guest-menu__notice {
    animation-name: sx-guest-menu-notice-still;
  }

  .sx-guest-menu__marker {
    transition: none;
  }

  /* The sheet fades instead of sliding. */
  .sx-guest-menu__panel,
  .sx-guest-menu__layer[data-open] .sx-guest-menu__panel {
    transform: none;
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-guest-menu__layer[data-open] .sx-guest-menu__panel {
    opacity: 1;
  }
}


/* ---- Docs Reader (docs-reader) ---- */
/* ==========================================================================
   Docs Reader — three-column documentation (template, full screen)
   The root is a size container and nothing scrolls the window; .sx-docs-reader__main is the scroll
   container, and position tracking measures headings against it.
     > 1120px   contents, reading column, on-this-page list with a sliding marker
     <= 1120px  the list folds into the article head (details)
     <= 860px   the contents become a drawer opened from the top bar
     <= 560px   tighter padding, formulas and the pager stack
   State: root data-nav="open"; group data-open, data-active; link aria-current="page";
          on-this-page link aria-current="location"; heading data-flash;
          search data-state="open | closed", data-ready (glides on after the first measure);
          option aria-selected. The marker reads --dr-mark-y and --dr-mark-h, the tab pill
          --dr-tab-x, --dr-tab-y, --dr-tab-w, the result list --dr-list-h; all are set by script.
   Article blocks live here too (.__callout, .__code, .__formula, .__table-wrap), so the page needs
   no other item's stylesheet.
   ========================================================================== */

.sx-docs-reader {
  --dr-side: 272px;
  --dr-toc: 216px;
  --dr-prose: calc(var(--sx-fs-lg) + 1px);
  --dr-measure: 34em;
  --dr-pad: 40px;
  container: docs-reader / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  color: var(--sx-ink);
  background: var(--sx-panel);
  isolation: isolate;
}

.sx-docs-reader__skip {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: calc(var(--sx-z-modal) + 1);
  padding: 8px 14px;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  text-decoration: none;
  transform: translateY(-200%);
}

.sx-docs-reader__skip:focus-visible {
  transform: none;
}

/* ---------- Top bar ---------- */
.sx-docs-reader__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--sx-space-3);
  height: 56px;
  padding-inline: var(--sx-space-5);
  background: var(--sx-panel);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-docs-reader__menu {
  display: none;
}

.sx-docs-reader__brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 10px;
  width: calc(var(--dr-side) - var(--sx-space-5) - var(--sx-space-3));
  min-width: 0;
  border-radius: var(--sx-r-sm);
  color: inherit;
  font-size: var(--sx-fs-lg);
  letter-spacing: var(--sx-heading-tracking);
  text-decoration: none;
}

.sx-docs-reader__brand > b {
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--sx-r-md);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: 14px;
}

.sx-docs-reader__brand-label {
  padding-left: 10px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  letter-spacing: 0;
  box-shadow: inset 1px 0 0 var(--sx-line-strong);
}

.sx-docs-reader__top-search {
  flex: 1;
  min-width: 0;
}

.sx-docs-reader__trigger {
  display: flex;
  align-items: center;
  gap: var(--sx-space-2);
  width: 100%;
  max-width: 340px;
  height: var(--sx-h-md);
  padding: 0 8px 0 12px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  font-size: var(--sx-fs-md);
  text-align: left;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-docs-reader__trigger:hover {
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-docs-reader__trigger:active {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-docs-reader__trigger > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-docs-reader__actions {
  display: flex;
  align-items: center;
  flex: none;
  gap: var(--sx-space-2);
}

.sx-docs-reader__version {
  font-variant-numeric: tabular-nums;
}

.sx-docs-reader__back {
  text-decoration: none;
}

/* ---------- Frame ---------- */
.sx-docs-reader__frame {
  display: grid;
  grid-template-columns: var(--dr-side) minmax(0, 1fr);
  min-height: 0;
}

.sx-docs-reader__scrim,
.sx-docs-reader__side-head {
  display: none;
}

/* ---------- Contents ---------- */
.sx-docs-reader__side {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sx-space-5) var(--sx-space-3) var(--sx-space-8) var(--sx-space-4);
  box-shadow: inset -1px 0 0 var(--sx-line-soft);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__nav {
  display: grid;
  gap: 2px;
}

.sx-docs-reader__group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0 8px 0 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  text-align: left;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 16px;
}

.sx-docs-reader__group-head > .sx-icon:first-child {
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__group-head:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-docs-reader__group-head:focus-visible {
  outline-offset: -2px;
}

.sx-docs-reader__group[data-active] > .sx-docs-reader__group-head {
  color: var(--sx-ink);
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__group[data-active] > .sx-docs-reader__group-head > .sx-icon:first-child {
  color: var(--sx-accent-ink);
}

.sx-docs-reader__group-title {
  flex: 1;
  min-width: 0;
}

/* The number of pages in a section says what a fold is hiding, so it only shows while folded. */
.sx-docs-reader__group-count {
  color: var(--sx-faint);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__group[data-open] .sx-docs-reader__group-count {
  opacity: 0;
}

.sx-docs-reader__chevron {
  --sx-icon-size: 14px;
  color: var(--sx-faint);
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__group[data-open] .sx-docs-reader__chevron {
  transform: rotate(90deg);
}

.sx-docs-reader__fold {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-docs-reader__group[data-open] .sx-docs-reader__fold {
  grid-template-rows: 1fr;
  visibility: visible;
  transition-delay: 0s;
}

.sx-docs-reader__fold > ul {
  display: grid;
  gap: 1px;
  min-height: 0;
  margin: 0 0 0 calc(10px + 7px);
  padding: 0;
  overflow: hidden;
  list-style: none;
  box-shadow: inset 1px 0 0 var(--sx-line);
}

.sx-docs-reader__fold li:last-child {
  padding-bottom: 6px;
}

.sx-docs-reader__link {
  display: block;
  margin-left: 8px;
  padding: 6px 10px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  font-size: var(--sx-fs-md);
  line-height: 1.35;
  text-decoration: none;
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__link:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-docs-reader__link:focus-visible {
  outline-offset: -2px;
}

.sx-docs-reader__link[aria-current="page"] {
  color: var(--sx-accent-ink);
  font-weight: max(500, var(--sx-text-weight));
  background: var(--sx-accent-soft);
}

/* ---------- Reading column ---------- */
.sx-docs-reader__main {
  container: docs-reader-main / size;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__main:focus,
.sx-docs-reader__prose :is(h2, h3, h4):focus {
  outline: none;
}

.sx-docs-reader__page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--dr-toc);
  gap: var(--sx-space-8);
  max-width: 1180px;
  margin-inline: auto;
  padding: var(--dr-pad) var(--sx-space-6) 96px var(--dr-pad);
}

.sx-docs-reader__column {
  min-width: 0;
}

.sx-docs-reader__article {
  max-width: var(--dr-measure);
  margin-inline: auto;
  font-size: var(--dr-prose);
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out) backwards;
}

.sx-docs-reader__head {
  margin-bottom: var(--sx-space-8);
}

.sx-docs-reader__crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 4px;
  margin: 0 0 var(--sx-space-3);
  padding: 0;
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  list-style: none;
}

.sx-docs-reader__crumbs li {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  --sx-icon-size: 12px;
}

.sx-docs-reader__crumbs a {
  border-radius: var(--sx-r-xs);
  color: inherit;
  text-decoration: none;
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__crumbs a:hover {
  color: var(--sx-ink);
}

.sx-docs-reader__title {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.18;
}

.sx-docs-reader__lead {
  margin-top: var(--sx-space-3);
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-xl);
  line-height: 1.55;
}

.sx-docs-reader__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px var(--sx-space-4);
  margin-top: var(--sx-space-4);
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
}

.sx-docs-reader__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  --sx-icon-size: 13px;
}

/* ---------- Article: long reading, generous rhythm, more air above a heading than below ---------- */
.sx-docs-reader__prose {
  color: var(--sx-ink-2);
  font-weight: var(--sx-text-weight);
  line-height: 1.72;
  overflow-wrap: break-word;
}

.sx-docs-reader__prose > * {
  margin-block: 0;
}

.sx-docs-reader__prose > * + * {
  margin-top: 1.15em;
}

.sx-docs-reader__prose p {
  text-wrap: pretty;
}

.sx-docs-reader__prose strong {
  color: var(--sx-ink);
  font-weight: var(--sx-strong-weight);
}

.sx-docs-reader__prose a:not([class]) {
  border-radius: var(--sx-r-xs);
  color: var(--sx-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--sx-accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__prose a:not([class]):hover {
  text-decoration-color: currentColor;
}

.sx-docs-reader__prose :is(h2, h3, h4) {
  position: relative;
  color: var(--sx-ink);
  font-weight: var(--sx-heading-weight);
  letter-spacing: var(--sx-heading-tracking);
  text-wrap: balance;
}

.sx-docs-reader__prose h2 {
  font-size: var(--sx-fs-2xl);
  line-height: 1.25;
}

.sx-docs-reader__prose h3 {
  font-size: var(--sx-fs-xl);
  line-height: 1.35;
}

.sx-docs-reader__prose h4 {
  font-size: var(--sx-fs-lg);
  line-height: 1.4;
}

.sx-docs-reader__prose > * + h2 {
  margin-top: 2.5em;
}

.sx-docs-reader__prose > * + h3 {
  margin-top: 2.1em;
}

.sx-docs-reader__prose > * + h4 {
  margin-top: 1.9em;
}

.sx-docs-reader__prose :is(h2, h3, h4) + * {
  margin-top: 0.7em;
}

.sx-docs-reader__prose :is(h2, h3, h4)[data-flash] {
  animation: sx-docs-reader-flash 1.4s var(--sx-ease-out);
}

.sx-docs-reader__anchor {
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.25em;
  border-radius: var(--sx-r-xs);
  color: var(--sx-faint);
  vertical-align: -0.12em;
  text-decoration: none;
  opacity: 0;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 0.8em;
}

.sx-docs-reader__prose :is(h2, h3, h4):hover .sx-docs-reader__anchor,
.sx-docs-reader__anchor:focus-visible {
  opacity: 1;
}

.sx-docs-reader__anchor:hover {
  color: var(--sx-accent-ink);
}

.sx-docs-reader__prose :is(ul, ol) {
  padding-left: 0;
  list-style: none;
}

.sx-docs-reader__prose li + li {
  margin-top: 0.5em;
}

.sx-docs-reader__prose li > :is(ul, ol) {
  margin-top: 0.5em;
}

.sx-docs-reader__prose ul > li {
  position: relative;
  padding-left: 1.25em;
}

.sx-docs-reader__prose ul > li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0.3em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--sx-faint);
}

/* Numbered steps: a badge on a thin rail, so a procedure reads as one thing. */
.sx-docs-reader__prose ol {
  counter-reset: sx-docs-step;
}

.sx-docs-reader__prose ol > li {
  position: relative;
  min-height: 1.72em;
  padding-left: 2.25em;
  counter-increment: sx-docs-step;
}

.sx-docs-reader__prose ol > li + li {
  margin-top: 0.85em;
}

.sx-docs-reader__prose ol > li::before {
  content: counter(sx-docs-step);
  position: absolute;
  top: 0.14em;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
  font-size: 0.82em;
  font-weight: var(--sx-heading-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sx-docs-reader__prose ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.62em;
  bottom: -0.7em;
  left: calc(0.615em - 0.5px);
  width: 1px;
  background: var(--sx-line);
}

.sx-docs-reader__prose code {
  padding: 0.12em 0.36em;
  border-radius: var(--sx-r-xs);
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
  font-family: var(--sx-font-mono);
  font-size: 0.86em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.sx-docs-reader__prose hr {
  height: 1px;
  border: 0;
  background: var(--sx-line);
}

.sx-docs-reader__prose blockquote {
  padding-left: var(--sx-space-4);
  color: var(--sx-ink);
  box-shadow: inset 1px 0 0 var(--sx-line-strong);
}

/* Blocks stand a little apart from the paragraphs around them. */
.sx-docs-reader__prose > :is(.sx-docs-reader__code, .sx-docs-reader__table-wrap, .sx-docs-reader__callout, .sx-docs-reader__formula) {
  margin-block: 1.5em;
}

.sx-docs-reader__prose > :is(h2, h3, h4) + :is(.sx-docs-reader__code, .sx-docs-reader__table-wrap, .sx-docs-reader__callout, .sx-docs-reader__formula) {
  margin-top: 0.9em;
}

.sx-docs-reader__prose > :last-child {
  margin-bottom: 0;
}

/* ---------- Code ---------- */
.sx-docs-reader__code {
  overflow: hidden;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
}

.sx-docs-reader__code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sx-space-2);
  min-height: 34px;
  padding: 0 6px 0 var(--sx-space-4);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-docs-reader__copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-muted);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-docs-reader__copy:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-docs-reader__copy[data-state="copied"] {
  color: var(--sx-success-ink);
}

.sx-docs-reader__copy[data-state="failed"] {
  color: var(--sx-danger-ink);
}

.sx-docs-reader__code pre {
  padding: var(--sx-space-3) var(--sx-space-4);
  overflow-x: auto;
  color: var(--sx-ink);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-base);
  line-height: 1.65;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__code pre:focus-visible {
  outline-offset: -2px;
}

.sx-docs-reader__code code {
  padding: 0;
  background: none;
  font-size: inherit;
}

.sx-docs-reader__code [data-token="comment"] {
  color: var(--sx-muted);
}

.sx-docs-reader__code [data-token="key"] {
  color: var(--sx-accent-ink);
}

.sx-docs-reader__code [data-token="string"] {
  color: var(--sx-success-ink);
}

.sx-docs-reader__code [data-token="number"] {
  color: var(--sx-mark-ink);
}

.sx-docs-reader__code [data-token="keyword"] {
  color: var(--sx-info-ink);
}

/* ---------- Tables ---------- */
.sx-docs-reader__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--sx-line);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__table-wrap:focus-visible {
  outline-offset: 2px;
}

.sx-docs-reader__table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--sx-fs-md);
  line-height: 1.5;
}

.sx-docs-reader__table-wrap th {
  padding: 9px var(--sx-space-3);
  color: var(--sx-ink);
  background: var(--sx-surface-2);
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-heading-weight);
  text-align: left;
  vertical-align: bottom;
  white-space: nowrap;
}

.sx-docs-reader__table-wrap td {
  padding: 9px var(--sx-space-3);
  border-top: 1px solid var(--sx-line-soft);
  color: var(--sx-ink-2);
  vertical-align: top;
}

.sx-docs-reader__table-wrap :is(th, td):first-child {
  padding-left: var(--sx-space-4);
}

.sx-docs-reader__table-wrap :is(th, td):last-child {
  padding-right: var(--sx-space-4);
}

.sx-docs-reader__table-wrap [data-align="right"] {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.sx-docs-reader__table-wrap code {
  padding: 0.1em 0.3em;
}

/* ---------- Callouts ---------- */
.sx-docs-reader__callout {
  --dr-tone-soft: var(--sx-info-soft);
  --dr-tone-line: var(--sx-info-line);
  --dr-tone-ink: var(--sx-info-ink);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  padding: var(--sx-space-3) var(--sx-space-4) var(--sx-space-3) 14px;
  border-radius: var(--sx-r-lg);
  background: var(--dr-tone-soft);
  box-shadow: inset 0 0 0 1px var(--dr-tone-line);
}

.sx-docs-reader__callout[data-kind="tip"] {
  --dr-tone-soft: var(--sx-success-soft);
  --dr-tone-line: var(--sx-success-line);
  --dr-tone-ink: var(--sx-success-ink);
}

.sx-docs-reader__callout[data-kind="warning"] {
  --dr-tone-soft: var(--sx-warning-soft);
  --dr-tone-line: var(--sx-warning-line);
  --dr-tone-ink: var(--sx-warning-ink);
}

.sx-docs-reader__callout[data-kind="danger"] {
  --dr-tone-soft: var(--sx-danger-soft);
  --dr-tone-line: var(--sx-danger-line);
  --dr-tone-ink: var(--sx-danger-ink);
}

.sx-docs-reader__callout-icon {
  padding-top: 3px;
  color: var(--dr-tone-ink);
  --sx-icon-size: 16px;
}

.sx-docs-reader__callout-title {
  color: var(--sx-ink);
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
  line-height: 22px;
}

.sx-docs-reader__callout-text {
  margin-top: 2px;
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-md);
  line-height: 1.6;
}

.sx-docs-reader__callout-text > * {
  margin: 0;
}

.sx-docs-reader__callout-text > * + * {
  margin-top: 0.5em;
}

/* ---------- Formulas ---------- */
.sx-docs-reader__formula {
  display: grid;
  gap: 6px;
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-base);
  line-height: 1.6;
}

.sx-docs-reader__formula-row {
  display: grid;
  grid-template-columns: minmax(0, 11em) auto minmax(0, 1fr);
  gap: var(--sx-space-2);
}

.sx-docs-reader__formula-left {
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__formula-equals {
  color: var(--sx-accent-ink);
}

.sx-docs-reader__formula-note {
  color: var(--sx-muted);
}

/* ---------- Other article states ---------- */
.sx-docs-reader__loading {
  display: grid;
  gap: var(--sx-space-3);
}

.sx-docs-reader__loading > .sx-skeleton {
  display: block;
  height: 14px;
}

.sx-docs-reader__loading > .sx-skeleton:nth-child(2) {
  width: 86%;
}

.sx-docs-reader__loading > .sx-skeleton:nth-child(3) {
  width: 92%;
}

.sx-docs-reader__loading > .sx-skeleton:nth-child(4) {
  width: 58%;
}

.sx-docs-reader__state {
  display: grid;
  justify-items: start;
  gap: var(--sx-space-2);
  padding: var(--sx-space-5);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-docs-reader__state-title {
  color: var(--sx-ink);
  font-size: var(--sx-fs-lg);
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__state-hint {
  color: var(--sx-muted);
  font-size: var(--sx-fs-md);
}

/* ---------- Previous and next ---------- */
.sx-docs-reader__pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sx-space-3);
  margin-top: 56px;
  padding-top: var(--sx-space-6);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-docs-reader__pager-link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: var(--sx-space-3) var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  color: inherit;
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  text-decoration: none;
  transition:
    box-shadow var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__pager-link:hover {
  background: var(--sx-raised-hover);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-docs-reader__pager-link small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  --sx-icon-size: 13px;
}

.sx-docs-reader__pager-link b {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__pager-link[data-dir="next"] {
  grid-column: 2;
  text-align: right;
}

.sx-docs-reader__pager-link[data-dir="next"] small {
  justify-content: flex-end;
}

/* ---------- On this page ---------- */
.sx-docs-reader__toc {
  position: sticky;
  top: var(--dr-pad);
  align-self: start;
  max-height: calc(100cqh - var(--dr-pad) * 2);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__toc-title {
  margin-bottom: var(--sx-space-2);
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-heading-weight);
}

.sx-docs-reader__toc-list {
  position: relative;
  box-shadow: inset 1px 0 0 var(--sx-line);
}

.sx-docs-reader__toc-list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-docs-reader__toc-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: var(--dr-mark-h, 0px);
  border-radius: 1px;
  background: var(--sx-accent);
  transform: translateY(var(--dr-mark-y, 0px));
}

.sx-docs-reader__toc-list[data-ready] .sx-docs-reader__toc-marker {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    height var(--sx-dur-3) var(--sx-ease-out);
}

.sx-docs-reader__toc-link {
  display: block;
  padding: 4px 8px 4px 12px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__toc-link[data-level="3"] {
  padding-left: 24px;
}

.sx-docs-reader__toc-link:hover {
  color: var(--sx-ink);
}

.sx-docs-reader__toc-link:focus-visible {
  outline-offset: -2px;
}

.sx-docs-reader__toc-link[aria-current="location"] {
  color: var(--sx-ink);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-docs-reader__toc-inline {
  display: none;
  margin-bottom: var(--sx-space-6);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-docs-reader__toc-inline summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 var(--sx-space-4);
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  list-style: none;
  cursor: pointer;
  --sx-icon-size: 16px;
}

.sx-docs-reader__toc-inline summary::-webkit-details-marker {
  display: none;
}

.sx-docs-reader__toc-inline summary .sx-icon {
  transition: transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__toc-inline[open] summary .sx-icon {
  transform: rotate(180deg);
}

.sx-docs-reader__toc-inline ul {
  margin: 0;
  padding: 0 var(--sx-space-4) var(--sx-space-3);
  list-style: none;
}

.sx-docs-reader__toc-inline-link {
  display: flex;
  align-items: center;
  min-height: 36px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-md);
  text-decoration: none;
}

.sx-docs-reader__toc-inline-link[data-level="3"] {
  padding-left: var(--sx-space-4);
}

.sx-docs-reader__toc-inline-link[aria-current="location"] {
  color: var(--sx-ink);
  font-weight: max(500, var(--sx-text-weight));
}

/* ---------- Search ---------- */
.sx-docs-reader__search {
  position: absolute;
  inset: 0;
  z-index: var(--sx-z-modal);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--sx-dur-2);
}

.sx-docs-reader__search[data-state="open"] {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.sx-docs-reader__search-scrim {
  position: absolute;
  inset: 0;
  background: var(--sx-overlay);
  opacity: 0;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__search[data-state="open"] .sx-docs-reader__search-scrim {
  opacity: 1;
  transition-duration: var(--sx-dur-3);
}

.sx-docs-reader__search-panel {
  position: absolute;
  top: 72px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 660px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 120px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  transform-origin: 50% 0;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-in);
}

.sx-docs-reader__search[data-state="open"] .sx-docs-reader__search-panel {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-docs-reader__search-row {
  display: flex;
  align-items: center;
  flex: none;
  gap: 10px;
  height: 52px;
  padding: 0 12px 0 16px;
}

.sx-docs-reader__search-row > .sx-icon {
  --sx-icon-size: 17px;
  color: var(--sx-muted);
}

.sx-docs-reader__search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: none;
  color: var(--sx-ink);
  background: transparent;
  font-size: var(--sx-fs-lg);
}

.sx-docs-reader__search-close {
  display: inline-grid;
  place-items: center;
  border-radius: var(--sx-r-xs);
}

.sx-docs-reader__search-close > .sx-kbd {
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__search-close:hover > .sx-kbd {
  color: var(--sx-ink);
}

.sx-docs-reader__tabs {
  --dr-tab-h: 26px;
  position: relative;
  display: flex;
  flex: none;
  gap: 2px;
  margin-top: -3px;
  padding: 3px 10px 9px;
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  isolation: isolate;
  scrollbar-width: none;
}

.sx-docs-reader__tab {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: var(--dr-tab-h);
  padding: 0 10px;
  border-radius: var(--sx-r-pill);
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__tab:hover {
  color: var(--sx-ink-2);
}

.sx-docs-reader__tab[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-docs-reader__tab:focus-visible {
  outline-offset: -1px;
}

.sx-docs-reader__tab-count {
  color: var(--sx-faint);
  font-size: var(--sx-fs-2xs);
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__tab[aria-selected="true"] .sx-docs-reader__tab-count {
  color: var(--sx-muted);
}

.sx-docs-reader__tab-count:empty {
  display: none;
}

.sx-docs-reader__tabs-thumb {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: var(--dr-tab-w, 0px);
  height: var(--dr-tab-h);
  border-radius: var(--sx-r-pill);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translate(var(--dr-tab-x, 0px), var(--dr-tab-y, 0px));
  pointer-events: none;
}

.sx-docs-reader__search[data-ready] .sx-docs-reader__tabs-thumb {
  transition:
    transform var(--sx-dur-3) var(--sx-ease-out),
    width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-docs-reader__list {
  position: relative;
  flex: 0 1 var(--dr-list-h, auto);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--sx-line-strong) transparent;
}

.sx-docs-reader__search[data-ready] .sx-docs-reader__list {
  transition: flex-basis var(--sx-dur-3) var(--sx-ease-out);
}

.sx-docs-reader__list-inner {
  padding: 6px;
}

.sx-docs-reader__idle-label {
  padding: 6px 10px 5px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-2xs);
  font-weight: max(500, var(--sx-text-weight));
}

.sx-docs-reader__idle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 0 4px 0 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-base);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-docs-reader__idle-row > .sx-icon {
  color: var(--sx-muted);
}

.sx-docs-reader__idle-row[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-docs-reader__idle-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-docs-reader__idle-remove {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--sx-r-sm);
  color: var(--sx-faint);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-docs-reader__idle-remove:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-docs-reader__hit {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 7px 8px 7px 6px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  cursor: pointer;
  user-select: none;
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out) both;
  transition:
    background-color var(--sx-dur-1) var(--sx-ease-out),
    color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-docs-reader__hit[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-docs-reader__hit-tile {
  display: grid;
  place-items: center;
  align-self: flex-start;
  flex: none;
  width: 28px;
  height: 28px;
  margin-top: 2px;
  border-radius: var(--sx-r-md);
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-docs-reader__hit[aria-selected="true"] .sx-docs-reader__hit-tile {
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-docs-reader__hit-main {
  display: grid;
  flex: 1;
  gap: 1px;
  min-width: 0;
}

.sx-docs-reader__hit-title {
  overflow: hidden;
  color: var(--sx-ink);
  font-size: var(--sx-fs-md);
  font-weight: max(500, var(--sx-text-weight));
  line-height: 19px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Two lines, so the match stays in view however far into the text it sits. */
.sx-docs-reader__hit-sub {
  display: -webkit-box;
  overflow: hidden;
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.sx-docs-reader__hit-mark {
  color: var(--sx-accent-ink);
  font-weight: var(--sx-heading-weight);
  background: none;
}

/* Phones have no room for the chip, so the page name moves under the snippet. */
.sx-docs-reader__hit-context {
  display: none;
  margin-top: 2px;
  overflow: hidden;
  color: var(--sx-ink-2);
  font-size: var(--sx-fs-xs);
  font-weight: max(500, var(--sx-text-weight));
  line-height: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-docs-reader__hit-chip {
  flex: none;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-docs-reader__hit-enter {
  flex: none;
  opacity: 0;
  transform: translateX(-3px);
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-docs-reader__hit[aria-selected="true"] .sx-docs-reader__hit-enter {
  opacity: 1;
  transform: none;
}

.sx-docs-reader__empty {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 20px 24px 22px;
  color: var(--sx-muted);
  font-size: var(--sx-fs-sm);
  text-align: center;
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-docs-reader__empty-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-muted);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 15px;
}

.sx-docs-reader__empty-title {
  color: var(--sx-ink-2);
}

.sx-docs-reader__foot {
  display: flex;
  align-items: center;
  flex: none;
  gap: 14px;
  height: 36px;
  padding: 0 14px;
  color: var(--sx-muted);
  background: var(--sx-surface-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  font-size: var(--sx-fs-xs);
}

.sx-docs-reader__hint {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.sx-docs-reader__hint > .sx-kbd:last-of-type {
  margin-right: 3px;
}

.sx-docs-reader__total {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@keyframes sx-docs-reader-flash {
  0%,
  40% {
    color: var(--sx-accent-ink);
  }
}

/* ---------- The list on the right folds into the article ---------- */
@container docs-reader (max-width: 1120px) {
  .sx-docs-reader__page {
    grid-template-columns: minmax(0, 1fr);
    padding-right: var(--dr-pad);
  }

  .sx-docs-reader__toc {
    display: none;
  }

  .sx-docs-reader__toc-inline {
    display: block;
  }
}

/* ---------- The contents become a drawer ---------- */
@container docs-reader (max-width: 860px) {
  .sx-docs-reader__frame {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-docs-reader__menu {
    display: inline-flex;
    margin-left: -6px;
  }

  .sx-docs-reader__menu,
  .sx-docs-reader__close {
    width: 44px;
    height: 44px;
    --sx-icon-size: 18px;
  }

  .sx-docs-reader__code-head,
  .sx-docs-reader__copy,
  .sx-docs-reader__toc-inline-link,
  .sx-docs-reader__idle-row {
    min-height: 44px;
  }

  .sx-docs-reader__search-close,
  .sx-docs-reader__idle-remove {
    width: 44px;
    height: 44px;
  }

  .sx-docs-reader__search-row {
    padding-right: 4px;
  }

  .sx-docs-reader__tabs {
    --dr-tab-h: 36px;
  }

  .sx-docs-reader__top {
    gap: var(--sx-space-2);
    padding-inline: var(--sx-space-3);
  }

  .sx-docs-reader__brand {
    width: auto;
  }

  .sx-docs-reader__brand-label {
    display: none;
  }

  .sx-docs-reader__scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--sx-z-panel) - 1);
    display: block;
    background: var(--sx-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  }

  .sx-docs-reader[data-nav="open"] .sx-docs-reader__scrim {
    opacity: 1;
    pointer-events: auto;
    transition-duration: var(--sx-dur-3);
  }

  .sx-docs-reader__side {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: var(--sx-z-panel);
    width: min(320px, 86cqw);
    padding: var(--sx-space-2) var(--sx-space-3) var(--sx-space-8);
    background: var(--sx-panel);
    box-shadow: var(--sx-shadow-pop);
    visibility: hidden;
    transform: translateX(-102%);
    transition:
      transform var(--sx-dur-2) var(--sx-ease-in),
      visibility 0s linear var(--sx-dur-2);
  }

  .sx-docs-reader[data-nav="open"] .sx-docs-reader__side {
    visibility: visible;
    transform: none;
    transition:
      transform var(--sx-dur-3) var(--sx-ease-out),
      visibility 0s;
  }

  .sx-docs-reader__side-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sx-space-2);
    min-height: 44px;
    margin-bottom: var(--sx-space-2);
    padding-left: 10px;
    font-size: var(--sx-fs-md);
  }

  .sx-docs-reader__side-head > b {
    font-weight: var(--sx-heading-weight);
  }

  .sx-docs-reader__group-head,
  .sx-docs-reader__link {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .sx-docs-reader__page {
    padding: var(--sx-space-6) var(--sx-space-6) 72px;
  }

  .sx-docs-reader__top-search {
    display: flex;
    justify-content: flex-end;
  }

  .sx-docs-reader__trigger {
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--sx-ink-2);
    background: none;
    box-shadow: none;
    --sx-icon-size: 18px;
  }

  .sx-docs-reader__trigger > :is(span, kbd),
  .sx-docs-reader__hit-chip,
  .sx-docs-reader__hit-enter,
  .sx-docs-reader__hint {
    display: none;
  }

  .sx-docs-reader__hit-context {
    display: block;
  }

  .sx-docs-reader__search-panel {
    top: 12px;
    max-height: calc(100% - 24px);
  }
}

@container docs-reader (max-width: 560px) {
  .sx-docs-reader__page {
    padding: var(--sx-space-5) var(--sx-space-4) 64px;
  }

  .sx-docs-reader__actions,
  .sx-docs-reader__group-count {
    display: none;
  }

  .sx-docs-reader__title {
    font-size: var(--sx-fs-2xl);
  }

  .sx-docs-reader__lead {
    font-size: calc(var(--sx-fs-lg) + 2px);
  }

  .sx-docs-reader__prose h2 {
    font-size: calc(var(--sx-fs-xl) + 2px);
  }

  .sx-docs-reader__prose > * + h2 {
    margin-top: 2.2em;
  }

  .sx-docs-reader__table-wrap td {
    min-width: 96px;
  }

  .sx-docs-reader__formula {
    padding-inline: var(--sx-space-3);
  }

  .sx-docs-reader__formula-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .sx-docs-reader__formula-equals {
    display: none;
  }

  .sx-docs-reader__formula-right::before {
    content: "= ";
    color: var(--sx-accent-ink);
  }

  .sx-docs-reader__pager {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-docs-reader__pager-link[data-dir="next"] {
    grid-column: auto;
    text-align: left;
  }

  .sx-docs-reader__pager-link[data-dir="next"] small {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-docs-reader__search-panel,
  .sx-docs-reader__search[data-state="open"] .sx-docs-reader__search-panel,
  .sx-docs-reader__hit-enter {
    transform: none;
  }

  .sx-docs-reader__article,
  .sx-docs-reader__hit,
  .sx-docs-reader__empty {
    animation-name: sx-fade-in;
  }

  .sx-docs-reader__toc-list[data-ready] .sx-docs-reader__toc-marker,
  .sx-docs-reader__search[data-ready] .sx-docs-reader__tabs-thumb,
  .sx-docs-reader__search[data-ready] .sx-docs-reader__list,
  .sx-docs-reader__side {
    transition: none;
  }

  .sx-docs-reader__fold,
  .sx-docs-reader__group[data-open] .sx-docs-reader__fold,
  .sx-docs-reader__chevron {
    transition: none;
  }
}

@media print {
  .sx-docs-reader {
    display: block;
    height: auto;
    overflow: visible;
  }

  .sx-docs-reader__top,
  .sx-docs-reader__side,
  .sx-docs-reader__scrim,
  .sx-docs-reader__toc,
  .sx-docs-reader__toc-inline,
  .sx-docs-reader__pager,
  .sx-docs-reader__search,
  .sx-docs-reader__copy {
    display: none;
  }

  .sx-docs-reader__frame,
  .sx-docs-reader__page {
    display: block;
    padding: 0;
  }

  .sx-docs-reader__main {
    container-type: normal;
    overflow: visible;
  }
}


/* ---- Product Frame (product-frame) ---- */
/* ==========================================================================
   Product Frame — the product shell for Sassly screens (template)
   .sx-product-frame is a size container: the layout adapts to the frame, not the window.
     wide         sidebar with labels and counts
     <= 1080px    icon rail (also forced with data-nav="rail")
     <= 640px     navigation becomes a drawer (data-drawer="open")
   ========================================================================== */

.sx-product-frame {
  --af-nav-w: 232px;
  --af-rail-w: 60px;
  --af-top-h: 54px;
  --af-gap: 8px;
  container: product-frame / inline-size;
  width: 100%;
  height: 100%;
  min-height: 0;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: var(--sx-shell);
}

.sx-product-frame__grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--af-nav-w) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  transition: grid-template-columns var(--sx-dur-4) var(--sx-ease-out);
}

.sx-product-frame[data-nav="rail"] .sx-product-frame__grid {
  grid-template-columns: var(--af-rail-w) minmax(0, 1fr);
}

/* ---------- Navigation ----------
   Icons keep the same x position in every mode; collapsing only narrows the column and fades
   the text, so the change reads as one smooth motion. */
.sx-product-frame__nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
  padding: 10px 8px;
  overflow: hidden;
}

.sx-product-frame__ws {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  padding: 0 8px 0 7px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-product-frame__ws:hover {
  background: var(--sx-fill);
}

.sx-product-frame__ws-logo {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-md);
  font-weight: 700;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-product-frame__ws-text,
.sx-product-frame__me-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sx-product-frame__ws-text b,
.sx-product-frame__me-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-product-frame__ws-text small,
.sx-product-frame__me-text small {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-product-frame__ws > .sx-icon {
  --sx-icon-size: 14px;
  color: var(--sx-faint);
}

.sx-product-frame__menu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

.sx-product-frame__menu::-webkit-scrollbar {
  display: none;
}

.sx-product-frame__label {
  padding: 12px 10px 5px 14px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-product-frame__label:first-of-type {
  padding-top: 4px;
}

/* One highlight glides to the current item */
.sx-product-frame__hl {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--af-hl-h, 32px);
  border-radius: var(--sx-r-md);
  background: var(--sx-fill-strong);
  transform: translateY(var(--af-hl-y, 0px));
  opacity: var(--af-hl-o, 0);
  pointer-events: none;
}

.sx-product-frame__hl::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: var(--sx-accent);
}

.sx-product-frame[data-ready] .sx-product-frame__hl {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), height var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-product-frame__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 32px;
  padding: 0 10px 0 14px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 16px;
}

.sx-product-frame__item > .sx-icon {
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-product-frame__item > span:first-of-type {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-product-frame__item:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-product-frame__item[aria-current="page"] {
  color: var(--sx-ink);
  font-weight: var(--sx-strong-weight);
  background: transparent;
}

.sx-product-frame__item[aria-current="page"] > .sx-icon {
  color: var(--sx-ink);
}

/* In the rail an item with a count shows a dot on its icon instead */
.sx-product-frame__item:has(.sx-product-frame__count)::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 28px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sx-accent);
  box-shadow: 0 0 0 2px var(--sx-shell);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-product-frame__count {
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--sx-r-pill);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-product-frame__count--hot {
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

.sx-product-frame__foot {
  display: grid;
  gap: 8px;
  padding-top: 8px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-product-frame__usage {
  display: grid;
  gap: 7px;
  width: 214px;
  padding: 10px 10px 11px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  white-space: nowrap;
}

.sx-product-frame__usage-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-product-frame__usage-row b {
  font-weight: 500;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

.sx-product-frame__usage .sx-progress {
  height: 4px;
}

.sx-product-frame__me {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 6px 0 10px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  white-space: nowrap;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-product-frame__me:hover {
  background: var(--sx-fill);
}

.sx-product-frame__me .sx-dot {
  color: var(--sx-success);
}

/* Text that fades when the navigation narrows (and back in once it has widened) */
.sx-product-frame__ws-text,
.sx-product-frame__ws > .sx-icon,
.sx-product-frame__label,
.sx-product-frame__item > span,
.sx-product-frame__usage,
.sx-product-frame__me-text {
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 0.12s, visibility 0s linear 0s;
}

.sx-product-frame[data-nav="rail"] :is(.sx-product-frame__ws-text, .sx-product-frame__ws > .sx-icon, .sx-product-frame__label, .sx-product-frame__item > span, .sx-product-frame__usage, .sx-product-frame__me-text) {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), visibility 0s linear var(--sx-dur-1);
}

.sx-product-frame[data-nav="rail"] .sx-product-frame__item:has(.sx-product-frame__count)::after {
  opacity: 1;
  transform: none;
}

.sx-product-frame__collapse > .sx-icon {
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

.sx-product-frame[data-nav="rail"] .sx-product-frame__collapse > .sx-icon {
  transform: rotate(180deg);
}

/* ---------- Main panel ---------- */
.sx-product-frame__main {
  position: relative;
  display: grid;
  grid-template-rows: var(--af-top-h) minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  margin: var(--af-gap) var(--af-gap) var(--af-gap) 0;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  background-color: var(--sx-panel);
  background-image: var(--sx-panel-wash);
  background-repeat: no-repeat;
  box-shadow: var(--sx-ring), 0 1px 3px rgba(10, 10, 10, 0.04);
}

.sx-product-frame__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0 14px 0 16px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-product-frame__menu-btn {
  display: none;
}

.sx-product-frame__top > .sx-product-frame__collapse {
  margin-left: -6px;
}

.sx-product-frame__title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;
  font-size: var(--sx-fs-base);
  color: var(--sx-muted);
  white-space: nowrap;
  --sx-icon-size: 12px;
}

.sx-product-frame__title > .sx-icon {
  color: var(--sx-faint);
}

.sx-product-frame__title b {
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-product-frame__search {
  position: relative;
  display: flex;
  align-items: center;
  width: min(320px, 34%);
  color: var(--sx-muted);
  --sx-icon-size: 15px;
}

.sx-product-frame__search > .sx-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
}

.sx-product-frame__search .sx-input {
  height: 32px;
  padding: 0 44px 0 32px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-product-frame__search .sx-kbd {
  position: absolute;
  right: 7px;
}

.sx-product-frame__icon-btn {
  position: relative;
}

.sx-product-frame__badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  border-radius: var(--sx-r-pill);
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-accent);
  background: var(--sx-accent);
  box-shadow: 0 0 0 2px var(--sx-panel);
}

.sx-product-frame__badge[data-bump] {
  animation: af-bump var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-product-frame__body {
  position: relative;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sx-product-frame__scrim {
  display: none;
}

@keyframes af-bump {
  40% { transform: scale(1.35); }
}

/* ---------- Adaptive layout ---------- */
@container product-frame (max-width: 1080px) {
  .sx-product-frame:not([data-nav="full"]) .sx-product-frame__grid {
    grid-template-columns: var(--af-rail-w) minmax(0, 1fr);
  }

  .sx-product-frame:not([data-nav="full"]) :is(.sx-product-frame__ws-text, .sx-product-frame__ws > .sx-icon, .sx-product-frame__label, .sx-product-frame__item > span, .sx-product-frame__usage, .sx-product-frame__me-text) {
    opacity: 0;
    visibility: hidden;
  }

  .sx-product-frame:not([data-nav="full"]) .sx-product-frame__item:has(.sx-product-frame__count)::after {
    opacity: 1;
    transform: none;
  }

  .sx-product-frame__collapse {
    display: none;
  }
}

@container product-frame (max-width: 640px) {
  .sx-product-frame__grid,
  .sx-product-frame[data-nav] .sx-product-frame__grid,
  .sx-product-frame:not([data-nav="full"]) .sx-product-frame__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-product-frame__nav {
    position: absolute;
    z-index: 20;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(260px, 84%);
    background: var(--sx-shell);
    box-shadow: var(--sx-shadow-pop);
    transform: translateX(-104%);
    transition: transform var(--sx-dur-4) var(--sx-ease-out);
  }

  .sx-product-frame[data-drawer="open"] .sx-product-frame__nav {
    transform: none;
  }

  /* The drawer always shows the full navigation */
  .sx-product-frame .sx-product-frame__nav :is(.sx-product-frame__ws-text, .sx-product-frame__ws > .sx-icon, .sx-product-frame__label, .sx-product-frame__item > span, .sx-product-frame__usage, .sx-product-frame__me-text) {
    opacity: 1;
    visibility: visible;
  }

  .sx-product-frame .sx-product-frame__nav .sx-product-frame__item:has(.sx-product-frame__count)::after {
    opacity: 0;
  }

  .sx-product-frame__usage {
    width: auto;
  }

  .sx-product-frame__scrim {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: block;
    background: var(--sx-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-product-frame[data-drawer="open"] .sx-product-frame__scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .sx-product-frame__main {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .sx-product-frame__top {
    padding: 0 10px;
  }

  .sx-product-frame__menu-btn {
    display: inline-flex;
  }

  .sx-product-frame__search,
  .sx-product-frame__live,
  .sx-product-frame__collapse {
    display: none;
  }
}

/* ==========================================================================
   Demo page inside the frame (Home)
   ========================================================================== */
.sx-product-frame-demo {
  display: grid;
  gap: 22px;
  max-width: 1040px;
  padding: 26px 28px 32px;
}

.sx-product-frame-demo__hello h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-product-frame-demo__hello p {
  margin-top: 6px;
  color: var(--sx-muted);
}

.sx-product-frame-demo__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sx-product-frame-demo__stat {
  display: grid;
  gap: 6px;
  padding: 16px 16px 15px;
}

.sx-product-frame-demo__stat span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-product-frame-demo__stat b {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.sx-product-frame-demo__stat .sx-chip {
  justify-self: start;
}

.sx-product-frame-demo__list {
  overflow: hidden;
}

.sx-product-frame-demo__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
}

.sx-product-frame-demo__list-head h2 {
  font-size: var(--sx-fs-md);
}

.sx-product-frame-demo__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-product-frame-demo__row:hover {
  background: var(--sx-fill);
}

.sx-product-frame-demo__row-text {
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.sx-product-frame-demo__row-text b {
  font-weight: var(--sx-strong-weight);
}

.sx-product-frame-demo__row-text span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-product-frame-demo__wait {
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

@container product-frame (max-width: 640px) {
  .sx-product-frame-demo {
    padding: 18px 14px 24px;
  }

  .sx-product-frame-demo__stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-product-frame-demo__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .sx-product-frame-demo__row .sx-chip {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-product-frame__badge[data-bump] {
    animation: none;
  }
}


/* ---- Case Workspace (case-workspace) ---- */
/* ==========================================================================
   Case Workspace — one ticket in full (template, renders inside Product Frame)
   Root: data-panel="open" opens the details drawer (narrow frames only).
   Thread: .sx-case-workspace__msg[data-from="customer | agent | note"] with data-cont for a
   follow-up from the same person and data-new for the arrival; .sx-case-workspace__event for
   system events. Composer: data-mode="reply | note", data-focused (preview).
   SLA card: data-state="ok | warning | breached | met".
   Composes Segment Rail (segment-rail.css) for the Reply / Internal note toggle.
   .sx-case-workspace is a size container; the layout follows its own width:
     > 1020px   thread and a 320px details column (a 1280px screen with the full sidebar)
     <= 1020px  details become a drawer, opened from the Details button
     <= 660px   single column: stacked header, full-width drawer, compact composer
   ========================================================================== */

.sx-case-workspace {
  --td-side-w: 320px;
  --td-pad-x: 24px;
  container: case-workspace / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
}

.sx-case-workspace .sx-avatar[data-tone="1"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c1) 16%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c1) 62%, var(--sx-ink)); }
.sx-case-workspace .sx-avatar[data-tone="2"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c2) 16%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c2) 62%, var(--sx-ink)); }
.sx-case-workspace .sx-avatar[data-tone="3"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c3) 16%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c3) 62%, var(--sx-ink)); }
.sx-case-workspace .sx-avatar[data-tone="4"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c4) 18%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c4) 58%, var(--sx-ink)); }
.sx-case-workspace .sx-avatar[data-tone="5"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c5) 18%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c5) 58%, var(--sx-ink)); }

/* Status and priority marks, shared by the header, the properties and the menus */
.sx-case-workspace__state {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--sx-info);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-workspace__state[data-status="pending"] {
  background: conic-gradient(var(--sx-warning) 0 50%, transparent 0);
  box-shadow: inset 0 0 0 2px var(--sx-warning);
}

.sx-case-workspace__state[data-status="hold"] {
  box-shadow: inset 0 0 0 2px var(--sx-faint);
}

.sx-case-workspace__state[data-status="resolved"] {
  background: var(--sx-success);
  box-shadow: none;
}

.sx-case-workspace__flag {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-info);
}

.sx-case-workspace__flag[data-prio="urgent"] { background: var(--sx-danger); }
.sx-case-workspace__flag[data-prio="high"] { background: var(--sx-warning); }
.sx-case-workspace__flag[data-prio="low"] { background: var(--sx-faint); }

.sx-case-workspace__nobody {
  color: var(--sx-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  --sx-icon-size: 11px;
}

/* ---------- Header ---------- */
.sx-case-workspace__head {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-end;
  gap: 16px;
  min-width: 0;
  padding: 14px var(--td-pad-x);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-case-workspace__head-main {
  display: grid;
  gap: 7px;
  flex: 1;
  min-width: 0;
}

.sx-case-workspace__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-case-workspace__id {
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-case-workspace__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  --sx-icon-size: 13px;
}

.sx-case-workspace__meta-item > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-workspace__meta-item > .sx-avatar {
  --sx-avatar-size: 18px;
  font-size: 7.5px;
}

.sx-case-workspace__snoozed {
  gap: 5px;
  padding-right: 3px;
}

.sx-case-workspace__snoozed button {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 10px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-case-workspace__snoozed button:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-case-workspace__subject {
  overflow: hidden;
  font-size: var(--sx-fs-xl);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-workspace__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.sx-case-workspace__panel-btn {
  display: none;
}

.sx-case-workspace__panel-btn > .sx-icon {
  transform: scaleX(-1);
}

.sx-case-workspace__panel-btn[aria-expanded="true"] {
  --_bg: color-mix(in srgb, currentColor 8%, transparent);
  --_border: var(--sx-line-strong);
}

/* ---------- Menus (status, priority, assignee, team, tags, snooze, saved replies) ---------- */
.sx-case-workspace__drop {
  position: relative;
  display: flex;
  min-width: 0;
}

.sx-case-workspace__menu {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: calc(100% + 6px);
  right: 0;
  width: 212px;
  --sx-pop-origin: top right;
}

.sx-case-workspace__drop--start > .sx-case-workspace__menu {
  right: auto;
  left: 0;
  --sx-pop-origin: top left;
}

.sx-case-workspace__drop--up > .sx-case-workspace__menu {
  top: auto;
  bottom: calc(100% + 6px);
  width: 268px;
  --sx-pop-origin: bottom left;
}

.sx-case-workspace__drop--up > .sx-menu.sx-pop:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-case-workspace__menu .sx-menu__item {
  gap: 9px;
}

.sx-case-workspace__menu .sx-menu__item > .sx-avatar {
  --sx-avatar-size: 20px;
  font-size: 8px;
}

.sx-case-workspace__item-label {
  display: grid;
  flex: 1;
  min-width: 0;
  padding: 6px 0;
  line-height: 1.3;
}

.sx-case-workspace__item-label small {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-workspace__tick {
  --sx-icon-size: 14px;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-case-workspace__menu .sx-menu__item[aria-checked="true"] > .sx-case-workspace__tick {
  opacity: 1;
  transform: none;
}

/* ---------- Body: thread and details ---------- */
.sx-case-workspace__body {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--td-side-w);
  min-width: 0;
  min-height: 0;
}

.sx-case-workspace__thread {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

.sx-case-workspace__log {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 20px var(--td-pad-x) 16px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* A short thread sits at the bottom, next to the composer */
.sx-case-workspace__log > :first-child {
  margin-top: auto;
}

.sx-case-workspace__event {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  background: var(--sx-fill);
  --sx-icon-size: 12px;
}

.sx-case-workspace__event > .sx-icon {
  color: var(--sx-faint);
}

.sx-case-workspace__event time {
  font-variant-numeric: tabular-nums;
}

.sx-case-workspace__msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: min(600px, 84%);
}

.sx-case-workspace__msg[data-from="customer"] {
  align-self: flex-start;
}

.sx-case-workspace__msg:is([data-from="agent"], [data-from="note"]) {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.sx-case-workspace__msg > .sx-avatar {
  --sx-avatar-size: 28px;
  font-size: 10.5px;
}

.sx-case-workspace__msg[data-cont] {
  margin-top: -8px;
}

.sx-case-workspace__msg[data-cont] > .sx-avatar {
  visibility: hidden;
}

.sx-case-workspace__msg[data-cont] .sx-case-workspace__msg-head {
  display: none;
}

.sx-case-workspace__msg-body {
  display: grid;
  justify-items: start;
  gap: 4px;
  min-width: 0;
}

.sx-case-workspace__msg:is([data-from="agent"], [data-from="note"]) .sx-case-workspace__msg-body {
  justify-items: end;
}

.sx-case-workspace__msg-head {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 2px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-case-workspace__msg-head b {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-case-workspace__msg-head time {
  font-variant-numeric: tabular-nums;
}

.sx-case-workspace__note-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 500;
  color: var(--sx-warning-ink);
  --sx-icon-size: 11px;
}

.sx-case-workspace__bubble {
  max-width: 100%;
  padding: 8px 12px;
  border-radius: 15px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.sx-case-workspace__msg[data-from="customer"] .sx-case-workspace__bubble {
  border-top-left-radius: 5px;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
}

.sx-case-workspace__msg[data-from="agent"] .sx-case-workspace__bubble {
  border-top-right-radius: 5px;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-case-workspace__msg[data-from="note"] .sx-case-workspace__bubble {
  border-top-right-radius: 5px;
  color: var(--sx-ink);
  background: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-case-workspace__mention {
  font-weight: 600;
  color: var(--sx-warning-ink);
}

.sx-case-workspace__receipt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 2px;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
  --sx-icon-size: 12px;
}

.sx-case-workspace__receipt[data-state="read"] > .sx-icon {
  color: var(--sx-info);
}

.sx-case-workspace__receipt[data-state="sending"] {
  color: var(--sx-faint);
}

.sx-case-workspace__attached,
.sx-case-workspace__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-case-workspace__file {
  height: 24px;
  gap: 6px;
  padding: 0 4px 0 8px;
  font-weight: var(--sx-text-weight);
}

.sx-case-workspace__attached .sx-case-workspace__file {
  padding-right: 9px;
}

.sx-case-workspace__file small {
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-case-workspace__file button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 10px;
}

.sx-case-workspace__file button:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

/* A photo the customer sent, drawn with CSS */
.sx-case-workspace__photo {
  display: grid;
  gap: 5px;
  width: 248px;
  margin: 0;
  padding: 4px;
  border-radius: 15px;
  border-top-left-radius: 5px;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
}

.sx-case-workspace__photo-art {
  position: relative;
  height: 150px;
  overflow: hidden;
  border-radius: 11px;
  border-top-left-radius: 3px;
  background:
    radial-gradient(120px 40px at 62% 92%, color-mix(in srgb, var(--sx-ink) 16%, transparent), transparent 70%),
    linear-gradient(170deg, color-mix(in srgb, var(--sx-c4) 16%, var(--sx-surface-3)) 0%, color-mix(in srgb, var(--sx-c1) 12%, var(--sx-surface-3)) 100%);
}

.sx-case-workspace__photo-box {
  position: absolute;
  left: 22px;
  bottom: -14px;
  width: 132px;
  height: 92px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--sx-warning) 46%, var(--sx-surface-3)), color-mix(in srgb, var(--sx-warning) 36%, var(--sx-surface-3)));
  clip-path: polygon(0 14%, 54% 6%, 60% 20%, 100% 9%, 97% 100%, 3% 100%);
}

.sx-case-workspace__photo-box::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 100%;
  background: color-mix(in srgb, var(--sx-surface) 42%, transparent);
}

.sx-case-workspace__photo-box::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 16px;
  width: 34px;
  height: 26px;
  background: color-mix(in srgb, var(--sx-ink) 14%, transparent);
  clip-path: polygon(0 0, 100% 30%, 40% 100%);
}

.sx-case-workspace__photo-cup {
  position: absolute;
  left: 150px;
  bottom: 24px;
  width: 48px;
  height: 98px;
  border-radius: 9px 9px 14px 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--sx-info) 72%, var(--sx-surface)) 0%, color-mix(in srgb, var(--sx-info) 42%, var(--sx-surface)) 58%, color-mix(in srgb, var(--sx-info) 64%, var(--sx-surface)) 100%);
  transform: rotate(-9deg);
}

.sx-case-workspace__photo-cup::before {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: -4px;
  height: 20px;
  border-radius: 8px 8px 4px 4px;
  background: color-mix(in srgb, var(--sx-info) 55%, var(--sx-ink));
}

.sx-case-workspace__photo-crack {
  position: absolute;
  left: 152px;
  bottom: 106px;
  width: 40px;
  height: 18px;
  background: var(--sx-surface);
  opacity: 0.92;
  clip-path: polygon(0 52%, 22% 62%, 38% 22%, 58% 72%, 76% 30%, 100% 56%, 100% 66%, 76% 42%, 58% 86%, 38% 36%, 22% 74%, 0 62%);
  transform: rotate(-9deg);
}

.sx-case-workspace__photo figcaption {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 1px 6px 3px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-ink-2);
  --sx-icon-size: 13px;
}

.sx-case-workspace__photo figcaption > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-workspace__photo figcaption > span:last-child {
  margin-left: auto;
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* Typing: three dots in a customer bubble */
.sx-case-workspace__typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 35px;
}

.sx-case-workspace__typing > span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sx-faint);
  animation: td-dot 1.1s var(--sx-ease-in-out) infinite;
}

.sx-case-workspace__typing > span:nth-child(2) { animation-delay: 0.15s; }
.sx-case-workspace__typing > span:nth-child(3) { animation-delay: 0.3s; }

/* Arrivals */
.sx-case-workspace__msg[data-new] {
  animation: td-msg-in var(--sx-dur-4) var(--sx-ease-out) both;
  transform-origin: left bottom;
}

.sx-case-workspace__msg[data-new]:not([data-from="customer"]) {
  transform-origin: right bottom;
}

.sx-case-workspace__event[data-new] {
  animation: td-event-in var(--sx-dur-4) var(--sx-ease-out) both;
}

/* ---------- Composer ---------- */
.sx-case-workspace__composer {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 8px 10px;
  border-radius: var(--sx-r-xl);
  background-color: var(--sx-card-bg);
  box-shadow: var(--sx-shadow-2);
  transition: background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-workspace__composer[data-mode="note"] {
  background-color: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-case-workspace__composer:focus-within,
.sx-case-workspace__composer[data-focused] {
  box-shadow: var(--sx-focus-ring);
}

.sx-case-workspace__composer-top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-case-workspace__composer-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  margin-left: auto;
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  --sx-icon-size: 12px;
}

.sx-case-workspace__composer[data-mode="note"] .sx-case-workspace__composer-hint {
  color: var(--sx-warning-ink);
}

.sx-case-workspace__input {
  display: block;
  width: 100%;
  height: 46px;
  padding: 5px 4px 3px;
  border: 0;
  resize: none;
  font: inherit;
  line-height: 1.45;
  color: var(--sx-ink);
  background: transparent;
  outline: none;
}

.sx-case-workspace__composer-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.sx-case-workspace__tool {
  color: var(--sx-muted);
}

.sx-case-workspace__bar-end {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.sx-case-workspace__keys {
  display: inline-flex;
  gap: 3px;
}

/* ---------- Details column ---------- */
.sx-case-workspace__scrim {
  display: none;
}

.sx-case-workspace__side {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  min-height: 0;
  padding: 16px 16px 22px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  box-shadow: inset 1px 0 0 var(--sx-line-soft);
}

.sx-case-workspace__side-head {
  display: none;
  align-items: center;
  justify-content: space-between;
  margin: -4px -4px -6px 2px;
}

.sx-case-workspace__side-head b {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-heading-weight);
}

.sx-case-workspace__section {
  display: grid;
  gap: 6px;
}

.sx-case-workspace__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-case-workspace__props {
  display: grid;
  gap: 1px;
  margin: 0;
}

.sx-case-workspace__prop {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
}

.sx-case-workspace__prop dt {
  padding-left: 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-case-workspace__prop dd {
  min-width: 0;
  margin: 0;
}

.sx-case-workspace__select {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border-radius: var(--sx-r-md);
  text-align: left;
  color: var(--sx-ink);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-case-workspace__select:hover,
.sx-case-workspace__select[aria-expanded="true"] {
  background: var(--sx-fill);
}

.sx-case-workspace__select > .sx-icon {
  --sx-icon-size: 14px;
  margin-left: auto;
  color: var(--sx-faint);
}

.sx-case-workspace__value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  --sx-icon-size: 14px;
}

.sx-case-workspace__value > span:last-child {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-workspace__value > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-workspace__value > .sx-avatar {
  --sx-avatar-size: 20px;
  font-size: 8px;
}

.sx-case-workspace__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  padding: 5px 6px;
}

.sx-case-workspace__tag {
  gap: 3px;
  padding-right: 3px;
}

.sx-case-workspace__tag button {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  color: var(--sx-muted);
  --sx-icon-size: 10px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-case-workspace__tag button:hover {
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-case-workspace__tag[data-new] {
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring) both;
}

.sx-case-workspace__tag-add {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px 0 5px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  --sx-icon-size: 12px;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-case-workspace__tag-add:hover,
.sx-case-workspace__tag-add[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

/* SLA */
.sx-case-workspace__sla {
  display: grid;
  gap: 9px;
  padding: 13px 14px 14px;
}

.sx-case-workspace__sla[data-state="warning"] {
  background-color: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-case-workspace__sla[data-state="breached"] {
  background-color: var(--sx-danger-soft);
  box-shadow: inset 0 0 0 1px var(--sx-danger-line);
}

.sx-case-workspace__sla-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sx-case-workspace__sla-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  --sx-icon-size: 14px;
}

.sx-case-workspace__sla-label > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-workspace__sla-time {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-case-workspace__sla-time small {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-case-workspace__sla[data-state="warning"] .sx-case-workspace__sla-time { color: var(--sx-warning-ink); }
.sx-case-workspace__sla[data-state="breached"] .sx-case-workspace__sla-time { color: var(--sx-danger-ink); }
.sx-case-workspace__sla[data-state="met"] .sx-case-workspace__sla-time { color: var(--sx-success-ink); }

.sx-case-workspace__sla .sx-progress {
  height: 5px;
}

.sx-case-workspace__sla .sx-progress__bar { --sx-progress-color: var(--sx-success); }
.sx-case-workspace__sla[data-state="warning"] .sx-progress__bar { --sx-progress-color: var(--sx-warning); }
.sx-case-workspace__sla[data-state="breached"] .sx-progress__bar { --sx-progress-color: var(--sx-danger); }

.sx-case-workspace__sla-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-case-workspace__sla-first {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 9px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
  --sx-icon-size: 13px;
}

.sx-case-workspace__sla-first > .sx-icon {
  color: var(--sx-success);
}

/* Customer */
.sx-case-workspace__person {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.sx-case-workspace__person-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-case-workspace__person-head > .sx-avatar {
  --sx-avatar-size: 36px;
  font-size: 13px;
}

.sx-case-workspace__person-name {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-case-workspace__person-name b {
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
}

.sx-case-workspace__person-name span {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-case-workspace__contact {
  display: grid;
  gap: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-case-workspace__contact li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  --sx-icon-size: 14px;
}

.sx-case-workspace__contact li > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-workspace__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: 6px;
  margin: 0;
}

.sx-case-workspace__stats > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border-radius: var(--sx-r-md);
  background: var(--sx-fill);
}

.sx-case-workspace__stats dt {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-case-workspace__stats dd {
  margin: 0;
  font-size: var(--sx-fs-md);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-case-workspace__order {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-case-workspace__order > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-workspace__order b {
  font-weight: 500;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

/* Related tickets */
.sx-case-workspace__related {
  display: grid;
  gap: 1px;
}

.sx-case-workspace__rel {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 4px 0 2px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-case-workspace__rel + .sx-case-workspace__rel {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-case-workspace__rel .sx-mono {
  color: var(--sx-muted);
}

/* ---------- Drawer: the details slide over the thread ---------- */
@container case-workspace (max-width: 1020px) {
  .sx-case-workspace__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-case-workspace__panel-btn {
    display: inline-flex;
  }

  .sx-case-workspace__side {
    position: absolute;
    z-index: 5;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 100%);
    background-color: var(--sx-panel);
    box-shadow: var(--sx-shadow-pop);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform var(--sx-dur-3) var(--sx-ease-in), visibility 0s linear var(--sx-dur-3);
  }

  .sx-case-workspace[data-panel="open"] .sx-case-workspace__side {
    transform: none;
    visibility: visible;
    transition: transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s;
  }

  .sx-case-workspace__side-head {
    display: flex;
  }

  .sx-case-workspace__scrim {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: block;
    background: var(--sx-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-case-workspace[data-panel="open"] .sx-case-workspace__scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ---------- Single column (phones) ---------- */
@container case-workspace (max-width: 660px) {
  /* A container query cannot style its own container, so the variable goes on the children. */
  .sx-case-workspace > * {
    --td-pad-x: 14px;
  }

  .sx-case-workspace__head {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .sx-case-workspace__subject {
    display: -webkit-box;
    font-size: var(--sx-fs-lg);
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sx-case-workspace__actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Compact header buttons: the .sx-btn geometry variables of the small size */
  .sx-case-workspace__actions .sx-btn {
    --_h: var(--sx-h-sm);
    --_px: 10px;
    --_fs: var(--sx-fs-sm);
    --_icon: 14px;
  }

  .sx-case-workspace__panel-btn {
    margin-left: auto;
  }

  .sx-case-workspace__log {
    gap: 12px;
    padding-top: 16px;
  }

  .sx-case-workspace__msg {
    max-width: 94%;
  }

  .sx-case-workspace__msg > .sx-avatar {
    --sx-avatar-size: 24px;
    font-size: 9px;
  }

  .sx-case-workspace__photo {
    width: 220px;
  }

  .sx-case-workspace__composer {
    margin: 0 10px 10px;
  }

  .sx-case-workspace__composer-hint,
  .sx-case-workspace__keys,
  .sx-case-workspace__tool-label {
    display: none;
  }

  .sx-case-workspace__side {
    width: 100%;
  }
}

@keyframes td-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

@keyframes td-event-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
}

@keyframes td-dot {
  0%, 60%, 100% { opacity: 0.45; transform: none; }
  30% { opacity: 1; transform: translateY(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-case-workspace__msg[data-new],
  .sx-case-workspace__event[data-new],
  .sx-case-workspace__tag[data-new] {
    animation-name: sx-fade-in;
  }

  .sx-case-workspace__typing > span {
    animation: sx-pulse 1.4s var(--sx-ease-in-out) infinite;
  }
}

@container case-workspace (max-width: 1020px) {
  @media (prefers-reduced-motion: reduce) {
    .sx-case-workspace__side,
    .sx-case-workspace[data-panel="open"] .sx-case-workspace__side {
      transform: none;
      opacity: 0;
      transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
    }

    .sx-case-workspace[data-panel="open"] .sx-case-workspace__side {
      opacity: 1;
      transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s;
    }
  }
}


/* ---- Case Index (case-index) ---- */
/* ==========================================================================
   Case Index — every ticket in one table (template, renders inside Product Frame)
   Views: role="tab" aria-selected; one .sx-case-index__tab-ink glides to the current view.
   Rows: data-selected (checkbox), aria-current (open in the preview), data-new (arrival),
   data-flash (changed by a bulk action). SLA badge: data-tone="ok | warning | overdue".
   Panels: .sx-case-index__preview[data-open] slides in from the right,
   .sx-case-index__bulk[data-open] rises from the bottom.
   Layouts on the root: data-layout="table" (default, also when missing) | "board" | "split".
     board  a lane per status with cards; one shared card menu moves a card between lanes
     split  compact rows on the left, the preview always open on the right
   .sx-case-index is a size container; the layout follows its own width:
     > 840px   full table, four lanes, split preview 400px
     <= 840px  Channel and Updated columns are hidden, lanes scroll sideways, preview 320px
     <= 640px  rows become cards, the preview covers the list; split stacks the preview
   ========================================================================== */

.sx-case-index {
  --tl-cols: 44px minmax(0, 1fr) 96px 88px 64px 72px 124px 72px;
  --tl-pad-x: 24px;
  --tl-split-w: 400px;
  container: case-index / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
}

.sx-case-index .sx-avatar[data-tone="1"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c1) 16%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c1) 62%, var(--sx-ink)); }
.sx-case-index .sx-avatar[data-tone="4"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c4) 18%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c4) 58%, var(--sx-ink)); }
.sx-case-index .sx-avatar[data-tone="5"] { --sx-avatar-bg: color-mix(in srgb, var(--sx-c5) 18%, var(--sx-surface)); --sx-avatar-ink: color-mix(in srgb, var(--sx-c5) 58%, var(--sx-ink)); }

.sx-case-index__nobody {
  color: var(--sx-muted);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  --sx-icon-size: 11px;
}

.sx-case-index__flag {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-info);
}

.sx-case-index__flag[data-prio="urgent"] { background: var(--sx-danger); }
.sx-case-index__flag[data-prio="high"] { background: var(--sx-warning); }
.sx-case-index__flag[data-prio="low"] { background: var(--sx-faint); }

.sx-case-index__state {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-info);
}

.sx-case-index__state[data-status="pending"] { background: var(--sx-warning); }
.sx-case-index__state[data-status="waiting"] { background: var(--sx-faint); }
.sx-case-index__state[data-status="resolved"] { background: var(--sx-success); }

.sx-case-index__prio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  white-space: nowrap;
}

.sx-case-index__sla {
  gap: 5px;
  font-variant-numeric: tabular-nums;
}

.sx-case-index__sla > .sx-icon {
  --sx-icon-size: 12px;
}

/* ---------- Page header ---------- */
.sx-case-index__head {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px var(--tl-pad-x) 12px;
}

.sx-case-index__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.sx-case-index__title h1 {
  font-size: var(--sx-fs-xl);
}

.sx-case-index__total {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-case-index__new {
  position: relative;
  display: flex;
}

.sx-case-index__form {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  gap: 12px;
  width: 320px;
  padding: 16px;
  box-shadow: var(--sx-shadow-pop);
  --sx-pop-origin: top right;
}

.sx-case-index__form-title {
  font-size: var(--sx-fs-md);
}

.sx-case-index__form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.sx-case-index__form-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 2px;
}

/* ---------- Views ---------- */
.sx-case-index__tabs {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
  padding: 0 calc(var(--tl-pad-x) - 8px);
  overflow-x: auto;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-case-index__tabs::-webkit-scrollbar {
  display: none;
}

.sx-case-index__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  height: 38px;
  padding: 0 8px;
  font-weight: 500;
  color: var(--sx-muted);
  white-space: nowrap;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-index__tab:hover {
  color: var(--sx-ink-2);
}

.sx-case-index__tab[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-case-index__tab:focus-visible {
  outline-offset: -4px;
}

.sx-case-index__tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--sx-r-pill);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-index__tab[aria-selected="true"] .sx-case-index__tab-count {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

.sx-case-index__tab[data-view="overdue"] .sx-case-index__tab-count {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-case-index__tab-count[data-bump] {
  animation: tl-bump var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-case-index__tab-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--tl-ink-w, 0px);
  height: 2px;
  border-radius: 2px;
  background: var(--sx-accent);
  transform: translateX(var(--tl-ink-x, 0px));
  pointer-events: none;
}

.sx-case-index__tabs[data-ready] .sx-case-index__tab-ink {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), width var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Toolbar ---------- */
.sx-case-index__toolbar {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  padding: 12px var(--tl-pad-x);
}

.sx-case-index__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: none;
  width: 248px;
  color: var(--sx-muted);
  --sx-icon-size: 15px;
}

.sx-case-index__search > .sx-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
}

.sx-case-index__search .sx-input {
  height: 30px;
  padding-left: 32px;
  border-radius: var(--sx-r-lg);
}

.sx-case-index__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.sx-case-index__drop {
  position: relative;
  display: flex;
}

.sx-case-index__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px 0 10px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  white-space: nowrap;
  --sx-icon-size: 13px;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-index__filter > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-index__filter:hover,
.sx-case-index__filter[aria-expanded="true"] {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-case-index__filter[data-active] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-case-index__filter[data-active] > .sx-icon {
  color: currentColor;
}

.sx-case-index__filter-count {
  display: inline-grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-accent);
  background: var(--sx-accent);
}

.sx-case-index__sort {
  flex: none;
  margin-left: auto;
}

.sx-case-index__sort .sx-btn {
  color: var(--sx-ink-2);
}

.sx-case-index__menu {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: calc(100% + 6px);
  left: 0;
  width: 208px;
  --sx-pop-origin: top left;
}

.sx-case-index__drop--end > .sx-case-index__menu {
  left: auto;
  right: 0;
  --sx-pop-origin: top right;
}

.sx-case-index__drop--up > .sx-case-index__menu {
  top: auto;
  bottom: calc(100% + 10px);
  --sx-pop-origin: bottom left;
}

.sx-case-index__drop--up > .sx-menu.sx-pop:not([data-state="open"]) {
  transform: translateY(4px) scale(0.97);
}

.sx-case-index__menu .sx-menu__item {
  gap: 9px;
}

.sx-case-index__menu .sx-menu__item > span:not(.sx-avatar, .sx-case-index__flag, .sx-case-index__state) {
  flex: 1;
  min-width: 0;
}

.sx-case-index__menu .sx-menu__item > .sx-avatar {
  --sx-avatar-size: 20px;
  font-size: 8px;
}

.sx-case-index__tick {
  --sx-icon-size: 14px;
  color: var(--sx-ink);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-case-index__menu .sx-menu__item[aria-checked="true"] > .sx-case-index__tick {
  opacity: 1;
  transform: none;
}

/* ---------- Main: the list (table or board), its footer and the preview ---------- */
.sx-case-index__main {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
}

/* ---------- Table ---------- */
.sx-case-index__table {
  position: relative;
  min-height: 0;
  padding: 0 calc(var(--tl-pad-x) - 12px) 72px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-case-index__row {
  display: grid;
  grid-template-columns: var(--tl-cols);
  align-items: center;
  min-height: 46px;
  border-radius: var(--sx-r-md);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-case-index__rows {
  position: relative;
  display: grid;
}

.sx-case-index__rows > .sx-case-index__row {
  cursor: pointer;
}

.sx-case-index__rows > .sx-case-index__row + .sx-case-index__row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-case-index__rows > .sx-case-index__row:hover {
  background-color: var(--sx-fill);
}

.sx-case-index__rows > .sx-case-index__row[data-selected] {
  background-color: var(--sx-accent-soft);
}

.sx-case-index__rows > .sx-case-index__row[aria-current="true"] {
  background-color: var(--sx-fill-strong);
}

.sx-case-index__rows > .sx-case-index__row[data-new] {
  animation: tl-arrive 2s var(--sx-ease-out) both;
}

.sx-case-index__rows > .sx-case-index__row[data-flash] {
  animation: tl-flash 1.6s var(--sx-ease-out) both;
}

.sx-case-index__row--head {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 34px;
  border-radius: 0;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
  background: var(--sx-panel);
  box-shadow: 0 1px 0 var(--sx-line-soft);
}

.sx-case-index__cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 8px;
}

.sx-case-index__cell--check {
  justify-content: center;
  padding: 0;
}

.sx-case-index .sx-check__box {
  position: relative;
}

.sx-case-index .sx-check > input:indeterminate + .sx-check__box::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 8px;
  height: 2px;
  margin: auto;
  border-radius: 1px;
  background: var(--sx-on-primary);
}

.sx-case-index__cell--ticket {
  display: grid;
  gap: 1px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.sx-case-index__subject {
  overflow: hidden;
  min-width: 0;
  font-weight: var(--sx-strong-weight);
  line-height: 1.3;
  text-align: left;
  color: var(--sx-ink);
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: var(--sx-r-xs);
}

.sx-case-index__subject:hover {
  text-decoration: underline;
  text-decoration-color: var(--sx-line-strong);
  text-underline-offset: 0.2em;
}

.sx-case-index__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-xs);
  line-height: 1.3;
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-case-index__sub > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-case-index__channel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-muted);
  --sx-icon-size: 15px;
}

.sx-case-index__channel > span,
.sx-case-index__who {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sx-case-index__cell--updated {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-case-index__empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 56px 16px;
  text-align: center;
  color: var(--sx-muted);
  --sx-icon-size: 20px;
}

.sx-case-index__empty b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

/* ---------- Footer ---------- */
.sx-case-index__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 var(--tl-pad-x);
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-case-index__pager {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-case-index__pager > span {
  margin-right: 4px;
}

/* ---------- Bulk actions ---------- */
.sx-case-index__bulk {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 58px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 5px 6px 5px 14px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translate(var(--tl-bulk-x, -50%), 24px) scale(0.98);
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-in),
    transform var(--sx-dur-3) var(--sx-ease-in),
    visibility 0s linear var(--sx-dur-3);
}

.sx-case-index__bulk[data-open] {
  opacity: 1;
  visibility: visible;
  transform: translate(var(--tl-bulk-x, -50%), 0);
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s;
}

.sx-case-index__bulk-count {
  margin-right: 6px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-case-index__bulk-count b {
  display: inline-block;
  min-width: 1.2ch;
  font-weight: 600;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

.sx-case-index__bulk-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--sx-line);
}

.sx-case-index__bulk .sx-btn--ghost {
  color: var(--sx-ink-2);
}

/* ---------- Preview ---------- */
.sx-case-index__preview {
  position: absolute;
  z-index: 9;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(392px, calc(100% - 16px));
  border-radius: var(--sx-r-xl);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform var(--sx-dur-3) var(--sx-ease-in), visibility 0s linear var(--sx-dur-3);
}

.sx-case-index__preview[data-open] {
  visibility: visible;
  transform: none;
  transition: transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s;
}

.sx-case-index__preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 10px 0 18px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-case-index__preview-head > .sx-btn {
  margin-left: auto;
}

.sx-case-index__preview-body {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 8px 18px 18px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.sx-case-index__preview-title {
  font-size: var(--sx-fs-lg);
}

.sx-case-index__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin: 0;
  padding: 14px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-case-index__facts > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sx-case-index__facts dt {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-case-index__facts dd {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  margin: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  white-space: nowrap;
  --sx-icon-size: 14px;
}

.sx-case-index__facts dd > .sx-icon {
  color: var(--sx-muted);
}

.sx-case-index__facts dd > .sx-avatar {
  --sx-avatar-size: 20px;
  font-size: 8px;
}

.sx-case-index__facts dd > span:last-child:not(.sx-chip) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-case-index__label {
  margin-bottom: -6px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-case-index__msgs {
  display: grid;
  gap: 8px;
}

.sx-case-index__msg {
  display: grid;
  gap: 3px;
  max-width: 88%;
  justify-self: start;
}

.sx-case-index__msg[data-from="agent"] {
  justify-self: end;
  justify-items: end;
}

.sx-case-index__msg b {
  padding: 0 2px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-case-index__msg p {
  padding: 7px 11px;
  border-radius: 13px;
  border-top-left-radius: 4px;
  line-height: 1.45;
  background: var(--sx-surface-3);
}

.sx-case-index__msg[data-from="agent"] p {
  border-radius: 13px;
  border-top-right-radius: 4px;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
}

.sx-case-index__none {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-case-index__preview-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* ---------- Fewer columns ---------- */
@container case-index (max-width: 840px) {
  /* A container query cannot style its own container, so variables go on descendants. */
  .sx-case-index__table {
    --tl-cols: 44px minmax(0, 1fr) 92px 84px 64px 120px;
  }

  .sx-case-index__cell--channel,
  .sx-case-index__cell--updated {
    display: none;
  }

  .sx-case-index__search {
    width: 200px;
  }
}

/* ---------- Cards (phones) ---------- */
@container case-index (max-width: 640px) {
  .sx-case-index > * {
    --tl-pad-x: 14px;
  }

  .sx-case-index__head {
    padding-top: 14px;
    padding-bottom: 8px;
  }

  .sx-case-index__toolbar {
    flex-wrap: wrap;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .sx-case-index__search {
    width: 100%;
  }

  /* Filter chips and the sort button share one wrapping row */
  .sx-case-index__toolbar {
    gap: 6px;
  }

  .sx-case-index__filters {
    display: contents;
  }

  .sx-case-index__sort {
    margin-left: 0;
  }

  .sx-case-index__drop--end-sm > .sx-case-index__menu {
    left: auto;
    right: 0;
    --sx-pop-origin: top right;
  }

  .sx-case-index:not([data-layout="split"]) .sx-case-index__table {
    padding: 10px 10px 88px;
    background: var(--sx-surface-2);
  }

  .sx-case-index__row--head {
    display: none;
  }

  .sx-case-index:not([data-layout="split"]) .sx-case-index__rows {
    gap: 8px;
  }

  .sx-case-index:not([data-layout="split"]) .sx-case-index__rows > .sx-case-index__row {
    grid-template-columns: 32px auto auto auto minmax(0, 1fr);
    grid-template-areas:
      "check ticket ticket ticket ticket"
      ".     status prio   who    sla";
    row-gap: 8px;
    padding: 12px 12px 12px 4px;
    border-radius: var(--sx-r-xl);
    background-color: var(--sx-card-bg);
    box-shadow: var(--sx-card-shadow);
  }

  .sx-case-index:not([data-layout="split"]) .sx-case-index__rows > .sx-case-index__row + .sx-case-index__row {
    box-shadow: var(--sx-card-shadow);
  }

  .sx-case-index__cell {
    padding: 0 4px;
  }

  .sx-case-index__cell--check { grid-area: check; align-self: start; padding-top: 1px; }
  .sx-case-index__cell--ticket { grid-area: ticket; padding-top: 0; padding-bottom: 0; }
  .sx-case-index__cell--status { grid-area: status; }
  .sx-case-index__cell--prio { grid-area: prio; }
  .sx-case-index__cell--assignee { grid-area: who; }
  .sx-case-index__cell--sla { grid-area: sla; justify-content: flex-end; }

  .sx-case-index:not([data-layout="split"]) .sx-case-index__subject {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .sx-case-index__preview {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }

  .sx-case-index__bulk {
    --tl-bulk-x: 0px;
    left: 10px;
    right: 10px;
    bottom: 56px;
    justify-content: space-between;
    padding-left: 12px;
  }

  .sx-case-index__bulk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sx-case-index__bulk .sx-btn--ghost {
    --_px: 7px;
  }

  .sx-case-index__form {
    width: min(320px, calc(100cqi - 28px));
  }

  .sx-case-index__pager > span {
    display: none;
  }
}

/* ==========================================================================
   Board: a lane per status. Lanes are not positioned, so the board is every card's offset parent
   and cards can FLIP from one lane to another.
   ========================================================================== */
.sx-case-index__board {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 0;
  padding: 14px var(--tl-pad-x) 76px;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-case-index[data-layout="board"] .sx-case-index__foot {
  display: none;
}

.sx-case-index[data-layout="board"] .sx-case-index__bulk {
  bottom: 16px;
}

/* Lanes fill the visible board and grow with their cards (the board scrolls). */
.sx-case-index__lane {
  display: flex;
  flex: 1 0 224px;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  padding: 8px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-fill);
}

.sx-case-index__lane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 26px;
  padding: 0 4px 0 6px;
}

.sx-case-index__lane-head h2 {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-index__lane-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--sx-r-pill);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
}

.sx-case-index__cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sx-case-index__card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 9px 10px 10px;
  border-radius: var(--sx-r-lg);
  background-color: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
  cursor: pointer;
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-case-index__card:hover {
  box-shadow: var(--sx-shadow-2);
}

.sx-case-index__card[data-selected] {
  background-image: linear-gradient(var(--sx-accent-soft), var(--sx-accent-soft));
  box-shadow: inset 0 0 0 1px var(--sx-accent-line), var(--sx-card-shadow);
}

.sx-case-index__card[aria-current="true"] {
  box-shadow: 0 0 0 2px var(--sx-accent-line), var(--sx-shadow-2);
}

.sx-case-index__card[data-new] {
  animation: tl-arrive 2s var(--sx-ease-out) both;
}

.sx-case-index__card[data-flash] {
  animation: tl-flash 1.6s var(--sx-ease-out) both;
}

.sx-case-index__card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-case-index__card-top .sx-case-index__prio {
  font-size: var(--sx-fs-xs);
}

.sx-case-index__card-btn {
  margin: -4px -4px -4px auto;
}

.sx-case-index__card .sx-case-index__subject {
  display: -webkit-box;
  white-space: normal;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.sx-case-index__card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sx-case-index__customer {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-case-index__more {
  align-self: center;
}

.sx-case-index__lane-empty {
  padding: 18px 8px;
  font-size: var(--sx-fs-xs);
  text-align: center;
  color: var(--sx-muted);
}

.sx-case-index__menu.sx-case-index__card-menu {
  top: var(--tl-menu-y, 0px);
  left: var(--tl-menu-x, 0px);
  width: 212px;
  --sx-pop-origin: top right;
}

/* ==========================================================================
   Split view: compact rows, the preview always open beside them
   ========================================================================== */
.sx-case-index[data-layout="split"] .sx-case-index__main {
  grid-template-columns: minmax(0, 1fr) var(--tl-split-w);
  grid-template-areas:
    "list preview"
    "foot preview";
}

.sx-case-index[data-layout="split"] .sx-case-index__table { grid-area: list; }
.sx-case-index[data-layout="split"] .sx-case-index__foot { grid-area: foot; }

.sx-case-index[data-layout="split"] .sx-case-index__preview,
.sx-case-index[data-layout="split"] .sx-case-index__preview[data-open] {
  position: relative;
  z-index: auto;
  inset: auto;
  grid-area: preview;
  width: auto;
  min-height: 0;
  border-radius: 0;
  background: var(--sx-surface-2);
  box-shadow: inset 1px 0 0 var(--sx-line-soft), inset 0 1px 0 var(--sx-line-soft);
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
}

.sx-case-index[data-layout="split"] .sx-case-index__preview-head > .sx-btn {
  display: none;
}

.sx-case-index[data-layout="split"] .sx-case-index__preview-head {
  min-height: 42px;
  padding-top: 14px;
}

.sx-case-index[data-layout="split"] .sx-case-index__bulk {
  left: calc((100% - var(--tl-split-w)) / 2);
}

.sx-case-index[data-layout="split"] .sx-case-index__row--head {
  display: none;
}

.sx-case-index[data-layout="split"] .sx-case-index__table {
  padding-top: 6px;
}

.sx-case-index[data-layout="split"] .sx-case-index__rows > .sx-case-index__row {
  grid-template-columns: 36px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "check ticket sla"
    "check ticket updated";
  row-gap: 2px;
  min-height: 0;
  padding: 8px 6px 8px 0;
}

.sx-case-index[data-layout="split"] .sx-case-index__cell--check { grid-area: check; }
.sx-case-index[data-layout="split"] .sx-case-index__cell--ticket { grid-area: ticket; padding-top: 0; padding-bottom: 0; }
.sx-case-index[data-layout="split"] .sx-case-index__cell--sla { grid-area: sla; justify-content: flex-end; }
.sx-case-index[data-layout="split"] .sx-case-index__cell--updated { grid-area: updated; justify-content: flex-end; font-size: var(--sx-fs-xs); }

.sx-case-index[data-layout="split"] :is(.sx-case-index__cell--status, .sx-case-index__cell--prio, .sx-case-index__cell--channel, .sx-case-index__cell--assignee) {
  display: none;
}

.sx-case-index[data-layout="split"] .sx-case-index__rows > .sx-case-index__row[aria-current="true"] {
  background-color: var(--sx-fill-strong);
  box-shadow: inset 2px 0 0 var(--sx-accent);
}

.sx-case-index[data-layout="split"] .sx-case-index__rows > .sx-case-index__row[aria-current="true"] + .sx-case-index__row {
  box-shadow: none;
}

@container case-index (max-width: 840px) {
  .sx-case-index__main,
  .sx-case-index__bulk {
    --tl-split-w: 320px;
  }

  .sx-case-index[data-layout="split"] .sx-case-index__cell--updated {
    display: flex;
  }
}

@container case-index (max-width: 640px) {
  .sx-case-index__board {
    padding: 10px 10px 80px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 10px;
  }

  .sx-case-index__lane {
    flex-basis: 84%;
    scroll-snap-align: start;
  }

  .sx-case-index[data-layout="split"] .sx-case-index__main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr) auto;
    grid-template-areas: "list" "preview" "foot";
  }

  .sx-case-index[data-layout="split"] .sx-case-index__preview,
  .sx-case-index[data-layout="split"] .sx-case-index__preview[data-open] {
    box-shadow: inset 0 1px 0 var(--sx-line), 0 -6px 16px -12px var(--sx-overlay);
  }

  .sx-case-index[data-layout="split"] .sx-case-index__table {
    padding-bottom: 10px;
  }

  .sx-case-index[data-layout="split"] .sx-case-index__bulk {
    left: 10px;
  }
}

@keyframes tl-arrive {
  0% { background-color: var(--sx-accent-soft); }
  60% { background-color: var(--sx-accent-soft); }
}

@keyframes tl-flash {
  0% { background-color: var(--sx-success-soft); }
}

@keyframes tl-bump {
  40% { transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-case-index__tab-count[data-bump] {
    animation: none;
  }

  .sx-case-index__preview,
  .sx-case-index__preview[data-open] {
    transform: none;
  }

  .sx-case-index__bulk,
  .sx-case-index__bulk[data-open] {
    transform: translate(var(--tl-bulk-x, -50%), 0);
  }

  .sx-case-index__preview {
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
  }

  .sx-case-index__preview[data-open] {
    opacity: 1;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s;
  }
}


/* ---- Checkout Counter (checkout-counter) ---- */
/* ==========================================================================
   Checkout Counter — a full-screen point of sale (template, no Product Frame)
   .sx-checkout-counter is a size container: the layout follows the register, not the window.
     wide         products on the left, the cart as a panel on the right
     <= 1100px    a narrower cart
     <= 900px     the cart becomes a bottom sheet under a summary bar (data-sheet="open")
     <= 560px     compact top bar and two product columns
   State on the root: data-stage="cart | pay | paid | receipt", data-method="cash | qris | card",
   data-sheet="open". Numbers use Digit Roll; the category and payment controls use Segment Rail.
   ========================================================================== */

.sx-checkout-counter {
  container: checkout-counter / inline-size;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: var(--sx-shell);
}

.sx-checkout-counter__layout {
  --pos-cart-w: 376px;
  --pos-gap: 8px;
  --pos-pad: 20px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pos-cart-w);
  height: 100%;
  min-height: 0;
}

/* ---------- Products ---------- */
.sx-checkout-counter__shop {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
}

.sx-checkout-counter__top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 62px;
  padding: 0 var(--pos-pad);
}

.sx-checkout-counter__brand,
.sx-checkout-counter__cashier {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-checkout-counter__logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-md);
  font-weight: 700;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-checkout-counter__brand-text,
.sx-checkout-counter__cashier-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sx-checkout-counter__brand-text b,
.sx-checkout-counter__cashier-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-checkout-counter__brand-text b {
  font-size: var(--sx-fs-md);
}

.sx-checkout-counter__brand-text small,
.sx-checkout-counter__cashier-text small,
.sx-checkout-counter__clock small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-checkout-counter__top-end {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.sx-checkout-counter__clock {
  display: grid;
  justify-items: end;
  line-height: 1.25;
}

.sx-checkout-counter__clock b {
  font-size: var(--sx-fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__divider {
  width: 1px;
  height: 28px;
  background: var(--sx-line);
}

.sx-checkout-counter__cashier .sx-avatar {
  --sx-avatar-size: 32px;
  --sx-avatar-bg: color-mix(in srgb, var(--sx-c3) 18%, var(--sx-surface));
  --sx-avatar-ink: color-mix(in srgb, var(--sx-c3) 60%, var(--sx-ink));
}

.sx-checkout-counter__cashier .sx-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 9px;
  height: 9px;
  color: var(--sx-success);
  box-shadow: 0 0 0 2px var(--sx-shell);
}

.sx-checkout-counter__tools {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 2px var(--pos-pad) 14px;
}

.sx-checkout-counter__search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  color: var(--sx-muted);
  --sx-icon-size: 15px;
}

.sx-checkout-counter__search > .sx-icon {
  position: absolute;
  left: 11px;
  pointer-events: none;
}

.sx-checkout-counter__search .sx-input {
  height: 36px;
  padding: 0 34px 0 34px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-checkout-counter__search .sx-input:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-checkout-counter__search .sx-input:focus {
  box-shadow: var(--sx-focus-ring);
}

.sx-checkout-counter__search .sx-kbd {
  position: absolute;
  right: 9px;
  pointer-events: none;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-checkout-counter__search .sx-input:not(:placeholder-shown) ~ .sx-kbd,
.sx-checkout-counter__search .sx-input:focus ~ .sx-kbd {
  opacity: 0;
}

.sx-checkout-counter__cats {
  flex: none;
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sx-checkout-counter__cats::-webkit-scrollbar {
  display: none;
}

.sx-checkout-counter__cats .sx-segment-rail {
  --sb-h: 36px;
  border-radius: var(--sx-r-lg);
}

.sx-checkout-counter__cats .sx-segment-rail__option {
  padding: 0 13px;
  font-size: var(--sx-fs-base);
}

.sx-checkout-counter__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  align-content: start;
  gap: 12px;
  min-height: 0;
  padding: 4px var(--pos-pad) var(--pos-pad);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sx-checkout-counter__tile {
  --tone: var(--sx-c1);
  --tone-soft: color-mix(in srgb, var(--tone) 30%, var(--sx-surface));
  --tone-mid: color-mix(in srgb, var(--tone) 62%, var(--sx-surface));
  --tone-deep: color-mix(in srgb, var(--tone) 82%, var(--sx-ink));
  position: relative;
  display: grid;
  align-content: start;
  gap: 9px;
  min-width: 0;
  padding: 6px 6px 11px;
  text-align: left;
  border-radius: var(--sx-r-xl);
  transition:
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-checkout-counter__tile:hover:not(:disabled) {
  box-shadow: var(--sx-shadow-2);
}

.sx-checkout-counter__tile:active:not(:disabled) {
  transform: scale(0.98);
}

.sx-checkout-counter__tile:disabled {
  cursor: not-allowed;
}

.sx-checkout-counter__tile:disabled .sx-checkout-counter__art {
  filter: grayscale(1);
  opacity: 0.55;
}

/* A short press pulse whenever a product goes into the cart; a/b restarts it for the same tile */
.sx-checkout-counter__tile[data-tap="a"] {
  animation: pos-tap-a var(--sx-dur-4) var(--sx-ease-out);
}

.sx-checkout-counter__tile[data-tap="b"] {
  animation: pos-tap-b var(--sx-dur-4) var(--sx-ease-out);
}

.sx-checkout-counter__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: calc(var(--sx-r-xl) - 5px);
  background:
    radial-gradient(90% 80% at 50% 105%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--tone) 13%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 10%, transparent);
  transition: filter var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-checkout-counter__art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Product shapes, drawn from the tile tone ---------- */
.sx-checkout-counter__shape {
  position: relative;
  display: block;
}

.sx-checkout-counter__shape::before,
.sx-checkout-counter__shape::after {
  content: "";
  position: absolute;
}

/* Hot drink: cup, handle and saucer */
.sx-checkout-counter__shape[data-shape="cup"] {
  width: 44px;
  height: 32px;
  margin: 8px 10px 0 0;
  border-radius: 5px 5px 17px 17px;
  background: var(--tone-mid);
  box-shadow: inset 0 6px 0 var(--tone-deep), inset 0 -2px 0 color-mix(in srgb, var(--tone-deep) 40%, transparent);
}

.sx-checkout-counter__shape[data-shape="cup"]::before {
  top: 8px;
  right: -12px;
  width: 15px;
  height: 15px;
  border: 4px solid var(--tone-mid);
  border-left: 0;
  border-radius: 0 10px 10px 0;
}

.sx-checkout-counter__shape[data-shape="cup"]::after {
  left: -11px;
  right: -11px;
  bottom: -7px;
  height: 7px;
  border-radius: var(--sx-r-pill);
  background: var(--tone-soft);
}

/* Iced drink: glass, ice and a straw */
.sx-checkout-counter__shape[data-shape="glass"] {
  width: 32px;
  height: 46px;
  margin-top: 12px;
  border-radius: 3px 3px 9px 9px;
  background:
    linear-gradient(to top, var(--tone-mid) 0 64%, color-mix(in srgb, var(--tone) 10%, var(--sx-surface)) 64% 100%);
  box-shadow: inset 0 0 0 2px var(--tone-soft);
}

.sx-checkout-counter__shape[data-shape="glass"]::before {
  top: -16px;
  left: 18px;
  width: 4px;
  height: 30px;
  border-radius: 2px;
  background: var(--tone-deep);
  transform: rotate(14deg);
  transform-origin: bottom center;
}

.sx-checkout-counter__shape[data-shape="glass"]::after {
  top: 19px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--sx-surface) 72%, transparent);
  box-shadow: 10px 7px 0 -1px color-mix(in srgb, var(--sx-surface) 60%, transparent);
}

/* Food: a pastry on a plate */
.sx-checkout-counter__shape[data-shape="plate"] {
  width: 50px;
  height: 24px;
  margin-top: 14px;
  border-radius: 26px 26px 7px 7px;
  background: var(--tone-mid);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--tone-deep) 55%, transparent);
}

.sx-checkout-counter__shape[data-shape="plate"]::before {
  top: 6px;
  left: 12px;
  width: 15px;
  height: 5px;
  border-radius: var(--sx-r-pill);
  background: color-mix(in srgb, var(--sx-surface) 55%, transparent);
}

.sx-checkout-counter__shape[data-shape="plate"]::after {
  left: -14px;
  right: -14px;
  bottom: -8px;
  height: 8px;
  border-radius: var(--sx-r-pill);
  background: var(--tone-soft);
}

/* Merchandise: a tumbler with a lid and a band */
.sx-checkout-counter__shape[data-shape="tumbler"] {
  width: 28px;
  height: 50px;
  margin-top: 14px;
  border-radius: 6px 6px 10px 10px;
  background: var(--tone-mid);
}

.sx-checkout-counter__shape[data-shape="tumbler"]::before {
  top: -7px;
  left: -3px;
  right: -3px;
  height: 10px;
  border-radius: 5px;
  background: var(--tone-deep);
}

.sx-checkout-counter__shape[data-shape="tumbler"]::after {
  top: 18px;
  left: 0;
  right: 0;
  height: 9px;
  background: color-mix(in srgb, var(--sx-surface) 55%, var(--tone));
}

/* Merchandise: a tote bag */
.sx-checkout-counter__shape[data-shape="bag"] {
  width: 44px;
  height: 38px;
  margin-top: 18px;
  border-radius: 4px 4px 8px 8px;
  background: var(--tone-mid);
}

.sx-checkout-counter__shape[data-shape="bag"]::before {
  top: -16px;
  left: 10px;
  right: 10px;
  height: 20px;
  border: 4px solid var(--tone-deep);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
}

.sx-checkout-counter__shape[data-shape="bag"]::after {
  left: 50%;
  bottom: 9px;
  width: 16px;
  height: 8px;
  margin-left: -8px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sx-surface) 60%, var(--tone));
}

.sx-checkout-counter__tile-text {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 0 6px;
  line-height: 1.35;
}

.sx-checkout-counter__tile-name {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-checkout-counter__tile-price {
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__stock {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--sx-surface);
}

.sx-checkout-counter__in-cart {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

@starting-style {
  .sx-checkout-counter__in-cart {
    opacity: 0;
    transform: scale(0.4);
  }
}

.sx-checkout-counter__tile[data-tap="a"] .sx-checkout-counter__in-cart {
  animation: pos-bump-a var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-checkout-counter__tile[data-tap="b"] .sx-checkout-counter__in-cart {
  animation: pos-bump-b var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-checkout-counter__none {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--sx-muted);
}

/* ---------- Cart panel ---------- */
.sx-checkout-counter__cart {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  margin: var(--pos-gap) var(--pos-gap) var(--pos-gap) 0;
  overflow: hidden;
  border-radius: var(--sx-r-xl);
  background-color: var(--sx-panel);
  background-image: var(--sx-panel-wash);
  background-repeat: no-repeat;
  box-shadow: var(--sx-shadow-1);
}

.sx-checkout-counter__sheet-head {
  display: none;
  grid-row: 1;
}

.sx-checkout-counter__order {
  grid-row: 2;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 0;
}

.sx-checkout-counter__cart-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 12px 12px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-checkout-counter__customer {
  position: relative;
  flex: 1;
  min-width: 0;
}

.sx-checkout-counter__customer-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 46px;
  padding: 0 10px 0 8px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-checkout-counter__customer-btn:hover {
  background: var(--sx-raised-hover);
}

.sx-checkout-counter__customer-btn > .sx-icon {
  --sx-icon-size: 15px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-checkout-counter__customer-btn[aria-expanded="true"] > .sx-icon {
  transform: rotate(180deg);
}

.sx-checkout-counter__customer .sx-avatar {
  --sx-avatar-size: 30px;
  --sx-icon-size: 15px;
}

.sx-checkout-counter__customer-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-checkout-counter__customer-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-checkout-counter__customer-text small {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-checkout-counter__menu {
  position: absolute;
  z-index: var(--sx-z-pop);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  --sx-pop-origin: top left;
}

.sx-checkout-counter__menu .sx-menu__item {
  min-height: 42px;
  gap: 10px;
}

.sx-checkout-counter__menu .sx-menu__item > .sx-icon:last-child {
  margin-left: auto;
  color: var(--sx-ink);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-checkout-counter__menu .sx-menu__item[aria-selected="true"] > .sx-icon:last-child {
  opacity: 1;
}

.sx-checkout-counter__menu .sx-menu__item:focus-visible {
  outline-offset: -2px;
}

.sx-checkout-counter__menu .sx-avatar {
  --sx-avatar-size: 26px;
  --sx-icon-size: 14px;
}

.sx-checkout-counter__lines {
  position: relative;
  min-height: 0;
  padding: 4px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sx-checkout-counter__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 24px;
  text-align: center;
  color: var(--sx-muted);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear 0s;
}

.sx-checkout-counter__empty b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-checkout-counter__empty-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: 18px;
}

.sx-checkout-counter__lines:has(.sx-checkout-counter__line:not([data-leaving])) .sx-checkout-counter__empty {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), visibility 0s linear var(--sx-dur-1);
}

/* Each line grows in (grid rows 0fr -> 1fr) and folds away when removed */
.sx-checkout-counter__line {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

@starting-style {
  .sx-checkout-counter__line {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.sx-checkout-counter__line[data-leaving] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--sx-dur-2);
}

.sx-checkout-counter__line-clip {
  min-height: 0;
  overflow: hidden;
}

.sx-checkout-counter__line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 80px auto;
  align-items: center;
  gap: 8px;
  padding: 11px 4px 11px 8px;
}

.sx-checkout-counter__line + .sx-checkout-counter__line .sx-checkout-counter__line-row {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-checkout-counter__line-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-checkout-counter__line-text b {
  font-weight: var(--sx-strong-weight);
  text-wrap: pretty;
}

.sx-checkout-counter__line-text small {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__stepper {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 2px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-checkout-counter__step {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.2;
}

.sx-checkout-counter__step:hover:not(:disabled) {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-checkout-counter__step:active:not(:disabled) {
  transform: scale(0.92);
}

.sx-checkout-counter__step:disabled {
  opacity: 0.35;
}

.sx-checkout-counter__qty {
  min-width: 26px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__line-total {
  justify-self: end;
  font-weight: var(--sx-strong-weight);
}

.sx-checkout-counter__remove {
  color: var(--sx-muted);
}

.sx-checkout-counter__remove:hover {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

/* ---------- Checkout ---------- */
.sx-checkout-counter__checkout {
  display: grid;
  gap: 12px;
  padding: 14px 16px 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

/* The code form and the applied code share one cell, so switching never moves the layout */
.sx-checkout-counter__discount {
  display: grid;
}

.sx-checkout-counter__discount > * {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear 0s;
}

.sx-checkout-counter__discount > [hidden] {
  display: flex !important;
  opacity: 0;
  transform: translateY(3px);
  visibility: hidden;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-1) var(--sx-ease-out), visibility 0s linear var(--sx-dur-1);
}

.sx-checkout-counter__code {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--sx-muted);
  --sx-icon-size: 14px;
}

.sx-checkout-counter__code > .sx-icon {
  position: absolute;
  left: 10px;
  pointer-events: none;
}

.sx-checkout-counter__code .sx-input {
  flex: 1;
  min-width: 0;
  height: var(--sx-h-md);
  padding-left: 31px;
  text-transform: uppercase;
}

.sx-checkout-counter__code .sx-input::placeholder {
  text-transform: none;
}

.sx-checkout-counter__code[data-state="error"] .sx-input {
  padding-right: 108px;
  animation: sx-shake 0.42s var(--sx-ease-out);
}

.sx-checkout-counter__code-msg {
  position: absolute;
  right: 78px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--sx-fs-xs);
  font-weight: 500;
  color: var(--sx-danger-ink);
  pointer-events: none;
  --sx-icon-size: 12px;
}

.sx-checkout-counter__code:not([data-state="error"]) .sx-checkout-counter__code-msg {
  opacity: 0;
}

.sx-checkout-counter__applied {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--sx-h-md);
  padding: 0 4px 0 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 14px;
}

.sx-checkout-counter__applied b {
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
}

.sx-checkout-counter__applied span {
  flex: 1;
  min-width: 0;
  color: var(--sx-ink-2);
}

.sx-checkout-counter__applied .sx-btn {
  color: var(--sx-success-ink);
}

.sx-checkout-counter__sums {
  display: grid;
}

.sx-checkout-counter__sum {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 20px;
  color: var(--sx-muted);
}

.sx-checkout-counter__sum + .sx-checkout-counter__sum,
.sx-checkout-counter__sum-fold + .sx-checkout-counter__sum {
  margin-top: 6px;
}

.sx-checkout-counter__sum small {
  margin-left: 4px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-faint);
}

.sx-checkout-counter__sum .sx-digit-roll {
  color: var(--sx-ink-2);
}

.sx-checkout-counter__sum-fold {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-checkout-counter__sum-fold[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
}

.sx-checkout-counter__sum-fold > div {
  min-height: 0;
  overflow: hidden;
}

.sx-checkout-counter__sum-fold .sx-checkout-counter__sum {
  margin-top: 6px;
}

.sx-checkout-counter__sum-fold .sx-digit-roll {
  color: var(--sx-success-ink);
}

.sx-checkout-counter__sum--total {
  align-items: center;
  margin-top: 10px !important;
  padding-top: 10px;
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-checkout-counter__sum--total .sx-digit-roll {
  font-size: 22px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  color: var(--sx-ink);
}

.sx-checkout-counter__method .sx-segment-rail {
  --sb-h: 38px;
  border-radius: var(--sx-r-lg);
}

.sx-checkout-counter__method .sx-segment-rail__option {
  font-size: var(--sx-fs-base);
}

.sx-checkout-counter__method .sx-segment-rail__option > .sx-icon {
  --sx-icon-size: 15px;
}

/* Cash, QRIS and Card notes share one cell too */
.sx-checkout-counter__tender {
  display: grid;
  min-height: 62px;
}

.sx-checkout-counter__tender > * {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear 0s;
}

.sx-checkout-counter:not([data-method="cash"]) .sx-checkout-counter__cash,
.sx-checkout-counter:not([data-method="qris"]) .sx-checkout-counter__tender-note[data-for="qris"],
.sx-checkout-counter:not([data-method="card"]) .sx-checkout-counter__tender-note[data-for="card"] {
  opacity: 0;
  transform: translateY(4px);
  visibility: hidden;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out), transform var(--sx-dur-1) var(--sx-ease-out), visibility 0s linear var(--sx-dur-1);
}

.sx-checkout-counter__cash {
  display: grid;
  gap: 8px;
}

.sx-checkout-counter__quick {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.sx-checkout-counter__quick .sx-btn {
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__quick .sx-btn[aria-pressed="true"],
.sx-checkout-counter__quick .sx-btn[aria-pressed="true"]:hover {
  color: var(--sx-accent-ink);
  background-color: var(--sx-accent-soft);
  border-color: var(--sx-accent-line);
  box-shadow: none;
}

.sx-checkout-counter__change {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--sx-muted);
}

.sx-checkout-counter__change .sx-digit-roll {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-checkout-counter__tender-note {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  line-height: 1.4;
  --sx-icon-size: 18px;
}

.sx-checkout-counter__tender-note > .sx-icon {
  color: var(--sx-muted);
}

.sx-checkout-counter__charge {
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-lg);
  font-weight: 600;
}

.sx-checkout-counter__charge .sx-digit-roll {
  font-size: 17px;
}

/* ---------- Payment and receipt views (over the cart) ---------- */
.sx-checkout-counter__order,
.sx-checkout-counter__pay,
.sx-checkout-counter__receipt {
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear 0s;
}

.sx-checkout-counter__pay,
.sx-checkout-counter__receipt {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  min-height: 0;
  background-color: var(--sx-panel);
}

.sx-checkout-counter:not([data-stage="cart"]) .sx-checkout-counter__order,
.sx-checkout-counter:not([data-stage="pay"]):not([data-stage="paid"]) .sx-checkout-counter__pay,
.sx-checkout-counter:not([data-stage="receipt"]) .sx-checkout-counter__receipt {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-checkout-counter:not([data-stage="cart"]) .sx-checkout-counter__order {
  transform: translateX(-24px);
}

.sx-checkout-counter[data-stage="cart"] .sx-checkout-counter__pay {
  transform: translateX(40px);
}

.sx-checkout-counter:not([data-stage="receipt"]) .sx-checkout-counter__receipt {
  transform: translateY(18px);
}

.sx-checkout-counter__pay {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sx-checkout-counter__view-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 58px;
  padding: 0 12px;
  font-weight: var(--sx-strong-weight);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-checkout-counter__view-head .sx-chip {
  margin-left: auto;
}

.sx-checkout-counter__pay-body {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 14px;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
  text-align: center;
}

.sx-checkout-counter__pay-label {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-checkout-counter__pay-amount {
  margin-top: -10px;
  font-size: 30px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__qr {
  position: relative;
  width: 196px;
  height: 196px;
  padding: 12px;
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-2);
}

.sx-checkout-counter__qr-code {
  width: 100%;
  height: 100%;
  fill: currentColor;
  transition: opacity var(--sx-dur-4) var(--sx-ease-out), filter var(--sx-dur-4) var(--sx-ease-out);
}

.sx-checkout-counter__qr-logo {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 9px;
  font-size: var(--sx-fs-md);
  font-weight: 700;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: 0 0 0 4px var(--sx-surface);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

/* A light line sweeps over the code while it waits */
.sx-checkout-counter__qr-scan {
  position: absolute;
  inset: 12px;
  overflow: hidden;
  pointer-events: none;
}

.sx-checkout-counter__qr-scan::before {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  top: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--sx-accent);
  box-shadow: 0 0 10px 2px var(--sx-accent-line);
  animation: pos-scan 2.4s var(--sx-ease-in-out) infinite alternate;
}

.sx-checkout-counter__qr-done,
.sx-checkout-counter__reader-done {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-4) var(--sx-ease-spring);
}

.sx-checkout-counter__qr-done > span {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line), 0 0 0 6px var(--sx-surface);
  --sx-icon-size: 30px;
  --sx-icon-stroke: 2.4;
}

.sx-checkout-counter[data-stage="paid"] .sx-checkout-counter__qr-code {
  opacity: 0.12;
  filter: blur(1.5px);
}

.sx-checkout-counter[data-stage="paid"] .sx-checkout-counter__qr-logo,
.sx-checkout-counter[data-stage="paid"] .sx-checkout-counter__qr-scan {
  opacity: 0;
}

.sx-checkout-counter[data-stage="paid"] :is(.sx-checkout-counter__qr-done, .sx-checkout-counter__reader-done) {
  opacity: 1;
  transform: none;
}

/* Card reader drawing: a terminal, a card that taps on it, and contactless waves */
.sx-checkout-counter__reader {
  position: relative;
  width: 196px;
  height: 196px;
}

.sx-checkout-counter__terminal {
  position: absolute;
  left: 52px;
  bottom: 4px;
  width: 92px;
  height: 132px;
  border-radius: 18px;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
}

.sx-checkout-counter__terminal::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 62px;
  height: 54px;
  background: radial-gradient(circle, var(--sx-line-strong) 3px, transparent 3.5px) 0 0 / calc(100% / 3) calc(100% / 3);
}

.sx-checkout-counter__terminal-screen {
  position: absolute;
  top: 12px;
  left: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  height: 40px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
}

.sx-checkout-counter__card {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 64px;
  width: 70px;
  height: 46px;
  border-radius: 8px;
  background: var(--sx-accent-bg);
  box-shadow: var(--sx-shadow-accent), var(--sx-inset-highlight);
  animation: pos-card-tap 2s var(--sx-ease-in-out) infinite;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-checkout-counter__card::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 10px;
  width: 13px;
  height: 10px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sx-warning) 70%, var(--sx-surface));
}

.sx-checkout-counter__card::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 18px;
  bottom: 9px;
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--sx-surface) 55%, transparent);
}

.sx-checkout-counter__waves {
  position: absolute;
  top: 2px;
  left: 142px;
  width: 30px;
  height: 40px;
}

.sx-checkout-counter__waves::before,
.sx-checkout-counter__waves::after {
  content: "";
  position: absolute;
  top: 50%;
  border: 2px solid var(--sx-accent-line);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(45deg);
  animation: pos-wave 2s var(--sx-ease-out) infinite;
}

.sx-checkout-counter__waves::before {
  left: -6px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
}

.sx-checkout-counter__waves::after {
  left: -10px;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  animation-delay: 0.2s;
}

.sx-checkout-counter__reader-done {
  top: 16px;
  bottom: auto;
  left: 62px;
  width: 72px;
  height: 40px;
}

.sx-checkout-counter__reader-done > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 16px;
  --sx-icon-stroke: 2.4;
}

.sx-checkout-counter[data-stage="paid"] :is(.sx-checkout-counter__card, .sx-checkout-counter__waves) {
  opacity: 0;
  animation-play-state: paused;
}

.sx-checkout-counter[data-stage="paid"] .sx-checkout-counter__terminal-screen > span {
  opacity: 0;
}

.sx-checkout-counter__pay-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  font-weight: 500;
  --sx-icon-size: 16px;
}

.sx-checkout-counter__pay-status .sx-spinner {
  color: var(--sx-muted);
}

.sx-checkout-counter[data-stage="paid"] .sx-checkout-counter__pay-status {
  color: var(--sx-success-ink);
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-checkout-counter__pay-hint {
  margin-top: -8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__view-foot {
  display: flex;
  gap: 8px;
  padding: 14px 16px 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-checkout-counter__view-foot > .sx-btn--primary {
  flex: 1;
}

/* Receipt */
.sx-checkout-counter__receipt {
  grid-template-rows: minmax(0, 1fr) auto;
}

.sx-checkout-counter__receipt-scroll {
  display: grid;
  align-content: start;
  gap: 16px;
  min-height: 0;
  padding: 22px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sx-checkout-counter__done {
  display: grid;
  justify-items: center;
  gap: 2px;
  text-align: center;
}

.sx-checkout-counter__done-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 22px;
  --sx-icon-stroke: 2.4;
}

.sx-checkout-counter[data-stage="receipt"] .sx-checkout-counter__done-icon {
  animation: pos-pop var(--sx-dur-4) var(--sx-ease-spring) 80ms both;
}

.sx-checkout-counter__done h3 {
  font-size: var(--sx-fs-lg);
}

.sx-checkout-counter__done p {
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

/* The paper comes out of a slot */
.sx-checkout-counter__slot {
  padding: 10px 12px 0;
  border-radius: var(--sx-r-xl);
  background: var(--sx-fill);
  box-shadow: inset 0 1px 2px var(--sx-line);
}

.sx-checkout-counter__paper {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 16px 16px 24px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-surface);
  border-radius: 4px 4px 0 0;
  -webkit-mask:
    linear-gradient(black 0 0) top / 100% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, transparent 0deg, black 1deg 89deg, transparent 90deg) bottom / 12px 7px repeat-x;
  mask:
    linear-gradient(black 0 0) top / 100% calc(100% - 7px) no-repeat,
    conic-gradient(from -45deg at 50% 100%, transparent 0deg, black 1deg 89deg, transparent 90deg) bottom / 12px 7px repeat-x;
}

.sx-checkout-counter[data-stage="receipt"] .sx-checkout-counter__paper {
  animation: pos-print var(--sx-dur-5) var(--sx-ease-out) 140ms both;
}

.sx-checkout-counter__paper-head {
  display: grid;
  justify-items: center;
  gap: 1px;
  text-align: center;
  color: var(--sx-muted);
}

.sx-checkout-counter__paper-head b {
  margin-bottom: 2px;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-checkout-counter__paper-head .sx-mono {
  color: var(--sx-ink-2);
}

.sx-checkout-counter__paper-items,
.sx-checkout-counter__paper-sums {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 12px 0 0;
  list-style: none;
  background: linear-gradient(to right, var(--sx-line-strong) 50%, transparent 0) top left / 6px 1px repeat-x;
}

.sx-checkout-counter__paper-items li,
.sx-checkout-counter__paper-sums > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.sx-checkout-counter__paper-items li > :last-child,
.sx-checkout-counter__paper-sums dd {
  flex: none;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.sx-checkout-counter__paper-items li > :first-child {
  min-width: 0;
}

.sx-checkout-counter__paper-sums dt {
  color: var(--sx-muted);
}

.sx-checkout-counter__paper-sums .sx-checkout-counter__paper-total {
  padding: 3px 0;
  font-size: var(--sx-fs-md);
  font-weight: 600;
  color: var(--sx-ink);
}

.sx-checkout-counter__paper-total dt {
  color: var(--sx-ink);
}

.sx-checkout-counter__paper-foot {
  padding-top: 12px;
  text-align: center;
  color: var(--sx-muted);
  background: linear-gradient(to right, var(--sx-line-strong) 50%, transparent 0) top left / 6px 1px repeat-x;
}

/* ---------- Narrow screens: summary bar and bottom sheet ---------- */
.sx-checkout-counter__bar,
.sx-checkout-counter__scrim {
  display: none;
}

@container checkout-counter (max-width: 1100px) {
  .sx-checkout-counter__layout {
    --pos-cart-w: 344px;
    --pos-pad: 16px;
  }

  .sx-checkout-counter__cats .sx-segment-rail__option {
    padding: 0 10px;
  }
}

@container checkout-counter (max-width: 900px) {
  .sx-checkout-counter__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
  }

  .sx-checkout-counter__bar {
    position: relative;
    z-index: 20;
    display: block;
    padding: 10px 12px 12px;
    background: var(--sx-shell);
    box-shadow: inset 0 1px 0 var(--sx-line-soft);
  }

  .sx-checkout-counter__bar-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 54px;
    padding: 0 16px;
    border-radius: var(--sx-r-lg);
    font-size: var(--sx-fs-md);
    font-weight: 600;
    text-align: left;
    color: var(--sx-on-primary);
    background: var(--sx-primary-bg);
    box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
    transition: transform var(--sx-dur-2) var(--sx-ease-out);
    --sx-icon-size: 17px;
  }

  .sx-checkout-counter__bar-btn:active {
    transform: scale(0.98);
  }

  .sx-checkout-counter__bar-count {
    flex: 1;
    min-width: 0;
    font-weight: 500;
  }

  .sx-checkout-counter__bar-btn .sx-digit-roll {
    font-size: 17px;
  }

  .sx-checkout-counter__cart {
    position: absolute;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    height: min(92%, 780px);
    margin: 0;
    border-radius: var(--sx-r-2xl) var(--sx-r-2xl) 0 0;
    box-shadow: var(--sx-shadow-pop);
    transform: translateY(104%);
    visibility: hidden;
    transition: transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s linear var(--sx-dur-4);
  }

  .sx-checkout-counter[data-sheet="open"] .sx-checkout-counter__cart,
  .sx-checkout-counter:not([data-stage="cart"]) .sx-checkout-counter__cart {
    transform: none;
    visibility: visible;
    transition: transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s linear 0s;
  }

  .sx-checkout-counter__sheet-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 8px 10px 0 16px;
    font-weight: var(--sx-strong-weight);
  }

  .sx-checkout-counter__sheet-head::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: var(--sx-r-pill);
    background: var(--sx-line-strong);
  }

  .sx-checkout-counter__sheet-head .sx-btn {
    margin-left: auto;
  }

  .sx-checkout-counter__scrim {
    position: absolute;
    inset: 0;
    z-index: 25;
    display: block;
    background: var(--sx-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out);
  }

  .sx-checkout-counter[data-sheet="open"] .sx-checkout-counter__scrim,
  .sx-checkout-counter:not([data-stage="cart"]) .sx-checkout-counter__scrim {
    opacity: 1;
    pointer-events: auto;
  }
}

@container checkout-counter (max-width: 560px) {
  .sx-checkout-counter__layout {
    --pos-pad: 12px;
  }

  .sx-checkout-counter__top {
    gap: 10px;
    height: 56px;
  }

  .sx-checkout-counter__top-end {
    gap: 10px;
  }

  .sx-checkout-counter__cashier-text,
  .sx-checkout-counter__clock small {
    display: none;
  }

  .sx-checkout-counter__tools {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding-bottom: 12px;
  }

  .sx-checkout-counter__cats {
    margin: 0 calc(var(--pos-pad) * -1);
    padding: 0 var(--pos-pad);
  }

  .sx-checkout-counter__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .sx-checkout-counter__stock,
  .sx-checkout-counter__in-cart {
    top: 10px;
  }

  .sx-checkout-counter__stock {
    left: 10px;
  }

  .sx-checkout-counter__in-cart {
    right: 10px;
  }

  .sx-checkout-counter__line-row {
    grid-template-columns: minmax(0, 1fr) auto 76px auto;
    gap: 6px;
  }
}

/* ---------- Keyframes ---------- */
@keyframes pos-tap-a {
  35% { transform: scale(0.965); box-shadow: var(--sx-card-shadow), 0 0 0 4px var(--sx-accent-soft); }
}

@keyframes pos-tap-b {
  35% { transform: scale(0.965); box-shadow: var(--sx-card-shadow), 0 0 0 4px var(--sx-accent-soft); }
}

@keyframes pos-bump-a {
  40% { transform: scale(1.25); }
}

@keyframes pos-bump-b {
  40% { transform: scale(1.25); }
}

@keyframes pos-scan {
  to { transform: translateY(170px); }
}

@keyframes pos-card-tap {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  45%, 60% { transform: translateY(28px) rotate(-8deg); }
}

@keyframes pos-wave {
  0%, 30% { opacity: 0; }
  55% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes pos-pop {
  from { opacity: 0; transform: scale(0.5); }
}

@keyframes pos-print {
  from { clip-path: inset(0 0 100% 0); transform: translateY(-14px); }
}

@media (prefers-reduced-motion: reduce) {
  .sx-checkout-counter__tile[data-tap],
  .sx-checkout-counter__tile[data-tap] .sx-checkout-counter__in-cart,
  .sx-checkout-counter__code[data-state="error"] .sx-input,
  .sx-checkout-counter__qr-scan::before,
  .sx-checkout-counter__card,
  .sx-checkout-counter__waves::before,
  .sx-checkout-counter__waves::after {
    animation: none;
  }

  .sx-checkout-counter__qr-scan {
    display: none;
  }

  .sx-checkout-counter:not([data-stage="cart"]) .sx-checkout-counter__order,
  .sx-checkout-counter[data-stage="cart"] .sx-checkout-counter__pay,
  .sx-checkout-counter:not([data-stage="receipt"]) .sx-checkout-counter__receipt,
  .sx-checkout-counter__discount > [hidden],
  .sx-checkout-counter__tender > * {
    transform: none !important;
  }

  .sx-checkout-counter[data-stage="receipt"] .sx-checkout-counter__paper,
  .sx-checkout-counter[data-stage="receipt"] .sx-checkout-counter__done-icon {
    animation-name: sx-fade-in;
  }

  .sx-checkout-counter__line {
    transition-property: opacity;
  }
}


/* ---- Floor Display (floor-display) ---- */
/* ==========================================================================
   Floor Display — the support floor on a TV (full-screen template, no Product Frame)
   Root .sx-floor-display is a size container and scrolls inside; .sx-floor-display__layout is the grid
   the container rules rearrange. Type scales with the board's width (cqw, clamped).
     Root:                 data-layout="overview | numbers | agents | queue" (missing = overview)
     KPI tiles and queues: data-level="ok | warning | danger"
     Agents:               data-status="available | busy | away | offline"
     Feed lines:           data-tone="new | done | status | alert"
   The support layouts share one markup; a layout only places, sizes and hides parts. The queue layout
   is a board of order numbers with markup of its own, at the end of this file.
   Rolling figures (.sx-floor-display__roll): every digit is a one-character window over a 0–9 strip
   drawn by its ::before; --d picks the digit, so a change rolls instead of flickering.
   ========================================================================== */

.sx-floor-display {
  --wb-gap: clamp(10px, 1.1cqi, 26px);
  --wb-radius: var(--sx-r-xl);
  container: floor-display / inline-size;
  position: relative;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(12px, 1.6cqi, 40px);
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background-color: var(--sx-shell);
  background-image: var(--sx-panel-wash);
  background-repeat: no-repeat;
}

.sx-floor-display:fullscreen {
  width: 100%;
  height: 100%;
}

.sx-floor-display__layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: var(--wb-gap);
  height: 100%;
}

/* ---------- Top strip ---------- */
.sx-floor-display__top {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px clamp(10px, 1.4cqw, 28px);
  min-height: 0;
  padding: 0 2px;
}

.sx-floor-display__brand {
  display: flex;
  align-items: center;
  gap: clamp(8px, 0.9cqw, 18px);
  min-width: 0;
}

.sx-floor-display__mark {
  display: grid;
  place-items: center;
  width: clamp(30px, 2.8cqw, 60px);
  height: clamp(30px, 2.8cqw, 60px);
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
  --sx-icon-size: clamp(15px, 1.4cqw, 30px);
}

.sx-floor-display__brand h1 {
  font-size: clamp(18px, 2.05cqw, 44px);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.1;
  white-space: nowrap;
}

.sx-floor-display__live {
  height: clamp(20px, 1.7cqw, 36px);
  padding: 0 clamp(7px, 0.65cqw, 14px);
  gap: clamp(4px, 0.4cqw, 8px);
  font-size: clamp(11px, 0.95cqw, 20px);
}

.sx-floor-display__live .sx-dot {
  width: clamp(6px, 0.5cqw, 11px);
  height: clamp(6px, 0.5cqw, 11px);
}

.sx-floor-display__shift {
  font-size: clamp(12px, 1.15cqw, 24px);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-floor-display__time {
  display: grid;
  justify-items: end;
  margin-left: auto;
  line-height: 1.1;
}

.sx-floor-display__clock {
  font-size: clamp(20px, 2.5cqw, 54px);
  font-weight: var(--sx-display-weight);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.sx-floor-display__date {
  font-size: clamp(11px, 0.95cqw, 20px);
  color: var(--sx-muted);
}

.sx-floor-display__full {
  flex: none;
  color: var(--sx-muted);
}

/* ---------- KPI tiles ---------- */
.sx-floor-display__kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.25fr 1.25fr repeat(4, minmax(0, 1fr));
  gap: var(--wb-gap);
}

.sx-floor-display__kpi {
  --wb-tone: var(--sx-ink);
  display: grid;
  align-content: start;
  gap: clamp(4px, 0.5cqw, 12px);
  min-width: 0;
  padding: clamp(12px, 1.25cqw, 30px) clamp(13px, 1.35cqw, 32px);
  overflow: hidden;
  transition:
    background-color var(--sx-dur-4) var(--sx-ease-out),
    box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__kpi-label {
  display: flex;
  align-items: center;
  gap: clamp(6px, 0.5cqw, 12px);
  font-size: clamp(12px, 1.12cqw, 24px);
  font-weight: 500;
  color: var(--sx-muted);
  white-space: nowrap;
  --sx-icon-size: clamp(13px, 1.15cqw, 24px);
}

.sx-floor-display__kpi-value {
  display: flex;
  align-items: baseline;
  gap: clamp(4px, 0.5cqw, 12px);
  font-size: clamp(30px, 3.9cqw, 92px);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1;
  color: var(--wb-tone);
  white-space: nowrap;
  transition: color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__kpi[data-size="lg"] .sx-floor-display__kpi-value {
  font-size: clamp(36px, 5.1cqw, 120px);
}

.sx-floor-display__kpi-value small {
  font-size: max(11px, 0.36em);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-floor-display__kpi-note {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 1.4em;
  overflow: hidden;
  font-size: clamp(11px, 0.98cqw, 21px);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  --sx-icon-size: 1.1em;
}

.sx-floor-display__kpi-note > .sx-icon {
  color: var(--wb-tone);
}

/* SLA meter with the target as a tick */
.sx-floor-display__meter {
  position: relative;
  height: clamp(4px, 0.42cqw, 9px);
  margin-top: 2px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-floor-display__meter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--wb-meter, var(--sx-success));
  clip-path: inset(0 calc(100% - var(--w, 0) * 100%) 0 0 round 99px);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out), background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__meter > i {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(var(--t, 0) * 100%);
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--sx-ink-2);
  box-shadow: 0 0 0 1.5px var(--sx-card-bg);
}

.sx-floor-display__kpi[data-level="warning"],
.sx-floor-display__queue[data-level="warning"] {
  --wb-tone: var(--sx-warning-ink);
  --wb-meter: var(--sx-warning);
}

.sx-floor-display__kpi[data-level="danger"],
.sx-floor-display__queue[data-level="danger"] {
  --wb-tone: var(--sx-danger-ink);
  --wb-meter: var(--sx-danger);
}

.sx-floor-display__kpi[data-level="warning"] {
  background-color: color-mix(in srgb, var(--sx-warning) 11%, var(--sx-card-bg));
  box-shadow: inset 0 0 0 1px var(--sx-warning-line), var(--sx-card-shadow);
  animation: wb-alert-warning 1.6s var(--sx-ease-out) 1;
}

.sx-floor-display__kpi[data-level="danger"] {
  background-color: color-mix(in srgb, var(--sx-danger) 10%, var(--sx-card-bg));
  box-shadow: inset 0 0 0 1px var(--sx-danger-line), var(--sx-card-shadow);
  animation: wb-alert-danger 2.4s var(--sx-ease-in-out) infinite;
}

/* ---------- Panels ---------- */
.sx-floor-display__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: clamp(12px, 1.2cqw, 28px) clamp(13px, 1.3cqw, 30px);
  overflow: hidden;
}

.sx-floor-display__panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: clamp(8px, 0.9cqw, 20px);
}

.sx-floor-display__panel-head h2 {
  font-size: clamp(13px, 1.22cqw, 26px);
}

.sx-floor-display__panel-head p {
  font-size: clamp(11px, 0.95cqw, 20px);
  color: var(--sx-muted);
}

.sx-floor-display__queues-panel {
  grid-column: span 4;
}

.sx-floor-display__agents-panel {
  grid-column: span 5;
}

.sx-floor-display__feed-panel {
  grid-column: span 3;
}

/* ---------- Queues ---------- */
.sx-floor-display__queues {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(6px, 0.6cqw, 14px);
  flex: 1;
  min-height: 0;
}

.sx-floor-display__queue {
  --wb-tone: var(--sx-ink);
  --wb-meter: var(--sx-c1);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  align-items: center;
  column-gap: clamp(9px, 0.9cqw, 20px);
  row-gap: clamp(6px, 0.55cqw, 12px);
  min-height: 0;
  padding: clamp(8px, 0.8cqw, 18px) clamp(9px, 0.9cqw, 20px);
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-floor-display__queue-icon {
  display: grid;
  place-items: center;
  width: clamp(28px, 2.6cqw, 58px);
  height: clamp(28px, 2.6cqw, 58px);
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  --sx-icon-size: clamp(14px, 1.25cqw, 28px);
}

.sx-floor-display__queue-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-floor-display__queue-name {
  overflow: hidden;
  font-size: clamp(13px, 1.28cqw, 27px);
  font-weight: var(--sx-strong-weight);
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-floor-display__queue-meta {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  font-size: clamp(11px, 1cqw, 21px);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-floor-display__queue-meta .sx-floor-display__roll {
  color: var(--sx-ink-2);
}

.sx-floor-display__queue-count {
  display: grid;
  justify-items: end;
  line-height: 1;
}

.sx-floor-display__queue-count .sx-floor-display__roll {
  font-size: clamp(24px, 2.75cqw, 62px);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  color: var(--wb-tone);
  transition: color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__queue-count small {
  margin-top: 3px;
  font-size: clamp(10px, 0.85cqw, 18px);
  color: var(--sx-muted);
}

.sx-floor-display__load {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  font-size: clamp(10px, 0.88cqw, 19px);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-floor-display__load > span:last-child {
  min-width: 7.5ch;
}

/* ---------- Agents ---------- */
.sx-floor-display__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px clamp(8px, 0.8cqw, 18px);
  font-size: clamp(11px, 0.92cqw, 19px);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-floor-display__legend > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sx-floor-display__legend b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-floor-display__swatch {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wb-status);
}

.sx-floor-display__agents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(5px, 0.5cqw, 12px) clamp(6px, 0.6cqw, 14px);
  flex: 1;
  min-height: 0;
}

/* Status colours (shared by agent rows and the legend swatches) */
.sx-floor-display [data-status] {
  --wb-status: var(--sx-success);
  --wb-status-ink: var(--sx-success-ink);
  --wb-status-soft: var(--sx-success-soft);
}

.sx-floor-display [data-status="busy"] {
  --wb-status: var(--sx-c1);
  --wb-status-ink: color-mix(in srgb, var(--sx-c1) 72%, var(--sx-ink));
  --wb-status-soft: color-mix(in srgb, var(--sx-c1) 12%, transparent);
}

.sx-floor-display [data-status="away"] {
  --wb-status: var(--sx-warning);
  --wb-status-ink: var(--sx-warning-ink);
  --wb-status-soft: var(--sx-warning-soft);
}

.sx-floor-display [data-status="offline"] {
  --wb-status: var(--sx-faint);
  --wb-status-ink: var(--sx-muted);
  --wb-status-soft: var(--sx-fill);
}

.sx-floor-display__agent {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 0.75cqw, 18px);
  min-width: 0;
  min-height: 0;
  padding: 0 clamp(8px, 0.75cqw, 18px) 0 clamp(11px, 1cqw, 24px);
  overflow: hidden;
  border-radius: var(--sx-r-md);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-floor-display__agent::before {
  content: "";
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--wb-status);
  transition: background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__agent .sx-avatar {
  --sx-avatar-size: clamp(24px, 2.2cqw, 50px);
  transition: opacity var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__agent-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-floor-display__agent-name {
  overflow: hidden;
  font-size: clamp(12px, 1.13cqw, 25px);
  font-weight: var(--sx-strong-weight);
  line-height: 1.15;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-floor-display__status {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 5px;
  height: clamp(17px, 1.45cqw, 32px);
  padding: 0 clamp(6px, 0.55cqw, 12px) 0 clamp(5px, 0.45cqw, 10px);
  border-radius: var(--sx-r-pill);
  font-size: clamp(10.5px, 0.9cqw, 19px);
  font-weight: 500;
  line-height: 1;
  color: var(--wb-status-ink);
  background: var(--wb-status-soft);
  white-space: nowrap;
  transition: color var(--sx-dur-4) var(--sx-ease-out), background-color var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display__status::before {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--wb-status);
}

/* What the agent is working on: shown on the Agent wall only */
.sx-floor-display__agent-now {
  display: none;
  min-width: 0;
  line-height: 1.25;
}

.sx-floor-display__agent-now > * {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.sx-floor-display__agent-now b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-floor-display__agent-now span {
  color: var(--sx-muted);
}

.sx-floor-display__agent-side {
  display: grid;
  justify-items: end;
  gap: 3px;
  font-size: clamp(10.5px, 0.92cqw, 20px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-floor-display__agent-side b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

.sx-floor-display__agent[data-status="offline"] :is(.sx-avatar, .sx-floor-display__agent-name) {
  opacity: 0.55;
}

/* ---------- Feed ---------- */
.sx-floor-display__events {
  position: relative;
  display: grid;
  align-content: start;
  gap: clamp(5px, 0.5cqw, 12px);
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  list-style: none;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 40px), transparent);
}

.sx-floor-display__event {
  --wb-event: var(--sx-c1);
  --wb-event-soft: color-mix(in srgb, var(--sx-c1) 12%, transparent);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 0.7cqw, 16px);
  padding: clamp(7px, 0.62cqw, 15px) clamp(8px, 0.7cqw, 16px);
  border-radius: var(--sx-r-md);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-floor-display__event[data-tone="done"] {
  --wb-event: var(--sx-success-ink);
  --wb-event-soft: var(--sx-success-soft);
}

.sx-floor-display__event[data-tone="status"] {
  --wb-event: var(--sx-ink-2);
  --wb-event-soft: var(--sx-fill-strong);
}

.sx-floor-display__event[data-tone="alert"] {
  --wb-event: var(--sx-warning-ink);
  --wb-event-soft: var(--sx-warning-soft);
  box-shadow: inset 0 0 0 1px var(--sx-warning-line);
}

.sx-floor-display__event-icon {
  display: grid;
  place-items: center;
  width: clamp(24px, 2cqw, 46px);
  height: clamp(24px, 2cqw, 46px);
  border-radius: var(--sx-r-sm);
  color: var(--wb-event);
  background: var(--wb-event-soft);
  --sx-icon-size: clamp(13px, 1.05cqw, 24px);
}

/* Up to two lines, so names are not cut on a narrow column */
.sx-floor-display__event-text {
  display: -webkit-box;
  overflow: hidden;
  font-size: clamp(12px, 1.02cqw, 22px);
  line-height: 1.3;
  color: var(--sx-ink-2);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow-wrap: anywhere;
}

.sx-floor-display__event-text b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-floor-display__event-time {
  font-size: clamp(10.5px, 0.88cqw, 19px);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

/* ---------- Rolling figures ---------- */
.sx-floor-display__roll {
  --wb-lh: 1.1;
  position: relative;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  line-height: var(--wb-lh);
  white-space: nowrap;
}

.sx-floor-display__roll-track {
  display: inline-flex;
}

.sx-floor-display__digit,
.sx-floor-display__char {
  display: inline-block;
  height: calc(var(--wb-lh) * 1em);
  overflow: hidden;
}

.sx-floor-display__digit {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 14%, black 86%, transparent);
}

.sx-floor-display__digit::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block;
  white-space: pre;
  text-align: center;
  transform: translateY(calc(var(--d, 0) * -10%));
  transition: transform var(--sx-dur-5) var(--sx-ease-out);
}

@keyframes wb-alert-warning {
  0% {
    box-shadow: inset 0 0 0 1px var(--sx-warning-line), 0 0 0 0 var(--sx-warning-line), var(--sx-card-shadow);
  }

  30% {
    box-shadow: inset 0 0 0 1px var(--sx-warning), 0 0 0 6px var(--sx-warning-soft), var(--sx-card-shadow);
  }
}

@keyframes wb-alert-danger {
  50% {
    box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 5px var(--sx-danger-soft), var(--sx-card-shadow);
  }
}

/* ---------- Adaptive layout: Overview (the default) ----------
   Scoped to the overview so these rules never leak into the other layouts. */
@container floor-display (max-width: 1100px) {
  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__kpi .sx-floor-display__kpi-value {
    font-size: clamp(30px, 5cqw, 64px);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__queues-panel,
  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__feed-panel {
    grid-column: span 6;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__agents-panel {
    grid-column: 1 / -1;
    grid-row: 4;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__layout {
    grid-template-rows: auto auto minmax(300px, 1fr) auto;
    height: auto;
    min-height: 100%;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__agents {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: minmax(52px, auto);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) :is(.sx-floor-display__kpi-label, .sx-floor-display__panel-head h2, .sx-floor-display__queue-name, .sx-floor-display__agent-name) {
    font-size: clamp(12px, 1.6cqw, 17px);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) :is(.sx-floor-display__event-text, .sx-floor-display__queue-meta, .sx-floor-display__kpi-note) {
    font-size: clamp(11px, 1.4cqw, 15px);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__queue-count .sx-floor-display__roll {
    font-size: clamp(24px, 3.6cqw, 38px);
  }
}

@container floor-display (max-width: 760px) {
  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__kpi .sx-floor-display__kpi-value {
    font-size: clamp(28px, 8.4cqw, 52px);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) :is(.sx-floor-display__queues-panel, .sx-floor-display__feed-panel, .sx-floor-display__agents-panel) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__layout {
    grid-template-rows: none;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__queues {
    grid-auto-rows: auto;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__agents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__events {
    max-height: 420px;
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) :is(.sx-floor-display__kpi-label, .sx-floor-display__panel-head h2, .sx-floor-display__queue-name, .sx-floor-display__agent-name) {
    font-size: clamp(12px, 3.6cqw, 16px);
  }

  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) :is(.sx-floor-display__event-text, .sx-floor-display__queue-meta, .sx-floor-display__kpi-note, .sx-floor-display__agent-side, .sx-floor-display__status) {
    font-size: clamp(11px, 3.2cqw, 14px);
  }
}

@container floor-display (max-width: 460px) {
  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__agents {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A board that is too short to hold everything scrolls instead of clipping. */
@container sx-screen (max-height: 620px) {
  .sx-floor-display:not([data-layout="numbers"], [data-layout="agents"]) .sx-floor-display__layout {
    grid-template-rows: auto auto minmax(420px, 1fr);
    height: auto;
    min-height: 100%;
  }
}

/* ---------- Adaptive layout: every layout (top strip on phones) ---------- */
@container floor-display (max-width: 760px) {
  .sx-floor-display__shift {
    order: 3;
    flex-basis: 100%;
  }

  .sx-floor-display__brand h1 {
    font-size: clamp(18px, 5.6cqw, 26px);
  }

  .sx-floor-display__clock {
    font-size: clamp(18px, 5.6cqw, 28px);
  }
}

@container floor-display (max-width: 460px) {
  .sx-floor-display__date {
    display: none;
  }
}

/* ==========================================================================
   Layout: Big numbers. Four tiles fill the board, readable across the room; the feed runs as a
   slim ticker along the bottom. Sizes follow --wb-u: the smaller of 1% of the board's width and
   1.55% of the screen's height, so the figures fill a 16:9 TV and a 16:10 monitor alike.
   ========================================================================== */
.sx-floor-display[data-layout="numbers"] .sx-floor-display__layout {
  --wb-u: min(1cqw, 1.55cqh);
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.sx-floor-display[data-layout="numbers"] :is(.sx-floor-display__queues-panel, .sx-floor-display__agents-panel),
.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi:nth-child(n + 5) {
  display: none;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpis {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

/* Waiting and Longest wait on top, SLA today and Agents available below */
.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi:nth-child(3) {
  order: 1;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  align-content: stretch;
  gap: calc(var(--wb-u) * 0.8);
  padding: calc(var(--wb-u) * 2) calc(var(--wb-u) * 2.5);
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi-label {
  gap: 0.45em;
  font-size: max(14px, calc(var(--wb-u) * 1.9));
  --sx-icon-size: 1em;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi .sx-floor-display__kpi-value {
  align-self: center;
  font-size: max(40px, calc(var(--wb-u) * 11));
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__kpi-note {
  font-size: max(12px, calc(var(--wb-u) * 1.45));
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__meter {
  height: max(6px, calc(var(--wb-u) * 0.75));
}

/* The ticker: the feed laid out in one row; new lines come in from the left. */
.sx-floor-display[data-layout="numbers"] .sx-floor-display__feed-panel {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: calc(var(--wb-u) * 1.4);
  padding: calc(var(--wb-u) * 0.7) calc(var(--wb-u) * 1.2);
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__feed-panel .sx-floor-display__panel-head {
  flex: none;
  margin: 0;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__feed-panel .sx-floor-display__panel-head h2 {
  font-size: max(13px, calc(var(--wb-u) * 1.3));
  white-space: nowrap;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__feed-panel .sx-floor-display__panel-head p {
  display: none;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__events {
  display: flex;
  gap: calc(var(--wb-u) * 0.8);
  min-width: 0;
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 96px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 96px), transparent);
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__event {
  flex: none;
  max-width: 34cqw;
  padding: calc(var(--wb-u) * 0.55) calc(var(--wb-u) * 0.8);
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__event-text {
  display: block;
  font-size: max(12px, calc(var(--wb-u) * 1.15));
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-floor-display[data-layout="numbers"] .sx-floor-display__event-time {
  font-size: max(11px, calc(var(--wb-u) * 0.95));
}

@container floor-display (max-width: 760px) {
  .sx-floor-display[data-layout="numbers"] .sx-floor-display__layout {
    --wb-u: 1.3cqw;
    grid-template-rows: none;
    height: auto;
  }

  .sx-floor-display[data-layout="numbers"] .sx-floor-display__kpis {
    grid-auto-rows: auto;
  }
}

@container floor-display (max-width: 560px) {
  .sx-floor-display[data-layout="numbers"] .sx-floor-display__layout {
    --wb-u: 2.6cqw;
  }

  .sx-floor-display[data-layout="numbers"] .sx-floor-display__kpis {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-floor-display[data-layout="numbers"] .sx-floor-display__feed-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .sx-floor-display[data-layout="numbers"] .sx-floor-display__event {
    max-width: 100%;
  }
}

/* ==========================================================================
   Layout: Agent wall. The team fills the board: status by colour and word, what each agent is
   working on and time in status. The figures shrink to a strip along the top.
   ========================================================================== */
.sx-floor-display[data-layout="agents"] .sx-floor-display__layout {
  grid-template-rows: auto auto minmax(0, 1fr);
}

.sx-floor-display[data-layout="agents"] :is(.sx-floor-display__queues-panel, .sx-floor-display__feed-panel),
.sx-floor-display[data-layout="agents"] :is(.sx-floor-display__kpi-note, .sx-floor-display__meter) {
  display: none;
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agents-panel {
  grid-column: 1 / -1;
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__kpis {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__kpi {
  gap: clamp(2px, 0.3cqw, 8px);
  padding: clamp(9px, 0.85cqw, 20px) clamp(12px, 1.1cqw, 26px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__kpi-label {
  font-size: clamp(11px, 0.95cqw, 21px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__kpi .sx-floor-display__kpi-value {
  font-size: clamp(22px, 2.6cqw, 62px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agents {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  gap: clamp(8px, 0.8cqw, 18px);
}

/* Each agent is a card: avatar and time in status on top, name, status and the current
   conversation in the middle, open conversations at the foot. Status tints the whole card. */
.sx-floor-display[data-layout="agents"] .sx-floor-display__agent {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "avatar time" "main main" "open open";
  align-items: start;
  gap: clamp(8px, 0.8cqw, 18px);
  padding: clamp(14px, 1.25cqw, 30px) clamp(12px, 1.1cqw, 26px) clamp(11px, 1cqw, 24px);
  background: color-mix(in srgb, var(--wb-status) 7%, var(--sx-surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wb-status) 20%, var(--sx-line-soft));
  transition: background-color var(--sx-dur-4) var(--sx-ease-out), box-shadow var(--sx-dur-4) var(--sx-ease-out);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent::before {
  top: 0;
  right: 0;
  bottom: auto;
  width: auto;
  height: 4px;
  border-radius: 0;
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent .sx-avatar {
  grid-area: avatar;
  --sx-avatar-size: clamp(32px, 3.7cqw, 84px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-main {
  grid-area: main;
  align-content: start;
  gap: clamp(5px, 0.5cqw, 12px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-name {
  font-size: clamp(14px, 1.7cqw, 38px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__status {
  height: auto;
  padding: 0.32em 0.75em 0.32em 0.6em;
  font-size: clamp(11px, 1.12cqw, 26px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-now {
  display: grid;
  gap: 2px;
  margin-top: clamp(6px, 0.9cqw, 20px);
  font-size: clamp(11px, 1.2cqw, 27px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-side {
  display: contents;
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-side > span {
  font-size: clamp(11px, 1.12cqw, 25px);
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-side > span:first-child {
  grid-area: open;
  align-self: end;
}

.sx-floor-display[data-layout="agents"] .sx-floor-display__agent-side > span:last-child {
  grid-area: time;
}

@container floor-display (max-width: 1100px) {
  .sx-floor-display[data-layout="agents"] .sx-floor-display__layout {
    grid-template-rows: auto auto 1fr;
    height: auto;
    min-height: 100%;
  }

  .sx-floor-display[data-layout="agents"] .sx-floor-display__agents {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-auto-rows: minmax(150px, auto);
  }
}

@container floor-display (max-width: 760px) {
  .sx-floor-display[data-layout="agents"] .sx-floor-display__kpis {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sx-floor-display[data-layout="agents"] .sx-floor-display__agents {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sx-floor-display[data-layout="agents"] :is(.sx-floor-display__agent-now, .sx-floor-display__agent-side > span, .sx-floor-display__status) {
    font-size: clamp(11px, 2.4cqw, 14px);
  }

  .sx-floor-display[data-layout="agents"] .sx-floor-display__agent-name {
    font-size: clamp(13px, 2.9cqw, 17px);
  }
}

@container floor-display (max-width: 560px) {
  .sx-floor-display[data-layout="agents"] .sx-floor-display__kpis,
  .sx-floor-display[data-layout="agents"] .sx-floor-display__agents {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container sx-screen (max-height: 620px) {
  .sx-floor-display[data-layout="agents"] .sx-floor-display__layout {
    grid-template-rows: auto auto 1fr;
    height: auto;
    min-height: 100%;
  }

  .sx-floor-display[data-layout="agents"] .sx-floor-display__agents {
    grid-auto-rows: minmax(150px, auto);
  }
}

/* ==========================================================================
   Layout: Queue board. A customer-facing TV board for order numbers: now calling, ready and being
   prepared, read from across the room. Set these custom properties on the root (or any ancestor rule):
     --fq-order-called | ready | cooking   left-to-right order of the three areas
     --fq-share-called | ready | cooking   their share of the width
     --fq-font-scale                       multiplies the type sizes, 1 by default
     --fq-accent, --fq-on-accent           the colour of the called number
   Script fits the numbers: it sets the largest size that holds them on each grid, and data-full when
   even the smallest does not. Full mode gives the ready area the larger share (--fq-grow-*), turns the
   prepared rows into plain tiles and pages what is left, with a page marker in the panel head.
     Root:  data-full, data-stacked (below 720px wide, scrolls inside), data-idle (paused offscreen)
     Flash: data-leaving while the number flies to its place in the called panel (FLIP)
   Only transform and opacity move, because TV boxes are slow and these boards run all day.
   ========================================================================== */
:where(.sx-floor-display[data-layout="queue"]) {
  --fq-accent: var(--sx-accent);
  --fq-on-accent: var(--sx-on-accent);
  --fq-order-called: 1;
  --fq-order-ready: 2;
  --fq-order-cooking: 3;
  --fq-share-called: 30;
  --fq-share-ready: 45;
  --fq-share-cooking: 25;
  --fq-font-scale: 1;
}

.sx-floor-display[data-layout="queue"] {
  overflow: hidden;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

.sx-floor-display[data-layout="queue"][data-stacked] {
  overflow-y: auto;
}

.sx-floor-display__board {
  display: flex;
  flex-direction: column;
  gap: var(--wb-gap);
  height: 100%;
}

.sx-floor-display[data-stacked] .sx-floor-display__board {
  height: auto;
}

.sx-floor-display__board-areas {
  display: flex;
  flex: 1 1 0;
  gap: var(--wb-gap);
  min-height: 0;
}

.sx-floor-display[data-stacked] .sx-floor-display__board-areas {
  flex: none;
  flex-direction: column;
}

.sx-floor-display__board-panel {
  flex: 1 1 0;
}

.sx-floor-display__board-panel[data-area="called"] {
  order: var(--fq-order-called);
  flex-grow: var(--fq-grow-called, var(--fq-share-called));
}

.sx-floor-display__board-panel[data-area="ready"] {
  order: var(--fq-order-ready);
  flex-grow: var(--fq-grow-ready, var(--fq-share-ready));
}

.sx-floor-display__board-panel[data-area="cooking"] {
  order: var(--fq-order-cooking);
  flex-grow: var(--fq-grow-cooking, var(--fq-share-cooking));
}

.sx-floor-display[data-stacked] .sx-floor-display__board-panel {
  flex: none;
  height: max(60cqw, 240px);
}

/* ---------- Panel head: the title, the page marker and a count ---------- */
.sx-floor-display__board-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0.6em;
  height: calc(clamp(22px, 2.1cqw, 46px) * var(--fq-font-scale));
  margin-bottom: clamp(8px, 0.8cqw, 18px);
  font-size: calc(clamp(14px, 1.45cqw, 32px) * var(--fq-font-scale));
}

.sx-floor-display__board-head h2 {
  overflow: hidden;
  font-size: 1em;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-ink-2);
}

.sx-floor-display__board-count {
  margin-left: auto;
  padding: 0 0.55em;
  border-radius: var(--sx-r-pill);
  font-weight: 700;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-fill-strong);
}

.sx-floor-display__board-body {
  flex: 1 1 0;
  min-height: 0;
}

.sx-floor-display__board-empty {
  display: grid;
  place-items: center;
  height: 100%;
  padding: 1em;
  font-size: calc(clamp(13px, 1.25cqw, 28px) * var(--fq-font-scale));
  text-align: center;
  color: var(--sx-faint);
}

.sx-floor-display__dots {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.35em;
}

.sx-floor-display__dots > i {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--sx-line-strong);
  transition: transform var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-floor-display__dots > i[data-active] {
  background: var(--fq-accent);
  transform: scale(1.35);
}

/* ---------- A number: the short code large, the channel small above it ---------- */
.sx-floor-display__number {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-floor-display__channel {
  max-width: 100%;
  margin-bottom: 0.12em;
  overflow: hidden;
  font-size: 0.26em;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.8;
}

/* ---------- Now calling: as large as its panel allows, whatever the length of the number ---------- */
.sx-floor-display__called {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  color: var(--fq-on-accent);
  background: var(--fq-accent);
  animation: fq-called-in var(--sx-dur-4) var(--sx-ease-out) both;
  container-type: size;
}

.sx-floor-display__called-number {
  display: grid;
  flex: 1 1 0;
  place-items: center;
  min-height: 0;
  /* One character is about 0.64 of the type size. */
  font-size: min(calc(135cqw / var(--fq-called-chars, 4)), 52cqh);
}

/* The flying number lands exactly here, so the one underneath waits for it. */
.sx-floor-display__called[data-arriving] .sx-floor-display__called-number {
  visibility: hidden;
}

.sx-floor-display__called-hint {
  flex: none;
  padding: 0 0.8em 0.9em;
  font-size: calc(5.6cqw * var(--fq-font-scale));
  font-weight: 600;
  text-align: center;
  opacity: 0.85;
}

/* ---------- Number tiles: columns, rows, type and gap come from the fit ---------- */
.sx-floor-display__tiles {
  display: grid;
  grid-template-columns: repeat(var(--fq-tile-columns, 3), minmax(0, 1fr));
  grid-template-rows: repeat(var(--fq-tile-rows, 3), minmax(0, 1fr));
  gap: var(--fq-tile-gap, 8px);
  height: 100%;
  font-size: var(--fq-tile-font, 56px);
  animation: fq-page-in var(--sx-dur-3) var(--sx-ease-out) both;
}

.sx-floor-display__tile {
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  background: color-mix(in srgb, var(--fq-accent) 13%, var(--sx-surface-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fq-accent) 30%, transparent);
}

.sx-floor-display[data-full] [data-area="cooking"] .sx-floor-display__tile {
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

/* ---------- Being prepared: a number and how far along it is ---------- */
.sx-floor-display__prep {
  display: grid;
  grid-template-columns: repeat(var(--fq-tile-columns, 1), minmax(0, 1fr));
  grid-auto-rows: var(--fq-row-height, 88px);
  align-content: start;
  gap: var(--fq-tile-gap, 8px);
  height: 100%;
}

.sx-floor-display__prep-row {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0.3em;
  min-width: 0;
  padding: 0.5em 0.7em;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  font-size: calc(var(--fq-row-height, 88px) * 0.2);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-floor-display__prep-row .sx-floor-display__number {
  align-items: flex-start;
  align-self: center;
  font-size: 2.1em;
}

.sx-floor-display__progress {
  display: grid;
  gap: 0.3em;
  font-size: 0.86em;
  font-weight: max(500, var(--sx-text-weight));
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-floor-display__progress-bar {
  display: block;
  height: 0.32em;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill-strong);
}

.sx-floor-display__progress-bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--fq-accent);
  transform: scaleX(var(--fq-progress, 0));
  transform-origin: left;
  transition: transform var(--sx-dur-4) var(--sx-ease-out);
}

/* ---------- Ticker: two copies sliding by half their width, so the loop cannot be seen ---------- */
.sx-floor-display__ticker {
  flex: none;
  padding: clamp(6px, 0.55cqw, 12px) 0;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  font-size: calc(clamp(14px, 1.45cqw, 32px) * var(--fq-font-scale));
  font-weight: max(500, var(--sx-text-weight));
  white-space: nowrap;
  color: var(--fq-on-accent);
  background: var(--fq-accent);
}

.sx-floor-display__ticker-track {
  display: inline-flex;
  animation: fq-ticker var(--fq-ticker-seconds, 20s) linear infinite;
}

.sx-floor-display__ticker-track > span {
  padding-right: 6em;
  padding-left: 2em;
}

.sx-floor-display[data-idle] .sx-floor-display__ticker-track {
  animation-play-state: paused;
}

/* ---------- The called number, full screen, before it flies to its place ---------- */
.sx-floor-display__flash {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqw;
  color: var(--fq-on-accent);
  animation: fq-page-in var(--sx-dur-3) var(--sx-ease-out) both;
  container-type: size;
}

.sx-floor-display__flash::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fq-accent);
  transition: opacity 420ms var(--sx-ease-out);
}

.sx-floor-display__flash[data-leaving] {
  pointer-events: none;
}

.sx-floor-display__flash[data-leaving]::before,
.sx-floor-display__flash[data-leaving] .sx-floor-display__flash-label {
  opacity: 0;
}

.sx-floor-display__flash-label {
  font-size: calc(4cqw * var(--fq-font-scale));
  font-weight: 600;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-floor-display__flash-number {
  font-size: min(calc(150cqw / var(--fq-flash-chars, 4)), 56cqh);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  animation: fq-flash-pop var(--sx-dur-4) var(--sx-ease-spring) both;
}

@keyframes fq-called-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes fq-page-in {
  from {
    opacity: 0;
  }
}

@keyframes fq-flash-pop {
  from {
    opacity: 0;
    transform: scale(0.82);
  }
}

@keyframes fq-ticker {
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-floor-display__ticker-track {
    animation: none;
  }

  .sx-floor-display__called,
  .sx-floor-display__flash-number {
    animation-name: fq-page-in;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-floor-display__kpi[data-level="danger"] {
    animation: none;
  }

  .sx-floor-display__digit::before {
    transition-duration: var(--sx-dur-2);
  }
}


/* ---- Service Overview (service-overview) ---- */
/* ==========================================================================
   Service Overview — team performance at a glance (template, inside Product Frame)
   Root .sx-service-overview is a size container; one date range scopes every figure on it.
     data-compare="on | off"   previous period shown (lines, bars, deltas) or hidden
   Volume chart: two SVG layers in a 0–100 viewBox stretched to the plot; the crosshair, dots
   and tooltip are HTML placed with --x / --y fractions, so they never distort.
   Heat grid cells read their level from --v (0–1); bars and meters from --w (0–1).
   ========================================================================== */

.sx-service-overview {
  /* The root's own spacing follows the surrounding container (Product Frame), since a container
     cannot query itself; everything inside follows the dashboard's width. */
  --od-gap: clamp(12px, 1.1cqi, 14px);
  --od-gutter: 30px;
  container: service-overview / inline-size;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-content: start;
  gap: var(--od-gap);
  max-width: 1480px;
  padding: clamp(14px, 1.4cqi, 18px) clamp(14px, 2.6cqi, 28px) clamp(18px, 1.6cqi, 20px);
}

/* ---------- Header ---------- */
.sx-service-overview__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  padding-bottom: 2px;
}

.sx-service-overview__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sx-service-overview__title h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-service-overview__title p {
  color: var(--sx-muted);
}

.sx-service-overview__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.sx-service-overview__compare {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--sx-h-md);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.sx-service-overview__export > .sx-icon {
  transition: transform var(--sx-dur-3) var(--sx-ease-spring), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-service-overview__export[data-done] > .sx-icon {
  color: var(--sx-success);
  animation: sx-pop-in var(--sx-dur-3) var(--sx-ease-spring);
}

/* ---------- KPI tiles ---------- */
.sx-service-overview__kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--od-gap);
}

.sx-service-overview__kpi {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px 16px 11px;
}

.sx-service-overview__kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-muted);
  --sx-icon-size: 14px;
}

.sx-service-overview__kpi-value {
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink);
}

.sx-service-overview__kpi-value small {
  margin-left: 5px;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-service-overview__kpi-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 20px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear 0s;
}

.sx-service-overview__delta {
  font-variant-numeric: tabular-nums;
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-service-overview__kpi-note {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-service-overview[data-compare="off"] .sx-service-overview__kpi-foot {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
}

/* ---------- Cards ---------- */
.sx-service-overview__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 14px 16px;
}

.sx-service-overview__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 14px;
  min-height: 22px;
  margin-bottom: 10px;
}

.sx-service-overview__card-head h2 {
  font-size: var(--sx-fs-md);
}

.sx-service-overview__meta {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-service-overview__meta b {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink-2);
}

/* ---------- Volume chart ---------- */
.sx-service-overview__volume {
  grid-column: span 8;
}

.sx-service-overview__legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-service-overview__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-service-overview__key {
  width: 12px;
  height: 2px;
  flex: none;
  border-radius: 1px;
  background: var(--sx-c1);
}

.sx-service-overview__key--prev {
  background: var(--sx-c6);
}

.sx-service-overview[data-compare="off"] .sx-service-overview__legend-item--prev {
  opacity: 0;
}

.sx-service-overview__chart {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  flex: 1;
  min-height: 0;
  margin-left: var(--od-gutter);
}

/* The plot is a size container: the crosshair and its dots are zero-size layers slid by
   fractions of its width and height (cqw, cqh), so they never add scroll area or need measuring. */
.sx-service-overview__plot {
  position: relative;
  min-height: 132px;
  container-type: size;
  border-radius: var(--sx-r-xs);
  cursor: crosshair;
  touch-action: pan-y;
}

/* Every layer ignores the pointer, so pointer events always target the plot box itself. */
.sx-service-overview__plot > * {
  pointer-events: none;
}

.sx-service-overview__plot:focus-visible {
  outline-offset: 6px;
}

.sx-service-overview__grid {
  position: absolute;
  inset: 0;
}

.sx-service-overview__tick {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--t) * 100%);
  height: 1px;
  background: var(--sx-line-soft);
}

.sx-service-overview__tick:last-child {
  background: var(--sx-line);
}

.sx-service-overview__tick > span {
  position: absolute;
  right: calc(100% + 8px);
  top: -6px;
  font-size: var(--sx-fs-2xs);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-service-overview__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.sx-service-overview__svg--area {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent);
}

.sx-service-overview__area {
  fill: var(--sx-c1);
  opacity: 0.16;
}

.sx-service-overview__line {
  fill: none;
  stroke: var(--sx-c1);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The previous period recedes: the grey slot, a thinner stroke. */
.sx-service-overview__line--prev {
  stroke: var(--sx-c6);
  stroke-width: 1.5px;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-service-overview[data-compare="off"] .sx-service-overview__line--prev {
  opacity: 0;
}

.sx-service-overview__cursor {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  opacity: 0;
  transform: translateX(calc(var(--x, 0) * 100cqw));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
}

.sx-service-overview__cursor[data-show] {
  opacity: 1;
}

.sx-service-overview__cursor::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -0.5px;
  width: 1px;
  background: var(--sx-line-strong);
}

.sx-service-overview__dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: translateY(calc(var(--y, 1) * 100cqh));
  transition: transform var(--sx-dur-2) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-service-overview__dot::before {
  content: "";
  position: absolute;
  top: -4.5px;
  left: -4.5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sx-c1);
  box-shadow: 0 0 0 2px var(--sx-card-bg);
}

.sx-service-overview__dot--prev::before {
  background: var(--sx-c6);
}

.sx-service-overview[data-compare="off"] .sx-service-overview__dot--prev {
  opacity: 0;
}

.sx-service-overview__tip {
  position: absolute;
  z-index: 1;
  top: 4px;
  left: 12px;
  display: grid;
  gap: 5px;
  min-width: 132px;
  padding: 8px 10px 9px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
}

.sx-service-overview__cursor[data-flip] .sx-service-overview__tip {
  left: auto;
  right: 12px;
}

.sx-service-overview__tip-date {
  color: var(--sx-muted);
}

.sx-service-overview__tip-row {
  display: grid;
  grid-template-columns: 10px auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.sx-service-overview__tip-row b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-service-overview__tip-row span {
  color: var(--sx-muted);
}

.sx-service-overview__tip-row .sx-service-overview__key {
  width: 10px;
}

.sx-service-overview[data-compare="off"] .sx-service-overview__tip-row--prev {
  display: none;
}

.sx-service-overview__xaxis {
  position: relative;
  height: 22px;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-service-overview__xaxis > span {
  position: absolute;
  top: 8px;
  left: calc(var(--x) * 100%);
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sx-service-overview__xaxis > span[data-edge="start"] {
  transform: none;
}

.sx-service-overview__xaxis > span[data-edge="end"] {
  transform: translateX(-100%);
}

/* ---------- By channel ---------- */
.sx-service-overview__channels {
  grid-column: span 4;
}

.sx-service-overview__bars-box {
  --od-bar-gap: 11px;
  position: relative;
}

.sx-service-overview__bars {
  display: grid;
  align-content: start;
  gap: var(--od-bar-gap);
  border-radius: var(--sx-r-xs);
}

.sx-service-overview__bars:focus-visible {
  outline-offset: 6px;
}

.sx-service-overview__bar[data-active] .sx-service-overview__bar-name {
  color: var(--sx-ink);
}

.sx-service-overview__bar[data-active] .sx-service-overview__bar-svg {
  box-shadow: 0 0 0 2px var(--sx-card-bg), 0 0 0 3px var(--sx-line-strong);
}

/* One readout for the hovered row, placed by row index (rows share one height). */
.sx-service-overview__bar-tip {
  position: absolute;
  z-index: 1;
  top: calc(var(--row, 0) * (100% + var(--od-bar-gap)) / 4);
  right: 0;
  display: grid;
  gap: 5px;
  min-width: 132px;
  padding: 8px 10px 9px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translateY(calc(-100% - 6px));
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  pointer-events: none;
}

.sx-service-overview__bar-tip[data-show] {
  opacity: 1;
}

.sx-service-overview__bar-tip .sx-service-overview__key--mark {
  width: 3px;
  height: 10px;
  margin: 0 3.5px;
}

.sx-service-overview__bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px 10px;
}

.sx-service-overview__bar-name {
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-service-overview__bar-value {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sx-service-overview__bar-value small {
  display: inline-block;
  min-width: 3.2ch;
  margin-left: 8px;
  font-size: var(--sx-fs-xs);
  font-weight: var(--sx-text-weight);
  text-align: right;
  color: var(--sx-muted);
}

/* Each bar is a small SVG: a track, the bar and the previous-period marker. The clip keeps the
   4px rounded data end at any length with a square baseline; the marker slides with a transform
   whose percentages refer to the SVG's own width (transform-box: view-box). */
.sx-service-overview__bar-svg {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 8px;
  overflow: visible;
  border-radius: 0 4px 4px 0;
  transition: box-shadow var(--sx-dur-1) var(--sx-ease-out);
}

.sx-service-overview__bar-bg,
.sx-service-overview__bar-fill {
  width: 100%;
  height: 8px;
}

.sx-service-overview__bar-bg {
  fill: var(--sx-c-track);
  clip-path: inset(0 round 0 4px 4px 0);
}

.sx-service-overview__bar-fill {
  fill: var(--sx-c1);
  clip-path: inset(0 calc(100% - var(--w, 0) * 100%) 0 0 round 0 4px 4px 0);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out);
}

.sx-service-overview__bar-prev {
  x: -1.5px;
  y: -3px;
  width: 3px;
  height: 14px;
  rx: 1.5px;
  fill: var(--sx-ink-2);
  stroke: var(--sx-card-bg);
  stroke-width: 1.5px;
  paint-order: stroke;
  transform-box: view-box;
  transform: translateX(calc(var(--w, 0) * 100%));
  transition: transform var(--sx-dur-5) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-service-overview[data-compare="off"] .sx-service-overview__bar-prev {
  opacity: 0;
}

/* Legend at the foot of a card (bars mirror their mark: a small rect, not a line) */
.sx-service-overview__note {
  gap: 4px 14px;
  margin-top: auto;
  padding-top: 10px;
}

.sx-service-overview__key--bar {
  width: 10px;
  height: 6px;
  border-radius: 2px;
}

.sx-service-overview__key--mark {
  width: 3px;
  height: 11px;
  margin: 0 3px;
  border-radius: 2px;
  background: var(--sx-ink-2);
}

/* ---------- Busiest hours (heat grid) ---------- */
.sx-service-overview__heat-card {
  grid-column: span 5;
}

.sx-service-overview__heat {
  --od-hours-h: 14px;
  --od-day-w: 30px;
  --od-heat-gap: 3px;
  position: relative;
  display: grid;
  flex: 1;
  grid-template-columns: var(--od-day-w) minmax(0, 1fr);
  grid-template-rows: var(--od-hours-h) minmax(140px, 1fr);
  gap: var(--od-heat-gap);
  border-radius: var(--sx-r-xs);
}

.sx-service-overview__heat:focus-visible {
  outline-offset: 4px;
}

.sx-service-overview__heat-hours {
  grid-column: 2;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--od-heat-gap);
  font-size: var(--sx-fs-2xs);
  line-height: var(--od-hours-h);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-service-overview__heat-days {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  grid-template-rows: repeat(7, minmax(0, 1fr));
  gap: var(--od-heat-gap);
  align-items: center;
  font-size: var(--sx-fs-xs);
  line-height: 1;
  color: var(--sx-muted);
}

.sx-service-overview__heat-plot {
  position: relative;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.sx-service-overview__heat-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Cells are SVG rects placed with percentage geometry (12 columns, 7 rows, fixed gaps), so the
   corners stay round at any size. --v (0–1) mixes the series colour into the track. */
.sx-service-overview__heat-cell {
  x: calc((100% + var(--od-heat-gap)) / 12 * var(--c, 0));
  y: calc((100% + var(--od-heat-gap)) / 7 * var(--r, 0));
  width: calc((100% + var(--od-heat-gap)) / 12 - var(--od-heat-gap));
  height: calc((100% + var(--od-heat-gap)) / 7 - var(--od-heat-gap));
  rx: 4px;
  ry: 4px;
  fill: color-mix(in oklab, var(--sx-c1) calc(var(--v, 0) * 100%), var(--sx-c-track));
  stroke: transparent;
  stroke-width: 2px;
  transition: fill var(--sx-dur-5) var(--sx-ease-out), stroke var(--sx-dur-1) var(--sx-ease-out);
}

.sx-service-overview__heat-cell[data-active] {
  stroke: var(--sx-ink-2);
}

/* Rows and columns are equal fractions of the plot, so the active cell's place is arithmetic. */
.sx-service-overview__heat-tip {
  position: absolute;
  z-index: 1;
  top: calc((100% + var(--od-heat-gap)) / 7 * var(--row, 0) - 6px);
  left: calc((100% + var(--od-heat-gap)) / 12 * (var(--col, 0) + 0.5) - var(--od-heat-gap) / 2);
  display: grid;
  gap: 2px;
  padding: 6px 9px 7px;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  opacity: 0;
  transform: translate(-50%, -100%);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
  pointer-events: none;
}

.sx-service-overview__heat-tip[data-show] {
  opacity: 1;
}

.sx-service-overview__heat-tip[data-edge="start"] {
  transform: translate(-14px, -100%);
}

.sx-service-overview__heat-tip[data-edge="end"] {
  transform: translate(calc(-100% + 14px), -100%);
}

.sx-service-overview__heat-tip span {
  color: var(--sx-muted);
}

.sx-service-overview__heat-tip b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-service-overview__scale {
  display: flex;
  align-items: center;
  gap: 3px;
}

.sx-service-overview__scale i {
  width: 14px;
  height: 8px;
  border-radius: 2px;
  background: color-mix(in oklab, var(--sx-c1) calc(var(--v, 0) * 100%), var(--sx-c-track));
}

.sx-service-overview__scale i:first-of-type {
  margin-left: 4px;
}

.sx-service-overview__scale i:last-of-type {
  margin-right: 4px;
}

/* ---------- Top agents (leaderboard) ---------- */
.sx-service-overview__agents {
  grid-column: span 7;
}

.sx-service-overview__table {
  display: grid;
  margin: 0 -6px;
  font-size: var(--sx-fs-sm);
}

.sx-service-overview__tr {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(58px, 0.8fr) minmax(88px, 1fr) minmax(82px, 0.9fr) minmax(56px, 0.9fr);
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 0 6px;
  border-radius: var(--sx-r-md);
}

.sx-service-overview__thead .sx-service-overview__tr {
  min-height: 24px;
  border-radius: 0;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-service-overview__tbody {
  position: relative;
  display: grid;
}

.sx-service-overview__tbody .sx-service-overview__tr {
  position: relative;
  background: var(--sx-card-bg);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-service-overview__tbody .sx-service-overview__tr::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 0;
  height: 1px;
  background: var(--sx-line-soft);
}

.sx-service-overview__tbody .sx-service-overview__tr:last-child::after {
  display: none;
}

.sx-service-overview__tbody .sx-service-overview__tr:hover {
  background: color-mix(in srgb, var(--sx-ink) 3%, var(--sx-card-bg));
}

.sx-service-overview__th,
.sx-service-overview__td {
  min-width: 0;
}

.sx-service-overview__th--num,
.sx-service-overview__td--num {
  text-align: right;
  justify-self: end;
}

.sx-service-overview__td--num {
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-service-overview__td--num:nth-child(2) {
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-service-overview__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  margin-right: -6px;
  padding: 0 6px;
  border-radius: var(--sx-r-sm);
  font-weight: 500;
  white-space: nowrap;
  color: inherit;
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 12px;
  --sx-icon-stroke: 2.25;
}

.sx-service-overview__sort:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-service-overview__sort > .sx-icon {
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
}

[aria-sort] > .sx-service-overview__sort {
  color: var(--sx-ink);
}

[aria-sort] > .sx-service-overview__sort > .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-service-overview__agent {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: var(--sx-strong-weight);
}

.sx-service-overview__agent .sx-avatar {
  --sx-avatar-size: 26px;
}

.sx-service-overview__meter {
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--sx-c-track);
}

.sx-service-overview__meter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--sx-c1);
  clip-path: inset(0 calc(100% - var(--w, 0) * 100%) 0 0 round 3px);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out);
}

/* ---------- Adaptive layout ---------- */
@container service-overview (max-width: 920px) {
  .sx-service-overview__volume,
  .sx-service-overview__agents {
    grid-column: 1 / -1;
  }

  /* The chart card now has a row to itself, so nothing stretches it: give the plot a definite
     height (container units such as the dots' cqh need one). */
  .sx-service-overview__chart {
    grid-template-rows: 190px auto;
  }

  .sx-service-overview__channels,
  .sx-service-overview__heat-card {
    grid-column: span 6;
  }
}

@container service-overview (max-width: 760px) {
  .sx-service-overview__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container service-overview (max-width: 640px) {
  .sx-service-overview__chart {
    grid-template-rows: 160px auto;
  }

  .sx-service-overview__volume,
  .sx-service-overview__channels,
  .sx-service-overview__heat-card,
  .sx-service-overview__agents {
    grid-column: 1 / -1;
  }

  .sx-service-overview__head {
    align-items: stretch;
    flex-direction: column;
  }

  .sx-service-overview__kpi-value {
    font-size: 23px;
  }

  .sx-service-overview__tr {
    grid-template-columns: minmax(0, 1.5fr) minmax(52px, 0.7fr) minmax(64px, 0.9fr) minmax(64px, 0.8fr);
    gap: 8px;
  }

  /* Narrow columns: header labels wrap onto two right-aligned lines instead of colliding. */
  .sx-service-overview__thead .sx-service-overview__tr {
    align-items: end;
    padding-bottom: 4px;
  }

  .sx-service-overview__sort {
    height: auto;
    min-height: 24px;
    padding: 2px 6px;
    line-height: 1.25;
    white-space: normal;
    text-align: right;
  }

  .sx-service-overview__th--bar,
  .sx-service-overview__td--bar {
    display: none;
  }
}

@container service-overview (max-width: 460px) {
  .sx-service-overview__card {
    padding: 13px 12px;
  }

  .sx-service-overview__kpi {
    padding: 12px 12px 11px;
  }

  .sx-service-overview__kpi-note {
    display: none;
  }

  .sx-service-overview__xaxis > span[data-minor] {
    visibility: hidden;
  }

  .sx-service-overview__agent .sx-avatar {
    display: none;
  }

  .sx-service-overview__heat {
    --od-day-w: 26px;
    --od-heat-gap: 2px;
  }
}

@container service-overview (max-width: 360px) {
  .sx-service-overview__kpis {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-service-overview__cursor,
  .sx-service-overview__dot {
    transition-property: opacity;
  }
}


/* ---- Contact Dossier (contact-dossier) ---- */
/* ==========================================================================
   Contact Dossier — one customer in full (template inside Product Frame)
   .sx-contact-dossier is a size container: the columns follow the page width.
     wide         details | activity | value
     <= 1000px    value on top, then details | activity
     <= 720px     one column
     <= 460px     icon-only contact buttons
   State: fields carry data-editing and data-saved; timeline events data-type and data-fresh;
   the note composer data-focused (demo focus). The activity filter is a Segment Rail.
   Layouts (data-layout on the root; missing means columns):
     columns      the three columns above
     tabs         the header, then a tab bar (Overview, Activity, Orders, Notes) over one wide column;
                  data-tab on the root names the open tab
     sidebar      a slim profile rail (identity, contact details, value) beside the timeline
   ========================================================================== */

.sx-contact-dossier {
  container: contact-dossier / inline-size;
  min-height: 100%;
  color: var(--sx-ink);
}

.sx-contact-dossier__page {
  display: grid;
  gap: 18px;
  max-width: 1240px;
  padding: 22px 24px 28px;
}

/* ---------- Header ---------- */
.sx-contact-dossier__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 16px;
  min-width: 0;
}

.sx-contact-dossier__avatar {
  --sx-avatar-size: 58px;
  font-size: 20px;
  box-shadow: inset 0 0 0 1px var(--sx-line), var(--sx-shadow-1);
}

.sx-contact-dossier__id {
  display: grid;
  gap: 6px;
  flex: 1;
  min-width: 220px;
}

.sx-contact-dossier__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.sx-contact-dossier__name h1 {
  margin-right: 2px;
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-contact-dossier__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-contact-dossier__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.sx-contact-dossier__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Columns ---------- */
.sx-contact-dossier__grid {
  display: grid;
  grid-template-columns: 252px minmax(0, 1fr) 256px;
  grid-template-areas: "side main aside";
  align-items: start;
  gap: 16px;
}

.sx-contact-dossier__side,
.sx-contact-dossier__aside {
  display: grid;
  align-content: start;
  gap: 16px;
  min-width: 0;
}

.sx-contact-dossier__side {
  grid-area: side;
}

.sx-contact-dossier__main {
  grid-area: main;
  min-width: 0;
}

.sx-contact-dossier__aside {
  grid-area: aside;
}

.sx-contact-dossier__card {
  min-width: 0;
  padding: 14px 16px 14px;
}

.sx-contact-dossier__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 10px;
  min-height: 26px;
  margin-bottom: 8px;
}

.sx-contact-dossier__card-head h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--sx-fs-md);
  --sx-icon-size: 14px;
}

.sx-contact-dossier__card-hint {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  text-align: right;
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-dossier__card-hint[data-state="error"] {
  color: var(--sx-danger-ink);
}

/* ---------- Details (edit in place) ---------- */
.sx-contact-dossier__fields {
  display: grid;
  margin: 0;
}

.sx-contact-dossier__field {
  display: grid;
  gap: 1px;
  padding: 7px 0 6px;
}

.sx-contact-dossier__field + .sx-contact-dossier__field {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-dossier__field dt {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 18px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  --sx-icon-size: 12px;
}

.sx-contact-dossier__field dd {
  margin: 0;
}

.sx-contact-dossier__value,
.sx-contact-dossier__input {
  width: calc(100% + 16px);
  height: 30px;
  margin: 0 -8px;
  padding: 0 8px;
}

.sx-contact-dossier__value {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--sx-r-sm);
  text-align: left;
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-dossier__value > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-contact-dossier__value > .sx-icon {
  --sx-icon-size: 13px;
  color: var(--sx-muted);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-contact-dossier__value:hover {
  background: var(--sx-fill);
}

.sx-contact-dossier__value:hover > .sx-icon,
.sx-contact-dossier__value:focus-visible > .sx-icon {
  opacity: 1;
}

.sx-contact-dossier__value:focus-visible {
  outline-offset: 0;
}

.sx-contact-dossier__field[data-editing] .sx-contact-dossier__input {
  background: var(--sx-surface);
  box-shadow: var(--sx-focus-ring);
  animation: sx-fade-in var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-dossier__field[data-editing] .sx-contact-dossier__input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--sx-danger), 0 0 0 3px var(--sx-danger-soft);
}

.sx-contact-dossier__saved {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-success-ink);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--sx-dur-3) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 11px;
  --sx-icon-stroke: 2.4;
}

.sx-contact-dossier__field[data-saved] .sx-contact-dossier__saved {
  opacity: 1;
  transform: none;
}

.sx-contact-dossier__field[data-saved] .sx-contact-dossier__value {
  animation: cp-saved 1.8s var(--sx-ease-out);
}

/* ---------- Segments and custom fields ---------- */
.sx-contact-dossier__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-contact-dossier__chips .sx-chip {
  height: 24px;
  padding: 0 9px 0 8px;
  gap: 6px;
  font-size: var(--sx-fs-sm);
}

.sx-contact-dossier__chips .sx-dot {
  width: 7px;
  height: 7px;
}

.sx-contact-dossier__props {
  display: grid;
  margin: 0;
}

.sx-contact-dossier__props > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
}

.sx-contact-dossier__props > div + div {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-dossier__props dt {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-contact-dossier__props dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Activity ---------- */
.sx-contact-dossier__main {
  padding-bottom: 6px;
}

.sx-contact-dossier__main .sx-contact-dossier__card-head {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.sx-contact-dossier__filter {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}

.sx-contact-dossier__filter::-webkit-scrollbar {
  display: none;
}

.sx-contact-dossier__composer {
  display: flex;
  gap: 10px;
  margin-bottom: 6px;
  padding: 10px 10px 10px 12px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-dossier__composer:focus-within,
.sx-contact-dossier__composer[data-focused] {
  background: var(--sx-surface);
  box-shadow: var(--sx-focus-ring);
}

.sx-contact-dossier__composer > .sx-avatar {
  --sx-avatar-size: 28px;
  margin-top: 1px;
}

.sx-contact-dossier__composer-box {
  display: grid;
  flex: 1;
  min-width: 0;
}

.sx-contact-dossier__note-input {
  width: 100%;
  min-height: 42px;
  padding: 4px 0 2px;
  border: 0;
  resize: none;
  font-size: var(--sx-fs-base);
  line-height: 1.45;
  color: var(--sx-ink);
  background: transparent;
  outline: none;
}

.sx-contact-dossier__note-input:focus-visible {
  outline: none;
}

.sx-contact-dossier__composer-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-contact-dossier__timeline {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The rail behind the event icons */
.sx-contact-dossier__timeline::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 15px;
  width: 1px;
  background: var(--sx-line);
}

.sx-contact-dossier__event {
  --ev: var(--sx-info);
  --ev-ink: var(--sx-info-ink);
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  margin: 0 -8px;
  padding: 11px 8px 12px;
  border-radius: var(--sx-r-lg);
}

.sx-contact-dossier__event[data-type="order"] {
  --ev: var(--sx-success);
  --ev-ink: var(--sx-success-ink);
}

.sx-contact-dossier__event[data-type="note"] {
  --ev: var(--sx-warning);
  --ev-ink: var(--sx-warning-ink);
}

.sx-contact-dossier__event[data-type="ticket"] {
  --ev: var(--sx-danger);
  --ev-ink: var(--sx-danger-ink);
}

/* A new note lands with a soft highlight that fades */
.sx-contact-dossier__event[data-fresh] {
  animation: cp-fresh 2.6s var(--sx-ease-out);
}

.sx-contact-dossier__event-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--ev-ink);
  background: color-mix(in srgb, var(--ev) 14%, var(--sx-card-bg));
  box-shadow: 0 0 0 3px var(--sx-card-bg), inset 0 0 0 1px color-mix(in srgb, var(--ev) 22%, transparent);
  --sx-icon-size: 15px;
}

.sx-contact-dossier__event-body {
  min-width: 0;
  padding-top: 5px;
}

.sx-contact-dossier__event-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  min-height: 22px;
}

.sx-contact-dossier__event-head > b {
  font-weight: var(--sx-strong-weight);
}

.sx-contact-dossier__event-ref {
  margin-left: -3px;
  color: var(--sx-ink-2);
}

.sx-contact-dossier__event-time {
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.sx-contact-dossier__event-text {
  margin-top: 3px;
  color: var(--sx-ink-2);
}

.sx-contact-dossier__event-amount {
  margin-right: 8px;
  font-weight: 600;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

.sx-contact-dossier__event[data-type="note"] .sx-contact-dossier__event-text {
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink);
  background: color-mix(in srgb, var(--sx-warning) 8%, var(--sx-card-bg));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sx-warning) 18%, transparent);
}

.sx-contact-dossier__event-meta {
  margin-top: 4px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* ---------- Value ---------- */
.sx-contact-dossier__ltv {
  display: grid;
  gap: 3px;
  padding-bottom: 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-contact-dossier__ltv > span:first-child {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-contact-dossier__ltv > b {
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.sx-contact-dossier__ltv .sx-chip {
  justify-self: start;
  margin-top: 4px;
}

.sx-contact-dossier__bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 34px;
  margin-top: 12px;
}

.sx-contact-dossier__bars > span {
  flex: 1;
  height: 100%;
  border-radius: 3px;
  background: var(--sx-c-track);
  transform-origin: bottom;
  transform: scaleY(var(--h, 0.5));
}

.sx-contact-dossier__bars > span:last-child {
  background: var(--sx-c1);
}

.sx-contact-dossier__bars-caption {
  display: flex;
  justify-content: space-between;
  font-size: var(--sx-fs-2xs);
  color: var(--sx-muted);
}

.sx-contact-dossier__stats {
  display: grid;
  margin: 0;
  padding-top: 6px;
}

.sx-contact-dossier__stats > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
}

.sx-contact-dossier__stats > div + div {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-dossier__stats dt {
  color: var(--sx-muted);
}

.sx-contact-dossier__stats dd {
  margin: 0;
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
}

.sx-contact-dossier__summary-text {
  color: var(--sx-ink-2);
  line-height: 1.6;
}

.sx-contact-dossier__summary-meta {
  margin-top: 10px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-contact-dossier__card-head h2 > .sx-icon {
  color: var(--sx-accent-ink);
}

/* ---------- Toast (pinned to the bottom of the scrolling page) ---------- */
.sx-contact-dossier__dock {
  position: sticky;
  z-index: 5;
  bottom: 18px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 0;
  pointer-events: none;
}

.sx-contact-dossier__toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 9px 15px 9px 12px;
  border-radius: var(--sx-r-pill);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: auto;
  --sx-pop-origin: bottom center;
  --sx-icon-size: 15px;
}

.sx-contact-dossier__toast > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sx-contact-dossier__toast > .sx-icon {
  color: var(--sx-success);
}

/* ---------- Layout: tabs ---------- */
.sx-contact-dossier__tabs {
  display: none;
}

.sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__tabs {
  position: relative;
  display: flex;
  gap: 2px;
  margin-top: -4px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--sx-line);
}

.sx-contact-dossier__tabs::-webkit-scrollbar {
  display: none;
}

.sx-contact-dossier__tab {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 7px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--sx-r-md) var(--sx-r-md) 0 0;
  font-weight: 500;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-contact-dossier__tab:hover {
  color: var(--sx-ink-2);
  background: var(--sx-fill);
}

.sx-contact-dossier__tab[aria-selected="true"] {
  color: var(--sx-ink);
}

.sx-contact-dossier__tab:focus-visible {
  outline-offset: -2px;
}

.sx-contact-dossier__tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-contact-dossier__tab[aria-selected="true"] .sx-contact-dossier__tab-count {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
}

/* One line slides to the open tab (positioned from offset metrics) */
.sx-contact-dossier__tab-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--tab-w, 0px);
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--sx-accent);
  transform: translateX(var(--tab-x, 0px));
  pointer-events: none;
}

.sx-contact-dossier__tabs[data-ready] .sx-contact-dossier__tab-line {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "aside side";
}

.sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__aside {
  grid-template-columns: minmax(0, 1fr);
}

.sx-contact-dossier[data-layout="tabs"]:not([data-tab="overview"]) .sx-contact-dossier__grid {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "main";
}

.sx-contact-dossier[data-layout="tabs"][data-tab="overview"] .sx-contact-dossier__main,
.sx-contact-dossier[data-layout="tabs"]:not([data-tab="overview"]) :is(.sx-contact-dossier__side, .sx-contact-dossier__aside) {
  display: none;
}

/* A section fades in when its tab opens (moving between Activity, Orders and Notes keeps the card
   and the timeline moves with FLIP instead). */
.sx-contact-dossier[data-layout="tabs"] :is(.sx-contact-dossier__main, .sx-contact-dossier__side, .sx-contact-dossier__aside) {
  animation: cp-panel-in var(--sx-dur-3) var(--sx-ease-out);
}

.sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__main {
  padding-top: 16px;
}

.sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__main > .sx-contact-dossier__card-head,
.sx-contact-dossier[data-layout="tabs"][data-tab="orders"] .sx-contact-dossier__composer {
  display: none;
}

.sx-contact-dossier[data-layout="tabs"] :is(.sx-contact-dossier__event-text, .sx-contact-dossier__event-meta) {
  max-width: 76ch;
}

/* ---------- Layout: side panel ---------- */
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__page {
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: repeat(6, auto) 1fr;
  align-items: start;
  gap: 14px 16px;
}

.sx-contact-dossier[data-layout="sidebar"] :is(.sx-contact-dossier__grid, .sx-contact-dossier__side, .sx-contact-dossier__aside) {
  display: contents;
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__head {
  grid-area: 1 / 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: var(--sx-card-radius);
  background: var(--sx-card-bg);
  box-shadow: var(--sx-card-shadow);
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__details { grid-area: 2 / 1; }
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__value-card { grid-area: 3 / 1; }
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__segments { grid-area: 4 / 1; }
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__custom { grid-area: 5 / 1; }
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__summary { grid-area: 6 / 1; }

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__main {
  grid-column: 2;
  grid-row: 1 / -1;
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__id {
  flex: none;
  width: 100%;
  min-width: 0;
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__name h1 {
  width: 100%;
  font-size: var(--sx-fs-xl);
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__meta {
  flex-direction: column;
  gap: 4px;
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__actions {
  width: 100%;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__actions .sx-btn--primary {
  flex: 1;
}

/* In the rail only WhatsApp keeps its label; the rest show their icon and keep their names */
.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__actions .sx-btn:not(.sx-btn--primary) {
  width: var(--sx-h-md);
  padding: 0;
}

.sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__actions .sx-btn:not(.sx-btn--primary) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Adaptive layout ---------- */
@container contact-dossier (max-width: 1000px) {
  .sx-contact-dossier__grid {
    grid-template-columns: 244px minmax(0, 1fr);
    grid-template-areas:
      "aside aside"
      "side main";
  }

  .sx-contact-dossier__aside {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: stretch;
  }
}

@container contact-dossier (max-width: 720px) {
  .sx-contact-dossier__page {
    gap: 14px;
    padding: 16px 14px 24px;
  }

  .sx-contact-dossier__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "aside"
      "side"
      "main";
    gap: 14px;
  }

  .sx-contact-dossier__side,
  .sx-contact-dossier__aside {
    gap: 14px;
  }

  .sx-contact-dossier__aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-contact-dossier__head {
    align-items: flex-start;
  }

  .sx-contact-dossier__actions {
    width: 100%;
  }

  .sx-contact-dossier__actions .sx-btn {
    flex: 1;
  }
}

@container contact-dossier (max-width: 460px) {
  .sx-contact-dossier__avatar {
    --sx-avatar-size: 46px;
    font-size: 16px;
  }

  .sx-contact-dossier__id {
    min-width: 0;
  }

  .sx-contact-dossier__name h1 {
    font-size: var(--sx-fs-xl);
  }

  /* WhatsApp stays wide with its label; the other actions show only their icon but keep
     their names for screen readers. */
  .sx-contact-dossier__actions .sx-btn:not(.sx-btn--primary) {
    flex: 0 0 auto;
    width: var(--sx-h-md);
    padding: 0;
  }

  .sx-contact-dossier__actions .sx-btn:not(.sx-btn--primary) > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .sx-contact-dossier__composer > .sx-avatar {
    display: none;
  }

  .sx-contact-dossier__composer-foot > span {
    display: none;
  }

  .sx-contact-dossier__composer-foot {
    justify-content: flex-end;
  }

  .sx-contact-dossier__event-time {
    width: 100%;
    margin-left: 0;
    order: 5;
  }
}

/* Layouts on narrow pages */
@container contact-dossier (max-width: 720px) {
  .sx-contact-dossier[data-layout="tabs"] .sx-contact-dossier__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "aside"
      "side";
  }
}

@container contact-dossier (max-width: 760px) {
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__page {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .sx-contact-dossier[data-layout="sidebar"] :is(
    .sx-contact-dossier__head,
    .sx-contact-dossier__details,
    .sx-contact-dossier__value-card,
    .sx-contact-dossier__segments,
    .sx-contact-dossier__custom,
    .sx-contact-dossier__summary,
    .sx-contact-dossier__main
  ) {
    grid-area: auto;
  }

  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__value-card { order: 1; }
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__details { order: 2; }
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__main { order: 3; }
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__segments { order: 4; }
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__custom { order: 5; }
  .sx-contact-dossier[data-layout="sidebar"] .sx-contact-dossier__summary { order: 6; }
}

/* ---------- Keyframes ---------- */
@keyframes cp-panel-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@keyframes cp-saved {
  0%, 35% { background: var(--sx-success-soft); }
}

@keyframes cp-fresh {
  0%, 35% {
    background: var(--sx-accent-soft);
    box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-contact-dossier__saved {
    transform: none;
  }

  .sx-contact-dossier[data-layout="tabs"] :is(.sx-contact-dossier__main, .sx-contact-dossier__side, .sx-contact-dossier__aside) {
    animation-name: sx-fade-in;
  }
}


/* ---- Blast Planner (blast-planner) ---- */
/* ==========================================================================
   Blast Planner — write a WhatsApp broadcast, preview it, send it gradually (template)
   Renders inside Product Frame's body. The root is a size container:
     wide        form column beside a sticky phone preview
     < 1000px    the phone preview moves below the form
     < 640px     one column everywhere; the footer stacks
   State: root data-status="draft | scheduling | scheduled"; collapsible rows data-open;
          finished steps data-done; variable chips data-pressed; template menu data-state="open"
   ========================================================================== */

.sx-blast-planner {
  --bc-select: color-mix(in srgb, var(--sx-primary) 72%, var(--sx-ink));
  container: blast-planner / inline-size;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  min-height: 0;
  color: var(--sx-ink);
}

.sx-blast-planner__scroll {
  position: relative;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sx-blast-planner__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 284px;
  align-items: start;
  gap: 28px;
  max-width: 1080px;
  padding: 22px 28px 32px;
}

/* ---------- Form column ---------- */
.sx-blast-planner__form {
  display: grid;
  gap: 14px;
  min-width: 0;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner__form[inert] {
  opacity: 0.55;
}

.sx-blast-planner__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 2px 4px;
}

.sx-blast-planner__head h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-blast-planner__head p {
  margin-top: 5px;
  color: var(--sx-muted);
}

.sx-blast-planner__state {
  flex: none;
  margin-top: 5px;
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner__state .sx-dot {
  color: var(--sx-faint);
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__state {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__state .sx-dot {
  color: var(--sx-success);
}

/* ---------- Sections ---------- */
.sx-blast-planner__section {
  display: grid;
  gap: 16px;
  padding: 18px 20px 20px;
}

.sx-blast-planner__section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sx-blast-planner__step {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  font-size: var(--sx-fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
  background: var(--sx-fill-strong);
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner__step > span,
.sx-blast-planner__step > .sx-icon {
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-blast-planner__step > .sx-icon {
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.5;
  opacity: 0;
  transform: scale(0.5);
}

.sx-blast-planner__step[data-done] {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-blast-planner__step[data-done] > span {
  opacity: 0;
  transform: scale(0.5);
}

.sx-blast-planner__step[data-done] > .sx-icon {
  opacity: 1;
  transform: none;
}

.sx-blast-planner__section-title {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-blast-planner__section-title h2 {
  font-size: var(--sx-fs-md);
}

.sx-blast-planner__section-title p {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-blast-planner__label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-blast-planner__field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sx-blast-planner__error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  --sx-icon-size: 14px;
}

.sx-blast-planner__error > .sx-icon {
  margin-top: 2px;
}

/* ---------- Audience ---------- */
.sx-blast-planner__segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.sx-blast-planner__segment {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  justify-items: start;
  gap: 2px;
  min-width: 0;
  padding: 12px 12px 11px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blast-planner__segment:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-blast-planner__segment[aria-checked="true"] {
  box-shadow: inset 0 0 0 1.5px var(--bc-select), var(--sx-shadow-1);
}

.sx-blast-planner__segment-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  transition: color var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
  --sx-icon-size: 15px;
}

.sx-blast-planner__segment[aria-checked="true"] .sx-blast-planner__segment-icon {
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
}

.sx-blast-planner__segment b {
  font-weight: var(--sx-strong-weight);
  line-height: 1.3;
}

.sx-blast-planner__segment-desc {
  font-size: var(--sx-fs-sm);
  line-height: 1.4;
  color: var(--sx-muted);
}

.sx-blast-planner__segment-count {
  margin-top: 6px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-blast-planner__radio {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blast-planner__radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sx-surface);
  transform: scale(0);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-blast-planner__segment[aria-checked="true"] .sx-blast-planner__radio {
  box-shadow: inset 0 0 0 8px var(--bc-select);
}

.sx-blast-planner__segment[aria-checked="true"] .sx-blast-planner__radio::after {
  transform: scale(1);
}

.sx-blast-planner__reach {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  align-items: center;
  gap: 12px 18px;
  padding: 14px 16px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-blast-planner__reach-main {
  display: grid;
  gap: 1px;
  align-self: stretch;
  align-content: center;
  box-shadow: 1px 0 0 var(--sx-line);
}

.sx-blast-planner__reach-num {
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-blast-planner__reach-label {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-blast-planner__reach-notes {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.sx-blast-planner__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  --sx-icon-size: 16px;
}

.sx-blast-planner__note > .sx-icon {
  margin-top: 1px;
  color: var(--sx-success);
}

.sx-blast-planner__skip {
  align-items: flex-start;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-blast-planner__skip .sx-check__box {
  margin-top: 1px;
}

/* ---------- Message ---------- */
.sx-blast-planner__picker {
  position: relative;
  flex: none;
}

.sx-blast-planner__picker-btn {
  gap: 7px;
  padding: 0 8px 0 10px;
}

.sx-blast-planner__picker-btn > .sx-chip {
  height: 18px;
  padding: 0 6px;
  font-size: var(--sx-fs-2xs);
}

.sx-blast-planner__picker-btn > .sx-icon:last-child {
  --sx-icon-size: 14px;
  color: var(--sx-muted);
  transition: transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner__picker-btn[aria-expanded="true"] > .sx-icon:last-child {
  transform: rotate(180deg);
}

.sx-blast-planner__menu {
  --sx-pop-origin: top right;
  position: absolute;
  z-index: var(--sx-z-pop);
  top: calc(100% + 6px);
  right: 0;
  width: 296px;
}

.sx-blast-planner__option {
  align-items: flex-start;
  gap: 10px;
  padding: 7px 8px;
}

.sx-blast-planner__option > .sx-icon {
  margin-top: 2px;
}

.sx-blast-planner__option > span {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sx-blast-planner__option b {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-blast-planner__option small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-blast-planner__option > .sx-icon:last-child {
  color: var(--sx-ink);
  opacity: 0;
  transition: opacity var(--sx-dur-1) var(--sx-ease-out);
}

.sx-blast-planner__option[aria-checked="true"] > .sx-icon:last-child {
  opacity: 1;
}

.sx-blast-planner__text {
  min-height: 92px;
  resize: vertical;
  line-height: 1.55;
}

.sx-blast-planner__tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.sx-blast-planner__tools-label {
  margin-right: 2px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-blast-planner__var {
  height: 24px;
  padding: 0 9px 0 7px;
  cursor: pointer;
  transition:
    color var(--sx-dur-1) var(--sx-ease-out),
    background-color var(--sx-dur-1) var(--sx-ease-out),
    box-shadow var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-spring);
}

.sx-blast-planner__var:hover {
  color: var(--sx-ink);
  background: var(--sx-raised-hover);
}

.sx-blast-planner__var:active,
.sx-blast-planner__var[data-pressed] {
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  transform: scale(0.94);
}

.sx-blast-planner__counter {
  margin-left: auto;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-blast-planner__extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.sx-blast-planner__media {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 6px;
  border-radius: var(--sx-r-lg);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-blast-planner__thumb {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: 3.2px;
}

.sx-blast-planner__media-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-blast-planner__media-text b {
  overflow: hidden;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-blast-planner__media-text small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-blast-planner__add-media {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 6px 12px;
  border: 1px dashed var(--sx-line-strong);
  border-radius: var(--sx-r-lg);
  text-align: left;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 16px;
}

.sx-blast-planner__add-media:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

.sx-blast-planner__add-media small {
  display: block;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-blast-planner__file {
  display: none;
}

.sx-blast-planner__replies {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 52px;
}

.sx-blast-planner__reply {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 28px;
  padding: 0 3px 0 11px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blast-planner__reply:focus-within {
  box-shadow: var(--sx-focus-ring);
}

.sx-blast-planner__reply input {
  field-sizing: content;
  min-width: 5ch;
  max-width: 22ch;
  height: 100%;
  padding: 0;
  border: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink);
  background: transparent;
  outline: none;
}

@supports not (field-sizing: content) {
  .sx-blast-planner__reply input {
    width: 13ch;
  }
}

.sx-blast-planner__reply button {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--sx-muted);
  transition: color var(--sx-dur-1) var(--sx-ease-out), background-color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-blast-planner__reply button:hover {
  color: var(--sx-ink);
  background: var(--sx-fill);
}

/* ---------- Schedule ---------- */
.sx-blast-planner__when {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 16px;
}

/* Rows that open and close with the grid trick */
.sx-blast-planner__collapse {
  display: grid;
  grid-template-rows: 0fr;
  margin: -3px;
  opacity: 0;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blast-planner__collapse[data-open] {
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows var(--sx-dur-4) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out) 0.08s;
}

.sx-blast-planner__collapse > div {
  min-height: 0;
  overflow: hidden;
}

.sx-blast-planner__datetime {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 10px;
  padding: 3px;
}

.sx-blast-planner__datetime .sx-input {
  height: var(--sx-h-lg);
  font-variant-numeric: tabular-nums;
}

.sx-blast-planner__datetime .sx-hint,
.sx-blast-planner__datetime .sx-blast-planner__error {
  grid-column: 1 / -1;
}

.sx-blast-planner__gradual {
  display: grid;
  gap: 4px;
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-blast-planner__gradual-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sx-blast-planner__gradual-text {
  display: grid;
  gap: 2px;
}

.sx-blast-planner__gradual-text b {
  font-weight: var(--sx-strong-weight);
}

.sx-blast-planner__gradual-text span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-blast-planner__gradual-head .sx-switch {
  margin-top: 2px;
}

.sx-blast-planner__rate {
  display: grid;
  gap: 6px;
  padding: 12px 3px 3px;
}

.sx-blast-planner__rate-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sx-blast-planner__rate-value {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-blast-planner__slider {
  --bc-fill: 0;
  --bc-thumb: 18px;
  width: 100%;
  height: 22px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.sx-blast-planner__slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--sx-r-pill);
  background: linear-gradient(
    to right,
    var(--sx-accent) 0,
    var(--sx-accent) calc(var(--bc-thumb) / 2 + var(--bc-fill) * (100% - var(--bc-thumb))),
    var(--sx-c-track) calc(var(--bc-thumb) / 2 + var(--bc-fill) * (100% - var(--bc-thumb)))
  );
}

.sx-blast-planner__slider::-moz-range-track {
  height: 6px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-blast-planner__slider::-moz-range-progress {
  height: 6px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-accent);
}

.sx-blast-planner__slider::-webkit-slider-thumb {
  width: var(--bc-thumb);
  height: var(--bc-thumb);
  margin-top: -6px;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-2) var(--sx-ease-out);
  -webkit-appearance: none;
  appearance: none;
}

.sx-blast-planner__slider::-moz-range-thumb {
  width: var(--bc-thumb);
  height: var(--bc-thumb);
  border: 0;
  border-radius: 50%;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-2);
}

.sx-blast-planner__slider:active::-webkit-slider-thumb {
  transform: scale(1.1);
}

.sx-blast-planner__slider:focus-visible {
  outline: none;
}

.sx-blast-planner__slider:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--sx-focus-ring), var(--sx-shadow-2);
}

.sx-blast-planner__slider:focus-visible::-moz-range-thumb {
  box-shadow: var(--sx-focus-ring), var(--sx-shadow-2);
}

.sx-blast-planner__ticks {
  display: flex;
  justify-content: space-between;
  font-size: var(--sx-fs-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-blast-planner__estimate {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--sx-r-lg);
  background: var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-blast-planner__est {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sx-blast-planner__est span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  --sx-icon-size: 12px;
}

.sx-blast-planner__est b {
  overflow: hidden;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ---------- Phone preview ---------- */
.sx-blast-planner__preview {
  position: sticky;
  top: 22px;
  display: grid;
  justify-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-blast-planner__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 272px;
  padding-left: 4px;
}

.sx-blast-planner__preview-title {
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-blast-planner__sample {
  gap: 6px;
  padding: 0 8px 0 4px;
  border-radius: var(--sx-r-pill);
}

.sx-blast-planner__sample > .sx-icon {
  --sx-icon-size: 12px;
  color: var(--sx-muted);
}

.sx-blast-planner__phone {
  width: 272px;
  height: 540px;
  padding: 7px;
  border-radius: 40px;
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-3), inset 0 0 0 1px var(--sx-line);
}

.sx-blast-planner__screen {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  height: 100%;
  overflow: hidden;
  border-radius: 33px;
  background: var(--sx-surface-3);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-blast-planner__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  padding: 2px 22px 0 26px;
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink);
  background: var(--sx-surface);
}

.sx-blast-planner__signal {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Signal bars and a battery, drawn with gradients */
.sx-blast-planner__signal::before {
  content: "";
  width: 15px;
  height: 9px;
  background:
    linear-gradient(currentColor, currentColor) 0 100% / 3px 35% no-repeat,
    linear-gradient(currentColor, currentColor) 4px 100% / 3px 55% no-repeat,
    linear-gradient(currentColor, currentColor) 8px 100% / 3px 78% no-repeat,
    linear-gradient(currentColor, currentColor) 12px 100% / 3px 100% no-repeat;
}

.sx-blast-planner__signal::after {
  content: "";
  width: 20px;
  height: 10px;
  border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) 2px 50% / 13px 6px no-repeat;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent);
}

.sx-blast-planner__chat-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 9px 8px;
  background: var(--sx-surface);
  box-shadow: 0 1px 0 var(--sx-line);
  --sx-icon-size: 16px;
}

.sx-blast-planner__chat-head > .sx-icon {
  color: var(--sx-muted);
}

.sx-blast-planner__biz {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 50%;
  font-size: var(--sx-fs-sm);
  font-weight: 700;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
}

.sx-blast-planner__chat-name {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sx-blast-planner__chat-name b {
  font-size: var(--sx-fs-sm);
  font-weight: 600;
}

.sx-blast-planner__chat-name small {
  font-size: 10px;
  color: var(--sx-muted);
}

.sx-blast-planner__chat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  min-height: 0;
  padding: 12px 10px;
  overflow: hidden;
  background-color: var(--sx-surface-3);
  background-image: radial-gradient(circle at 1px 1px, var(--sx-line) 1px, transparent 1.5px);
  background-size: 14px 14px;
}

.sx-blast-planner__day {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  margin-bottom: 6px;
  padding: 2px 9px;
  border-radius: var(--sx-r-pill);
  font-size: 10px;
  font-weight: 500;
  color: var(--sx-muted);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 11px;
}

.sx-blast-planner__day > .sx-icon {
  display: none;
}

/* Once scheduled, the day marker in the phone becomes the confirmation stamp */
.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__day {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  animation: sx-pop-in var(--sx-dur-4) var(--sx-ease-spring) both;
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__day > .sx-icon {
  display: block;
}

.sx-blast-planner__msg {
  display: grid;
  gap: 4px;
  width: 90%;
}

.sx-blast-planner__bubble {
  display: grid;
  padding: 4px 4px 5px;
  border-radius: 4px 14px 14px 14px;
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
}

.sx-blast-planner__bubble-media {
  height: 120px;
  margin-bottom: 5px;
  border-radius: 10px;
  font-size: 10px;
}

.sx-blast-planner__bubble-text {
  padding: 1px 7px 0;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sx-blast-planner__bubble-text[data-empty] {
  color: var(--sx-faint);
}

.sx-blast-planner__fill {
  border-radius: 3px;
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: 0 0 0 1.5px var(--sx-accent-soft);
}

.sx-blast-planner__bubble-time {
  justify-self: end;
  padding: 0 6px;
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-blast-planner__bubble-replies {
  display: grid;
  gap: 4px;
}

.sx-blast-planner__bubble-reply {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  height: 30px;
  padding: 0 10px;
  overflow: hidden;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-accent-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
  animation: sx-fade-in var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 13px;
}

.sx-blast-planner__bubble-reply[data-empty] {
  color: var(--sx-faint);
}

.sx-blast-planner__compose {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px 16px;
  background: var(--sx-surface-3);
}

.sx-blast-planner__compose > span:first-child {
  display: flex;
  align-items: center;
  flex: 1;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  color: var(--sx-faint);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-1);
}

.sx-blast-planner__mic {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  --sx-icon-size: 15px;
}

.sx-blast-planner__preview-note {
  max-width: 260px;
  font-size: var(--sx-fs-xs);
  text-align: center;
  color: var(--sx-muted);
}

/* Sample header image: a stack of folded linen under a soft sun, drawn in em so it scales
   with the box (font-size sets the size). A real upload replaces it (data-photo). */
.sx-blast-planner__art {
  --bc-art-lip: color-mix(in srgb, var(--sx-ink) 16%, transparent);
  position: relative;
  overflow: hidden;
  background-color: var(--sx-raised);
  background-image:
    radial-gradient(60% 70% at 14% 8%, color-mix(in srgb, var(--sx-raised) 80%, transparent), transparent 70%),
    linear-gradient(160deg, color-mix(in srgb, var(--sx-c3) 22%, var(--sx-raised)) 0%, color-mix(in srgb, var(--sx-c2) 26%, var(--sx-raised)) 100%);
  background-position: center;
  background-size: cover;
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

/* Four folded pieces of linen, each with a darker lip underneath */
.sx-blast-planner__art::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 1.6em;
  width: 10em;
  height: 1.8em;
  margin-left: -5em;
  border-radius: 0.4em 0.4em 0.7em 0.7em;
  background: color-mix(in srgb, var(--sx-c3) 55%, var(--sx-raised));
  box-shadow:
    0 -1.75em 0 -0.15em color-mix(in srgb, var(--sx-c2) 48%, var(--sx-raised)),
    0 -1.55em 0 -0.15em var(--bc-art-lip),
    0 -3.5em 0 -0.3em color-mix(in srgb, var(--sx-c6) 40%, var(--sx-raised)),
    0 -3.3em 0 -0.3em var(--bc-art-lip),
    0 -5.25em 0 -0.45em color-mix(in srgb, var(--sx-c4) 42%, var(--sx-raised)),
    0 -5.05em 0 -0.45em var(--bc-art-lip),
    0 0.2em 0 0 var(--bc-art-lip),
    0 1em 1.4em -0.4em color-mix(in srgb, var(--sx-ink) 24%, transparent);
}

/* A soft sun in the corner */
.sx-blast-planner__art::after {
  content: "";
  position: absolute;
  top: 1.3em;
  right: 2em;
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  background: color-mix(in srgb, var(--sx-c2) 50%, var(--sx-raised));
  box-shadow: 0 0 0 0.8em color-mix(in srgb, var(--sx-c2) 14%, transparent);
}

.sx-blast-planner__art[data-photo]::before,
.sx-blast-planner__art[data-photo]::after {
  display: none;
}

/* ---------- Footer bar ---------- */
.sx-blast-planner__bar {
  display: grid;
  min-height: 64px;
  padding: 0 28px;
  box-shadow: inset 0 1px 0 var(--sx-line);
}

.sx-blast-planner__bar-main,
.sx-blast-planner__done {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 26px;
  min-width: 0;
  padding: 10px 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear 0s;
}

.sx-blast-planner__done {
  gap: 12px;
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__bar-main {
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__done {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out) 0.1s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.1s,
    visibility 0s linear 0s;
}

.sx-blast-planner__stat {
  display: grid;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
}

.sx-blast-planner__stat > span:first-child {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-blast-planner__stat > b {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 64px;
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-blast-planner__quota {
  position: relative;
  width: 120px;
  height: 6px;
  overflow: hidden;
  border-radius: var(--sx-r-pill);
  background: var(--sx-c-track);
}

.sx-blast-planner__quota > span {
  position: absolute;
  inset: 0;
  transform-origin: left center;
  transition: transform var(--sx-dur-5) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-blast-planner__quota-used {
  background: var(--sx-c6);
  transform: scaleX(var(--bc-used, 0));
}

.sx-blast-planner__quota-this {
  background: var(--sx-accent);
  transform: translateX(calc(var(--bc-used, 0) * 100%)) scaleX(var(--bc-this, 0));
}

.sx-blast-planner__bar-note {
  min-width: 0;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-blast-planner__bar[data-over] .sx-blast-planner__bar-note {
  color: var(--sx-danger-ink);
}

.sx-blast-planner__bar[data-over] .sx-blast-planner__quota-this {
  background: var(--sx-danger);
}

.sx-blast-planner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex: none;
}

.sx-blast-planner__swap {
  display: grid;
}

.sx-blast-planner__swap > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  grid-area: 1 / 1;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-blast-planner__swap > span:last-child,
.sx-blast-planner__save[data-saved] .sx-blast-planner__swap > span:first-child {
  opacity: 0;
  transform: translateY(4px);
}

.sx-blast-planner__save[data-saved] .sx-blast-planner__swap > span:last-child {
  opacity: 1;
  transform: none;
  color: var(--sx-success-ink);
}

.sx-blast-planner__done-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 16px;
}

.sx-blast-planner[data-status="scheduled"] .sx-blast-planner__done-icon {
  animation: sx-pop-in var(--sx-dur-4) var(--sx-ease-spring) 0.1s both;
}

.sx-blast-planner__done-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

.sx-blast-planner__done-text b {
  font-weight: var(--sx-strong-weight);
}

.sx-blast-planner__done-text span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* ---------- Adaptive layout ---------- */
@container blast-planner (max-width: 999px) {
  .sx-blast-planner__layout {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    margin: 0 auto;
  }

  .sx-blast-planner__preview {
    position: static;
    padding-top: 6px;
  }
}

@container blast-planner (max-width: 640px) {
  .sx-blast-planner__layout {
    gap: 22px;
    padding: 16px 14px 24px;
  }

  .sx-blast-planner__head h1 {
    font-size: var(--sx-fs-xl);
  }

  .sx-blast-planner__section {
    padding: 16px 14px 16px;
  }

  .sx-blast-planner__section-head {
    flex-wrap: wrap;
  }

  .sx-blast-planner__picker {
    width: 100%;
  }

  .sx-blast-planner__picker-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .sx-blast-planner__picker-btn > .sx-icon:last-child {
    margin-left: auto;
  }

  .sx-blast-planner__menu {
    left: 0;
    width: auto;
    --sx-pop-origin: top center;
  }

  .sx-blast-planner__segments,
  .sx-blast-planner__extras,
  .sx-blast-planner__reach {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-blast-planner__segment {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 12px;
  }

  .sx-blast-planner__segment-icon {
    grid-row: span 3;
    margin-bottom: 0;
  }

  .sx-blast-planner__segment-count {
    margin-top: 2px;
  }

  .sx-blast-planner__reach-main {
    padding-bottom: 10px;
    box-shadow: 0 1px 0 var(--sx-line);
  }

  .sx-blast-planner__replies {
    min-height: 0;
  }

  .sx-blast-planner__estimate {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .sx-blast-planner__est:last-child {
    grid-column: 1 / -1;
  }

  .sx-blast-planner__bar {
    padding: 0 14px;
  }

  .sx-blast-planner__bar-main {
    flex-wrap: wrap;
    gap: 8px 20px;
  }

  .sx-blast-planner__bar-note {
    flex: 1 1 100%;
    order: 3;
  }

  .sx-blast-planner__actions {
    flex: 1 1 100%;
    order: 4;
    margin-left: 0;
  }

  .sx-blast-planner__actions > .sx-btn {
    flex: 1;
  }

  .sx-blast-planner__done {
    flex-wrap: wrap;
  }

  .sx-blast-planner__done > .sx-btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-blast-planner__done,
  .sx-blast-planner__swap > span,
  .sx-blast-planner[data-status="scheduled"] .sx-blast-planner__bar-main,
  .sx-blast-planner__save[data-saved] .sx-blast-planner__swap > span:first-child,
  .sx-blast-planner__swap > span:last-child {
    transform: none;
  }

  .sx-blast-planner[data-status="scheduled"] .sx-blast-planner__done-icon,
  .sx-blast-planner[data-status="scheduled"] .sx-blast-planner__day {
    animation-name: sx-fade-in;
  }

  .sx-blast-planner__var:active,
  .sx-blast-planner__var[data-pressed] {
    transform: none;
  }
}


/* ---- Login Screen (login-screen) ---- */
/* ==========================================================================
   Login Screen — Google or an email code, then a workspace (template, full screen)
   Layouts (root data-layout; a missing attribute means form-left):
     form-left   the form on the left, a brand banner on the right
     form-right  the mirror: banner on the left, form on the right
     center      the form as a centred card under a slim brand strip
   The root is a size container and scrolls inside itself:
     < 900px     every layout becomes the single form column
     < 420px     tighter padding and smaller code boxes
   State: root data-step="email | sending | google | code | workspace | opening | done";
          each panel data-pos="before | current | after"; inputs aria-invalid; options aria-checked
   Reuses Passcode Boxes for the code step (.sx-login-screen__code sizes it to the column; the doubled class
   outranks Passcode Boxes's own width whichever stylesheet loads last).
   ========================================================================== */

.sx-login-screen {
  --si-select: color-mix(in srgb, var(--sx-primary) 72%, var(--sx-ink));
  container: login-screen / inline-size;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  color: var(--sx-ink);
  background: var(--sx-shell);
}

.sx-login-screen__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.16fr);
  min-height: 100%;
}

/* ---------- Form column ---------- */
.sx-login-screen__main {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 24px;
  min-width: 0;
  padding: 28px 44px 24px;
  /* Panels waiting off to the side never add sideways overflow */
  overflow-x: clip;
}

.sx-login-screen__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.sx-login-screen__mark {
  width: 24px;
  height: 24px;
  flex: none;
}

.sx-login-screen__mark rect {
  fill: var(--sx-primary);
}

.sx-login-screen__mark path {
  stroke: var(--sx-on-primary);
}

.sx-login-screen__mark circle {
  fill: var(--sx-mark);
}

/* Panels share one cell, centred in the column. The tallest panel sets the cell's height and the
   others sit at its top, so moving between panels or showing an error never shifts anything. */
.sx-login-screen__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  align-items: start;
  justify-items: center;
  min-width: 0;
}

.sx-login-screen__panel {
  grid-area: 1 / 1;
  display: grid;
  align-content: center;
  gap: 16px;
  width: min(100%, 360px);
  transition:
    opacity var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    transform var(--sx-dur-4) var(--sx-ease-out) 0.08s,
    visibility 0s linear 0s;
}

.sx-login-screen__panel[data-pos="before"],
.sx-login-screen__panel[data-pos="after"] {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-login-screen__panel[data-pos="before"] {
  transform: translateX(-24px);
}

.sx-login-screen__panel[data-pos="after"] {
  transform: translateX(24px);
}

.sx-login-screen__intro {
  display: grid;
  gap: 6px;
  margin-bottom: 6px;
}

.sx-login-screen__title {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-login-screen__lead {
  color: var(--sx-muted);
}

.sx-login-screen__lead strong {
  font-weight: 500;
  color: var(--sx-ink);
}

.sx-login-screen__link {
  border-radius: var(--sx-r-xs);
  font-weight: 500;
  color: var(--sx-ink);
  text-decoration: underline;
  text-decoration-color: var(--sx-line-strong);
  text-underline-offset: 0.22em;
  transition: color var(--sx-dur-1) var(--sx-ease-out), text-decoration-color var(--sx-dur-1) var(--sx-ease-out);
}

.sx-login-screen__link:hover {
  color: var(--sx-accent-ink);
  text-decoration-color: currentColor;
}

.sx-login-screen__google {
  gap: 10px;
}

.sx-login-screen__g {
  width: 18px;
  height: 18px;
  flex: none;
}

.sx-login-screen__or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-login-screen__or::before,
.sx-login-screen__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--sx-line);
}

.sx-login-screen__form {
  display: grid;
  gap: 12px;
}

.sx-login-screen__input {
  height: var(--sx-h-lg);
  padding: 0 12px;
  font-size: var(--sx-fs-md);
}

.sx-login-screen__input[data-preview-focus] {
  box-shadow: var(--sx-focus-ring);
}

.sx-login-screen__error {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  color: var(--sx-danger-ink);
  animation: sx-rise-in var(--sx-dur-3) var(--sx-ease-out);
  --sx-icon-size: 14px;
}

.sx-login-screen__error > .sx-icon {
  margin-top: 2px;
}

.sx-login-screen__fine {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

/* Code step: Passcode Boxes fills the column */
.sx-login-screen__code.sx-passcode-boxes {
  width: 100%;
}

.sx-login-screen__back {
  justify-self: center;
}

/* Workspace picker */
.sx-login-screen__workspaces {
  display: grid;
  gap: 8px;
}

.sx-login-screen__ws {
  --ws-tone: var(--sx-c1);
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px 10px 10px;
  border-radius: var(--sx-r-lg);
  text-align: left;
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out), background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-login-screen__ws:hover {
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
}

.sx-login-screen__ws[aria-checked="true"] {
  box-shadow: inset 0 0 0 1.5px var(--si-select), var(--sx-shadow-1);
}

.sx-login-screen__ws-logo {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-md);
  font-weight: 700;
  color: color-mix(in srgb, var(--ws-tone) 70%, var(--sx-ink));
  background: color-mix(in srgb, var(--ws-tone) 16%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ws-tone) 24%, transparent);
}

.sx-login-screen__ws-text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-login-screen__ws-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-login-screen__ws-text small {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-login-screen__radio {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: 50%;
  background: var(--sx-surface);
  box-shadow: inset 0 0 0 1px var(--sx-line-strong);
  transition: box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-login-screen__radio::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--sx-surface);
  transform: scale(0);
  transition: transform var(--sx-dur-3) var(--sx-ease-spring);
}

.sx-login-screen__ws[aria-checked="true"] .sx-login-screen__radio {
  box-shadow: inset 0 0 0 8px var(--si-select);
}

.sx-login-screen__ws[aria-checked="true"] .sx-login-screen__radio::after {
  transform: scale(1);
}

/* Signed in */
.sx-login-screen__panel--done {
  align-self: center;
  justify-items: center;
  text-align: center;
}

.sx-login-screen__done-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
  box-shadow: inset 0 0 0 1px var(--sx-success-line);
  --sx-icon-size: 24px;
  --sx-icon-stroke: 2.25;
}

.sx-login-screen__panel--done[data-pos="current"] .sx-login-screen__done-icon {
  animation: sx-pop-in var(--sx-dur-4) var(--sx-ease-spring) 0.12s both;
}

.sx-login-screen__opening {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sx-muted);
}

.sx-login-screen__opening .sx-spinner {
  --sx-spinner-size: 13px;
}

.sx-login-screen__foot {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-login-screen__foot a {
  color: var(--sx-ink-2);
  border-radius: var(--sx-r-xs);
}

/* ---------- Brand banner: headline, one line, a quiet look at the product ---------- */
.sx-login-screen__banner {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 28px;
  min-width: 0;
  margin: 8px 8px 8px 0;
  padding: 48px 52px 40px;
  overflow: hidden;
  border-radius: var(--sx-r-2xl);
  background-color: var(--sx-panel);
  background-image:
    radial-gradient(52% 42% at 92% 6%, var(--sx-glow-1), transparent 72%),
    radial-gradient(48% 44% at 4% 98%, var(--sx-glow-3), transparent 72%),
    radial-gradient(36% 30% at 66% 70%, var(--sx-glow-2), transparent 72%),
    radial-gradient(circle at 1px 1px, var(--sx-line) 1px, transparent 1.5px);
  background-size: auto, auto, auto, 18px 18px;
  box-shadow: var(--sx-ring);
}

.sx-login-screen__banner-copy {
  display: grid;
  gap: 10px;
  max-width: 440px;
  animation: sx-rise-in var(--sx-dur-5) var(--sx-ease-out) both;
}

.sx-login-screen__headline {
  font-size: var(--sx-fs-3xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.12;
}

.sx-login-screen__tagline {
  font-size: var(--sx-fs-md);
  color: var(--sx-ink-2);
}

.sx-login-screen__stack {
  position: relative;
  align-self: center;
  justify-self: center;
  width: 444px;
  height: 356px;
}

.sx-login-screen__peek {
  position: absolute;
  display: grid;
  gap: 10px;
  width: 352px;
  padding: 14px 14px 12px;
  animation: sx-rise-in var(--sx-dur-5) var(--sx-ease-out) both;
}

.sx-login-screen__peek--thread {
  top: 0;
  left: 0;
  animation-delay: 0.1s;
}

.sx-login-screen__peek--reply {
  top: 158px;
  left: 92px;
  box-shadow: var(--sx-shadow-3);
  animation-delay: 0.24s;
}

.sx-login-screen__peek-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-login-screen__peek-who {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}

.sx-login-screen__peek-who b {
  font-weight: var(--sx-strong-weight);
}

.sx-login-screen__peek-who small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-login-screen__bubble {
  justify-self: start;
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 4px 12px 12px 12px;
  font-size: var(--sx-fs-sm);
  line-height: 1.45;
  background: var(--sx-surface-3);
}

.sx-login-screen__bubble--me {
  justify-self: end;
  border-radius: 12px 4px 12px 12px;
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-login-screen__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  --sx-icon-size: 13px;
}

.sx-login-screen__meta > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.sx-login-screen__meta .sx-icon {
  color: var(--sx-success);
}

.sx-login-screen__toast {
  position: absolute;
  right: 0;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 10px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  animation: sx-rise-in var(--sx-dur-5) var(--sx-ease-out) 0.4s both;
  --sx-icon-size: 16px;
}

.sx-login-screen__toast > .sx-icon {
  color: var(--sx-success);
}

/* ---------- Brand strip (centred layout) ---------- */
.sx-login-screen__strip {
  display: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 44px;
  padding: 0 20px;
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-inset-highlight);
}

.sx-login-screen__strip .sx-login-screen__mark {
  width: 20px;
  height: 20px;
}

.sx-login-screen__strip .sx-login-screen__mark rect {
  fill: var(--sx-on-primary);
}

.sx-login-screen__strip .sx-login-screen__mark path {
  stroke: var(--sx-primary);
}

.sx-login-screen__strip b {
  font-weight: 600;
}

.sx-login-screen__strip-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding-left: 12px;
  margin-left: 2px;
  text-overflow: ellipsis;
  color: color-mix(in srgb, var(--sx-on-primary) 78%, transparent);
  box-shadow: inset 1px 0 0 color-mix(in srgb, var(--sx-on-primary) 26%, transparent);
}

.sx-login-screen__strip-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  border-radius: var(--sx-r-xs);
  font-weight: 500;
  color: inherit;
  text-decoration: none;
  --sx-icon-size: 14px;
}

.sx-login-screen__strip-link:hover span {
  text-decoration: underline;
  text-underline-offset: 0.22em;
}

/* ---------- Layouts (wide screens only; below 900px they all share the single column) ---------- */
@container login-screen (min-width: 900px) {
  /* Form right: the banner moves to the left */
  .sx-login-screen[data-layout="form-right"] .sx-login-screen__layout {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
  }

  .sx-login-screen[data-layout="form-right"] .sx-login-screen__banner {
    order: -1;
    margin: 8px 0 8px 8px;
  }

  /* Centred: a card on a quiet ground under the brand strip */
  .sx-login-screen[data-layout="center"] .sx-login-screen__layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    background-image:
      radial-gradient(60% 50% at 50% 0%, var(--sx-glow-3), transparent 70%),
      radial-gradient(circle at 1px 1px, var(--sx-line) 1px, transparent 1.5px);
    background-size: auto, 22px 22px;
  }

  .sx-login-screen[data-layout="center"] .sx-login-screen__strip {
    display: flex;
  }

  .sx-login-screen[data-layout="center"] .sx-login-screen__banner,
  .sx-login-screen[data-layout="center"] .sx-login-screen__brand {
    display: none;
  }

  .sx-login-screen[data-layout="center"] .sx-login-screen__main {
    grid-template-rows: auto auto;
    align-self: center;
    justify-self: center;
    width: min(100% - 48px, 440px);
    margin: 28px 0 36px;
    padding: 34px 40px 22px;
    border-radius: var(--sx-r-2xl);
    background: var(--sx-surface);
    box-shadow: var(--sx-shadow-3);
  }

  .sx-login-screen[data-layout="center"] .sx-login-screen__foot {
    padding-top: 16px;
    text-align: center;
    box-shadow: inset 0 1px 0 var(--sx-line-soft);
  }

  /* The card already gives the code step its surface, so Passcode Boxes sits flat inside it */
  .sx-login-screen[data-layout="center"] .sx-login-screen__code.sx-passcode-boxes {
    background: transparent;
    box-shadow: none;
  }
}

/* ---------- Adaptive layout ---------- */
@container login-screen (max-width: 1100px) {
  .sx-login-screen__stack {
    transform: scale(0.86);
  }

  .sx-login-screen__banner {
    padding: 40px 36px 32px;
  }

  .sx-login-screen__headline {
    font-size: 28px;
  }
}

@container login-screen (max-width: 899px) {
  .sx-login-screen__layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sx-login-screen__banner {
    display: none;
  }

  .sx-login-screen__main {
    padding: 24px 28px 20px;
  }
}

@container login-screen (max-width: 480px) {
  .sx-login-screen__main {
    gap: 20px;
    padding: 18px 18px 16px;
  }

  .sx-login-screen__title {
    font-size: 22px;
  }
}

@container login-screen (max-width: 420px) {
  .sx-login-screen__code.sx-passcode-boxes {
    --cf-cell-w: 38px;
    --cf-cell-h: 46px;
    --cf-gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-login-screen__panel[data-pos] {
    transform: none;
  }

  .sx-login-screen__peek,
  .sx-login-screen__toast,
  .sx-login-screen__banner-copy,
  .sx-login-screen__error {
    animation-name: sx-fade-in;
  }

  .sx-login-screen__panel--done[data-pos="current"] .sx-login-screen__done-icon {
    animation-name: sx-fade-in;
  }
}


/* ---- Table Floor (table-floor) ---- */
/* ==========================================================================
   Table Floor — a restaurant host stand (full-screen template, no Product Frame)
   .sx-table-floor is a size container: the layout follows the stand, not the window.
     wide         the floor plan on the left, the host panel on the right
     <= 1100px    a narrower panel
     <= 980px     the zone tabs take their own row
     <= 900px     the panel stacks under the plan; everything under the top bar scrolls
     <= 600px     compact top bar; the plan keeps a readable size and scrolls sideways
   (The root is the size container, so the rules below only ever restyle its parts.)
   Root state: data-zone, data-view="waitlist | table | layout", data-pick="seat | move | merge",
   data-editing, data-dragging.
   Tables: data-shape="round-2 | round-4 | square-4 | long-8 | booth-4",
           data-status="free | seated | ordering | bill | reserved | cleaning", data-party (guests
           at that table), data-joined, data-eligible, data-flash="a | b", data-dragging, data-invalid,
           aria-pressed (open in the panel). --x and --y place a table in plan units.
   Plan units: every zone is a 1000 × 640 plan; --u is one unit at the plan's current size, so
   the room, the tables, their chairs and their type scale together.
   ========================================================================== */

.sx-table-floor {
  --tf-side-w: 344px;
  --tf-pad: 20px;
  --tf-gap: 8px;
  --tf-wall: color-mix(in srgb, var(--sx-ink) 62%, var(--sx-surface));
  --tf-chair: color-mix(in srgb, var(--sx-ink) 17%, var(--sx-surface));
  --tf-bench: color-mix(in srgb, var(--sx-ink) 9%, var(--sx-surface));
  container: table-floor / inline-size;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: clip;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
  background: var(--sx-shell);
}

/* ---------- Status tones (tables, legend keys, the panel chip and join lines) ---------- */
.sx-table-floor [data-status="free"] {
  --tone: var(--sx-success);
  --tone-ink: var(--sx-success-ink);
  --tone-line: var(--sx-success-line);
}

.sx-table-floor [data-status="seated"] {
  --tone: var(--sx-info);
  --tone-ink: var(--sx-info-ink);
  --tone-line: var(--sx-info-line);
}

.sx-table-floor [data-status="ordering"] {
  --tone: var(--sx-mark);
  --tone-ink: var(--sx-mark-ink);
  --tone-line: var(--sx-mark-line);
}

.sx-table-floor [data-status="bill"] {
  --tone: var(--sx-warning);
  --tone-ink: var(--sx-warning-ink);
  --tone-line: var(--sx-warning-line);
}

.sx-table-floor [data-status="reserved"] {
  --tone: color-mix(in srgb, var(--sx-ink) 52%, var(--sx-surface));
  --tone-ink: var(--sx-ink-2);
  --tone-line: var(--sx-line-strong);
}

.sx-table-floor [data-status="cleaning"] {
  --tone: var(--sx-danger);
  --tone-ink: var(--sx-danger-ink);
  --tone-line: var(--sx-danger-line);
}

/* ---------- Top bar ---------- */
.sx-table-floor__top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 62px;
  padding: 0 var(--tf-pad);
}

.sx-table-floor__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.sx-table-floor__logo {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-md);
  font-size: var(--sx-fs-md);
  font-weight: 700;
  color: var(--sx-on-primary);
  background: var(--sx-primary-bg);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}

.sx-table-floor__brand-text {
  display: grid;
  min-width: 0;
  line-height: 1.25;
}

.sx-table-floor__brand-text b {
  overflow: hidden;
  font-size: var(--sx-fs-md);
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-table-floor__brand-text small,
.sx-table-floor__clock small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
}

.sx-table-floor__service {
  flex: none;
}

.sx-table-floor__zones {
  display: flex;
  gap: 2px;
  min-width: 0;
  margin: 0 auto;
  padding: 3px;
  overflow-x: auto;
  border-radius: var(--sx-r-lg);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  scrollbar-width: none;
}

.sx-table-floor__zones::-webkit-scrollbar {
  display: none;
}

.sx-table-floor__zone {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: calc(var(--sx-r-lg) - 3px);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-2) var(--sx-ease-out);
}

@media (hover: hover) {
  .sx-table-floor__zone:hover {
    color: var(--sx-ink);
  }
}

.sx-table-floor__zone[aria-selected="true"] {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-table-floor__zone:focus-visible {
  outline-offset: -2px;
}

.sx-table-floor__zone-count {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__zone-count b {
  font-weight: 600;
  color: var(--sx-ink-2);
}

.sx-table-floor__zone[aria-selected="true"] .sx-table-floor__zone-count b {
  color: var(--sx-ink);
}

.sx-table-floor__top-end {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.sx-table-floor__edit[aria-pressed="true"],
.sx-table-floor__edit[aria-pressed="true"]:hover {
  color: var(--sx-accent-ink);
  background-color: var(--sx-accent-soft);
  border-color: var(--sx-accent-line);
  box-shadow: none;
}

.sx-table-floor__divider {
  width: 1px;
  height: 28px;
  background: var(--sx-line);
}

.sx-table-floor__clock {
  display: grid;
  justify-items: end;
  line-height: 1.25;
}

.sx-table-floor__clock b {
  font-size: var(--sx-fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ---------- Layout ---------- */
.sx-table-floor__layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--tf-side-w);
  min-height: 0;
}

.sx-table-floor__floor {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  padding: 2px var(--tf-pad) var(--tf-pad);
}

.sx-table-floor__floor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  min-width: 0;
}

.sx-table-floor__floor-title {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-table-floor__floor-title h2 {
  font-size: var(--sx-fs-xl);
}

.sx-table-floor__floor-title span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-table-floor__key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px 0 8px;
  border-radius: var(--sx-r-pill);
  font-size: var(--sx-fs-sm);
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-raised);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

/* A tiny table in the status style */
.sx-table-floor__key i {
  width: 11px;
  height: 11px;
  flex: none;
  border: 1.5px solid var(--tone);
  border-radius: 3px;
  background: color-mix(in srgb, var(--tone) 18%, var(--sx-surface));
}

.sx-table-floor__key[data-status="cleaning"] i {
  border-style: dashed;
  background: var(--sx-surface);
}

.sx-table-floor__key[data-status="reserved"] i {
  background: repeating-linear-gradient(135deg, var(--sx-surface) 0 2px, color-mix(in srgb, var(--tone) 40%, var(--sx-surface)) 2px 3px);
}

.sx-table-floor__key b {
  min-width: 1ch;
  font-weight: 600;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- Plan ---------- */
.sx-table-floor__stage {
  position: relative;
  display: grid;
  place-items: start center;
  min-width: 0;
  min-height: 0;
  container: tf-stage / size;
}

.sx-table-floor__plans {
  display: grid;
  width: min(100cqw, 100cqh * 1000 / 640);
  aspect-ratio: 1000 / 640;
}

.sx-table-floor__plan {
  --u: calc(100cqi / 1000);
  position: relative;
  grid-area: 1 / 1;
  container: tf-plan / inline-size;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear 0s;
}

.sx-table-floor__plan:not([data-active]) {
  opacity: 0;
  transform: scale(0.985);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-table-floor__room,
.sx-table-floor__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sx-table-floor__ground {
  fill: var(--sx-surface);
}

.sx-table-floor__ground[data-kind="deck"] {
  fill: color-mix(in srgb, var(--sx-c2) 6%, var(--sx-surface));
}

.sx-table-floor__outside {
  fill: var(--sx-fill);
}

.sx-table-floor__planks {
  fill: none;
  stroke: color-mix(in srgb, var(--sx-c2) 13%, transparent);
  stroke-width: 1.5;
}

.sx-table-floor__wall {
  fill: none;
  stroke: var(--tf-wall);
  stroke-width: 10;
  stroke-linecap: square;
  stroke-linejoin: miter;
}

/* Glass in the wall */
.sx-table-floor__window {
  fill: none;
  stroke: color-mix(in srgb, var(--sx-info) 28%, var(--sx-surface));
  stroke-width: 5;
}

.sx-table-floor__door {
  fill: none;
  stroke: var(--tf-wall);
  stroke-width: 3;
  stroke-linecap: round;
}

.sx-table-floor__swing {
  fill: none;
  stroke: var(--sx-line-strong);
  stroke-width: 2;
  stroke-dasharray: 6 6;
}

.sx-table-floor__rail {
  fill: none;
  stroke: var(--sx-line-strong);
  stroke-width: 6;
}

.sx-table-floor__posts {
  fill: none;
  stroke: var(--tf-wall);
  stroke-width: 11;
  stroke-dasharray: 11 69;
}

.sx-table-floor__fixture {
  fill: var(--sx-surface-3);
  stroke: var(--sx-line-strong);
  stroke-width: 2;
}

.sx-table-floor__fixture[data-kind="screen"] {
  fill: var(--tf-wall);
  stroke: none;
}

.sx-table-floor__stool {
  fill: var(--tf-chair);
}

.sx-table-floor__plant {
  fill: color-mix(in srgb, var(--sx-success) 13%, var(--sx-surface));
  stroke: color-mix(in srgb, var(--sx-success) 28%, transparent);
  stroke-width: 2;
}

.sx-table-floor__plant[data-kind="leaf"] {
  fill: color-mix(in srgb, var(--sx-success) 24%, var(--sx-surface));
}

.sx-table-floor__trunk {
  fill: color-mix(in srgb, var(--sx-c2) 42%, var(--sx-surface));
}

.sx-table-floor__planter {
  fill: color-mix(in srgb, var(--sx-c2) 12%, var(--sx-surface));
  stroke: var(--sx-line-strong);
  stroke-width: 2;
}

.sx-table-floor__label {
  font-family: var(--sx-font);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  fill: var(--sx-muted);
}

/* The layout grid, shown while editing (one dot every grid step) */
.sx-table-floor__dots {
  position: absolute;
  left: calc(var(--ax) * var(--u));
  top: calc(var(--ay) * var(--u));
  width: calc(var(--aw) * var(--u));
  height: calc(var(--ah) * var(--u));
  background-image: radial-gradient(circle, var(--sx-line-strong) 1.15px, transparent 1.7px);
  background-position: calc(var(--u) * -10) calc(var(--u) * -10);
  background-size: calc(var(--u) * 20) calc(var(--u) * 20);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-table-floor[data-editing] .sx-table-floor__dots {
  opacity: 1;
}

.sx-table-floor__link {
  stroke: color-mix(in srgb, var(--tone) 26%, transparent);
  stroke-width: 22;
  stroke-linecap: round;
  transition: stroke var(--sx-dur-3) var(--sx-ease-out);
}

/* ---------- Tables ---------- */
.sx-table-floor__table {
  --w: 80;
  --h: 80;
  --r: calc(var(--u) * 10);
  --rr: calc(var(--u) * 16);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  border-radius: var(--r);
  color: var(--sx-ink);
  transform: translate(calc(var(--x) * var(--u)), calc(var(--y) * var(--u)));
  transition:
    transform var(--sx-dur-4) var(--sx-ease-out),
    opacity var(--sx-dur-2) var(--sx-ease-out);
  touch-action: manipulation;
}

.sx-table-floor__table:focus-visible {
  outline-offset: calc(var(--u) * 19);
}

.sx-table-floor__table[data-shape^="round"] {
  --r: 50%;
  --rr: 50%;
}

.sx-table-floor__table[data-shape="round-2"] { --w: 64; --h: 64; }
.sx-table-floor__table[data-shape="round-4"] { --w: 84; --h: 84; }
.sx-table-floor__table[data-shape="square-4"] { --w: 80; --h: 80; }
.sx-table-floor__table[data-shape="long-8"] { --w: 200; --h: 80; --r: calc(var(--u) * 12); --rr: calc(var(--u) * 18); }
.sx-table-floor__table[data-shape="booth-4"] { --w: 100; --h: 84; --r: calc(var(--u) * 7); --rr: calc(var(--u) * 13); }

.sx-table-floor__surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(var(--u) * 2);
  border: 1.5px solid var(--tone-line);
  border-radius: var(--r);
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 12%, var(--sx-surface));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--sx-ink) 8%, transparent);
  transition:
    background-color var(--sx-dur-3) var(--sx-ease-out),
    border-color var(--sx-dur-3) var(--sx-ease-out),
    box-shadow var(--sx-dur-3) var(--sx-ease-out),
    color var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out);
}

.sx-table-floor__table:is([data-status="seated"], [data-status="ordering"], [data-status="bill"]) .sx-table-floor__surface {
  border-color: color-mix(in srgb, var(--tone) 62%, transparent);
  background: color-mix(in srgb, var(--tone) 19%, var(--sx-surface));
}

.sx-table-floor__table[data-status="free"] .sx-table-floor__surface {
  background: color-mix(in srgb, var(--tone) 7%, var(--sx-surface));
}

.sx-table-floor__table[data-status="reserved"] .sx-table-floor__surface {
  background:
    repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--sx-ink) 6%, transparent) 6px 8px),
    var(--sx-surface-3);
}

.sx-table-floor__table[data-status="cleaning"] .sx-table-floor__surface {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--tone) 70%, transparent);
  background: color-mix(in srgb, var(--tone) 6%, var(--sx-surface));
}

.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__surface {
  inset: calc(var(--u) * 18) calc(var(--u) * 4);
}

.sx-table-floor__no {
  font-size: clamp(10px, calc(var(--u) * 17), 18px);
  font-weight: 650;
  line-height: 1;
  color: var(--sx-ink);
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__word {
  font-size: clamp(8px, calc(var(--u) * 11.5), 12px);
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.sx-table-floor__table[data-shape="round-2"] .sx-table-floor__word {
  font-size: clamp(7.5px, calc(var(--u) * 10.5), 11.5px);
}

/* Elapsed minutes or the booking time, pinned to the corner */
.sx-table-floor__badge {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: inline-grid;
  place-items: center;
  height: clamp(14px, calc(var(--u) * 19), 20px);
  padding: 0 0.6em;
  border-radius: var(--sx-r-pill);
  font-size: clamp(8px, calc(var(--u) * 11), 11.5px);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--sx-ink-2);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-2);
  font-variant-numeric: tabular-nums;
  transform: translate(38%, -42%);
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-table-floor__table[data-shape^="round"] .sx-table-floor__badge {
  transform: translate(46%, -28%);
}

/* Chairs: small marks around the table; the guests' chairs take the status colour */
.sx-table-floor__seats {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sx-table-floor__seats > i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--u) * 21);
  height: calc(var(--u) * 8);
  border-radius: var(--sx-r-pill);
  background: var(--tf-chair);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transition: background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-table-floor__table[data-shape="round-2"] .sx-table-floor__seats > i:nth-child(1) { left: calc(var(--u) * -10); --rot: 90deg; }
.sx-table-floor__table[data-shape="round-2"] .sx-table-floor__seats > i:nth-child(2) { left: calc(100% + var(--u) * 10); --rot: 90deg; }

.sx-table-floor__table:is([data-shape="round-4"], [data-shape="square-4"]) .sx-table-floor__seats > i:nth-child(1) { top: calc(var(--u) * -10); }
.sx-table-floor__table:is([data-shape="round-4"], [data-shape="square-4"]) .sx-table-floor__seats > i:nth-child(2) { left: calc(100% + var(--u) * 10); --rot: 90deg; }
.sx-table-floor__table:is([data-shape="round-4"], [data-shape="square-4"]) .sx-table-floor__seats > i:nth-child(3) { top: calc(100% + var(--u) * 10); }
.sx-table-floor__table:is([data-shape="round-4"], [data-shape="square-4"]) .sx-table-floor__seats > i:nth-child(4) { left: calc(var(--u) * -10); --rot: 90deg; }

.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:nth-child(-n + 3) { top: calc(var(--u) * -10); }
.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:nth-child(n + 5):nth-child(-n + 7) { top: calc(100% + var(--u) * 10); }
.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:is(:nth-child(1), :nth-child(7)) { left: 20%; }
.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:is(:nth-child(3), :nth-child(5)) { left: 80%; }
.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:nth-child(4) { left: calc(100% + var(--u) * 10); --rot: 90deg; }
.sx-table-floor__table[data-shape="long-8"] .sx-table-floor__seats > i:nth-child(8) { left: calc(var(--u) * -10); --rot: 90deg; }

/* Booths: two benches, two places on each */
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats::before,
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--u) * 14);
  border-radius: calc(var(--u) * 7);
  background: var(--tf-bench);
  box-shadow: inset 0 0 0 1px var(--sx-line);
}

.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats::before { top: 0; }
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats::after { bottom: 0; }

.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats > i {
  z-index: 1;
  width: calc(var(--u) * 30);
  height: calc(var(--u) * 6);
}

.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats > i:nth-child(-n + 2) { top: calc(var(--u) * 7); }
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats > i:nth-child(n + 3) { top: calc(100% - var(--u) * 7); }
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats > i:is(:nth-child(1), :nth-child(4)) { left: 29%; }
.sx-table-floor__table[data-shape="booth-4"] .sx-table-floor__seats > i:is(:nth-child(2), :nth-child(3)) { left: 71%; }

.sx-table-floor__table[data-party="1"] .sx-table-floor__seats > i:nth-child(-n + 1),
.sx-table-floor__table[data-party="2"] .sx-table-floor__seats > i:nth-child(-n + 2),
.sx-table-floor__table[data-party="3"] .sx-table-floor__seats > i:nth-child(-n + 3),
.sx-table-floor__table[data-party="4"] .sx-table-floor__seats > i:nth-child(-n + 4),
.sx-table-floor__table[data-party="5"] .sx-table-floor__seats > i:nth-child(-n + 5),
.sx-table-floor__table[data-party="6"] .sx-table-floor__seats > i:nth-child(-n + 6),
.sx-table-floor__table[data-party="7"] .sx-table-floor__seats > i:nth-child(-n + 7),
.sx-table-floor__table[data-party="8"] .sx-table-floor__seats > i:nth-child(-n + 8) {
  background: color-mix(in srgb, var(--tone) 82%, var(--sx-surface));
}

/* Hover, open in the panel */
@media (hover: hover) {
  .sx-table-floor:not([data-editing]) .sx-table-floor__table:not([aria-disabled="true"]):hover .sx-table-floor__surface {
    transform: scale(1.035);
    box-shadow: var(--sx-shadow-2);
  }
}

.sx-table-floor__table:active:not([aria-disabled="true"]) .sx-table-floor__surface {
  transform: scale(0.97);
}

.sx-table-floor__table[aria-pressed="true"] {
  z-index: 3;
}

.sx-table-floor__table[aria-pressed="true"] .sx-table-floor__surface {
  box-shadow: 0 0 0 2px var(--sx-surface), 0 0 0 4px var(--sx-ink), var(--sx-shadow-2);
}

/* Waiting for bill: a gentle pulse around the table */
.sx-table-floor__surface::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  pointer-events: none;
}

.sx-table-floor__table[data-status="bill"] .sx-table-floor__surface::after {
  animation: tf-bill 2.4s var(--sx-ease-out) infinite;
}

/* A party sat down: one short ring; a/b restarts it on the same table */
.sx-table-floor__table[data-flash="a"] .sx-table-floor__surface {
  animation: tf-flash-a var(--sx-dur-5) var(--sx-ease-out);
}

.sx-table-floor__table[data-flash="b"] .sx-table-floor__surface {
  animation: tf-flash-b var(--sx-dur-5) var(--sx-ease-out);
}

/* Picking a table for a party, a move or a merge: the ones that can take it breathe, the rest step back */
.sx-table-floor[data-pick] .sx-table-floor__table:not([data-eligible]) {
  opacity: 0.36;
  cursor: not-allowed;
}

.sx-table-floor[data-pick] .sx-table-floor__table:not([data-eligible]) .sx-table-floor__badge {
  opacity: 0;
}

.sx-table-floor__surface::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * -7);
  border: 2px dashed var(--sx-accent);
  border-radius: var(--rr);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--sx-dur-2) var(--sx-ease-out);
}

.sx-table-floor__table[data-eligible] .sx-table-floor__surface::before {
  opacity: 1;
  animation: tf-ready 1.3s var(--sx-ease-in-out) infinite alternate;
}

/* ---------- Editing the layout ---------- */
.sx-table-floor[data-editing] .sx-table-floor__table {
  cursor: grab;
  touch-action: none;
}

.sx-table-floor[data-editing] .sx-table-floor__badge {
  opacity: 0;
}

.sx-table-floor[data-editing] .sx-table-floor__surface,
.sx-table-floor[data-editing] .sx-table-floor__seats {
  filter: saturate(0.3);
}

.sx-table-floor__table[data-dragging] {
  z-index: 5;
  cursor: grabbing;
  transition: transform 90ms var(--sx-ease-out);
}

.sx-table-floor__table[data-dragging] .sx-table-floor__surface {
  transform: scale(1.05);
  box-shadow: var(--sx-shadow-3);
}

.sx-table-floor__table[data-invalid] .sx-table-floor__surface {
  border-color: var(--sx-danger);
  background: color-mix(in srgb, var(--sx-danger) 14%, var(--sx-surface));
  filter: none;
}

/* ---------- Pick banner (over the bottom of the plan) ---------- */
.sx-table-floor__banner {
  position: absolute;
  z-index: 8;
  bottom: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 24px);
  padding: 7px 7px 7px 8px;
  border-radius: var(--sx-r-xl);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  transform: translateX(-50%);
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear 0s;
}

.sx-table-floor__banner:not([data-open]) {
  opacity: 0;
  transform: translate(-50%, 10px);
  visibility: hidden;
  transition:
    opacity var(--sx-dur-1) var(--sx-ease-out),
    transform var(--sx-dur-2) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-2);
}

.sx-table-floor__banner-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--sx-r-lg);
  color: var(--sx-accent-ink);
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
  --sx-icon-size: 16px;
}

.sx-table-floor__banner-text {
  display: grid;
  min-width: 0;
  line-height: 1.3;
}

.sx-table-floor__banner-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-table-floor__banner-text small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-table-floor__swipe {
  display: none;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

/* ---------- Host panel ---------- */
.sx-table-floor__side {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  margin: 0 var(--tf-gap) var(--tf-gap) 0;
  /* clip, not hidden: views slide in from outside, and focus must never scroll the panel sideways */
  overflow: clip;
  border-radius: var(--sx-r-xl);
  background-color: var(--sx-panel);
  background-image: var(--sx-panel-wash);
  background-repeat: no-repeat;
  box-shadow: var(--sx-shadow-1);
}

.sx-table-floor__view {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  transition:
    opacity var(--sx-dur-3) var(--sx-ease-out),
    transform var(--sx-dur-4) var(--sx-ease-out),
    visibility 0s linear 0s;
}

.sx-table-floor__view:not([data-active]) {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--sx-dur-2) var(--sx-ease-out),
    transform var(--sx-dur-3) var(--sx-ease-out),
    visibility 0s linear var(--sx-dur-3);
}

.sx-table-floor__waitlist:not([data-active]) {
  transform: translateX(-20px);
}

.sx-table-floor__detail:not([data-active]),
.sx-table-floor__editor:not([data-active]) {
  transform: translateX(28px);
}

.sx-table-floor__view-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 62px;
  padding: 10px 14px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-table-floor__back {
  margin-left: -6px;
}

.sx-table-floor__view-title {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.sx-table-floor__view-title h3 {
  font-size: var(--sx-fs-lg);
}

.sx-table-floor__view-title span {
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__view-head > .sx-chip {
  flex: none;
}

.sx-table-floor__view-body {
  display: grid;
  align-content: start;
  gap: 14px;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

.sx-table-floor__waitlist .sx-table-floor__view-body {
  gap: 0;
  padding: 6px 6px 10px;
}

.sx-table-floor__view-foot {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-table-floor__view-foot > .sx-btn--primary {
  flex: 1;
}

/* Waitlist */
.sx-table-floor__parties {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-table-floor__party {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--sx-dur-3) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

@starting-style {
  .sx-table-floor__party {
    grid-template-rows: 0fr;
    opacity: 0;
  }
}

.sx-table-floor__party[data-leaving] {
  grid-template-rows: 0fr;
  opacity: 0;
  pointer-events: none;
  transition-duration: var(--sx-dur-2);
}

.sx-table-floor__party-clip {
  min-height: 0;
  overflow: hidden;
}

.sx-table-floor__party-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "avatar text size seat"
    ". wait wait wait";
  align-items: center;
  gap: 8px 10px;
  margin: 2px 0;
  padding: 11px 10px 12px;
  border-radius: var(--sx-r-lg);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-table-floor__party + .sx-table-floor__party .sx-table-floor__party-clip {
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-table-floor__party[data-picking] .sx-table-floor__party-row {
  background: var(--sx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--sx-accent-line);
}

.sx-table-floor__party-row > .sx-avatar {
  --sx-avatar-size: 32px;
  grid-area: avatar;
  align-self: start;
}

.sx-table-floor__party-text {
  display: grid;
  grid-area: text;
  min-width: 0;
  line-height: 1.3;
}

.sx-table-floor__party-text b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-table-floor__party-text small {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-table-floor__party-size {
  display: inline-flex;
  grid-area: size;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--sx-ink-2);
  font-variant-numeric: tabular-nums;
  --sx-icon-size: 14px;
}

.sx-table-floor__party-size .sx-icon {
  color: var(--sx-muted);
}

.sx-table-floor__seat-btn {
  grid-area: seat;
}

.sx-table-floor__seat-btn[aria-pressed="true"],
.sx-table-floor__seat-btn[aria-pressed="true"]:hover {
  color: var(--sx-on-accent);
  background-color: var(--sx-accent);
  border-color: transparent;
  box-shadow: var(--sx-shadow-accent);
}

.sx-table-floor__wait {
  display: grid;
  grid-area: wait;
  grid-template-columns: 1fr auto;
  gap: 5px 8px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__wait > span:first-child {
  color: var(--sx-ink-2);
}

.sx-table-floor__wait .sx-progress {
  grid-column: 1 / -1;
  height: 4px;
  --sx-progress-color: var(--sx-success);
}

.sx-table-floor__wait[data-over] .sx-progress {
  --sx-progress-color: var(--sx-warning);
}

.sx-table-floor__wait[data-over] > span:nth-child(2) {
  font-weight: 500;
  color: var(--sx-warning-ink);
}

.sx-table-floor__empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--sx-muted);
}

.sx-table-floor__add {
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-table-floor__add-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-table-floor__add-msg {
  font-size: var(--sx-fs-xs);
  color: var(--sx-danger-ink);
}

.sx-table-floor__add-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.sx-table-floor__add-row .sx-input {
  flex: 1;
  min-width: 0;
}

.sx-table-floor__add[data-state="error"] .sx-input {
  animation: sx-shake 0.42s var(--sx-ease-out);
}

.sx-table-floor__stepper {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: var(--sx-h-md);
  padding: 3px;
  border-radius: var(--sx-r-pill);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-table-floor__step {
  display: grid;
  place-items: center;
  width: calc(var(--sx-h-md) - 6px);
  height: calc(var(--sx-h-md) - 6px);
  border-radius: 50%;
  color: var(--sx-ink-2);
  transition: background-color var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-1) var(--sx-ease-out), color var(--sx-dur-1) var(--sx-ease-out);
  --sx-icon-size: 13px;
  --sx-icon-stroke: 2.2;
}

.sx-table-floor__step:hover:not(:disabled) {
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
}

.sx-table-floor__step:active:not(:disabled) {
  transform: scale(0.92);
}

.sx-table-floor__step:disabled {
  opacity: 0.35;
}

.sx-table-floor__qty {
  min-width: 24px;
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Table panel */
.sx-table-floor__state {
  color: var(--tone-ink);
  background: color-mix(in srgb, var(--tone) 12%, var(--sx-surface));
  box-shadow: inset 0 0 0 1px var(--tone-line);
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-table-floor__state .sx-dot {
  color: var(--tone);
}

.sx-table-floor__state[data-status="bill"] .sx-dot {
  animation: sx-pulse 1.8s var(--sx-ease-in-out) infinite;
}

.sx-table-floor__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  background: var(--sx-line-soft);
  box-shadow: 0 0 0 1px var(--sx-line-soft);
}

.sx-table-floor__facts > div:first-child {
  grid-column: 1 / -1;
}

.sx-table-floor__facts > div {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 9px 12px 10px;
  background: var(--sx-surface);
}

.sx-table-floor__facts dt {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-table-floor__facts dd {
  overflow: hidden;
  margin: 0;
  font-weight: var(--sx-strong-weight);
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px;
  border-radius: var(--sx-r-lg);
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  line-height: 1.4;
  --sx-icon-size: 15px;
}

.sx-table-floor__note .sx-icon {
  margin-top: 1px;
  color: var(--sx-muted);
}

.sx-table-floor__walkin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 500;
  color: var(--sx-ink-2);
}

.sx-table-floor__order {
  display: grid;
  gap: 4px;
}

.sx-table-floor__order-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 4px;
}

.sx-table-floor__order-head b {
  font-weight: var(--sx-strong-weight);
}

.sx-table-floor__order-head span {
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__order-items {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sx-table-floor__order-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  color: var(--sx-ink-2);
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-table-floor__order-items li > :last-child {
  flex: none;
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__order-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 9px;
  font-weight: var(--sx-strong-weight);
  box-shadow: inset 0 1px 0 var(--sx-line);
}

.sx-table-floor__order-total b {
  font-size: var(--sx-fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.sx-table-floor__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-table-floor__actions .sx-btn {
  flex: 1 1 26%;
  min-width: 0;
}

.sx-table-floor__actions .sx-btn:is([data-action="seat"], [data-action="bill"]) {
  flex-basis: 40%;
}

.sx-table-floor__actions .sx-btn[aria-pressed="true"],
.sx-table-floor__actions .sx-btn[aria-pressed="true"]:hover {
  color: var(--sx-accent-ink);
  background-color: var(--sx-accent-soft);
  border-color: var(--sx-accent-line);
  box-shadow: none;
}

/* Layout editor */
.sx-table-floor__lead {
  color: var(--sx-ink-2);
  line-height: 1.5;
}

.sx-table-floor__keys {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
}

.sx-table-floor__keys li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.sx-table-floor__keys li > span:last-child {
  margin-left: 6px;
}

/* ---------- Narrower stands ---------- */
@container table-floor (max-width: 1180px) {
  .sx-table-floor__service {
    display: none;
  }
}

@container table-floor (max-width: 1100px) {
  .sx-table-floor__top,
  .sx-table-floor__layout {
    --tf-side-w: 316px;
    --tf-pad: 16px;
  }

  .sx-table-floor__zone {
    padding: 0 10px;
  }
}

@container table-floor (max-width: 980px) {
  .sx-table-floor__top {
    flex-wrap: wrap;
    row-gap: 10px;
    height: auto;
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .sx-table-floor__top-end {
    margin-left: auto;
  }

  .sx-table-floor__zones {
    order: 3;
    flex-basis: 100%;
    margin: 0;
  }

  .sx-table-floor__zone {
    flex: 1 0 auto;
    justify-content: center;
  }
}

/* The panel moves under the plan; everything under the top bar scrolls */
@container table-floor (max-width: 900px) {
  /* A block flow, not a grid: a scrolling grid would squeeze its rows instead of letting them run on */
  .sx-table-floor__layout {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .sx-table-floor__top {
    box-shadow: inset 0 -1px 0 var(--sx-line-soft);
  }

  .sx-table-floor__floor {
    padding-top: 12px;
  }

  .sx-table-floor__stage {
    display: block;
    place-items: normal;
    container-type: inline-size;
  }

  .sx-table-floor__plans {
    width: 100%;
  }

  .sx-table-floor__side {
    margin: 0 var(--tf-pad) var(--tf-pad);
  }

  .sx-table-floor__view:not([data-active]) {
    position: absolute;
    inset: 0 0 auto;
  }

  .sx-table-floor__view-body {
    overflow: visible;
  }
}

@container table-floor (max-width: 600px) {
  .sx-table-floor__top,
  .sx-table-floor__layout {
    --tf-pad: 12px;
  }

  .sx-table-floor__top {
    gap: 10px;
  }

  .sx-table-floor__top-end {
    gap: 10px;
  }

  .sx-table-floor__brand-text small,
  .sx-table-floor__clock small,
  .sx-table-floor__edit > span {
    display: none;
  }

  .sx-table-floor__edit {
    width: var(--sx-h-md);
    padding: 0;
  }

  .sx-table-floor__zone {
    gap: 6px;
    padding: 0 8px;
  }

  .sx-table-floor__floor-title h2 {
    font-size: var(--sx-fs-lg);
  }

  .sx-table-floor__key {
    height: 24px;
    padding: 0 8px 0 7px;
    font-size: var(--sx-fs-xs);
  }

  /* Below this the tables get too small to read, so the plan keeps its size and scrolls sideways */
  .sx-table-floor__stage {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    margin: 0 calc(var(--tf-pad) * -1);
    padding: 4px var(--tf-pad);
    scrollbar-width: none;
  }

  .sx-table-floor__stage::-webkit-scrollbar {
    display: none;
  }

  .sx-table-floor__plans {
    width: 600px;
  }

  .sx-table-floor__banner {
    position: sticky;
    left: 0;
    bottom: auto;
    width: auto;
    max-width: none;
    margin-bottom: 8px;
    transform: none;
  }

  .sx-table-floor__banner:not([data-open]) {
    display: none;
  }

  .sx-table-floor__swipe {
    display: block;
    margin-top: -4px;
  }

  .sx-table-floor__party-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: 8px;
    padding: 10px 8px;
  }
}

/* ---------- Keyframes ---------- */
@keyframes tf-bill {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sx-warning) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 calc(var(--u) * 16) color-mix(in srgb, var(--sx-warning) 0%, transparent); }
}

@keyframes tf-flash-a {
  30% { transform: scale(1.09); box-shadow: 0 0 0 calc(var(--u) * 9) color-mix(in srgb, var(--tone) 24%, transparent); }
}

@keyframes tf-flash-b {
  30% { transform: scale(1.09); box-shadow: 0 0 0 calc(var(--u) * 9) color-mix(in srgb, var(--tone) 24%, transparent); }
}

@keyframes tf-ready {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sx-table-floor__table[data-status="bill"] .sx-table-floor__surface::after {
    animation: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sx-warning) 40%, transparent);
  }

  .sx-table-floor__table[data-flash] .sx-table-floor__surface,
  .sx-table-floor__table[data-eligible] .sx-table-floor__surface::before,
  .sx-table-floor__add[data-state="error"] .sx-input {
    animation: none;
  }

  .sx-table-floor__table,
  .sx-table-floor__table[data-dragging] {
    transition-property: opacity;
  }

  .sx-table-floor__table .sx-table-floor__surface {
    transform: none !important;
  }

  .sx-table-floor__plan:not([data-active]),
  .sx-table-floor__view:not([data-active]) {
    transform: none;
  }

  .sx-table-floor__banner:not([data-open]) {
    transform: translateX(-50%);
  }

  .sx-table-floor__party {
    transition-property: opacity;
  }
}


/* ---- Stock Room (stock-room) ---- */
/* ==========================================================================
   Stock Room — the inventory overview (template, inside Product Frame)
   Root .sx-stock-room is a size container; it fills the frame body and scrolls inside. One
   location switch (role="radiogroup") scopes every figure and list: data-location on the root.
     Low-stock rows:  data-level="low | critical", data-selected (open in the panel); the action
                      cell crossfades between Reorder and On order with data-state="order | ordered"
     Orders:          data-status="draft | sent | confirmed | receiving"
     Movements:       data-type="sold | received | count | damaged | returned"
     Panel:           .sx-stock-room__panel[data-open] slides in from the right (full width on phones)
   Bars read --v (0–1) and run to twice the reorder point, so the reorder mark always sits halfway.
   Rolling figures: every digit is a window over a 0–9 strip (--d); spare places fold away with
   data-blank, so a shorter number never jumps.
   Lists live in fixed-height scroll areas, so switching location never moves the page.
     > 900px   KPIs in a row; low stock beside orders and movements, filling the screen
     <= 900px  low stock on its own row, orders and movements side by side
     <= 640px  one column; the panel covers the page
   ========================================================================== */

.sx-stock-room {
  --sr-gap: clamp(12px, 1.2cqi, 14px);
  --sr-pad-x: clamp(14px, 2.6cqi, 28px);
  container: stock-room / inline-size;
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  font-size: var(--sx-fs-base);
  color: var(--sx-ink);
}

.sx-stock-room__scroll {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sx-stock-room__page {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto auto minmax(212px, 1fr) minmax(212px, 1fr);
  gap: var(--sr-gap);
  min-height: 100%;
  max-width: 1480px;
  padding: clamp(14px, 1.4cqi, 18px) var(--sr-pad-x) clamp(16px, 1.6cqi, 20px);
}

/* ---------- Header ---------- */
.sx-stock-room__head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 20px;
  min-width: 0;
}

.sx-stock-room__title {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.sx-stock-room__title h1 {
  font-size: var(--sx-fs-2xl);
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
}

.sx-stock-room__title p {
  color: var(--sx-muted);
}

/* Location switch: one thumb glides to the checked option */
.sx-stock-room__locs {
  position: relative;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: var(--sx-r-lg);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  scrollbar-width: none;
}

.sx-stock-room__locs::-webkit-scrollbar {
  display: none;
}

.sx-stock-room__locs-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: var(--w, 0px);
  border-radius: calc(var(--sx-r-lg) - 3px);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-1);
  transform: translateX(var(--x, 0px));
}

.sx-stock-room__locs[data-ready] .sx-stock-room__locs-thumb {
  transition: transform var(--sx-dur-3) var(--sx-ease-out), width var(--sx-dur-3) var(--sx-ease-out);
}

.sx-stock-room__loc {
  position: relative;
  flex: none;
  height: calc(var(--sx-h-md) - 6px);
  padding: 0 12px;
  border-radius: calc(var(--sx-r-lg) - 3px);
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__loc:hover {
  color: var(--sx-ink-2);
}

.sx-stock-room__loc[aria-checked="true"] {
  color: var(--sx-ink);
}

.sx-stock-room__loc:focus-visible {
  outline-offset: -2px;
}

/* ---------- KPI tiles ---------- */
.sx-stock-room__kpis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sr-gap);
}

.sx-stock-room__kpi {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 12px 16px 11px;
}

.sx-stock-room__kpi-label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: var(--sx-fs-sm);
  font-weight: 500;
  white-space: nowrap;
  color: var(--sx-muted);
  --sx-icon-size: 14px;
}

.sx-stock-room__kpi-label > .sx-icon {
  transition: color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-stock-room__kpi[data-tone="warning"] .sx-stock-room__kpi-label > .sx-icon {
  color: var(--sx-warning);
}

.sx-stock-room__kpi-value {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  font-size: 26px;
  font-weight: var(--sx-display-weight);
  letter-spacing: var(--sx-display-tracking);
  line-height: 1.15;
  white-space: nowrap;
  color: var(--sx-ink);
}

.sx-stock-room__kpi-value small {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-text-weight);
  letter-spacing: 0;
  color: var(--sx-muted);
}

.sx-stock-room__kpi-note {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

/* ---------- Rolling figures ---------- */
.sx-stock-room__roll {
  --sr-roll-lh: 1.15;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  line-height: var(--sr-roll-lh);
}

.sx-stock-room__roll-track {
  display: inline-flex;
}

.sx-stock-room__roll-cell {
  display: grid;
  grid-template-columns: 1fr;
  height: calc(var(--sr-roll-lh) * 1em);
  overflow: hidden;
  transition: grid-template-columns var(--sx-dur-5) var(--sx-ease-out), opacity var(--sx-dur-3) var(--sx-ease-out);
}

.sx-stock-room__roll-cell > span {
  min-width: 0;
}

.sx-stock-room__roll-cell[data-blank] {
  grid-template-columns: 0fr;
  opacity: 0;
}

.sx-stock-room__roll-digit {
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 12%, black 88%, transparent);
}

.sx-stock-room__roll-digit > span::before {
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  display: block;
  white-space: pre;
  text-align: center;
  transform: translateY(calc(var(--d, 0) * -10%));
  transition: transform var(--sx-dur-5) var(--sx-ease-out);
}

/* ---------- Cards ---------- */
/* Wide, the cards take the height of their grid rows (size containment keeps long lists from
   stretching the rows), and their lists scroll inside. */
.sx-stock-room__card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 13px 16px 6px;
  contain: size;
}

.sx-stock-room__low {
  grid-column: 1 / span 7;
  grid-row: 3 / span 2;
}

.sx-stock-room__orders {
  grid-column: 8 / -1;
  grid-row: 3;
}

.sx-stock-room__moves {
  grid-column: 8 / -1;
  grid-row: 4;
}

.sx-stock-room__card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 14px;
  min-height: 22px;
  margin-bottom: 4px;
}

.sx-stock-room__card-head h2 {
  font-size: var(--sx-fs-md);
}

.sx-stock-room__meta {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
}

/* The scroll area of a card; the last 14px fade so a cut-off row reads as "more below". */
.sx-stock-room__list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 -8px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent);
  mask-image: linear-gradient(to bottom, black calc(100% - 14px), transparent);
}

.sx-stock-room__list > ul {
  position: relative;
  display: grid;
  align-content: start;
  padding-bottom: 10px;
}

.sx-stock-room__list > ul > li {
  position: relative;
  background: var(--sx-card-bg);
}

.sx-stock-room__list > ul > li::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 1px;
  background: var(--sx-line-soft);
  pointer-events: none;
}

.sx-stock-room__list > ul > li:last-child::after {
  display: none;
}

/* ---------- Bars ---------- */
.sx-stock-room__bar {
  --sr-bar: var(--sx-success);
  position: relative;
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--sx-c-track);
}

.sx-stock-room__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--sr-bar);
  clip-path: inset(0 calc(100% - var(--v, 0) * 100%) 0 0 round 3px);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out);
}

.sx-stock-room__bar::after {
  content: "";
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: calc(50% - 1px);
  width: 2px;
  border-radius: 1px;
  background: var(--sx-ink-2);
  box-shadow: 0 0 0 1.5px var(--sx-card-bg);
}

[data-level="low"] .sx-stock-room__bar {
  --sr-bar: var(--sx-warning);
}

[data-level="critical"] .sx-stock-room__bar {
  --sr-bar: var(--sx-danger);
}

/* ---------- Low stock ---------- */
.sx-stock-room__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(88px, 140px) 96px;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 6px 8px;
  border-radius: var(--sx-r-md);
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__row:hover,
.sx-stock-room__row[data-selected] {
  background: color-mix(in srgb, var(--sx-ink) 3%, var(--sx-card-bg));
}

.sx-stock-room__product {
  display: grid;
  gap: 1px;
  min-width: 0;
  margin: -4px -6px;
  padding: 4px 6px;
  border-radius: var(--sx-r-sm);
  text-align: left;
  line-height: 1.35;
}

.sx-stock-room__product-name {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__product:hover .sx-stock-room__product-name {
  text-decoration-color: var(--sx-line-strong);
}

.sx-stock-room__product-meta {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-stock-room__level {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.sx-stock-room__level-text {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-stock-room__level-text b {
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

[data-level="critical"] .sx-stock-room__level-text b {
  color: var(--sx-danger-ink);
}

/* Group labels inside the one list, so a row can move between groups with FLIP */
.sx-stock-room__group {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  padding: 10px 8px 6px;
  font-size: var(--sx-fs-2xs);
  font-weight: 500;
  color: var(--sx-muted);
}

.sx-stock-room__list > ul > li.sx-stock-room__group::after {
  display: none;
}

.sx-stock-room__list > ul > li.sx-stock-room__group:first-child {
  min-height: 24px;
  padding-top: 2px;
}

.sx-stock-room__row[data-level="ok"] .sx-stock-room__product-name {
  font-weight: var(--sx-text-weight);
  color: var(--sx-ink-2);
}

/* Reorder and On order share one cell and crossfade */
.sx-stock-room__action {
  display: grid;
  align-items: center;
  justify-items: end;
}

.sx-stock-room__action > * {
  grid-area: 1 / 1;
}

.sx-stock-room__reorder,
.sx-stock-room__ordered {
  transition: opacity var(--sx-dur-2) var(--sx-ease-out), transform var(--sx-dur-3) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
}

.sx-stock-room__ordered {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.9);
}

.sx-stock-room__action[data-state="none"] > .sx-stock-room__reorder,
.sx-stock-room__action[data-state="ordered"] > .sx-stock-room__reorder {
  opacity: 0;
  visibility: hidden;
  transform: scale(0.96);
}

.sx-stock-room__action[data-state="ordered"] > .sx-stock-room__ordered {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--sx-dur-3) var(--sx-ease-out) 0.06s, transform var(--sx-dur-3) var(--sx-ease-spring) 0.06s, visibility 0s;
}

/* ---------- Purchase orders ---------- */
.sx-stock-room__po {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "id name value"
    "meta meta end";
  align-items: center;
  gap: 5px 10px;
  min-height: 58px;
  padding: 8px;
  border-radius: var(--sx-r-md);
}

.sx-stock-room__po-id {
  grid-area: id;
  font-family: var(--sx-font-mono);
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-stock-room__po-name {
  grid-area: name;
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-stock-room__po-value {
  grid-area: value;
  font-size: var(--sx-fs-sm);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-ink-2);
}

.sx-stock-room__po-meta {
  grid-area: meta;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.sx-stock-room__po-meta > .sx-chip {
  flex: none;
  transition: color var(--sx-dur-3) var(--sx-ease-out), background-color var(--sx-dur-3) var(--sx-ease-out), box-shadow var(--sx-dur-3) var(--sx-ease-out);
}

.sx-stock-room__po-dest {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-stock-room__po-end {
  grid-area: end;
  display: flex;
  justify-content: flex-end;
  min-height: 20px;
}

.sx-stock-room__po-send {
  --_h: 24px;
  --_px: 9px;
  --_icon: 12px;
}

.sx-stock-room__po-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sx-stock-room__po-meter {
  position: relative;
  display: block;
  width: 44px;
  height: 4px;
  border-radius: 2px;
  background: var(--sx-c-track);
}

.sx-stock-room__po-meter::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: var(--sx-c1);
  clip-path: inset(0 calc(100% - var(--v, 0) * 100%) 0 0 round 2px);
  transition: clip-path var(--sx-dur-5) var(--sx-ease-out);
}

.sx-stock-room__po-count {
  min-width: 6ch;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--sx-muted);
}

/* ---------- Movements ---------- */
.sx-stock-room__move {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon text qty"
    "icon text time";
  align-items: center;
  gap: 0 10px;
  width: 100%;
  min-height: 48px;
  padding: 6px 8px;
  border-radius: var(--sx-r-md);
  text-align: left;
  transition: background-color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__move:hover {
  background: color-mix(in srgb, var(--sx-ink) 3%, var(--sx-card-bg));
}

.sx-stock-room__move:focus-visible {
  outline-offset: -2px;
}

.sx-stock-room__move-icon {
  grid-area: icon;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--sx-r-md);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  --sx-icon-size: 14px;
}

.sx-stock-room__move[data-type="received"] .sx-stock-room__move-icon,
.sx-stock-room__move[data-type="returned"] .sx-stock-room__move-icon {
  color: var(--sx-success-ink);
  background: var(--sx-success-soft);
}

.sx-stock-room__move[data-type="count"] .sx-stock-room__move-icon {
  color: var(--sx-info-ink);
  background: var(--sx-info-soft);
}

.sx-stock-room__move[data-type="damaged"] .sx-stock-room__move-icon {
  color: var(--sx-danger-ink);
  background: var(--sx-danger-soft);
}

.sx-stock-room__move-text {
  grid-area: text;
  display: grid;
  min-width: 0;
  line-height: 1.35;
}

.sx-stock-room__move-text b {
  overflow: hidden;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-stock-room__move-text span {
  overflow: hidden;
  font-size: var(--sx-fs-xs);
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--sx-muted);
}

.sx-stock-room__move-qty {
  grid-area: qty;
  justify-self: end;
  align-self: end;
  font-size: var(--sx-fs-sm);
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  color: var(--sx-ink-2);
}

.sx-stock-room__move-qty[data-sign="up"] {
  color: var(--sx-success-ink);
}

.sx-stock-room__move[data-type="count"] .sx-stock-room__move-qty[data-sign="down"] {
  color: var(--sx-warning-ink);
}

.sx-stock-room__move-time {
  grid-area: time;
  justify-self: end;
  align-self: start;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
}

/* ---------- Product panel ---------- */
.sx-stock-room__panel {
  position: absolute;
  z-index: 9;
  top: 8px;
  right: 8px;
  bottom: 8px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(372px, calc(100% - 16px));
  border-radius: var(--sx-r-xl);
  color: var(--sx-ink);
  background: var(--sx-surface);
  box-shadow: var(--sx-shadow-pop);
  visibility: hidden;
  transform: translateX(calc(100% + 24px));
  transition: transform var(--sx-dur-3) var(--sx-ease-in), visibility 0s linear var(--sx-dur-3);
}

.sx-stock-room__panel[data-open] {
  visibility: visible;
  transform: none;
  transition: transform var(--sx-dur-4) var(--sx-ease-out), visibility 0s;
}

.sx-stock-room__panel-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  padding: 16px 12px 12px 18px;
  box-shadow: inset 0 -1px 0 var(--sx-line-soft);
}

.sx-stock-room__panel-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--sx-r-lg);
  color: var(--sx-ink-2);
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
  --sx-icon-size: 18px;
}

.sx-stock-room__panel-title {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.sx-stock-room__panel-title h2 {
  font-size: var(--sx-fs-lg);
}

.sx-stock-room__panel-title p {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-stock-room__panel-body {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 0;
  padding: 16px 18px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.sx-stock-room__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--sx-r-lg);
  background: var(--sx-line-soft);
  box-shadow: 0 0 0 1px var(--sx-line-soft);
}

.sx-stock-room__facts > div {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 9px 12px 10px;
  background: var(--sx-surface);
}

.sx-stock-room__facts dt {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-stock-room__facts dd {
  margin: 0;
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-stock-room__panel-section,
.sx-stock-room__count {
  display: grid;
  gap: 8px;
}

.sx-stock-room__panel-section h3,
.sx-stock-room__count h3 {
  font-size: var(--sx-fs-sm);
  color: var(--sx-ink-2);
}

.sx-stock-room__sites {
  display: grid;
  gap: 4px;
}

.sx-stock-room__site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px 12px;
  padding: 9px 10px 10px;
  border-radius: var(--sx-r-md);
  box-shadow: inset 0 0 0 1px transparent;
  transition: background-color var(--sx-dur-2) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__site[data-current] {
  background: var(--sx-fill);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

.sx-stock-room__site-name {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.sx-stock-room__site-name b {
  overflow: hidden;
  font-weight: var(--sx-strong-weight);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-stock-room__site-name small {
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
}

.sx-stock-room__site-figure {
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--sx-muted);
}

.sx-stock-room__site-figure b {
  font-size: var(--sx-fs-base);
  font-weight: var(--sx-strong-weight);
  color: var(--sx-ink);
}

.sx-stock-room__site .sx-stock-room__bar {
  grid-column: 1 / -1;
}

.sx-stock-room__site-note {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--sx-fs-xs);
  font-variant-numeric: tabular-nums;
  color: var(--sx-muted);
}

.sx-stock-room__site-inc {
  color: var(--sx-info-ink);
}

/* Count form */
.sx-stock-room__count {
  padding-top: 16px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-stock-room__count-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px auto;
  gap: 8px;
}

.sx-stock-room__select {
  display: block;
  min-width: 0;
}

.sx-stock-room__qty {
  display: block;
  min-width: 0;
}

.sx-stock-room__qty input {
  font-variant-numeric: tabular-nums;
}

.sx-stock-room__count-msg {
  min-height: 18px;
  font-size: var(--sx-fs-xs);
  color: var(--sx-muted);
  transition: color var(--sx-dur-2) var(--sx-ease-out);
}

.sx-stock-room__count-msg[data-state="error"] {
  color: var(--sx-danger-ink);
}

.sx-stock-room__panel-foot {
  display: grid;
  align-items: center;
  min-height: 62px;
  padding: 12px 18px 14px;
  box-shadow: inset 0 1px 0 var(--sx-line-soft);
}

.sx-stock-room__panel-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: var(--sx-fs-sm);
  color: var(--sx-muted);
  --sx-icon-size: 15px;
}

.sx-stock-room__panel-note > .sx-icon {
  color: var(--sx-success);
}

/* ---------- Toast ---------- */
.sx-stock-room__dock {
  position: absolute;
  z-index: 12;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: right var(--sx-dur-4) var(--sx-ease-out);
}

/* Beside the open panel, the toast centres in the space that is left. */
.sx-stock-room:has(.sx-stock-room__panel[data-open]) .sx-stock-room__dock {
  right: min(388px, 100%);
}

.sx-stock-room__toast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 32px);
  padding: 9px 15px 9px 12px;
  border-radius: var(--sx-r-pill);
  font-weight: 500;
  color: var(--sx-ink);
  background: var(--sx-raised);
  box-shadow: var(--sx-shadow-pop);
  pointer-events: auto;
  --sx-pop-origin: bottom center;
  --sx-icon-size: 15px;
}

.sx-stock-room__toast > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sx-stock-room__toast > .sx-icon {
  color: var(--sx-success);
}

/* ---------- Adaptive layout ---------- */
@container stock-room (max-width: 1100px) {
  .sx-stock-room__row {
    grid-template-columns: minmax(0, 1fr) minmax(84px, 120px) 92px;
    gap: 12px;
  }
}

@container stock-room (max-width: 900px) {
  .sx-stock-room__page {
    grid-template-rows: none;
    align-content: start;
  }

  .sx-stock-room__low,
  .sx-stock-room__orders,
  .sx-stock-room__moves {
    grid-row: auto;
    contain: none;
  }

  .sx-stock-room__low {
    grid-column: 1 / -1;
  }

  .sx-stock-room__orders {
    grid-column: 1 / span 6;
  }

  .sx-stock-room__moves {
    grid-column: 7 / -1;
  }

  /* Stacked, the lists keep fixed heights so a location switch never moves the page. */
  .sx-stock-room__low .sx-stock-room__list {
    flex: none;
    height: 290px;
  }

  .sx-stock-room__orders .sx-stock-room__list,
  .sx-stock-room__moves .sx-stock-room__list {
    flex: none;
    height: 252px;
  }
}

@container stock-room (max-width: 760px) {
  .sx-stock-room__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container stock-room (max-width: 640px) {
  .sx-stock-room__head {
    align-items: stretch;
    flex-direction: column;
  }

  .sx-stock-room__locs {
    align-self: flex-start;
  }

  .sx-stock-room__orders,
  .sx-stock-room__moves {
    grid-column: 1 / -1;
  }

  .sx-stock-room__kpi-value {
    font-size: 23px;
  }

  .sx-stock-room__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "product action"
      "level level";
    gap: 6px 12px;
    padding-top: 9px;
    padding-bottom: 10px;
  }

  .sx-stock-room__product {
    grid-area: product;
  }

  .sx-stock-room__action {
    grid-area: action;
  }

  .sx-stock-room__level {
    grid-area: level;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
  }

  .sx-stock-room__level-text {
    order: 2;
  }

  .sx-stock-room__low .sx-stock-room__list {
    height: 340px;
  }

  .sx-stock-room__panel {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    border-radius: 0;
  }

  .sx-stock-room:has(.sx-stock-room__panel[data-open]) .sx-stock-room__dock {
    right: 0;
    bottom: 86px;
  }

  .sx-stock-room__toast > span {
    white-space: normal;
  }
}

@container stock-room (max-width: 420px) {
  .sx-stock-room__kpi {
    padding: 11px 12px 10px;
  }

  .sx-stock-room__kpi-value {
    font-size: 20px;
  }

  .sx-stock-room__card {
    padding-inline: 12px;
  }

  .sx-stock-room__list {
    margin-inline: -6px;
  }

  .sx-stock-room__count-row {
    grid-template-columns: minmax(0, 1fr) 76px auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sx-stock-room__panel,
  .sx-stock-room__panel[data-open] {
    transform: none;
  }

  .sx-stock-room__panel {
    opacity: 0;
    transition: opacity var(--sx-dur-2) var(--sx-ease-out), visibility 0s linear var(--sx-dur-2);
  }

  .sx-stock-room__panel[data-open] {
    opacity: 1;
    transition: opacity var(--sx-dur-3) var(--sx-ease-out), visibility 0s;
  }

  .sx-stock-room__roll-digit > span::before,
  .sx-stock-room__roll-cell {
    transition: none;
  }

  .sx-stock-room__reorder,
  .sx-stock-room__ordered,
  .sx-stock-room__action[data-state="ordered"] > * {
    transform: none;
  }
}