/*! Sassly UI 0.1.2 (css) | https://uiux.sassly.ai | 113 items | built 2026-10-30T10:31:52.466Z */

/* ==========================================================================
   Sassly UI — design tokens
   Themes:   [data-theme="neutral" | "onix"]
   Modes:    [data-mode="light" | "dark"]
   Surfaces: [data-surface="flat" | "tray"]
   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;

  --sx-z-pop: 40;
  --sx-z-toast: 60;
  --sx-z-modal: 80;
}

@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-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-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-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  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: 500;
  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: 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);
}

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

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

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

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

/* 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;
  }
}


/* ---- 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: 400;
  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: 440px;
  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;
  }
}


/* ---- 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: 400;
  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: 500;
  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: 500;
  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: 400px;
  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: 1fr 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);
}

@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: 400;
  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: 360px;
  padding: 16px 18px 14px;
}

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

@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: 700px;
  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 ---------- */
.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;
  padding: 4px 4px 4px 12px;
  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__sep {
  width: 1px;
  height: 18px;
  margin: 0 6px 0 10px;
  background: var(--sx-line);
}

.sx-record-grid__bulk .sx-btn--icon {
  margin-left: 4px;
}

@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: 420px;
}

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

.sx-date-field__select {
  appearance: none;
  -webkit-appearance: none;
  padding: 0 24px 0 30px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.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;
  --sx-icon-size: 14px;
}

.sx-date-field__time-caret {
  right: 8px;
  --sx-icon-size: 13px;
}

/* ---------- 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: 400;
  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: 400;
  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;
}

.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-modal);
  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: 400;
  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: 420px;
  height: 372px;
  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;
}

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

.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: grid;
  grid-template-columns: 232px 240px;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
}

/* ---------- Left: due, received, result, quick notes ---------- */
.sx-cash-keypad__side {
  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 {
  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;
  }
}


/* ---- 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: 400;
  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 {
  display: grid;
  grid-template-columns: 228px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  width: 600px;
  height: 404px;
  overflow: hidden;
}

/* ---------- Product ---------- */
.sx-modifier-sheet__product {
  display: grid;
  align-content: start;
  gap: 10px;
  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;
  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: 400;
  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;
}

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


/* ---- 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 {
  display: grid;
  width: 628px;
  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: 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: 400;
  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;
}

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


/* ---- 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;
  }
}


/* ---- 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: 400;
}

.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: 400;
  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 select.sx-input {
  padding-right: 6px;
}

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

/* ---------- 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" (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"
   Every layout uses the same markup; a layout only places, sizes and hides parts.
   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);
  }
}

@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: 400;
  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: 400;
  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: 400;
  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: 400;
  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 {
  position: relative;
  display: block;
  min-width: 0;
  --sx-icon-size: 14px;
}

.sx-stock-room__select select {
  padding-right: 30px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.sx-stock-room__select > .sx-icon {
  position: absolute;
  top: 50%;
  right: 10px;
  color: var(--sx-muted);
  transform: translateY(-50%);
  pointer-events: none;
}

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