/*!
 * Clay Design System v1.0.0 — one token-driven UI kit for Web, iOS, Android, macOS, Windows & Linux.
 * https://github.com/litu173/clay-design-system · MIT
 *
 * Usage:  <html data-clay-os="web|ios|android|macos|windows|linux" data-clay-mode="light|dark|auto">
 *         <body class="clay"> … <button class="clay-btn">Hello</button>
 * Every visual decision is a CSS custom property (--clay-*). Override any of them, or call Clay.setTheme().
 * Put data-clay-os and data-clay-mode on the same element; nest them freely to mix platforms on one page.
 */

/* ==========================================================================
   1. Base tokens (Clay / Web preset)
   ========================================================================== */
:where(:root),
[data-clay-os="web"] {
  /* brand */
  --clay-primary: #6d5efc;
  --clay-on-primary: #ffffff;
  --clay-secondary: #ff8a6b;
  --clay-success: #12a150;
  --clay-warning: #e08a00;
  --clay-danger: #e5484d;
  --clay-info: #0b84d6;

  /* shape */
  --clay-radius: 12px;
  --clay-radius-xs: calc(var(--clay-radius) * 0.35);
  --clay-radius-sm: calc(var(--clay-radius) * 0.6);
  --clay-radius-lg: calc(var(--clay-radius) * 1.4);
  --clay-radius-xl: calc(var(--clay-radius) * 2);
  --clay-radius-full: 999px;
  --clay-border-w: 1px;

  /* type */
  --clay-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --clay-font-display: var(--clay-font);
  --clay-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --clay-font-scale: 1;
  --clay-fs-display: 56px;
  --clay-fs-h1: 40px;
  --clay-fs-h2: 32px;
  --clay-fs-h3: 24px;
  --clay-fs-title: 20px;
  --clay-fs-body: 16px;
  --clay-fs-label: 14px;
  --clay-fs-caption: 12px;
  --clay-fw-regular: 400;
  --clay-fw-medium: 500;
  --clay-fw-strong: 600;
  --clay-fw-heading: 700;
  --clay-tracking-heading: -0.02em;
  --clay-lh: 1.55;

  /* space & density */
  --clay-space: 4px;
  --clay-density: 1;
  --clay-unit: calc(var(--clay-space) * var(--clay-density));
  --clay-control-h-base: 40px;
  --clay-control-h: calc(var(--clay-control-h-base) * var(--clay-density));

  /* depth */
  --clay-shadow-color: 240 30% 8%;
  --clay-shadow-strength: 1;
  --clay-shadow-1: 0 1px 2px hsl(var(--clay-shadow-color) / calc(0.06 * var(--clay-shadow-strength))), 0 1px 3px hsl(var(--clay-shadow-color) / calc(0.08 * var(--clay-shadow-strength)));
  --clay-shadow-2: 0 4px 12px -2px hsl(var(--clay-shadow-color) / calc(0.1 * var(--clay-shadow-strength))), 0 2px 4px -2px hsl(var(--clay-shadow-color) / calc(0.06 * var(--clay-shadow-strength)));
  --clay-shadow-3: 0 18px 40px -12px hsl(var(--clay-shadow-color) / calc(0.22 * var(--clay-shadow-strength))), 0 6px 12px -6px hsl(var(--clay-shadow-color) / calc(0.1 * var(--clay-shadow-strength)));
  --clay-shadow-4: 0 32px 80px -20px hsl(var(--clay-shadow-color) / calc(0.35 * var(--clay-shadow-strength)));

  /* motion */
  --clay-dur: 200ms;
  --clay-dur-slow: 380ms;
  --clay-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --clay-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --clay-press-scale: 0.97;
  --clay-ripple: 0;

  /* component tokens (platform presets override these) */
  --clay-btn-radius: var(--clay-radius);
  --clay-btn-px: calc(var(--clay-unit) * 4.5);
  --clay-btn-weight: var(--clay-fw-strong);
  --clay-btn-size: var(--clay-fs-label);
  --clay-btn-case: none;
  --clay-btn-tracking: 0;
  --clay-btn-shadow: 0 1px 2px hsl(var(--clay-shadow-color) / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.18);
  --clay-input-radius: var(--clay-radius-sm);
  --clay-input-bg: var(--clay-surface);
  --clay-input-border: var(--clay-border-strong);
  --clay-input-focus: 0 0 0 1px var(--clay-primary), 0 0 0 4px var(--clay-primary-soft);
  --clay-input-focus-border: var(--clay-primary);
  --clay-card-radius: var(--clay-radius-lg);
  --clay-card-border: var(--clay-border-w) solid var(--clay-border);
  --clay-card-shadow: var(--clay-shadow-1);
  --clay-check-size: 18px;
  --clay-check-radius: var(--clay-radius-xs);
  --clay-switch-w: 44px;
  --clay-switch-h: 26px;
  --clay-switch-thumb: 20px;
  --clay-switch-thumb-off: 20px;
  --clay-switch-off-bg: var(--clay-surface-3);
  --clay-switch-off-border: transparent;
  --clay-switch-off-thumb: #ffffff;
  --clay-switch-thumb-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
  --clay-range-track: 6px;
  --clay-range-thumb: 20px;
  --clay-range-thumb-bg: #ffffff;
  --clay-range-thumb-border: 2px solid var(--clay-primary);
  --clay-seg-bg: var(--clay-surface-2);
  --clay-seg-border: transparent;
  --clay-seg-pad: 3px;
  --clay-seg-active-bg: var(--clay-surface);
  --clay-seg-active-fg: var(--clay-text);
  --clay-seg-active-shadow: var(--clay-shadow-1);
  --clay-tab-ind-h: 2px;
  --clay-tab-ind-w: 100%;
  --clay-tab-ind-radius: 2px;
  --clay-dialog-radius: var(--clay-radius-xl);
  --clay-dialog-align: left;
  --clay-dialog-actions: flex-end;
  --clay-dialog-footer-bg: transparent;
  --clay-list-radius: var(--clay-radius-lg);
  --clay-list-sep-inset: 16px;
  --clay-appbar-align: flex-start;
  --clay-appbar-h: 60px;
  --clay-tabbar-ind: transparent;
  --clay-focus-ring: 0 0 0 2px var(--clay-bg), 0 0 0 4px var(--clay-primary);
  --clay-glass: saturate(180%) blur(20px);
}

/* ==========================================================================
   2. Neutral palettes (light / dark)
   ========================================================================== */
:where(:root),
[data-clay-mode="light"] {
  --clay-bg: #f7f7fb;
  --clay-surface: #ffffff;
  --clay-surface-2: #f1f1f6;
  --clay-surface-3: #e3e3eb;
  --clay-elevated: #ffffff;
  --clay-border: #e6e6ee;
  --clay-border-strong: #d2d2de;
  --clay-text: #14131f;
  --clay-text-2: #4c4b5e;
  --clay-text-3: #75748a;
  --clay-overlay: rgb(10 10 25 / 0.42);
  --clay-primary-ink: var(--clay-primary);
  color-scheme: light;
}
[data-clay-mode="dark"] {
  --clay-bg: #0c0c14;
  --clay-surface: #15151f;
  --clay-surface-2: #1d1d2a;
  --clay-surface-3: #2a2a3a;
  --clay-elevated: #1b1b28;
  --clay-border: #262636;
  --clay-border-strong: #363649;
  --clay-text: #f2f1fa;
  --clay-text-2: #b5b3c9;
  --clay-text-3: #8a889f;
  --clay-overlay: rgb(0 0 0 / 0.6);
  --clay-shadow-color: 240 50% 1%;
  --clay-primary-ink: color-mix(in oklab, var(--clay-primary) 72%, white);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  [data-clay-mode="auto"] {
    --clay-bg: #0c0c14; --clay-surface: #15151f; --clay-surface-2: #1d1d2a; --clay-surface-3: #2a2a3a; --clay-elevated: #1b1b28;
    --clay-border: #262636; --clay-border-strong: #363649; --clay-text: #f2f1fa; --clay-text-2: #b5b3c9; --clay-text-3: #8a889f;
    --clay-overlay: rgb(0 0 0 / 0.6); --clay-shadow-color: 240 50% 1%;
    --clay-primary-ink: color-mix(in oklab, var(--clay-primary) 72%, white);
    color-scheme: dark;
  }
}

/* Derived colour ramps — re-computed automatically from whatever primary / mode is active */
:where(:root), [data-clay-os], [data-clay-mode], .clay {
  --clay-primary-soft: color-mix(in oklab, var(--clay-primary) 14%, transparent);
  --clay-primary-hover: color-mix(in oklab, var(--clay-primary) 88%, var(--clay-on-primary));
  --clay-primary-50: color-mix(in oklab, var(--clay-primary) 6%, var(--clay-surface));
  --clay-primary-100: color-mix(in oklab, var(--clay-primary) 12%, var(--clay-surface));
  --clay-primary-200: color-mix(in oklab, var(--clay-primary) 24%, var(--clay-surface));
  --clay-primary-300: color-mix(in oklab, var(--clay-primary) 42%, var(--clay-surface));
  --clay-primary-400: color-mix(in oklab, var(--clay-primary) 70%, var(--clay-surface));
  --clay-primary-500: var(--clay-primary);
  --clay-primary-600: color-mix(in oklab, var(--clay-primary) 84%, black);
  --clay-primary-700: color-mix(in oklab, var(--clay-primary) 68%, black);
  --clay-primary-800: color-mix(in oklab, var(--clay-primary) 50%, black);
  --clay-primary-900: color-mix(in oklab, var(--clay-primary) 34%, black);
  --clay-success-soft: color-mix(in oklab, var(--clay-success) 14%, transparent);
  --clay-warning-soft: color-mix(in oklab, var(--clay-warning) 16%, transparent);
  --clay-danger-soft: color-mix(in oklab, var(--clay-danger) 14%, transparent);
  --clay-info-soft: color-mix(in oklab, var(--clay-info) 14%, transparent);
}

/* ==========================================================================
   3. Platform presets
   ========================================================================== */

/* ---------- iOS / iPadOS (Human Interface Guidelines) ---------- */
[data-clay-os="ios"] {
  --clay-primary: #007aff; --clay-on-primary: #fff;
  --clay-success: #34c759; --clay-warning: #ff9500; --clay-danger: #ff3b30; --clay-info: #5ac8fa; --clay-secondary: #af52de;
  --clay-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif;
  --clay-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --clay-radius: 12px; --clay-radius-lg: 14px; --clay-radius-xl: 20px;
  --clay-fs-display: 34px; --clay-fs-h1: 28px; --clay-fs-h2: 22px; --clay-fs-h3: 20px; --clay-fs-title: 17px;
  --clay-fs-body: 17px; --clay-fs-label: 15px; --clay-fs-caption: 12px;
  --clay-fw-heading: 700; --clay-tracking-heading: 0.01em; --clay-lh: 1.29;
  --clay-control-h-base: 44px;
  --clay-btn-radius: 12px; --clay-btn-size: 17px; --clay-btn-weight: 600; --clay-btn-px: 20px; --clay-btn-shadow: none;
  --clay-press-scale: 0.98;
  --clay-input-radius: 10px; --clay-input-bg: rgb(118 118 128 / 0.12); --clay-input-border: transparent;
  --clay-input-focus: 0 0 0 0 transparent; --clay-input-focus-border: transparent;
  --clay-card-radius: 14px; --clay-card-border: 0 solid transparent; --clay-card-shadow: none;
  --clay-check-size: 22px; --clay-check-radius: 50%;
  --clay-switch-w: 51px; --clay-switch-h: 31px; --clay-switch-thumb: 27px; --clay-switch-thumb-off: 27px;
  --clay-switch-off-bg: rgb(120 120 128 / 0.16); --clay-switch-thumb-shadow: 0 3px 8px rgb(0 0 0 / 0.15), 0 3px 1px rgb(0 0 0 / 0.06);
  --clay-range-track: 4px; --clay-range-thumb: 28px; --clay-range-thumb-border: 0 solid transparent;
  --clay-seg-bg: rgb(118 118 128 / 0.12); --clay-seg-pad: 2px; --clay-seg-active-bg: #fff;
  --clay-seg-active-shadow: 0 3px 8px rgb(0 0 0 / 0.12), 0 3px 1px rgb(0 0 0 / 0.04);
  --clay-tab-ind-h: 2px;
  --clay-dialog-radius: 14px; --clay-dialog-align: center; --clay-dialog-actions: stretch;
  --clay-list-radius: 10px; --clay-list-sep-inset: 58px;
  --clay-appbar-align: center; --clay-appbar-h: 44px;
}
[data-clay-os="ios"],
[data-clay-os="ios"][data-clay-mode="light"] {
  --clay-bg: #f2f2f7; --clay-surface: #ffffff; --clay-surface-2: #f2f2f7; --clay-surface-3: #e5e5ea; --clay-elevated: #ffffff;
  --clay-border: rgb(60 60 67 / 0.18); --clay-border-strong: rgb(60 60 67 / 0.29);
  --clay-text: #000000; --clay-text-2: rgb(60 60 67 / 0.6); --clay-text-3: rgb(60 60 67 / 0.45);
}
[data-clay-os="ios"][data-clay-mode="dark"] {
  --clay-primary: #0a84ff; --clay-success: #30d158; --clay-warning: #ff9f0a; --clay-danger: #ff453a;
  --clay-bg: #000000; --clay-surface: #1c1c1e; --clay-surface-2: #2c2c2e; --clay-surface-3: #3a3a3c; --clay-elevated: #2c2c2e;
  --clay-border: rgb(84 84 88 / 0.5); --clay-border-strong: rgb(84 84 88 / 0.75);
  --clay-text: #ffffff; --clay-text-2: rgb(235 235 245 / 0.6); --clay-text-3: rgb(235 235 245 / 0.38);
  --clay-seg-active-bg: #636366; --clay-switch-off-bg: rgb(120 120 128 / 0.32);
}

/* ---------- Android (Material Design 3) ---------- */
[data-clay-os="android"] {
  --clay-primary: #6750a4; --clay-on-primary: #fff;
  --clay-secondary: #625b71; --clay-success: #146c2e; --clay-warning: #8b5000; --clay-danger: #b3261e; --clay-info: #00639b;
  --clay-font: "Roboto", "Google Sans", system-ui, sans-serif;
  --clay-font-display: "Google Sans", "Roboto", system-ui, sans-serif;
  --clay-radius: 12px; --clay-radius-sm: 8px; --clay-radius-lg: 16px; --clay-radius-xl: 28px;
  --clay-fs-display: 57px; --clay-fs-h1: 32px; --clay-fs-h2: 28px; --clay-fs-h3: 24px; --clay-fs-title: 22px;
  --clay-fs-body: 16px; --clay-fs-label: 14px; --clay-fs-caption: 12px;
  --clay-fw-heading: 400; --clay-fw-strong: 500; --clay-tracking-heading: 0; --clay-lh: 1.5;
  --clay-control-h-base: 40px;
  --clay-btn-radius: 999px; --clay-btn-px: 24px; --clay-btn-weight: 500; --clay-btn-tracking: 0.1px; --clay-btn-shadow: none;
  --clay-press-scale: 1; --clay-ripple: 1;
  --clay-input-radius: 4px; --clay-input-bg: transparent; --clay-input-border: #79747e;
  --clay-input-focus: inset 0 0 0 1px var(--clay-primary); --clay-input-focus-border: var(--clay-primary);
  --clay-card-radius: 12px; --clay-card-border: 0 solid transparent; --clay-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
  --clay-check-size: 18px; --clay-check-radius: 2px;
  --clay-switch-w: 52px; --clay-switch-h: 32px; --clay-switch-thumb: 24px; --clay-switch-thumb-off: 16px;
  --clay-switch-off-bg: var(--clay-surface-3); --clay-switch-border-w: 2px; --clay-switch-off-border: #79747e; --clay-switch-off-thumb: #79747e; --clay-switch-thumb-shadow: none;
  --clay-range-track: 4px; --clay-range-thumb: 20px; --clay-range-thumb-bg: var(--clay-primary); --clay-range-thumb-border: 0 solid transparent;
  --clay-seg-bg: transparent; --clay-seg-border: #79747e; --clay-seg-pad: 0px;
  --clay-seg-active-bg: color-mix(in oklab, var(--clay-primary) 18%, var(--clay-surface)); --clay-seg-active-fg: var(--clay-text); --clay-seg-active-shadow: none;
  --clay-tab-ind-h: 3px; --clay-tab-ind-radius: 3px 3px 0 0;
  --clay-dialog-radius: 28px; --clay-dialog-actions: flex-end;
  --clay-list-radius: 16px; --clay-list-sep-inset: 0px;
  --clay-appbar-h: 64px; --clay-tabbar-ind: color-mix(in oklab, var(--clay-primary) 18%, var(--clay-surface));
}
[data-clay-os="android"],
[data-clay-os="android"][data-clay-mode="light"] {
  --clay-bg: #fef7ff; --clay-surface: #f7f2fa; --clay-surface-2: #f3edf7; --clay-surface-3: #e6e0e9; --clay-elevated: #f3edf7;
  --clay-border: #cac4d0; --clay-border-strong: #79747e;
  --clay-text: #1d1b20; --clay-text-2: #49454f; --clay-text-3: #79747e;
}
[data-clay-os="android"][data-clay-mode="dark"] {
  --clay-primary: #d0bcff; --clay-on-primary: #381e72; --clay-danger: #f2b8b5; --clay-success: #6dd58c;
  --clay-bg: #141218; --clay-surface: #1d1b20; --clay-surface-2: #211f26; --clay-surface-3: #36343b; --clay-elevated: #2b2930;
  --clay-border: #49454f; --clay-border-strong: #938f99; --clay-input-border: #938f99; --clay-switch-off-border: #938f99; --clay-switch-off-thumb: #938f99; --clay-seg-border: #938f99;
  --clay-text: #e6e0e9; --clay-text-2: #cac4d0; --clay-text-3: #938f99;
}

/* ---------- macOS (Human Interface Guidelines, desktop) ---------- */
[data-clay-os="macos"] {
  --clay-primary: #007aff; --clay-on-primary: #fff;
  --clay-success: #28cd41; --clay-warning: #ff9500; --clay-danger: #ff3b30; --clay-info: #55bef0;
  --clay-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  --clay-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", system-ui, sans-serif;
  --clay-radius: 6px; --clay-radius-lg: 10px; --clay-radius-xl: 12px;
  --clay-fs-display: 26px; --clay-fs-h1: 22px; --clay-fs-h2: 17px; --clay-fs-h3: 15px; --clay-fs-title: 13px;
  --clay-fs-body: 13px; --clay-fs-label: 13px; --clay-fs-caption: 11px;
  --clay-fw-heading: 700; --clay-tracking-heading: 0; --clay-lh: 1.38;
  --clay-control-h-base: 28px;
  --clay-btn-radius: 6px; --clay-btn-px: 14px; --clay-btn-weight: 500; --clay-btn-shadow: 0 0.5px 1px rgb(0 0 0 / 0.25), inset 0 0.5px 0 rgb(255 255 255 / 0.25);
  --clay-press-scale: 1;
  --clay-input-radius: 5px; --clay-input-focus: 0 0 0 3px color-mix(in oklab, var(--clay-primary) 45%, transparent); --clay-input-focus-border: var(--clay-primary);
  --clay-card-radius: 10px; --clay-card-shadow: 0 0.5px 1.5px rgb(0 0 0 / 0.12);
  --clay-check-size: 14px; --clay-check-radius: 3px;
  --clay-switch-w: 38px; --clay-switch-h: 22px; --clay-switch-thumb: 20px; --clay-switch-thumb-off: 20px; --clay-switch-off-bg: rgb(0 0 0 / 0.09);
  --clay-range-track: 4px; --clay-range-thumb: 18px; --clay-range-thumb-border: 0.5px solid rgb(0 0 0 / 0.15);
  --clay-seg-bg: rgb(0 0 0 / 0.06); --clay-seg-pad: 2px;
  --clay-dialog-radius: 12px; --clay-dialog-align: center; --clay-dialog-actions: stretch;
  --clay-list-radius: 10px; --clay-list-sep-inset: 12px;
  --clay-appbar-h: 52px;
}
[data-clay-os="macos"],
[data-clay-os="macos"][data-clay-mode="light"] {
  --clay-bg: #ececec; --clay-surface: #ffffff; --clay-surface-2: #f5f5f5; --clay-surface-3: #e0e0e0; --clay-elevated: #ffffff;
  --clay-border: rgb(0 0 0 / 0.1); --clay-border-strong: rgb(0 0 0 / 0.16);
  --clay-text: rgb(0 0 0 / 0.85); --clay-text-2: rgb(0 0 0 / 0.55); --clay-text-3: rgb(0 0 0 / 0.35);
}
[data-clay-os="macos"][data-clay-mode="dark"] {
  --clay-primary: #0a84ff;
  --clay-bg: #1e1e1e; --clay-surface: #2a2a2a; --clay-surface-2: #323232; --clay-surface-3: #3d3d3d; --clay-elevated: #2e2e2e;
  --clay-border: rgb(255 255 255 / 0.1); --clay-border-strong: rgb(255 255 255 / 0.16);
  --clay-text: rgb(255 255 255 / 0.85); --clay-text-2: rgb(255 255 255 / 0.55); --clay-text-3: rgb(255 255 255 / 0.3);
  --clay-switch-off-bg: rgb(255 255 255 / 0.1); --clay-seg-bg: rgb(255 255 255 / 0.08); --clay-seg-active-bg: #5b5b5b;
}

/* ---------- Windows 11 (Fluent 2) ---------- */
[data-clay-os="windows"] {
  --clay-primary: #0f6cbd; --clay-on-primary: #fff;
  --clay-success: #107c10; --clay-warning: #bc4b09; --clay-danger: #c50f1f; --clay-info: #0078d4;
  --clay-font: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", "Selawik", system-ui, sans-serif;
  --clay-font-display: "Segoe UI Variable Display", "Segoe UI", "Selawik", system-ui, sans-serif;
  --clay-radius: 4px; --clay-radius-sm: 4px; --clay-radius-lg: 8px; --clay-radius-xl: 8px;
  --clay-fs-display: 68px; --clay-fs-h1: 40px; --clay-fs-h2: 28px; --clay-fs-h3: 20px; --clay-fs-title: 16px;
  --clay-fs-body: 14px; --clay-fs-label: 14px; --clay-fs-caption: 12px;
  --clay-fw-heading: 600; --clay-tracking-heading: 0; --clay-lh: 1.43;
  --clay-control-h-base: 32px;
  --clay-btn-radius: 4px; --clay-btn-px: 12px; --clay-btn-weight: 600; --clay-btn-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
  --clay-press-scale: 1;
  --clay-input-radius: 4px; --clay-input-focus: inset 0 -2px 0 var(--clay-primary); --clay-input-focus-border: var(--clay-border-strong);
  --clay-card-radius: 8px; --clay-card-shadow: 0 2px 4px rgb(0 0 0 / 0.04);
  --clay-check-size: 18px; --clay-check-radius: 4px;
  --clay-switch-w: 40px; --clay-switch-h: 20px; --clay-switch-thumb: 12px; --clay-switch-thumb-off: 12px;
  --clay-switch-off-bg: transparent; --clay-switch-border-w: 1px; --clay-switch-off-border: var(--clay-text-2); --clay-switch-off-thumb: var(--clay-text-2); --clay-switch-thumb-shadow: none;
  --clay-range-track: 4px; --clay-range-thumb: 20px; --clay-range-thumb-bg: var(--clay-surface); --clay-range-thumb-border: 5px solid var(--clay-primary);
  --clay-seg-bg: var(--clay-surface-2); --clay-seg-border: var(--clay-border); --clay-seg-pad: 2px;
  --clay-tab-ind-h: 3px; --clay-tab-ind-w: 16px; --clay-tab-ind-radius: 3px;
  --clay-dialog-radius: 8px; --clay-dialog-actions: stretch; --clay-dialog-footer-bg: var(--clay-surface-2);
  --clay-list-radius: 8px; --clay-list-sep-inset: 0px;
  --clay-appbar-h: 48px;
  --clay-glass: saturate(160%) blur(30px);
}
[data-clay-os="windows"],
[data-clay-os="windows"][data-clay-mode="light"] {
  --clay-bg: #f3f3f3; --clay-surface: #ffffff; --clay-surface-2: #fafafa; --clay-surface-3: #ebebeb; --clay-elevated: #ffffff;
  --clay-border: #e5e5e5; --clay-border-strong: #d1d1d1;
  --clay-text: #1a1a1a; --clay-text-2: #5d5d5d; --clay-text-3: #8a8a8a;
}
[data-clay-os="windows"][data-clay-mode="dark"] {
  --clay-primary: #479ef5; --clay-on-primary: #000;
  --clay-bg: #202020; --clay-surface: #2b2b2b; --clay-surface-2: #323232; --clay-surface-3: #3b3b3b; --clay-elevated: #2c2c2c;
  --clay-border: #3a3a3a; --clay-border-strong: #4a4a4a;
  --clay-text: #ffffff; --clay-text-2: #c5c5c5; --clay-text-3: #9a9a9a;
}

/* ---------- Linux (GNOME / libadwaita) ---------- */
[data-clay-os="linux"] {
  --clay-primary: #3584e4; --clay-on-primary: #fff;
  --clay-success: #26a269; --clay-warning: #c88800; --clay-danger: #e01b24; --clay-info: #1c71d8; --clay-secondary: #9141ac;
  --clay-font: "Cantarell", "Adwaita Sans", "Inter", "Ubuntu", "Noto Sans", system-ui, sans-serif;
  --clay-radius: 6px; --clay-radius-lg: 12px; --clay-radius-xl: 14px;
  --clay-fs-display: 32px; --clay-fs-h1: 26px; --clay-fs-h2: 20px; --clay-fs-h3: 17px; --clay-fs-title: 15px;
  --clay-fs-body: 15px; --clay-fs-label: 14px; --clay-fs-caption: 12px;
  --clay-fw-heading: 800; --clay-fw-strong: 700; --clay-tracking-heading: -0.01em; --clay-lh: 1.45;
  --clay-control-h-base: 34px;
  --clay-btn-radius: 6px; --clay-btn-px: 16px; --clay-btn-weight: 700; --clay-btn-shadow: none;
  --clay-press-scale: 1;
  --clay-input-radius: 6px; --clay-input-bg: rgb(0 0 6 / 0.05); --clay-input-border: transparent;
  --clay-input-focus: 0 0 0 2px color-mix(in oklab, var(--clay-primary) 50%, transparent); --clay-input-focus-border: transparent;
  --clay-card-radius: 12px; --clay-card-border: 0 solid transparent; --clay-card-shadow: 0 0 0 1px rgb(0 0 6 / 0.03), 0 1px 3px 1px rgb(0 0 6 / 0.07), 0 2px 6px 2px rgb(0 0 6 / 0.03);
  --clay-check-size: 20px; --clay-check-radius: 6px;
  --clay-switch-w: 48px; --clay-switch-h: 26px; --clay-switch-thumb: 20px; --clay-switch-thumb-off: 20px;
  --clay-switch-off-bg: rgb(0 0 6 / 0.15); --clay-switch-thumb-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  --clay-range-track: 4px; --clay-range-thumb: 20px; --clay-range-thumb-border: 0 solid transparent;
  --clay-seg-bg: rgb(0 0 6 / 0.05); --clay-seg-pad: 3px; --clay-seg-active-bg: var(--clay-surface);
  --clay-tab-ind-h: 0px;
  --clay-dialog-radius: 14px; --clay-dialog-align: center; --clay-dialog-actions: stretch;
  --clay-list-radius: 12px; --clay-list-sep-inset: 0px;
  --clay-appbar-align: center; --clay-appbar-h: 47px;
}
[data-clay-os="linux"],
[data-clay-os="linux"][data-clay-mode="light"] {
  --clay-bg: #fafafb; --clay-surface: #ffffff; --clay-surface-2: #f2f2f4; --clay-surface-3: #e1e1e5; --clay-elevated: #ffffff;
  --clay-border: rgb(0 0 6 / 0.08); --clay-border-strong: rgb(0 0 6 / 0.15);
  --clay-text: rgb(0 0 6 / 0.8); --clay-text-2: rgb(0 0 6 / 0.55); --clay-text-3: rgb(0 0 6 / 0.4);
}
[data-clay-os="linux"][data-clay-mode="dark"] {
  --clay-primary: #3584e4; --clay-primary-ink: #78aeed;
  --clay-bg: #222226; --clay-surface: #2e2e32; --clay-surface-2: #36363a; --clay-surface-3: #48484c; --clay-elevated: #36363a;
  --clay-border: rgb(255 255 255 / 0.08); --clay-border-strong: rgb(255 255 255 / 0.15);
  --clay-text: #ffffff; --clay-text-2: rgb(255 255 255 / 0.6); --clay-text-3: rgb(255 255 255 / 0.4);
  --clay-input-bg: rgb(255 255 255 / 0.08); --clay-switch-off-bg: rgb(255 255 255 / 0.15); --clay-seg-bg: rgb(255 255 255 / 0.06);
}

/* ==========================================================================
   4. Reset & base (applies inside .clay)
   ========================================================================== */
.clay {
  font-family: var(--clay-font);
  font-size: calc(var(--clay-fs-body) * var(--clay-font-scale));
  line-height: var(--clay-lh);
  color: var(--clay-text);
  background: var(--clay-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.clay *, .clay *::before, .clay *::after { box-sizing: border-box; }
.clay :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol) { margin: 0; }
.clay :where(button, input, select, textarea) { font: inherit; color: inherit; }
.clay :where(img, svg, video) { display: block; max-width: 100%; }
.clay :where(a) { color: var(--clay-primary-ink); text-underline-offset: 3px; }
.clay :where(:focus-visible) { outline: none; box-shadow: var(--clay-focus-ring); }
.clay ::selection { background: color-mix(in oklab, var(--clay-primary) 30%, transparent); }

/* Typography scale */
.clay-display, .clay-h1, .clay-h2, .clay-h3, .clay-title { font-family: var(--clay-font-display); font-weight: var(--clay-fw-heading); letter-spacing: var(--clay-tracking-heading); line-height: 1.15; color: var(--clay-text); }
.clay-display { font-size: calc(var(--clay-fs-display) * var(--clay-font-scale)); line-height: 1.05; }
.clay-h1 { font-size: calc(var(--clay-fs-h1) * var(--clay-font-scale)); }
.clay-h2 { font-size: calc(var(--clay-fs-h2) * var(--clay-font-scale)); }
.clay-h3 { font-size: calc(var(--clay-fs-h3) * var(--clay-font-scale)); }
.clay-title { font-size: calc(var(--clay-fs-title) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); letter-spacing: 0; }
.clay-body { font-size: calc(var(--clay-fs-body) * var(--clay-font-scale)); }
.clay-label { font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium); }
.clay-caption { font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); color: var(--clay-text-2); }
.clay-overline { font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); text-transform: uppercase; letter-spacing: 0.08em; color: var(--clay-text-3); }
.clay-muted { color: var(--clay-text-2); }
.clay-subtle { color: var(--clay-text-3); }
.clay-mono { font-family: var(--clay-font-mono); }
.clay-strong { font-weight: var(--clay-fw-strong); }

/* ==========================================================================
   5. Layout utilities
   ========================================================================== */
.clay-container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: calc(var(--clay-unit) * 5); }
.clay-stack { display: flex; flex-direction: column; gap: calc(var(--clay-unit) * 3); }
.clay-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(var(--clay-unit) * 3); }
.clay-row-between { justify-content: space-between; }
.clay-grow { flex: 1 1 auto; min-width: 0; }
.clay-grid { display: grid; gap: calc(var(--clay-unit) * 4); grid-template-columns: repeat(auto-fill, minmax(min(var(--clay-grid-min, 220px), 100%), 1fr)); }
.clay-cols { display: grid; gap: calc(var(--clay-unit) * 4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.clay-cols > * { grid-column: span 12; }
.clay-span-3 { grid-column: span 3 !important; } .clay-span-4 { grid-column: span 4 !important; } .clay-span-6 { grid-column: span 6 !important; } .clay-span-8 { grid-column: span 8 !important; }
@media (max-width: 767px) { .clay-cols > [class*="clay-span-"] { grid-column: span 12 !important; } }
.clay-gap-1 { gap: var(--clay-unit); } .clay-gap-2 { gap: calc(var(--clay-unit) * 2); } .clay-gap-4 { gap: calc(var(--clay-unit) * 4); } .clay-gap-6 { gap: calc(var(--clay-unit) * 6); } .clay-gap-8 { gap: calc(var(--clay-unit) * 8); }
.clay-p-4 { padding: calc(var(--clay-unit) * 4); } .clay-p-6 { padding: calc(var(--clay-unit) * 6); }
.clay-divider { height: var(--clay-border-w); background: var(--clay-border); border: 0; margin: calc(var(--clay-unit) * 3) 0; width: 100%; }
.clay-divider-v { width: var(--clay-border-w); align-self: stretch; background: var(--clay-border); }
.clay-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.clay-surface { background: var(--clay-surface); }
.clay-glass { background: color-mix(in oklab, var(--clay-surface) 72%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }

/* ==========================================================================
   6. Icons
   ========================================================================== */
.clay-icon { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: middle; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   7. Buttons
   ========================================================================== */
.clay-btn {
  --_bg: var(--clay-primary); --_fg: var(--clay-on-primary); --_bd: transparent; --_sh: var(--clay-btn-shadow);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: var(--clay-control-h); padding: 0 var(--clay-btn-px);
  border: var(--clay-border-w) solid var(--_bd); border-radius: var(--clay-btn-radius);
  background: var(--_bg); color: var(--_fg); box-shadow: var(--_sh);
  font-family: var(--clay-font); font-size: calc(var(--clay-btn-size) * var(--clay-font-scale)); font-weight: var(--clay-btn-weight);
  letter-spacing: var(--clay-btn-tracking); text-transform: var(--clay-btn-case); line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--clay-dur) var(--clay-ease), color var(--clay-dur) var(--clay-ease), border-color var(--clay-dur) var(--clay-ease), box-shadow var(--clay-dur) var(--clay-ease), transform var(--clay-dur) var(--clay-ease), opacity var(--clay-dur);
}
.clay-btn:hover { background: color-mix(in oklab, var(--_bg) 90%, var(--_fg)); }
.clay-btn:active { transform: scale(var(--clay-press-scale)); background: color-mix(in oklab, var(--_bg) 84%, var(--_fg)); }
.clay-btn:disabled, .clay-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; box-shadow: none; }
.clay-btn--tonal { --_bg: var(--clay-primary-soft); --_fg: var(--clay-primary-ink); --_sh: none; }
.clay-btn--secondary { --_bg: var(--clay-surface); --_fg: var(--clay-text); --_bd: var(--clay-border-strong); --_sh: var(--clay-shadow-1); }
.clay-btn--outline { --_bg: transparent; --_fg: var(--clay-primary-ink); --_bd: var(--clay-border-strong); --_sh: none; }
.clay-btn--ghost { --_bg: transparent; --_fg: var(--clay-primary-ink); --_sh: none; }
.clay-btn--plain { --_bg: transparent; --_fg: var(--clay-text); --_sh: none; }
.clay-btn--danger { --_bg: var(--clay-danger); --_fg: #fff; }
.clay-btn--danger.clay-btn--tonal { --_bg: var(--clay-danger-soft); --_fg: var(--clay-danger); }
.clay-btn--success { --_bg: var(--clay-success); --_fg: #fff; }
.clay-btn--link { --_bg: transparent; --_fg: var(--clay-primary-ink); --_sh: none; padding: 0; min-height: auto; text-decoration: underline; text-underline-offset: 3px; }
.clay-btn--link:hover { background: transparent; opacity: 0.8; }
.clay-btn--sm { min-height: calc(var(--clay-control-h) * 0.8); padding: 0 calc(var(--clay-btn-px) * 0.7); font-size: calc(var(--clay-btn-size) * var(--clay-font-scale) * 0.9); }
.clay-btn--lg { min-height: calc(var(--clay-control-h) * 1.2); padding: 0 calc(var(--clay-btn-px) * 1.3); font-size: calc(var(--clay-btn-size) * var(--clay-font-scale) * 1.06); }
.clay-btn--pill { border-radius: var(--clay-radius-full); }
.clay-btn--block { display: flex; width: 100%; }
.clay-btn--icon { padding: 0; width: var(--clay-control-h); }
.clay-btn--icon.clay-btn--sm { width: calc(var(--clay-control-h) * 0.8); }
.clay-btn.is-loading { color: transparent !important; pointer-events: none; }
.clay-btn.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.1em; height: 1.1em; border-radius: 50%; border: 2px solid var(--_fg); border-right-color: transparent; animation: clay-spin 0.7s linear infinite; }
.clay-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: 0.18; transform: scale(0); animation: clay-ripple 600ms var(--clay-ease) forwards; z-index: -1; }
@keyframes clay-ripple { to { transform: scale(1); opacity: 0; } }

/* Button group */
.clay-btn-group { display: inline-flex; }
.clay-btn-group > .clay-btn { border-radius: 0; }
.clay-btn-group > .clay-btn:first-child { border-start-start-radius: var(--clay-btn-radius); border-end-start-radius: var(--clay-btn-radius); }
.clay-btn-group > .clay-btn:last-child { border-start-end-radius: var(--clay-btn-radius); border-end-end-radius: var(--clay-btn-radius); }
.clay-btn-group > .clay-btn + .clay-btn { margin-inline-start: calc(var(--clay-border-w) * -1); }

/* Floating action button */
.clay-fab {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 56px; height: 56px; padding: 0 16px; border: 0; cursor: pointer;
  border-radius: calc(var(--clay-radius-lg) * 1); background: color-mix(in oklab, var(--clay-primary) 22%, var(--clay-surface)); color: var(--clay-primary-ink);
  box-shadow: var(--clay-shadow-3); font-weight: var(--clay-fw-strong); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale));
  transition: transform var(--clay-dur) var(--clay-ease), box-shadow var(--clay-dur);
}
.clay-fab:hover { transform: translateY(-2px); box-shadow: var(--clay-shadow-4); }
.clay-fab--primary { background: var(--clay-primary); color: var(--clay-on-primary); }

/* ==========================================================================
   8. Form controls
   ========================================================================== */
.clay-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.clay-field > label, .clay-field-label { font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium); color: var(--clay-text); }
.clay-help { font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); color: var(--clay-text-3); }
.clay-field.is-invalid .clay-help, .clay-error { color: var(--clay-danger); }

.clay-input, .clay-select, .clay-textarea {
  width: 100%; min-height: var(--clay-control-h); padding: 0 calc(var(--clay-unit) * 3.25);
  background: var(--clay-input-bg); color: var(--clay-text);
  border: var(--clay-border-w) solid var(--clay-input-border); border-radius: var(--clay-input-radius);
  font-size: calc(var(--clay-fs-body) * var(--clay-font-scale) * 0.94); outline: none; appearance: none; -webkit-appearance: none;
  transition: border-color var(--clay-dur) var(--clay-ease), box-shadow var(--clay-dur) var(--clay-ease), background-color var(--clay-dur);
}
.clay-input::placeholder, .clay-textarea::placeholder { color: var(--clay-text-3); }
.clay-input:hover, .clay-select:hover, .clay-textarea:hover { border-color: color-mix(in oklab, var(--clay-input-border) 60%, var(--clay-text)); }
.clay-input:focus, .clay-select:focus, .clay-textarea:focus, .clay-input:focus-visible, .clay-select:focus-visible, .clay-textarea:focus-visible { border-color: var(--clay-input-focus-border); box-shadow: var(--clay-input-focus); }
.clay-input[aria-invalid="true"], .clay-field.is-invalid .clay-input { border-color: var(--clay-danger); box-shadow: 0 0 0 1px var(--clay-danger); }
.clay-input:disabled, .clay-select:disabled, .clay-textarea:disabled { opacity: 0.5; cursor: not-allowed; }
.clay-textarea { padding-block: calc(var(--clay-unit) * 2.5); min-height: calc(var(--clay-control-h) * 2.4); resize: vertical; line-height: 1.5; }
.clay-select { padding-inline-end: 36px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.clay-input-group { position: relative; display: flex; align-items: center; }
.clay-input-group > .clay-icon { position: absolute; inset-inline-start: 12px; color: var(--clay-text-3); pointer-events: none; width: 18px; height: 18px; }
.clay-input-group > .clay-icon ~ .clay-input { padding-inline-start: 40px; }
.clay-input-group > .clay-input-suffix { position: absolute; inset-inline-end: 10px; color: var(--clay-text-3); font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); }
.clay-search { border-radius: var(--clay-radius-full); }
[data-clay-os="ios"] .clay-search, [data-clay-os="macos"] .clay-search { border-radius: 10px; }

/* Checkbox & radio */
.clay-check, .clay-radio {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: var(--clay-check-size); height: var(--clay-check-size);
  border: 2px solid var(--clay-border-strong); border-radius: var(--clay-check-radius); background: var(--clay-surface);
  display: inline-grid; place-content: center;
  transition: background-color var(--clay-dur) var(--clay-ease), border-color var(--clay-dur) var(--clay-ease), transform var(--clay-dur) var(--clay-ease-spring);
}
.clay-radio { border-radius: 50%; }
.clay-check::before {
  content: ""; width: 70%; height: 70%; background: var(--clay-on-primary); transform: scale(0); transition: transform var(--clay-dur) var(--clay-ease-spring);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.clay-check:indeterminate::before { -webkit-mask: none; mask: none; height: 2px; width: 55%; border-radius: 2px; transform: scale(1); }
.clay-radio::before { content: ""; width: 45%; height: 45%; border-radius: 50%; background: var(--clay-on-primary); transform: scale(0); transition: transform var(--clay-dur) var(--clay-ease-spring); }
.clay-check:checked, .clay-check:indeterminate, .clay-radio:checked { background: var(--clay-primary); border-color: var(--clay-primary); }
.clay-check:checked::before, .clay-radio:checked::before { transform: scale(1); }
.clay-check:active, .clay-radio:active { transform: scale(0.9); }
.clay-check:disabled, .clay-radio:disabled { opacity: 0.45; cursor: not-allowed; }
.clay-choice { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: calc(var(--clay-fs-body) * var(--clay-font-scale) * 0.94); }

/* Switch — <input type="checkbox" role="switch" class="clay-switch"> */
.clay-switch {
  --_off: calc((var(--clay-switch-h) - var(--clay-switch-thumb-off)) / 2 - var(--_bw));
  --_on: calc((var(--clay-switch-h) - var(--clay-switch-thumb)) / 2 - var(--_bw));
  --_bw: var(--clay-switch-border-w, 0px);
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; cursor: pointer; position: relative;
  width: var(--clay-switch-w); height: var(--clay-switch-h); border-radius: 999px;
  background: var(--clay-switch-off-bg); border: var(--_bw) solid var(--clay-switch-off-border);
  transition: background-color var(--clay-dur) var(--clay-ease), border-color var(--clay-dur);
}
.clay-switch::before {
  content: ""; position: absolute; top: 50%; left: var(--_off);
  width: var(--clay-switch-thumb-off); height: var(--clay-switch-thumb-off); border-radius: 50%;
  background: var(--clay-switch-off-thumb); box-shadow: var(--clay-switch-thumb-shadow); transform: translateY(-50%);
  transition: left var(--clay-dur-slow) var(--clay-ease), width var(--clay-dur) var(--clay-ease), height var(--clay-dur) var(--clay-ease), background-color var(--clay-dur);
}
.clay-switch:checked { background: var(--clay-primary); border-color: var(--clay-primary); }
.clay-switch:checked::before { left: calc(100% - var(--clay-switch-thumb) - var(--_on)); width: var(--clay-switch-thumb); height: var(--clay-switch-thumb); background: var(--clay-on-primary); }
[data-clay-os="ios"] .clay-switch:checked, [data-clay-os="ios"].clay-switch:checked { background: var(--clay-success); border-color: var(--clay-success); }
[data-clay-os="ios"] .clay-switch:checked::before, [data-clay-os="macos"] .clay-switch:checked::before, [data-clay-os="linux"] .clay-switch:checked::before { background: #fff; }
.clay-switch:active::before { width: calc(var(--clay-switch-thumb) * 1.15); }
.clay-switch:disabled { opacity: 0.4; cursor: not-allowed; }

/* Range slider — set style="--clay-value: 40%" or let clay.js do it */
.clay-range {
  --clay-value: 50%;
  appearance: none; -webkit-appearance: none; width: 100%; height: var(--clay-range-thumb); background: transparent; cursor: pointer; margin: 0;
}
.clay-range::-webkit-slider-runnable-track { height: var(--clay-range-track); border-radius: 999px; background: linear-gradient(90deg, var(--clay-primary) var(--clay-value), var(--clay-surface-3) var(--clay-value)); }
.clay-range::-moz-range-track { height: var(--clay-range-track); border-radius: 999px; background: var(--clay-surface-3); }
.clay-range::-moz-range-progress { height: var(--clay-range-track); border-radius: 999px; background: var(--clay-primary); }
.clay-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: var(--clay-range-thumb); height: var(--clay-range-thumb); border-radius: 50%;
  margin-top: calc((var(--clay-range-track) - var(--clay-range-thumb)) / 2);
  background: var(--clay-range-thumb-bg); border: var(--clay-range-thumb-border); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25);
  transition: transform var(--clay-dur) var(--clay-ease);
}
.clay-range::-moz-range-thumb { width: var(--clay-range-thumb); height: var(--clay-range-thumb); border-radius: 50%; background: var(--clay-range-thumb-bg); border: var(--clay-range-thumb-border); box-shadow: 0 1px 4px rgb(0 0 0 / 0.25); box-sizing: border-box; }
.clay-range:active::-webkit-slider-thumb { transform: scale(1.12); }

/* Segmented control — radios inside .clay-segmented */
.clay-segmented {
  display: inline-flex; padding: var(--clay-seg-pad); gap: 2px; position: relative;
  background: var(--clay-seg-bg); border: var(--clay-border-w) solid var(--clay-seg-border);
  border-radius: calc(var(--clay-radius-sm) + var(--clay-seg-pad));
}
[data-clay-os="android"] .clay-segmented { border-radius: 999px; gap: 0; }
.clay-segmented input { position: absolute; opacity: 0; pointer-events: none; }
.clay-segmented label {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; white-space: nowrap;
  min-height: calc(var(--clay-control-h) - var(--clay-seg-pad) * 2 - 2px); padding: 0 calc(var(--clay-unit) * 4);
  border-radius: var(--clay-radius-sm); color: var(--clay-text-2);
  font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium);
  transition: background-color var(--clay-dur) var(--clay-ease), color var(--clay-dur), box-shadow var(--clay-dur);
}
[data-clay-os="android"] .clay-segmented label { border-radius: 0; }
[data-clay-os="android"] .clay-segmented label + input + label, [data-clay-os="android"] .clay-segmented input + label ~ label { border-inline-start: 1px solid var(--clay-seg-border); }
[data-clay-os="android"] .clay-segmented label:first-of-type { border-radius: 999px 0 0 999px; }
[data-clay-os="android"] .clay-segmented label:last-of-type { border-radius: 0 999px 999px 0; }
.clay-segmented label:hover { color: var(--clay-text); }
.clay-segmented input:checked + label { background: var(--clay-seg-active-bg); color: var(--clay-seg-active-fg); box-shadow: var(--clay-seg-active-shadow); }
.clay-segmented input:focus-visible + label { box-shadow: var(--clay-focus-ring); }

/* Number stepper */
.clay-stepper { display: inline-flex; align-items: center; border: var(--clay-border-w) solid var(--clay-border-strong); border-radius: var(--clay-input-radius); overflow: hidden; background: var(--clay-surface); }
.clay-stepper button { width: var(--clay-control-h); height: var(--clay-control-h); border: 0; background: transparent; cursor: pointer; font-size: 18px; color: var(--clay-text-2); }
.clay-stepper button:hover { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-stepper input { width: 52px; text-align: center; border: 0; background: transparent; height: var(--clay-control-h); font-variant-numeric: tabular-nums; outline: none; -moz-appearance: textfield; }
.clay-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* OTP / PIN */
.clay-otp { display: inline-flex; gap: 8px; }
.clay-otp input { width: calc(var(--clay-control-h) * 1.1); height: calc(var(--clay-control-h) * 1.25); text-align: center; font-size: 1.3em; font-weight: var(--clay-fw-strong); border-radius: var(--clay-input-radius); border: var(--clay-border-w) solid var(--clay-input-border); background: var(--clay-input-bg); outline: none; transition: box-shadow var(--clay-dur), border-color var(--clay-dur); }
.clay-otp input:focus { border-color: var(--clay-input-focus-border); box-shadow: var(--clay-input-focus); }

/* File drop zone */
.clay-dropzone { display: grid; place-items: center; gap: 8px; text-align: center; padding: calc(var(--clay-unit) * 8); border: 2px dashed var(--clay-border-strong); border-radius: var(--clay-radius-lg); color: var(--clay-text-2); cursor: pointer; transition: border-color var(--clay-dur), background-color var(--clay-dur); position: relative; }
.clay-dropzone:hover, .clay-dropzone.is-over { border-color: var(--clay-primary); background: var(--clay-primary-50); color: var(--clay-text); }
.clay-dropzone input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* Rating */
.clay-rating { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.clay-rating input { position: absolute; opacity: 0; pointer-events: none; }
.clay-rating label { cursor: pointer; color: var(--clay-surface-3); font-size: 24px; line-height: 1; transition: color var(--clay-dur), transform var(--clay-dur) var(--clay-ease-spring); }
.clay-rating label:hover, .clay-rating label:hover ~ label, .clay-rating input:checked ~ label { color: #f5b301; }
.clay-rating label:active { transform: scale(1.25); }

/* ==========================================================================
   9. Chips, badges, tags, avatars
   ========================================================================== */
.clay-badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); background: var(--clay-primary-soft); color: var(--clay-primary-ink); white-space: nowrap; }
.clay-badge--solid { background: var(--clay-primary); color: var(--clay-on-primary); }
.clay-badge--success { background: var(--clay-success-soft); color: var(--clay-success); }
.clay-badge--warning { background: var(--clay-warning-soft); color: var(--clay-warning); }
.clay-badge--danger { background: var(--clay-danger-soft); color: var(--clay-danger); }
.clay-badge--neutral { background: var(--clay-surface-2); color: var(--clay-text-2); }
.clay-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.clay-count { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--clay-danger); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--clay-surface); }

.clay-chip {
  display: inline-flex; align-items: center; gap: 6px; height: calc(var(--clay-control-h) * 0.8); padding: 0 12px; cursor: pointer;
  border: var(--clay-border-w) solid var(--clay-border-strong); border-radius: var(--clay-radius-sm); background: var(--clay-surface); color: var(--clay-text-2);
  font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium);
  transition: background-color var(--clay-dur), color var(--clay-dur), border-color var(--clay-dur);
}
[data-clay-os="ios"] .clay-chip, [data-clay-os="web"] .clay-chip, [data-clay-os="linux"] .clay-chip { border-radius: 999px; }
.clay-chip:hover { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-chip[aria-pressed="true"], .clay-chip.is-selected { background: var(--clay-primary-soft); border-color: transparent; color: var(--clay-primary-ink); }
.clay-chip .clay-icon { width: 16px; height: 16px; }
.clay-chip-x { border: 0; background: none; padding: 0; margin-inline-end: -4px; cursor: pointer; color: inherit; opacity: 0.6; display: grid; }
.clay-chip-x:hover { opacity: 1; }

.clay-avatar { --_s: 40px; position: relative; width: var(--_s); height: var(--_s); flex: none; border-radius: 50%; display: inline-grid; place-items: center; overflow: visible; background: linear-gradient(135deg, var(--clay-primary-300), var(--clay-primary)); color: var(--clay-on-primary); font-weight: var(--clay-fw-strong); font-size: calc(var(--_s) * 0.38); }
.clay-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.clay-avatar--sm { --_s: 28px; } .clay-avatar--lg { --_s: 56px; } .clay-avatar--xl { --_s: 80px; }
.clay-avatar--square { border-radius: var(--clay-radius-sm); }
.clay-avatar[data-status]::after { content: ""; position: absolute; right: 0; bottom: 0; width: 28%; height: 28%; border-radius: 50%; box-shadow: 0 0 0 2px var(--clay-surface); background: var(--clay-text-3); }
.clay-avatar[data-status="online"]::after { background: var(--clay-success); }
.clay-avatar[data-status="busy"]::after { background: var(--clay-danger); }
.clay-avatar[data-status="away"]::after { background: var(--clay-warning); }
.clay-avatar-group { display: inline-flex; }
.clay-avatar-group > .clay-avatar { box-shadow: 0 0 0 2px var(--clay-surface); }
.clay-avatar-group > .clay-avatar + .clay-avatar { margin-inline-start: calc(var(--_s) * -0.3); }

.clay-kbd { display: inline-flex; align-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; border: 1px solid var(--clay-border-strong); border-bottom-width: 2px; background: var(--clay-surface); font-family: var(--clay-font-mono); font-size: 11px; color: var(--clay-text-2); justify-content: center; }
.clay-code { font-family: var(--clay-font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--clay-surface-2); color: var(--clay-text); }

/* ==========================================================================
   10. Cards & surfaces
   ========================================================================== */
.clay-card { background: var(--clay-surface); border: var(--clay-card-border); border-radius: var(--clay-card-radius); box-shadow: var(--clay-card-shadow); overflow: hidden; color: var(--clay-text); }
.clay-card-body { padding: calc(var(--clay-unit) * 5); display: flex; flex-direction: column; gap: calc(var(--clay-unit) * 2); }
.clay-card-media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--clay-primary-200), var(--clay-primary-500) 60%, var(--clay-secondary)); position: relative; }
.clay-card-media img { width: 100%; height: 100%; object-fit: cover; }
.clay-card-footer { padding: calc(var(--clay-unit) * 3) calc(var(--clay-unit) * 5); border-top: var(--clay-border-w) solid var(--clay-border); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.clay-card--interactive { cursor: pointer; transition: transform var(--clay-dur-slow) var(--clay-ease), box-shadow var(--clay-dur-slow) var(--clay-ease); }
.clay-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--clay-shadow-3); }
.clay-card--outlined { box-shadow: none; border: var(--clay-border-w) solid var(--clay-border); }
.clay-card--filled { box-shadow: none; border: 0; background: var(--clay-surface-2); }
.clay-card--elevated { box-shadow: var(--clay-shadow-3); border: 0; }

.clay-stat { display: flex; flex-direction: column; gap: 4px; }
.clay-stat-label { font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text-2); }
.clay-stat-value { font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-h2) * var(--clay-font-scale)); font-weight: var(--clay-fw-heading); letter-spacing: var(--clay-tracking-heading); font-variant-numeric: tabular-nums; line-height: 1.1; }
.clay-stat-delta { font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); color: var(--clay-success); }
.clay-stat-delta.is-down { color: var(--clay-danger); }

.clay-empty { display: grid; place-items: center; text-align: center; gap: 10px; padding: calc(var(--clay-unit) * 10) calc(var(--clay-unit) * 6); color: var(--clay-text-2); }
.clay-empty-icon { width: 56px; height: 56px; border-radius: var(--clay-radius-lg); background: var(--clay-primary-soft); color: var(--clay-primary-ink); display: grid; place-items: center; }

/* ==========================================================================
   11. Lists
   ========================================================================== */
.clay-list { list-style: none; margin: 0; padding: 0; background: var(--clay-surface); border-radius: var(--clay-list-radius); overflow: hidden; }
.clay-list--bordered { border: var(--clay-border-w) solid var(--clay-border); }
.clay-list-header { padding: 18px 16px 6px; font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); text-transform: uppercase; letter-spacing: 0.04em; color: var(--clay-text-2); }
[data-clay-os="android"] .clay-list-header, [data-clay-os="linux"] .clay-list-header, [data-clay-os="windows"] .clay-list-header { text-transform: none; letter-spacing: 0; font-weight: var(--clay-fw-strong); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text); }
[data-clay-os="android"] .clay-list-header { color: var(--clay-primary-ink); }
.clay-list-item { position: relative; display: flex; align-items: center; gap: 14px; min-height: calc(var(--clay-control-h) + 8px); padding: 10px 16px; color: var(--clay-text); text-decoration: none; }
.clay-list-item + .clay-list-item::before { content: ""; position: absolute; top: 0; left: var(--clay-list-sep-inset); right: 0; height: var(--clay-border-w); background: var(--clay-border); }
[data-clay-os="android"] .clay-list-item + .clay-list-item::before { display: none; }
.clay-list-item--action { cursor: pointer; transition: background-color var(--clay-dur); }
.clay-list-item--action:hover { background: color-mix(in oklab, var(--clay-text) 5%, transparent); }
.clay-list-item--action:active { background: color-mix(in oklab, var(--clay-text) 10%, transparent); }
.clay-list-icon { width: 30px; height: 30px; flex: none; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--clay-primary); }
.clay-list-icon .clay-icon { width: 18px; height: 18px; }
[data-clay-os="android"] .clay-list-icon, [data-clay-os="windows"] .clay-list-icon, [data-clay-os="linux"] .clay-list-icon { background: transparent !important; color: var(--clay-text-2); }
.clay-list-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clay-list-title { font-size: calc(var(--clay-fs-body) * var(--clay-font-scale)); line-height: 1.3; }
.clay-list-sub { font-size: calc(var(--clay-fs-label) * var(--clay-font-scale) * 0.95); color: var(--clay-text-2); line-height: 1.3; }
.clay-list-trail { display: inline-flex; align-items: center; gap: 6px; color: var(--clay-text-3); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-chevron { width: 8px; height: 13px; flex: none; opacity: 0.55; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 13'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ==========================================================================
   12. Navigation
   ========================================================================== */
/* App bar / navigation bar / title bar */
.clay-appbar { display: flex; align-items: center; gap: 8px; min-height: var(--clay-appbar-h); padding: 0 calc(var(--clay-unit) * 3); background: var(--clay-surface); color: var(--clay-text); position: relative; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-appbar--glass { background: color-mix(in oklab, var(--clay-surface) 75%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }
.clay-appbar-title { flex: 1; font-family: var(--clay-font-display); font-weight: var(--clay-fw-strong); font-size: calc(var(--clay-fs-title) * var(--clay-font-scale)); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-clay-os="ios"] .clay-appbar-title, [data-clay-os="linux"] .clay-appbar-title { position: absolute; left: 50%; transform: translateX(-50%); max-width: 60%; text-align: center; }
[data-clay-os="android"] .clay-appbar { border-bottom: 0; background: var(--clay-bg); }
[data-clay-os="android"] .clay-appbar-title { font-weight: 400; }
.clay-appbar .clay-spacer { flex: 1; }
.clay-large-title { padding: 4px 16px 10px; font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-display) * var(--clay-font-scale)); font-weight: var(--clay-fw-heading); letter-spacing: var(--clay-tracking-heading); line-height: 1.1; }

/* Navbar (web) */
.clay-navbar { display: flex; align-items: center; gap: calc(var(--clay-unit) * 6); height: 64px; padding: 0 calc(var(--clay-unit) * 5); background: var(--clay-surface); border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-navbar-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: var(--clay-fw-heading); font-size: 17px; color: var(--clay-text); text-decoration: none; }
.clay-navbar-links { display: flex; gap: 4px; }
.clay-navbar-links a { padding: 8px 12px; border-radius: var(--clay-radius-sm); color: var(--clay-text-2); text-decoration: none; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium); transition: color var(--clay-dur), background-color var(--clay-dur); }
.clay-navbar-links a:hover { color: var(--clay-text); background: var(--clay-surface-2); }
.clay-navbar-links a[aria-current="page"] { color: var(--clay-text); background: var(--clay-surface-2); }
@media (max-width: 640px) { .clay-navbar-links { display: none; } }

/* Tabs */
.clay-tabs { display: flex; gap: 4px; border-bottom: var(--clay-border-w) solid var(--clay-border); overflow-x: auto; scrollbar-width: none; }
.clay-tab {
  position: relative; flex: none; border: 0; background: none; cursor: pointer; padding: 0 calc(var(--clay-unit) * 4);
  min-height: calc(var(--clay-control-h) + 6px); color: var(--clay-text-2); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium);
  transition: color var(--clay-dur);
}
.clay-tab:hover { color: var(--clay-text); }
.clay-tab::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: var(--clay-tab-ind-w); height: var(--clay-tab-ind-h); border-radius: var(--clay-tab-ind-radius); background: var(--clay-primary); transform: translateX(-50%) scaleX(0); transition: transform var(--clay-dur-slow) var(--clay-ease); }
.clay-tab[aria-selected="true"] { color: var(--clay-primary-ink); }
[data-clay-os="windows"] .clay-tab[aria-selected="true"], [data-clay-os="ios"] .clay-tab[aria-selected="true"] { color: var(--clay-text); font-weight: var(--clay-fw-strong); }
.clay-tab[aria-selected="true"]::after { transform: translateX(-50%) scaleX(1); }
[data-clay-os="android"] .clay-tab::after { width: calc(100% - 32px); max-width: 100%; }
[data-clay-os="linux"] .clay-tab[aria-selected="true"] { background: var(--clay-surface-3); color: var(--clay-text); }
[data-clay-os="linux"] .clay-tabs { border: 0; gap: 2px; }
[data-clay-os="linux"] .clay-tab { border-radius: var(--clay-radius); min-height: var(--clay-control-h); }
.clay-tabs--pill { border: 0; padding: 4px; background: var(--clay-surface-2); border-radius: calc(var(--clay-radius) + 4px); display: inline-flex; }
.clay-tabs--pill .clay-tab { border-radius: var(--clay-radius); min-height: calc(var(--clay-control-h) - 4px); }
.clay-tabs--pill .clay-tab::after { display: none; }
.clay-tabs--pill .clay-tab[aria-selected="true"] { background: var(--clay-surface); color: var(--clay-text); box-shadow: var(--clay-shadow-1); }
.clay-tabpanel[hidden] { display: none; }
.clay-tabpanel { padding-top: calc(var(--clay-unit) * 4); animation: clay-fade-up var(--clay-dur-slow) var(--clay-ease); }

/* Bottom tab bar / navigation bar */
.clay-tabbar { display: flex; justify-content: space-around; align-items: stretch; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in oklab, var(--clay-surface) 85%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); border-top: var(--clay-border-w) solid var(--clay-border); }
.clay-tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--clay-text-3); font-size: 10.5px; font-weight: var(--clay-fw-medium); text-decoration: none; position: relative; }
.clay-tabbar-item .clay-icon { width: 24px; height: 24px; padding: 0; box-sizing: content-box; border-radius: 999px; transition: background-color var(--clay-dur) var(--clay-ease), padding var(--clay-dur) var(--clay-ease); }
.clay-tabbar-item[aria-current="page"], .clay-tabbar-item.is-active { color: var(--clay-primary-ink); }
[data-clay-os="android"] .clay-tabbar { border-top: 0; background: var(--clay-surface-2); padding-top: 12px; padding-bottom: 16px; }
[data-clay-os="android"] .clay-tabbar-item { font-size: 12px; color: var(--clay-text-2); gap: 4px; }
[data-clay-os="android"] .clay-tabbar-item .clay-icon { padding: 4px 20px; }
[data-clay-os="android"] .clay-tabbar-item[aria-current="page"], [data-clay-os="android"] .clay-tabbar-item.is-active { color: var(--clay-text); font-weight: 700; }
[data-clay-os="android"] .clay-tabbar-item[aria-current="page"] .clay-icon, [data-clay-os="android"] .clay-tabbar-item.is-active .clay-icon { background: var(--clay-tabbar-ind); }

/* Sidebar */
.clay-sidebar { display: flex; flex-direction: column; gap: 2px; padding: 12px; background: var(--clay-surface); min-width: 220px; }
.clay-sidebar-label { padding: 14px 10px 6px; font-size: 11px; font-weight: var(--clay-fw-strong); text-transform: uppercase; letter-spacing: 0.06em; color: var(--clay-text-3); }
.clay-sidebar-item { display: flex; align-items: center; gap: 10px; height: calc(var(--clay-control-h) - 4px); padding: 0 10px; border-radius: var(--clay-radius-sm); color: var(--clay-text-2); text-decoration: none; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium); cursor: pointer; position: relative; transition: background-color var(--clay-dur), color var(--clay-dur); }
.clay-sidebar-item:hover { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-sidebar-item[aria-current="page"] { background: var(--clay-primary-soft); color: var(--clay-primary-ink); }
[data-clay-os="windows"] .clay-sidebar-item[aria-current="page"] { background: var(--clay-surface-3); color: var(--clay-text); }
[data-clay-os="windows"] .clay-sidebar-item[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 50%; width: 3px; height: 16px; transform: translateY(-50%); border-radius: 3px; background: var(--clay-primary); }
[data-clay-os="macos"] .clay-sidebar-item[aria-current="page"] { background: rgb(0 0 0 / 0.08); color: var(--clay-text); }
[data-clay-os="android"] .clay-sidebar-item { border-radius: 999px; height: 56px; padding: 0 16px; }
.clay-sidebar-item .clay-badge { margin-inline-start: auto; }

/* Breadcrumbs */
.clay-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text-3); list-style: none; margin: 0; padding: 0; }
.clay-breadcrumbs a { color: var(--clay-text-2); text-decoration: none; }
.clay-breadcrumbs a:hover { color: var(--clay-primary-ink); }
.clay-breadcrumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: 0.5; }
.clay-breadcrumbs [aria-current] { color: var(--clay-text); font-weight: var(--clay-fw-medium); }

/* Pagination */
.clay-pagination { display: inline-flex; gap: 4px; align-items: center; }
.clay-page { min-width: calc(var(--clay-control-h) * 0.9); height: calc(var(--clay-control-h) * 0.9); padding: 0 8px; border-radius: var(--clay-radius-sm); border: 0; background: transparent; color: var(--clay-text-2); cursor: pointer; font-variant-numeric: tabular-nums; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); transition: background-color var(--clay-dur); }
.clay-page:hover { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-page[aria-current="page"] { background: var(--clay-primary); color: var(--clay-on-primary); font-weight: var(--clay-fw-strong); }

/* Steps */
.clay-steps { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
.clay-step { flex: 1; display: flex; flex-direction: column; gap: 8px; counter-increment: step; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text-3); }
.clay-step::before { content: ""; height: 4px; border-radius: 4px; background: var(--clay-surface-3); transition: background-color var(--clay-dur-slow); }
.clay-step.is-done::before, .clay-step.is-current::before { background: var(--clay-primary); }
.clay-step.is-current { color: var(--clay-text); font-weight: var(--clay-fw-strong); }
.clay-step.is-done { color: var(--clay-text-2); }

/* ==========================================================================
   13. Feedback
   ========================================================================== */
.clay-alert { --_c: var(--clay-info); display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--clay-radius); background: color-mix(in oklab, var(--_c) 10%, var(--clay-surface)); border: var(--clay-border-w) solid color-mix(in oklab, var(--_c) 28%, transparent); color: var(--clay-text); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-alert > .clay-icon { color: var(--_c); margin-top: 1px; }
.clay-alert-title { font-weight: var(--clay-fw-strong); margin-bottom: 2px; }
.clay-alert--success { --_c: var(--clay-success); } .clay-alert--warning { --_c: var(--clay-warning); } .clay-alert--danger { --_c: var(--clay-danger); }
.clay-alert--banner { border-radius: 0; border-inline: 0; }

.clay-progress { height: 6px; width: 100%; border-radius: 999px; background: var(--clay-surface-3); overflow: hidden; }
.clay-progress > span { display: block; height: 100%; width: var(--clay-value, 40%); border-radius: inherit; background: var(--clay-primary); transition: width var(--clay-dur-slow) var(--clay-ease); }
.clay-progress--indeterminate > span { width: 40%; animation: clay-indeterminate 1.3s var(--clay-ease) infinite; }
@keyframes clay-indeterminate { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
.clay-ring { --clay-value: 65; --_s: 48px; width: var(--_s); height: var(--_s); border-radius: 50%; display: inline-grid; place-items: center; background: conic-gradient(var(--clay-primary) calc(var(--clay-value) * 1%), var(--clay-surface-3) 0); position: relative; font-size: 12px; font-weight: var(--clay-fw-strong); font-variant-numeric: tabular-nums; }
.clay-ring::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--clay-surface); }
.clay-ring > * { position: relative; }
.clay-spinner { --_s: 22px; width: var(--_s); height: var(--_s); border-radius: 50%; border: 2.5px solid var(--clay-surface-3); border-top-color: var(--clay-primary); animation: clay-spin 0.8s linear infinite; display: inline-block; }
[data-clay-os="ios"] .clay-spinner, [data-clay-os="macos"] .clay-spinner { border: 0; background: conic-gradient(from 0deg, transparent, var(--clay-text-2)); -webkit-mask: repeating-conic-gradient(#000 0 18deg, transparent 18deg 45deg), radial-gradient(circle, transparent 38%, #000 40%); -webkit-mask-composite: source-in; mask: repeating-conic-gradient(#000 0 18deg, transparent 18deg 45deg) intersect, radial-gradient(circle, transparent 38%, #000 40%); animation: clay-spin 0.9s steps(8) infinite; }
@keyframes clay-spin { to { transform: rotate(360deg); } }
.clay-skeleton { border-radius: var(--clay-radius-sm); background: linear-gradient(90deg, var(--clay-surface-2) 25%, var(--clay-surface-3) 50%, var(--clay-surface-2) 75%); background-size: 200% 100%; animation: clay-shimmer 1.4s ease-in-out infinite; min-height: 12px; }
@keyframes clay-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Tooltip — any element with data-clay-tooltip="text" */
[data-clay-tooltip] { position: relative; }
[data-clay-tooltip]::after {
  content: attr(data-clay-tooltip); position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 50; pointer-events: none;
  padding: 6px 10px; border-radius: var(--clay-radius-sm); background: var(--clay-text); color: var(--clay-bg);
  font-size: 12px; font-weight: 500; line-height: 1.3; white-space: nowrap; letter-spacing: 0; text-transform: none;
  opacity: 0; transform: translate(-50%, 4px) scale(0.96); transition: opacity var(--clay-dur), transform var(--clay-dur) var(--clay-ease);
}
[data-clay-tooltip]:hover::after, [data-clay-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); transition-delay: 250ms; }

/* Toasts / snackbars — Clay.toast() */
.clay-toaster { position: fixed; z-index: 9999; inset: auto 16px 16px auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; max-width: calc(100vw - 32px); }
.clay-toaster[data-position="top"] { inset: 16px 50% auto auto; transform: translateX(50%); align-items: center; }
.clay-toaster[data-position="bottom"] { inset: auto 50% 16px auto; transform: translateX(50%); align-items: center; }
.clay-toast {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 420px; padding: 12px 14px 12px 16px;
  border-radius: var(--clay-radius); background: var(--clay-elevated); color: var(--clay-text); border: var(--clay-border-w) solid var(--clay-border);
  box-shadow: var(--clay-shadow-3); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-family: var(--clay-font);
  animation: clay-toast-in var(--clay-dur-slow) var(--clay-ease-spring);
}
.clay-toast.is-leaving { animation: clay-toast-out var(--clay-dur) var(--clay-ease) forwards; }
.clay-toast-icon { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; background: var(--clay-primary); }
.clay-toast-icon .clay-icon { width: 14px; height: 14px; stroke-width: 3; }
.clay-toast[data-type="success"] .clay-toast-icon { background: var(--clay-success); }
.clay-toast[data-type="warning"] .clay-toast-icon { background: var(--clay-warning); }
.clay-toast[data-type="danger"] .clay-toast-icon { background: var(--clay-danger); }
.clay-toast-title { font-weight: var(--clay-fw-strong); }
.clay-toast-msg { color: var(--clay-text-2); }
.clay-toast .clay-btn { margin-inline-start: auto; }
[data-clay-os="android"] .clay-toast { background: #322f35; color: #f5eff7; border: 0; border-radius: 4px; }
[data-clay-os="android"] .clay-toast-msg { color: #f5eff7; }
[data-clay-os="android"] .clay-toast .clay-btn { --_fg: #d0bcff; }
[data-clay-os="ios"] .clay-toast { border-radius: 999px; background: color-mix(in oklab, var(--clay-elevated) 82%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }
@keyframes clay-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
@keyframes clay-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.96); } }
@keyframes clay-fade-up { from { opacity: 0; transform: translateY(6px); } }

/* ==========================================================================
   14. Overlays — dialog, sheet, drawer, menu, popover
   ========================================================================== */
.clay-dialog {
  border: 0; padding: 0; margin: auto; width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
  border-radius: var(--clay-dialog-radius); background: var(--clay-elevated); color: var(--clay-text); box-shadow: var(--clay-shadow-4);
  font-family: var(--clay-font); text-align: var(--clay-dialog-align); overflow: auto;
}
.clay-dialog::backdrop { background: var(--clay-overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.clay-dialog[open] { animation: clay-dialog-in var(--clay-dur-slow) var(--clay-ease-spring); }
.clay-dialog[open]::backdrop { animation: clay-fade var(--clay-dur-slow) var(--clay-ease); }
.clay-dialog.is-closing { animation: clay-dialog-out var(--clay-dur) var(--clay-ease) forwards; }
.clay-dialog.is-closing::backdrop { animation: clay-fade var(--clay-dur) var(--clay-ease) reverse forwards; }
.clay-dialog-body { padding: calc(var(--clay-unit) * 6); display: flex; flex-direction: column; gap: 8px; }
.clay-dialog-title { font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-h3) * var(--clay-font-scale)); font-weight: var(--clay-fw-heading); line-height: 1.25; }
.clay-dialog-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--clay-primary-soft); color: var(--clay-primary-ink); margin-bottom: 6px; }
[data-clay-dialog-align="center"] .clay-dialog-icon, .clay-dialog[style*="center"] .clay-dialog-icon { margin-inline: auto; }
.clay-dialog-actions { display: flex; gap: 8px; justify-content: var(--clay-dialog-actions); padding: calc(var(--clay-unit) * 4) calc(var(--clay-unit) * 6) calc(var(--clay-unit) * 6); background: var(--clay-dialog-footer-bg); }
.clay-dialog-actions > .clay-btn { flex: 0 0 auto; }
[data-clay-os="ios"] .clay-dialog, [data-clay-os="macos"] .clay-dialog, [data-clay-os="linux"] .clay-dialog { width: min(300px, calc(100vw - 32px)); }
[data-clay-os="ios"] .clay-dialog-icon, [data-clay-os="macos"] .clay-dialog-icon, [data-clay-os="linux"] .clay-dialog-icon { margin-inline: auto; }
[data-clay-os="ios"] .clay-dialog-body { padding: 20px 16px 16px; gap: 2px; }
[data-clay-os="ios"] .clay-dialog-title { font-size: 17px; font-weight: 600; }
[data-clay-os="ios"] .clay-dialog-body p { font-size: 13px; }
[data-clay-os="ios"] .clay-dialog-actions { padding: 0; gap: 0; border-top: 0.5px solid var(--clay-border-strong); }
[data-clay-os="ios"] .clay-dialog-actions > .clay-btn { flex: 1; border-radius: 0; --_bg: transparent; --_fg: var(--clay-primary); box-shadow: none; font-weight: 400; min-height: 44px; }
[data-clay-os="ios"] .clay-dialog-actions > .clay-btn + .clay-btn { border-inline-start: 0.5px solid var(--clay-border-strong); font-weight: 600; }
[data-clay-os="ios"] .clay-dialog-actions > .clay-btn--danger { --_fg: var(--clay-danger); }
[data-clay-os="ios"] .clay-dialog { background: color-mix(in oklab, var(--clay-elevated) 88%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }
[data-clay-os="android"] .clay-dialog-actions > .clay-btn { --_bg: transparent; --_fg: var(--clay-primary-ink); padding: 0 12px; }
[data-clay-os="android"] .clay-dialog-body { padding: 24px 24px 12px; gap: 16px; }
[data-clay-os="windows"] .clay-dialog-actions > .clay-btn, [data-clay-os="linux"] .clay-dialog-actions > .clay-btn, [data-clay-os="macos"] .clay-dialog-actions > .clay-btn { flex: 1; }
[data-clay-os="windows"] .clay-dialog { width: min(480px, calc(100vw - 32px)); border: 1px solid var(--clay-border); }
@keyframes clay-dialog-in { from { opacity: 0; transform: translateY(12px) scale(0.95); } }
@keyframes clay-dialog-out { to { opacity: 0; transform: translateY(6px) scale(0.97); } }
@keyframes clay-fade { from { opacity: 0; } }

/* Bottom sheet & action sheet */
.clay-sheet { margin: auto auto 0; width: min(560px, 100vw); max-width: 100vw; border-radius: var(--clay-radius-xl) var(--clay-radius-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.clay-sheet[open] { animation: clay-sheet-in var(--clay-dur-slow) var(--clay-ease); }
.clay-sheet.is-closing { animation: clay-sheet-out var(--clay-dur) var(--clay-ease) forwards; }
.clay-sheet-handle { width: 36px; height: 5px; border-radius: 5px; background: var(--clay-surface-3); margin: 8px auto 0; }
@keyframes clay-sheet-in { from { transform: translateY(100%); } }
@keyframes clay-sheet-out { to { transform: translateY(100%); } }

/* Side drawer */
.clay-drawer { margin: 0 0 0 auto; height: 100dvh; max-height: 100dvh; width: min(380px, 90vw); border-radius: var(--clay-radius-xl) 0 0 var(--clay-radius-xl); }
.clay-drawer--start { margin: 0 auto 0 0; border-radius: 0 var(--clay-radius-xl) var(--clay-radius-xl) 0; }
.clay-drawer[open] { animation: clay-drawer-in var(--clay-dur-slow) var(--clay-ease); }
.clay-drawer.is-closing { animation: clay-drawer-out var(--clay-dur) var(--clay-ease) forwards; }
.clay-drawer--start[open] { animation-name: clay-drawer-in-start; }
@keyframes clay-drawer-in { from { transform: translateX(100%); } }
@keyframes clay-drawer-out { to { transform: translateX(100%); } }
@keyframes clay-drawer-in-start { from { transform: translateX(-100%); } }

/* Menu / dropdown — .clay-menu inside .clay-dropdown, toggled by [data-clay-menu] */
.clay-dropdown { position: relative; display: inline-block; }
.clay-menu {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 200px; padding: 6px; margin: 0; list-style: none;
  background: var(--clay-elevated); color: var(--clay-text); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius);
  box-shadow: var(--clay-shadow-3); transform-origin: top left;
  opacity: 0; visibility: hidden; transform: translateY(-4px) scale(0.97);
  transition: opacity var(--clay-dur) var(--clay-ease), transform var(--clay-dur) var(--clay-ease), visibility 0s linear var(--clay-dur);
}
.clay-menu--end { left: auto; right: 0; transform-origin: top right; }
.clay-dropdown.is-open > .clay-menu, .clay-menu.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.clay-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: calc(var(--clay-radius) - 4px); color: var(--clay-text); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); text-align: start; cursor: pointer; text-decoration: none; }
.clay-menu-item:hover, .clay-menu-item:focus-visible { background: var(--clay-surface-2); outline: none; box-shadow: none; }
[data-clay-os="macos"] .clay-menu-item:hover { background: var(--clay-primary); color: #fff; }
.clay-menu-item .clay-icon { width: 16px; height: 16px; color: var(--clay-text-2); }
.clay-menu-item .clay-kbd { margin-inline-start: auto; }
.clay-menu-item--danger { color: var(--clay-danger); }
.clay-menu-item--danger .clay-icon { color: currentColor; }
.clay-menu-sep { height: 1px; background: var(--clay-border); margin: 6px -6px; }
.clay-menu-label { padding: 6px 10px 4px; font-size: 11px; font-weight: var(--clay-fw-strong); color: var(--clay-text-3); text-transform: uppercase; letter-spacing: 0.05em; }

/* Popover */
.clay-popover { padding: 16px; border-radius: var(--clay-radius-lg); background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); box-shadow: var(--clay-shadow-3); max-width: 320px; color: var(--clay-text); }

/* Accordion — <details class="clay-accordion"> */
.clay-accordion { border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-accordion > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; cursor: pointer; font-weight: var(--clay-fw-medium); }
.clay-accordion > summary::-webkit-details-marker { display: none; }
.clay-accordion > summary::after { content: ""; width: 10px; height: 10px; flex: none; border-right: 2px solid var(--clay-text-3); border-bottom: 2px solid var(--clay-text-3); transform: translateY(-3px) rotate(45deg); transition: transform var(--clay-dur-slow) var(--clay-ease); }
.clay-accordion[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.clay-accordion > :not(summary) { padding-bottom: 16px; color: var(--clay-text-2); animation: clay-fade-up var(--clay-dur-slow) var(--clay-ease); }
.clay-accordion-group { border-top: var(--clay-border-w) solid var(--clay-border); }

/* ==========================================================================
   15. Data display — table, timeline, calendar
   ========================================================================== */
.clay-table-wrap { overflow-x: auto; border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); background: var(--clay-surface); }
.clay-table { width: 100%; border-collapse: collapse; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-table th { text-align: start; font-weight: var(--clay-fw-strong); color: var(--clay-text-2); font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); text-transform: uppercase; letter-spacing: 0.05em; background: var(--clay-surface-2); }
.clay-table th, .clay-table td { padding: calc(var(--clay-unit) * 3) calc(var(--clay-unit) * 4); border-bottom: var(--clay-border-w) solid var(--clay-border); white-space: nowrap; }
.clay-table tbody tr { transition: background-color var(--clay-dur); }
.clay-table tbody tr:hover { background: color-mix(in oklab, var(--clay-primary) 4%, transparent); }
.clay-table tbody tr:last-child td { border-bottom: 0; }
.clay-table .is-num { text-align: end; font-variant-numeric: tabular-nums; }

.clay-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.clay-timeline > li { position: relative; padding: 0 0 20px 28px; }
.clay-timeline > li::before { content: ""; position: absolute; left: 5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--clay-surface); border: 3px solid var(--clay-primary); box-sizing: border-box; }
.clay-timeline > li::after { content: ""; position: absolute; left: 10px; top: 20px; bottom: 0; width: 2px; background: var(--clay-border); }
.clay-timeline > li:last-child::after { display: none; }

.clay-calendar { display: inline-flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--clay-surface); border-radius: var(--clay-radius-lg); border: var(--clay-border-w) solid var(--clay-border); }
.clay-calendar-head { display: flex; align-items: center; justify-content: space-between; font-weight: var(--clay-fw-strong); padding: 0 4px; }
.clay-calendar-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: 2px; text-align: center; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-calendar-grid > span { height: 24px; font-size: 11px; color: var(--clay-text-3); display: grid; place-items: center; font-weight: var(--clay-fw-strong); }
.clay-calendar-grid > button { height: 36px; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--clay-text); font-variant-numeric: tabular-nums; transition: background-color var(--clay-dur); }
[data-clay-os="windows"] .clay-calendar-grid > button, [data-clay-os="linux"] .clay-calendar-grid > button { border-radius: var(--clay-radius); }
.clay-calendar-grid > button:hover { background: var(--clay-surface-2); }
.clay-calendar-grid > button.is-muted { color: var(--clay-text-3); }
.clay-calendar-grid > button.is-today { color: var(--clay-primary-ink); font-weight: 700; }
.clay-calendar-grid > button[aria-pressed="true"] { background: var(--clay-primary); color: var(--clay-on-primary); font-weight: 600; }

/* ==========================================================================
   16. Platform chrome — status bar, window title bars, device frames
   ========================================================================== */
.clay-statusbar { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 26px 0 30px; font-size: 15px; font-weight: 600; color: var(--clay-text); font-family: var(--clay-font); }
.clay-statusbar-icons { display: inline-flex; gap: 5px; align-items: center; }
.clay-statusbar--android { height: 32px; padding: 0 20px; font-size: 13px; font-weight: 500; }

.clay-window { border-radius: var(--clay-radius-xl); overflow: hidden; background: var(--clay-bg); box-shadow: var(--clay-shadow-4), 0 0 0 0.5px var(--clay-border-strong); display: flex; flex-direction: column; color: var(--clay-text); font-family: var(--clay-font); }
.clay-titlebar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; background: var(--clay-surface-2); border-bottom: var(--clay-border-w) solid var(--clay-border); font-size: 13px; font-weight: 600; color: var(--clay-text-2); user-select: none; position: relative; }
.clay-titlebar-title { flex: 1; text-align: center; }
.clay-traffic { display: inline-flex; gap: 8px; }
.clay-traffic i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.12); }
.clay-traffic i:nth-child(2) { background: #febc2e; } .clay-traffic i:nth-child(3) { background: #28c840; }
.clay-caption-btns { display: inline-flex; margin: 0 -12px 0 auto; height: 100%; }
.clay-caption-btns i { width: 46px; height: 100%; display: grid; place-items: center; position: relative; }
.clay-caption-btns i::before { content: ""; width: 10px; height: 1px; background: var(--clay-text); }
.clay-caption-btns i:nth-child(2)::before { height: 10px; background: none; border: 1px solid var(--clay-text); border-radius: 2px; }
.clay-caption-btns i:nth-child(3)::before { width: 12px; height: 1px; transform: rotate(45deg); box-shadow: none; }
.clay-caption-btns i:nth-child(3)::after { content: ""; position: absolute; width: 12px; height: 1px; background: var(--clay-text); transform: rotate(-45deg); }
.clay-caption-btns i:hover { background: var(--clay-surface-3); }
.clay-caption-btns i:nth-child(3):hover { background: #c42b1c; }
.clay-gnome-btns { display: inline-flex; gap: 10px; margin-inline-start: auto; }
.clay-gnome-btns i { width: 22px; height: 22px; border-radius: 50%; background: var(--clay-surface-3); display: grid; place-items: center; }
.clay-gnome-btns i::before, .clay-gnome-btns i::after { content: ""; position: absolute; width: 9px; height: 1.5px; background: var(--clay-text); transform: rotate(45deg); }
.clay-gnome-btns i::after { transform: rotate(-45deg); }

.clay-device { position: relative; width: 300px; aspect-ratio: 9 / 19.5; border-radius: 48px; padding: 10px; background: linear-gradient(145deg, #2a2a33, #0c0c10); box-shadow: 0 0 0 1.5px #3c3c46, 0 40px 80px -30px rgb(0 0 0 / 0.7), inset 0 0 0 1px rgb(255 255 255 / 0.06); flex: none; }
.clay-device-screen { position: relative; width: 100%; height: 100%; border-radius: 39px; overflow: hidden; background: var(--clay-bg); display: flex; flex-direction: column; isolation: isolate; }
.clay-device-island { position: absolute; z-index: 5; top: 11px; left: 50%; width: 92px; height: 27px; transform: translateX(-50%); border-radius: 20px; background: #000; }
.clay-device--android { border-radius: 40px; }
.clay-device--android .clay-device-screen { border-radius: 31px; }
.clay-device--android .clay-device-island { width: 12px; height: 12px; top: 12px; border-radius: 50%; }
.clay-device--tablet { width: 560px; aspect-ratio: 4 / 3; border-radius: 34px; padding: 14px; }
.clay-device--tablet .clay-device-screen { border-radius: 22px; }
.clay-device--watch { width: 184px; aspect-ratio: 41 / 49; border-radius: 52px; padding: 12px; }
.clay-device--watch .clay-device-screen { border-radius: 40px; background: #000; color: #fff; }
.clay-home-indicator { width: 120px; height: 5px; border-radius: 5px; margin: 8px auto 8px; background: var(--clay-text); opacity: 0.85; flex: none; }

/* ==========================================================================
   18. Extended inputs
   ========================================================================== */
/* Material filled text field */
.clay-input--filled { background: var(--clay-surface-3); border: 0; border-bottom: 1px solid var(--clay-text-2); border-radius: var(--clay-radius-xs) var(--clay-radius-xs) 0 0; }
.clay-input--filled:focus, .clay-input--filled:focus-visible { box-shadow: inset 0 -2px 0 var(--clay-primary); border-bottom-color: var(--clay-primary); }

/* Floating label — <div class="clay-float"><input class="clay-input" placeholder=" "><label>Email</label></div> */
.clay-float { position: relative; }
.clay-float > .clay-input, .clay-float > .clay-select, .clay-float > .clay-textarea { min-height: calc(var(--clay-control-h) + 16px); padding-top: 18px; }
.clay-float > label { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--clay-text-3); pointer-events: none; transform-origin: left top; transition: top var(--clay-dur) var(--clay-ease), transform var(--clay-dur) var(--clay-ease), color var(--clay-dur), background-color var(--clay-dur); font-size: calc(var(--clay-fs-body) * var(--clay-font-scale) * 0.94); padding: 0 4px; margin-left: -4px; }
.clay-float > .clay-input:focus + label, .clay-float > .clay-input:not(:placeholder-shown) + label { top: 9px; transform: translateY(0) scale(0.78); color: var(--clay-primary-ink); }
.clay-float--outlined > .clay-input { padding-top: 0; }
.clay-float--outlined > .clay-input:focus + label, .clay-float--outlined > .clay-input:not(:placeholder-shown) + label { top: -8px; background: var(--clay-surface); }

/* Input with inline action (password reveal, clear) */
.clay-input-action { position: absolute; inset-inline-end: 4px; top: 50%; transform: translateY(-50%); border: 0; background: none; width: calc(var(--clay-control-h) - 8px); height: calc(var(--clay-control-h) - 8px); border-radius: var(--clay-radius-sm); color: var(--clay-text-3); cursor: pointer; display: grid; place-items: center; }
.clay-input-action:hover { color: var(--clay-text); background: var(--clay-surface-2); }
.clay-input-group > .clay-input-action ~ .clay-input, .clay-input-group > .clay-input:has(~ .clay-input-action) { padding-inline-end: 44px; }

/* Addons — <div class="clay-addon"><span>https://</span><input class="clay-input"><span>.com</span></div> */
.clay-addon { display: flex; align-items: stretch; }
.clay-addon > span { display: inline-flex; align-items: center; padding: 0 12px; background: var(--clay-surface-2); border: var(--clay-border-w) solid var(--clay-input-border); color: var(--clay-text-2); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); white-space: nowrap; }
.clay-addon > span:first-child { border-radius: var(--clay-input-radius) 0 0 var(--clay-input-radius); border-inline-end: 0; }
.clay-addon > span:last-child { border-radius: 0 var(--clay-input-radius) var(--clay-input-radius) 0; border-inline-start: 0; }
.clay-addon > .clay-input { border-radius: 0; }
.clay-addon > .clay-input:first-child { border-radius: var(--clay-input-radius) 0 0 var(--clay-input-radius); }
.clay-addon > .clay-input:last-child { border-radius: 0 var(--clay-input-radius) var(--clay-input-radius) 0; }

/* Character counter */
.clay-counter { align-self: flex-end; font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); color: var(--clay-text-3); font-variant-numeric: tabular-nums; }

/* Combobox / autocomplete — .clay-combobox > input.clay-input + ul.clay-listbox > li.clay-option */
.clay-combobox { position: relative; }
.clay-listbox { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 240px; overflow: auto; background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); box-shadow: var(--clay-shadow-3); display: none; }
.clay-combobox.is-open .clay-listbox, .clay-listbox--static { display: block; }
.clay-listbox--static { position: static; box-shadow: var(--clay-shadow-1); }
.clay-option { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: calc(var(--clay-radius) - 4px); cursor: pointer; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text); }
.clay-option:hover, .clay-option.is-active { background: var(--clay-surface-2); }
.clay-option[aria-selected="true"] { color: var(--clay-primary-ink); font-weight: var(--clay-fw-strong); }
.clay-option[aria-selected="true"]::after { content: "✓"; margin-inline-start: auto; }
.clay-option .clay-caption { margin-inline-start: auto; }
.clay-option[hidden] { display: none; }

/* Tags input / token field / multi-select */
.clay-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: var(--clay-control-h); padding: 4px 8px; border: var(--clay-border-w) solid var(--clay-input-border); border-radius: var(--clay-input-radius); background: var(--clay-input-bg); cursor: text; transition: box-shadow var(--clay-dur), border-color var(--clay-dur); }
.clay-tags:focus-within { border-color: var(--clay-input-focus-border); box-shadow: var(--clay-input-focus); }
.clay-tags .clay-chip { height: 26px; padding: 0 8px; font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale) * 1.05); }
.clay-tags input { flex: 1; min-width: 80px; border: 0; background: none; outline: none; height: 28px; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-tags input:focus-visible { box-shadow: none; }
[data-clay-os="macos"] .clay-tags .clay-chip { border-radius: 4px; background: var(--clay-primary-soft); border-color: transparent; color: var(--clay-primary-ink); height: 20px; }

/* Number box (Fluent) / spin button (GNOME) */
.clay-numberbox { position: relative; display: flex; align-items: center; }
.clay-numberbox .clay-input { padding-inline-end: 64px; font-variant-numeric: tabular-nums; }
.clay-numberbox-btns { position: absolute; inset-inline-end: 4px; display: flex; gap: 2px; }
.clay-numberbox-btns button { width: 28px; height: calc(var(--clay-control-h) - 10px); border: 0; border-radius: var(--clay-radius-sm); background: transparent; color: var(--clay-text-2); cursor: pointer; display: grid; place-items: center; }
.clay-numberbox-btns button:hover { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-numberbox-btns .clay-icon { width: 14px; height: 14px; }

/* iOS stepper (− | +) */
.clay-ios-stepper { display: inline-flex; background: rgb(118 118 128 / 0.12); border-radius: 9px; overflow: hidden; }
.clay-ios-stepper button { width: 47px; height: 32px; border: 0; background: none; font-size: 20px; color: var(--clay-text); cursor: pointer; }
.clay-ios-stepper button + button { border-inline-start: 1px solid var(--clay-border-strong); }
.clay-ios-stepper button:active { background: rgb(118 118 128 / 0.2); }

/* macOS stepper (stacked arrows) */
.clay-mac-stepper { display: inline-flex; align-items: center; gap: 4px; }
.clay-mac-stepper .clay-input { width: 70px; text-align: end; font-variant-numeric: tabular-nums; }
.clay-mac-stepper-btns { display: inline-flex; flex-direction: column; width: 15px; height: 22px; border-radius: 5px; overflow: hidden; background: var(--clay-surface); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), 0 1px 1px rgb(0 0 0 / 0.1); }
.clay-mac-stepper-btns button { flex: 1; border: 0; background: none; padding: 0; cursor: pointer; font-size: 7px; color: var(--clay-text-2); line-height: 1; }
.clay-mac-stepper-btns button + button { border-top: 0.5px solid var(--clay-border-strong); }

/* macOS pop-up button */
.clay-popup { appearance: none; -webkit-appearance: none; min-height: 22px; padding: 2px 26px 2px 9px; border: 0; border-radius: 5px; background: var(--clay-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Crect width='16' height='16' rx='4' fill='%23007aff'/%3E%3Cpath d='m5 6.5 3-3 3 3M5 9.5l3 3 3-3' fill='none' stroke='white' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 3px center; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.18), 0 1px 1.5px rgb(0 0 0 / 0.12); font-size: 13px; color: var(--clay-text); cursor: pointer; }

/* Colour picker */
.clay-color-picker { display: inline-flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--clay-surface); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow-2); }
.clay-color-area { width: 220px; height: 140px; border-radius: var(--clay-radius-sm); background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--clay-primary)); position: relative; }
.clay-color-area::after { content: ""; position: absolute; left: 70%; top: 30%; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.3); transform: translate(-50%, -50%); }
.clay-hue { height: 12px; border-radius: 6px; background: linear-gradient(90deg, red, #ff0, lime, cyan, blue, #f0f, red); }
.clay-swatch-row { display: flex; gap: 6px; flex-wrap: wrap; }
.clay-swatch-row button { width: 24px; height: 24px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12); }
.clay-swatch-row button[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--clay-surface), 0 0 0 4px var(--clay-primary); }
.clay-color-well { width: 44px; height: 24px; border-radius: 6px; padding: 3px; background: var(--clay-surface); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.25), 0 1px 1px rgb(0 0 0 / 0.12); display: inline-block; }
.clay-color-well i { display: block; height: 100%; border-radius: 3px; background: var(--clay-primary); }

/* Dual range */
.clay-range-dual { position: relative; height: var(--clay-range-thumb); }
.clay-range-dual > .clay-range { position: absolute; inset: 0; pointer-events: none; }
.clay-range-dual > .clay-range::-webkit-slider-thumb { pointer-events: auto; position: relative; z-index: 2; }
.clay-range-dual > .clay-range::-moz-range-thumb { pointer-events: auto; }
.clay-range-dual > .clay-range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--clay-surface-3) var(--clay-lo, 20%), var(--clay-primary) var(--clay-lo, 20%), var(--clay-primary) var(--clay-hi, 80%), var(--clay-surface-3) var(--clay-hi, 80%)); }
.clay-range-dual > .clay-range + .clay-range::-webkit-slider-runnable-track { background: transparent; }
.clay-ticks { display: flex; justify-content: space-between; padding: 0 calc(var(--clay-range-thumb) / 2 - 1px); margin-top: -4px; }
.clay-ticks i { width: 2px; height: 6px; border-radius: 1px; background: var(--clay-border-strong); }
.clay-ticks--labels i { width: auto; height: auto; background: none; font-style: normal; font-size: 11px; color: var(--clay-text-3); }

/* iOS picker wheel */
.clay-wheel { position: relative; display: flex; justify-content: center; gap: 4px; height: 200px; overflow: hidden; font-size: 21px; font-variant-numeric: tabular-nums; -webkit-mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); mask: linear-gradient(transparent, #000 35%, #000 65%, transparent); }
.clay-wheel::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 34px; transform: translateY(-50%); border-radius: 8px; background: rgb(118 118 128 / 0.12); pointer-events: none; }
.clay-wheel-col { position: relative; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 83px 0; min-width: 64px; text-align: center; }
.clay-wheel-col::-webkit-scrollbar { display: none; }
.clay-wheel-col > span { display: block; height: 34px; line-height: 34px; scroll-snap-align: center; color: var(--clay-text); }

/* Material time picker dial */
.clay-clock { position: relative; width: 256px; height: 256px; border-radius: 50%; background: var(--clay-surface-3); }
.clay-clock > span { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--clay-text); transform: rotate(calc(var(--i) * 30deg)) translateY(-100px) rotate(calc(var(--i) * -30deg)); }
.clay-clock > span.is-selected { background: var(--clay-primary); color: var(--clay-on-primary); }
.clay-clock::before { content: ""; position: absolute; left: 50%; top: 50%; width: 2px; height: 80px; background: var(--clay-primary); transform-origin: top center; transform: rotate(calc(180deg + var(--clay-hand, 300deg))); }
.clay-clock::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; border-radius: 50%; background: var(--clay-primary); }
.clay-time-display { display: flex; align-items: center; gap: 6px; }
.clay-time-display b { width: 96px; height: 80px; border-radius: var(--clay-radius-sm); display: grid; place-items: center; font-size: 52px; font-weight: 400; background: var(--clay-surface-3); }
.clay-time-display b.is-active { background: var(--clay-primary-soft); color: var(--clay-primary-ink); }

/* Fluent time picker (column flyout) */
.clay-colpicker { display: inline-flex; flex-direction: column; background: var(--clay-elevated); border: 1px solid var(--clay-border); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow-3); overflow: hidden; }
.clay-colpicker-cols { display: flex; height: 180px; }
.clay-colpicker-cols > div { display: flex; flex-direction: column; justify-content: center; width: 72px; text-align: center; gap: 4px; }
.clay-colpicker-cols > div + div { border-inline-start: 1px solid var(--clay-border); }
.clay-colpicker-cols span { padding: 6px 0; color: var(--clay-text-3); }
.clay-colpicker-cols span.is-selected { background: var(--clay-primary); color: var(--clay-on-primary); margin: 0 4px; border-radius: 4px; }
.clay-colpicker-foot { display: flex; border-top: 1px solid var(--clay-border); }
.clay-colpicker-foot button { flex: 1; height: 40px; border: 0; background: none; cursor: pointer; color: var(--clay-text); }
.clay-colpicker-foot button + button { border-inline-start: 1px solid var(--clay-border); }

/* Transfer list */
.clay-transfer { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.clay-transfer-list { flex: 1; min-width: 180px; border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); background: var(--clay-surface); overflow: hidden; }
.clay-transfer-list header { padding: 10px 12px; border-bottom: var(--clay-border-w) solid var(--clay-border); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); display: flex; justify-content: space-between; }
.clay-transfer-list ul { list-style: none; margin: 0; padding: 6px; min-height: 160px; }
.clay-transfer-list li { padding: 4px 6px; border-radius: var(--clay-radius-sm); }
.clay-transfer-list li:hover { background: var(--clay-surface-2); }
.clay-transfer-btns { display: flex; flex-direction: column; gap: 8px; }

/* Cascader */
.clay-cascader { display: inline-flex; background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); box-shadow: var(--clay-shadow-2); overflow: hidden; }
.clay-cascader ul { list-style: none; margin: 0; padding: 4px; min-width: 140px; }
.clay-cascader ul + ul { border-inline-start: var(--clay-border-w) solid var(--clay-border); }
.clay-cascader li { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-radius: calc(var(--clay-radius) - 4px); cursor: pointer; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-cascader li:hover { background: var(--clay-surface-2); }
.clay-cascader li[aria-selected="true"] { background: var(--clay-primary-soft); color: var(--clay-primary-ink); font-weight: var(--clay-fw-strong); }
.clay-cascader li.has-children::after { content: "›"; opacity: 0.5; }

/* ==========================================================================
   19. Extended actions
   ========================================================================== */
.clay-split { display: inline-flex; }
.clay-split > .clay-btn:first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.clay-split > .clay-btn:last-child { border-start-start-radius: 0; border-end-start-radius: 0; padding: 0 10px; border-inline-start: 1px solid color-mix(in oklab, var(--clay-on-primary) 30%, transparent); }
.clay-split > .clay-btn--secondary:last-child { border-inline-start-color: var(--clay-border-strong); }

.clay-toggle-group { display: inline-flex; gap: 2px; padding: 3px; border-radius: calc(var(--clay-radius-sm) + 3px); background: var(--clay-surface-2); }
.clay-toggle-group > button, .clay-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: calc(var(--clay-control-h) - 6px); min-width: calc(var(--clay-control-h) - 6px); padding: 0 12px; border: 0; border-radius: var(--clay-radius-sm); background: transparent; color: var(--clay-text-2); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-medium); cursor: pointer; transition: background-color var(--clay-dur), color var(--clay-dur), box-shadow var(--clay-dur); }
.clay-toggle-group > button:hover, .clay-toggle:hover { color: var(--clay-text); }
.clay-toggle-group > button[aria-pressed="true"] { background: var(--clay-surface); color: var(--clay-text); box-shadow: var(--clay-shadow-1); }
.clay-toggle { border: var(--clay-border-w) solid var(--clay-border-strong); background: var(--clay-surface); min-height: var(--clay-control-h); }
.clay-toggle[aria-pressed="true"] { background: var(--clay-primary); color: var(--clay-on-primary); border-color: var(--clay-primary); }
[data-clay-os="linux"] .clay-toggle-group > button[aria-pressed="true"] { background: var(--clay-surface-3); box-shadow: none; }

.clay-fab--sm { min-width: 40px; height: 40px; padding: 0 8px; border-radius: 12px; }
.clay-fab--lg { min-width: 96px; height: 96px; border-radius: 28px; }
.clay-fab--lg .clay-icon { width: 36px; height: 36px; }
.clay-fab--tertiary { background: color-mix(in oklab, var(--clay-secondary) 24%, var(--clay-surface)); color: var(--clay-text); }
.clay-btn--elevated { --_bg: var(--clay-surface); --_fg: var(--clay-primary-ink); --_sh: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15); }
.clay-btn--gray { --_bg: rgb(118 118 128 / 0.12); --_fg: var(--clay-primary-ink); --_sh: none; }
.clay-btn--capsule { border-radius: 999px; }
.clay-help-btn { width: 21px; height: 21px; border-radius: 50%; border: 0; background: var(--clay-surface); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), 0 1px 1px rgb(0 0 0 / 0.15); font-weight: 600; font-size: 13px; color: var(--clay-text-2); cursor: pointer; }
.clay-backtop { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--clay-elevated); color: var(--clay-text); box-shadow: var(--clay-shadow-3); cursor: pointer; display: grid; place-items: center; }

/* ==========================================================================
   20. Extended navigation
   ========================================================================== */
/* Mega menu */
.clay-mega { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; padding: 12px; background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow-3); }
.clay-mega a { display: flex; gap: 12px; padding: 12px; border-radius: var(--clay-radius); text-decoration: none; color: var(--clay-text); transition: background-color var(--clay-dur); }
.clay-mega a:hover { background: var(--clay-surface-2); }
.clay-mega a > span:first-child { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--clay-primary-soft); color: var(--clay-primary-ink); }
.clay-mega b { display: block; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-mega small { color: var(--clay-text-2); font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); line-height: 1.4; display: block; }

/* Command palette */
.clay-command { width: min(560px, calc(100vw - 32px)); padding: 0; text-align: left; }
.clay-command-search { display: flex; align-items: center; gap: 10px; padding: 0 16px; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-command-search input { flex: 1; height: 54px; border: 0; background: none; outline: none; font-size: 16px; }
.clay-command-search input:focus-visible { box-shadow: none; }
.clay-command-list { list-style: none; margin: 0; padding: 8px; max-height: 320px; overflow: auto; }
.clay-command-group { padding: 8px 10px 4px; font-size: 11px; font-weight: var(--clay-fw-strong); color: var(--clay-text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.clay-command-foot { display: flex; gap: 16px; padding: 10px 16px; border-top: var(--clay-border-w) solid var(--clay-border); font-size: 12px; color: var(--clay-text-3); }

/* Anchor / table of contents */
.clay-anchor { display: flex; flex-direction: column; border-inline-start: 2px solid var(--clay-border); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-anchor a { padding: 5px 14px; margin-inline-start: -2px; border-inline-start: 2px solid transparent; color: var(--clay-text-2); text-decoration: none; }
.clay-anchor a:hover { color: var(--clay-text); }
.clay-anchor a[aria-current] { color: var(--clay-primary-ink); border-color: var(--clay-primary); font-weight: var(--clay-fw-medium); }

/* Page control (dots) */
.clay-dots { display: inline-flex; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 999px; }
.clay-dots--glass { background: rgb(0 0 0 / 0.25); }
.clay-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--clay-text-3); opacity: 0.5; transition: all var(--clay-dur) var(--clay-ease); cursor: pointer; }
.clay-dots i.is-active { opacity: 1; background: var(--clay-text); }
[data-clay-os="android"] .clay-dots i.is-active, [data-clay-os="web"] .clay-dots i.is-active { width: 22px; border-radius: 4px; background: var(--clay-primary); }

/* Carousel */
.clay-carousel { position: relative; }
.clay-carousel-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; border-radius: var(--clay-radius-lg); }
.clay-carousel-track::-webkit-scrollbar { display: none; }
.clay-carousel-track > * { flex: 0 0 100%; scroll-snap-align: start; }
.clay-carousel--multi .clay-carousel-track > * { flex-basis: 70%; }
[data-clay-os="android"] .clay-carousel--multi .clay-carousel-track > * { border-radius: 28px; }
.clay-slide { aspect-ratio: 16 / 8; border-radius: var(--clay-radius-lg); display: flex; align-items: flex-end; padding: 18px; color: #fff; font-weight: var(--clay-fw-strong); font-size: 18px; background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary)); }
.clay-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgb(255 255 255 / 0.9); color: #111; box-shadow: var(--clay-shadow-2); cursor: pointer; display: grid; place-items: center; }
.clay-carousel-nav--prev { left: 10px; } .clay-carousel-nav--next { right: 10px; }
.clay-carousel .clay-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); }

/* iOS bottom toolbar */
.clay-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 16px; background: color-mix(in oklab, var(--clay-surface) 85%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); border-top: var(--clay-border-w) solid var(--clay-border); color: var(--clay-primary-ink); }
.clay-toolbar button { border: 0; background: none; color: inherit; cursor: pointer; padding: 6px; display: grid; place-items: center; }
.clay-toolbar .clay-icon { width: 22px; height: 22px; }

/* iOS search bar */
.clay-searchbar { display: flex; align-items: center; gap: 8px; }
.clay-searchbar .clay-input-group { flex: 1; }
.clay-searchbar .clay-input { min-height: 36px; border-radius: 10px; }
.clay-searchbar-cancel { border: 0; background: none; color: var(--clay-primary-ink); font-size: 17px; cursor: pointer; }
/* Material search bar */
.clay-searchbar--pill { height: 56px; padding: 0 6px 0 16px; border-radius: 28px; background: var(--clay-surface-3); gap: 12px; color: var(--clay-text-2); }
.clay-searchbar--pill input { flex: 1; border: 0; background: none; outline: none; height: 100%; font-size: 16px; color: var(--clay-text); }
.clay-searchbar--pill input:focus-visible { box-shadow: none; }

/* Material app bars */
.clay-appbar--medium, .clay-appbar--large { flex-wrap: wrap; align-content: flex-start; padding-bottom: 16px; }
.clay-appbar--medium .clay-appbar-title, .clay-appbar--large .clay-appbar-title { flex-basis: 100%; order: 10; padding: 0 4px; position: static !important; transform: none !important; max-width: none !important; text-align: start !important; }
.clay-appbar--medium .clay-appbar-title { font-size: 24px; margin-top: 8px; }
.clay-appbar--large .clay-appbar-title { font-size: 28px; margin-top: 28px; }
.clay-appbar--center .clay-appbar-title { text-align: center; }
.clay-bottom-appbar { display: flex; align-items: center; gap: 4px; height: 80px; padding: 0 16px 0 4px; background: var(--clay-surface-2); }
.clay-bottom-appbar .clay-fab { margin-inline-start: auto; box-shadow: none; }

/* Navigation rail */
.clay-navrail { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 80px; padding: 16px 0; background: var(--clay-surface); }
.clay-navrail .clay-fab { margin-bottom: 20px; box-shadow: none; }
.clay-navrail-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; color: var(--clay-text-2); cursor: pointer; border: 0; background: none; }
.clay-navrail-item .clay-icon { width: 56px; height: 32px; padding: 4px 16px; box-sizing: border-box; border-radius: 16px; transition: background-color var(--clay-dur); }
.clay-navrail-item.is-active { color: var(--clay-text); font-weight: 700; }
.clay-navrail-item.is-active .clay-icon { background: var(--clay-tabbar-ind, var(--clay-primary-soft)); }

/* Command bar (Fluent) / unified toolbar (macOS) */
.clay-commandbar { display: flex; align-items: center; gap: 2px; padding: 4px; background: var(--clay-surface); border: 1px solid var(--clay-border); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow-1); width: fit-content; max-width: 100%; overflow-x: auto; }
.clay-commandbar button { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border: 0; border-radius: 4px; background: none; color: var(--clay-text); cursor: pointer; font-size: 14px; white-space: nowrap; }
.clay-commandbar button:hover { background: var(--clay-surface-2); }
.clay-commandbar .clay-icon { width: 16px; height: 16px; color: var(--clay-primary); }
.clay-commandbar .clay-divider-v { margin: 6px 4px; }
.clay-mac-toolbar { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 12px 0 16px; background: var(--clay-surface-2); border-bottom: 1px solid var(--clay-border); }
.clay-mac-toolbar .clay-toolbar-title { font-weight: 700; font-size: 15px; margin-inline-end: auto; }
.clay-mac-toolbar .clay-tool { width: 30px; height: 24px; border-radius: 5px; border: 0; background: none; color: var(--clay-text-2); display: grid; place-items: center; cursor: pointer; }
.clay-mac-toolbar .clay-tool:hover { background: rgb(0 0 0 / 0.06); }
.clay-mac-toolbar .clay-tool .clay-icon { width: 17px; height: 17px; }

/* Menu bar (macOS / Windows / Linux) */
.clay-menubar { display: flex; align-items: center; gap: 2px; height: 26px; padding: 0 8px; font-size: 13px; background: color-mix(in oklab, var(--clay-surface) 80%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); color: var(--clay-text); }
.clay-menubar > span { padding: 2px 9px; border-radius: 4px; cursor: default; }
.clay-menubar > span:hover, .clay-menubar > span.is-open { background: rgb(0 0 0 / 0.08); }
.clay-menubar > b { padding: 0 10px; }
.clay-menubar .clay-menubar-end { margin-inline-start: auto; display: inline-flex; gap: 14px; align-items: center; }
[data-clay-os="windows"] .clay-menubar { height: 40px; background: transparent; font-size: 14px; }
[data-clay-os="windows"] .clay-menubar > span { padding: 6px 10px; }

/* Tab view (browser-style tabs: Fluent TabView, Adwaita TabBar) */
.clay-tabview { display: flex; align-items: flex-end; gap: 2px; padding: 8px 8px 0; background: var(--clay-bg); overflow-x: auto; }
.clay-tabview-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; min-width: 140px; max-width: 220px; padding: 0 8px 0 12px; border-radius: 8px 8px 0 0; background: transparent; color: var(--clay-text-2); font-size: 12.5px; cursor: pointer; border: 0; }
.clay-tabview-tab:hover { background: var(--clay-surface-2); }
.clay-tabview-tab.is-active { background: var(--clay-surface); color: var(--clay-text); box-shadow: 0 -1px 0 var(--clay-border) inset, 0 0 0 1px var(--clay-border); }
.clay-tabview-tab .clay-chip-x { margin-inline-start: auto; }
[data-clay-os="linux"] .clay-tabview { padding: 6px; gap: 6px; background: var(--clay-surface-2); align-items: center; }
[data-clay-os="linux"] .clay-tabview-tab { border-radius: 8px; justify-content: center; flex: 1; }
[data-clay-os="linux"] .clay-tabview-tab.is-active { box-shadow: none; background: var(--clay-surface-3); }

/* GNOME view switcher */
.clay-viewswitcher { display: inline-flex; gap: 4px; }
.clay-viewswitcher button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; padding: 4px 12px; border: 0; border-radius: 6px; background: none; color: var(--clay-text); font-size: 12px; font-weight: 700; cursor: pointer; }
.clay-viewswitcher button:hover { background: rgb(0 0 6 / 0.05); }
.clay-viewswitcher button[aria-pressed="true"] { background: rgb(0 0 6 / 0.1); }
.clay-viewswitcher .clay-icon { width: 16px; height: 16px; }

/* ==========================================================================
   21. Extended feedback & overlays
   ========================================================================== */
.clay-banner { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 10px 16px; background: var(--clay-primary-soft); color: var(--clay-text); text-align: center; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-banner--dark { background: var(--clay-text); color: var(--clay-bg); }
.clay-alert-close { margin-inline-start: auto; border: 0; background: none; color: var(--clay-text-2); cursor: pointer; padding: 2px; display: grid; place-items: center; border-radius: 6px; }
.clay-alert-close:hover { background: var(--clay-surface-2); color: var(--clay-text); }
[data-clay-os="windows"] .clay-alert { border-radius: 4px; background: color-mix(in oklab, var(--_c) 9%, var(--clay-surface)); border-color: color-mix(in oklab, var(--_c) 20%, transparent); align-items: center; }

.clay-levelbar { display: flex; gap: 2px; height: 8px; }
.clay-levelbar i { flex: 1; border-radius: 2px; background: var(--clay-surface-3); }
.clay-levelbar i.is-on { background: var(--clay-success); }
.clay-levelbar.is-low i.is-on { background: var(--clay-danger); }
.clay-levelbar.is-mid i.is-on { background: var(--clay-warning); }

.clay-result { display: grid; place-items: center; text-align: center; gap: 12px; padding: calc(var(--clay-unit) * 10) calc(var(--clay-unit) * 6); }
.clay-result-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--clay-success-soft); color: var(--clay-success); }
.clay-result-icon .clay-icon { width: 36px; height: 36px; }
.clay-result--error .clay-result-icon { background: var(--clay-danger-soft); color: var(--clay-danger); }
.clay-result-code { font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-display) * var(--clay-font-scale) * 1.6); font-weight: 800; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Popover with arrow / teaching tip / tour */
.clay-popover--arrow { position: relative; }
.clay-popover--arrow::before { content: ""; position: absolute; top: -7px; left: 24px; width: 12px; height: 12px; background: inherit; border-left: var(--clay-border-w) solid var(--clay-border); border-top: var(--clay-border-w) solid var(--clay-border); transform: rotate(45deg); }
.clay-tour { position: relative; max-width: 300px; padding: 16px; border-radius: var(--clay-radius-lg); background: var(--clay-primary); color: var(--clay-on-primary); box-shadow: var(--clay-shadow-3); display: flex; flex-direction: column; gap: 8px; }
.clay-tour::before { content: ""; position: absolute; top: -6px; left: 28px; width: 12px; height: 12px; background: inherit; transform: rotate(45deg); }
.clay-tour .clay-btn { --_bg: var(--clay-on-primary); --_fg: var(--clay-primary); }
.clay-tour .clay-btn--ghost { --_bg: transparent; --_fg: var(--clay-on-primary); }
.clay-tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; font-size: 12px; opacity: 0.85; }
.clay-teaching-tip { position: relative; width: 320px; max-width: 100%; border-radius: 8px; background: var(--clay-elevated); border: 1px solid var(--clay-border); box-shadow: var(--clay-shadow-3); overflow: hidden; }
.clay-teaching-tip-hero { height: 120px; background: linear-gradient(135deg, var(--clay-primary), var(--clay-info)); }
.clay-teaching-tip-body { padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.clay-rich-tip { max-width: 312px; padding: 12px 16px 8px; border-radius: 12px; background: var(--clay-surface-2); box-shadow: var(--clay-shadow-2); color: var(--clay-text-2); font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.clay-rich-tip b { color: var(--clay-text); font-weight: 500; }
.clay-tip { display: inline-block; padding: 6px 10px; border-radius: var(--clay-radius-sm); background: var(--clay-text); color: var(--clay-bg); font-size: 12px; }
[data-clay-os="android"] .clay-tip { border-radius: 4px; background: #322f35; color: #f5eff7; }
[data-clay-os="macos"] .clay-tip { border-radius: 4px; background: var(--clay-surface); color: var(--clay-text); box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.2), var(--clay-shadow-2); font-size: 11px; }
[data-clay-os="windows"] .clay-tip { background: var(--clay-elevated); color: var(--clay-text); border: 1px solid var(--clay-border); box-shadow: var(--clay-shadow-2); border-radius: 4px; }

/* Static (inline) versions of overlays for documentation & mockups */
.clay-dialog.is-static, .clay-menu--static { position: static; opacity: 1; visibility: visible; transform: none; animation: none; }
.clay-menu--static { display: block; }
.clay-dialog.is-static { margin: 0; }
.clay-sheet.is-static { width: 100%; border-radius: var(--clay-radius-xl) var(--clay-radius-xl) 0 0; }
[data-clay-os="ios"] .clay-menu, .clay-menu--glass { background: color-mix(in oklab, var(--clay-elevated) 80%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); border-radius: 13px; padding: 0; min-width: 250px; }
[data-clay-os="ios"] .clay-menu-item { border-radius: 0; padding: 11px 16px; font-size: 17px; justify-content: space-between; flex-direction: row-reverse; }
[data-clay-os="ios"] .clay-menu-item + .clay-menu-item { border-top: 0.5px solid var(--clay-border-strong); }
[data-clay-os="ios"] .clay-menu-sep { margin: 0; height: 8px; background: rgb(0 0 0 / 0.08); }
[data-clay-os="android"] .clay-menu { border-radius: 4px; padding: 8px 0; border: 0; background: var(--clay-surface-2); }
[data-clay-os="android"] .clay-menu-item { border-radius: 0; padding: 12px 16px; }
[data-clay-os="macos"] .clay-menu { border-radius: 8px; padding: 5px; background: color-mix(in oklab, var(--clay-elevated) 85%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }
[data-clay-os="macos"] .clay-menu-item { padding: 3px 10px; font-size: 13px; border-radius: 4px; }
[data-clay-os="windows"] .clay-menu { border-radius: 8px; padding: 4px; }
[data-clay-os="windows"] .clay-menu-item { padding: 7px 10px; border-radius: 4px; }
[data-clay-os="linux"] .clay-menu { border-radius: 12px; padding: 6px; }

/* iOS action sheet */
.clay-actionsheet { display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); }
.clay-actionsheet-group { border-radius: 14px; overflow: hidden; background: color-mix(in oklab, var(--clay-elevated) 85%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); }
.clay-actionsheet-title { padding: 14px 16px; text-align: center; font-size: 13px; color: var(--clay-text-2); }
.clay-actionsheet button { display: block; width: 100%; height: 57px; border: 0; border-top: 0.5px solid var(--clay-border-strong); background: none; color: var(--clay-primary); font-size: 20px; cursor: pointer; }
.clay-actionsheet button:active { background: rgb(0 0 0 / 0.06); }
.clay-actionsheet .is-danger { color: var(--clay-danger); }
.clay-actionsheet .is-cancel { border-top: 0; font-weight: 600; }

/* Notifications (iOS banner, desktop notification, notification center) */
.clay-notification { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 22px; background: color-mix(in oklab, var(--clay-elevated) 82%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); box-shadow: var(--clay-shadow-3); max-width: 380px; font-size: 14px; border: 0.5px solid var(--clay-border); }
.clay-notification-icon { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary)); }
.clay-notification b { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.clay-notification b small { font-weight: 400; color: var(--clay-text-3); font-size: 12px; }
[data-clay-os="windows"] .clay-notification { border-radius: 8px; }
[data-clay-os="macos"] .clay-notification { border-radius: 16px; }
[data-clay-os="linux"] .clay-notification { border-radius: 12px; }
[data-clay-os="linux"] .clay-toast, [data-clay-os="windows"] .clay-toast { border-radius: 999px; background: #353535; color: #fff; border: 0; }
[data-clay-os="windows"] .clay-toast { border-radius: 8px; background: var(--clay-elevated); color: var(--clay-text); border: 1px solid var(--clay-border); }
[data-clay-os="linux"] .clay-toast-msg { color: #ddd; }

/* Cookie consent */
.clay-cookie { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 18px; background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); box-shadow: var(--clay-shadow-3); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-cookie p { flex: 1; min-width: 220px; color: var(--clay-text-2); }

/* ==========================================================================
   22. Extended data display
   ========================================================================== */
.clay-desc { display: grid; grid-template-columns: max-content 1fr; gap: 0; border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); overflow: hidden; margin: 0; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-desc dt, .clay-desc dd { margin: 0; padding: 10px 14px; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-desc dt { background: var(--clay-surface-2); color: var(--clay-text-2); font-weight: var(--clay-fw-medium); }
.clay-desc dd { background: var(--clay-surface); }
.clay-desc > :nth-last-child(-n+2) { border-bottom: 0; }

/* Tree view — nested <details> */
.clay-tree, .clay-tree ul { list-style: none; margin: 0; padding: 0; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-tree ul { padding-inline-start: 18px; }
.clay-tree summary, .clay-tree-leaf { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: var(--clay-radius-sm); cursor: pointer; list-style: none; }
.clay-tree summary::-webkit-details-marker { display: none; }
.clay-tree summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--clay-text-3); border-bottom: 1.5px solid var(--clay-text-3); transform: rotate(-45deg); transition: transform var(--clay-dur) var(--clay-ease); margin-inline-end: 2px; }
.clay-tree details[open] > summary::before { transform: rotate(45deg); }
.clay-tree-leaf { padding-inline-start: 24px; }
.clay-tree summary:hover, .clay-tree-leaf:hover { background: var(--clay-surface-2); }
.clay-tree .is-selected { background: var(--clay-primary-soft); color: var(--clay-primary-ink); }
[data-clay-os="macos"] .clay-tree .is-selected { background: var(--clay-primary); color: #fff; }
.clay-tree .clay-icon { width: 16px; height: 16px; color: var(--clay-text-3); }

/* Striped table (macOS) */
.clay-table--striped tbody tr:nth-child(even) { background: var(--clay-surface-2); }
.clay-table--compact th, .clay-table--compact td { padding: 6px 12px; }
.clay-table th[aria-sort] { cursor: pointer; }
.clay-table th[aria-sort]::after { content: " ↕"; opacity: 0.4; }
.clay-table th[aria-sort="ascending"]::after { content: " ↑"; opacity: 1; }
.clay-table th[aria-sort="descending"]::after { content: " ↓"; opacity: 1; }
.clay-table tr.is-selected { background: var(--clay-primary-soft) !important; }
.clay-table-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: var(--clay-border-w) solid var(--clay-border); flex-wrap: wrap; }
.clay-table-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: var(--clay-border-w) solid var(--clay-border); font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); color: var(--clay-text-2); flex-wrap: wrap; }

/* Settings card (Fluent) / expander */
.clay-settings-card { display: flex; align-items: center; gap: 16px; min-height: 68px; padding: 12px 16px; background: var(--clay-surface); border: 1px solid var(--clay-border); border-radius: var(--clay-radius-lg); }
.clay-settings-card + .clay-settings-card { margin-top: 4px; }
.clay-settings-card .clay-icon { width: 20px; height: 20px; color: var(--clay-text-2); }
.clay-settings-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 14px; }
.clay-settings-card-text small { color: var(--clay-text-2); font-size: 12px; }
.clay-expander { background: var(--clay-surface); border: 1px solid var(--clay-border); border-radius: var(--clay-radius-lg); overflow: hidden; }
.clay-expander > summary { display: flex; align-items: center; gap: 16px; min-height: 64px; padding: 12px 16px; cursor: pointer; list-style: none; }
.clay-expander > summary::-webkit-details-marker { display: none; }
.clay-expander > summary::after { content: ""; width: 8px; height: 8px; margin-inline-start: auto; border-right: 1.5px solid var(--clay-text-2); border-bottom: 1.5px solid var(--clay-text-2); transform: rotate(45deg); transition: transform var(--clay-dur) var(--clay-ease); }
.clay-expander[open] > summary::after { transform: rotate(-135deg); }
.clay-expander > :not(summary) { padding: 12px 16px 16px 52px; border-top: 1px solid var(--clay-border); background: var(--clay-surface-2); }

/* Adwaita boxed-list rows */
.clay-boxed { list-style: none; margin: 0; padding: 0; border-radius: var(--clay-list-radius); background: var(--clay-surface); box-shadow: var(--clay-card-shadow); overflow: hidden; }
.clay-boxed > li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 14px; font-size: 15px; }
.clay-boxed > li + li { border-top: 1px solid var(--clay-border); }
.clay-boxed-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.clay-boxed-text small { color: var(--clay-text-2); font-size: 13px; }
.clay-boxed input.clay-entry { flex: 1; border: 0; background: none; outline: none; font-size: 15px; height: 34px; }
.clay-boxed details { width: 100%; }
.clay-boxed details > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.clay-boxed details > summary::-webkit-details-marker { display: none; }
.clay-boxed details > summary::after { content: ""; width: 7px; height: 7px; margin-inline-start: auto; border-right: 2px solid var(--clay-text-2); border-bottom: 2px solid var(--clay-text-2); transform: rotate(45deg); transition: transform var(--clay-dur); }
.clay-boxed details[open] > summary::after { transform: rotate(-135deg); }
.clay-boxed details > div { padding-top: 10px; margin-top: 10px; border-top: 1px solid var(--clay-border); color: var(--clay-text-2); font-size: 14px; }
.clay-pref-group > h4 { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.clay-pref-group > p { margin: -4px 0 10px; font-size: 13px; color: var(--clay-text-2); }

/* iOS swipe actions */
.clay-swipe { position: relative; overflow: hidden; background: var(--clay-danger); }
.clay-swipe-actions { position: absolute; inset: 0 0 0 auto; display: flex; }
.clay-swipe-actions button { width: 74px; border: 0; color: #fff; font-size: 15px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.clay-swipe-content { position: relative; background: var(--clay-surface); transition: transform var(--clay-dur-slow) var(--clay-ease); cursor: grab; touch-action: pan-y; }
.clay-swipe.is-open .clay-swipe-content { transform: translateX(-148px); }

/* iOS widgets & Live Activity */
.clay-widget { width: 158px; aspect-ratio: 1; border-radius: 22px; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; background: var(--clay-surface); box-shadow: var(--clay-shadow-2); color: var(--clay-text); }
.clay-widget--medium { width: 338px; aspect-ratio: 338 / 158; }
.clay-widget--accent { background: linear-gradient(160deg, var(--clay-primary), color-mix(in oklab, var(--clay-primary) 50%, #000)); color: #fff; }
.clay-island { display: flex; align-items: center; gap: 12px; width: 360px; max-width: 100%; padding: 14px 18px; border-radius: 44px; background: #000; color: #fff; font-size: 14px; }
.clay-island-pill { width: 126px; height: 37px; border-radius: 20px; background: #000; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; color: #fff; font-size: 12px; }

/* Chat */
.clay-chat { display: flex; flex-direction: column; gap: 6px; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale) * 1.05); }
.clay-bubble { max-width: 75%; padding: 8px 13px; border-radius: 18px; background: var(--clay-surface-3); color: var(--clay-text); align-self: flex-start; line-height: 1.35; }
.clay-bubble--me { align-self: flex-end; background: var(--clay-primary); color: var(--clay-on-primary); }
[data-clay-os="ios"] .clay-bubble--me { border-bottom-right-radius: 5px; }
[data-clay-os="ios"] .clay-bubble:not(.clay-bubble--me) { border-bottom-left-radius: 5px; }
.clay-chat-meta { font-size: 11px; color: var(--clay-text-3); text-align: center; margin: 6px 0; }
.clay-chat-input { display: flex; gap: 8px; align-items: center; margin-top: 8px; }

/* Kanban */
.clay-kanban { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 12px; overflow-x: auto; }
.clay-kanban-col { background: var(--clay-surface-2); border-radius: var(--clay-radius-lg); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.clay-kanban-col > header { display: flex; justify-content: space-between; align-items: center; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); padding: 2px 4px; }
.clay-kanban-card { background: var(--clay-surface); border-radius: var(--clay-radius); padding: 10px 12px; box-shadow: var(--clay-shadow-1); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); display: flex; flex-direction: column; gap: 8px; cursor: grab; }

/* Bar chart & sparkline */
.clay-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 8px; }
.clay-bars > div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: 11px; color: var(--clay-text-3); }
.clay-bars > div > i { width: 100%; max-width: 36px; height: var(--h); border-radius: var(--clay-radius-xs) var(--clay-radius-xs) 2px 2px; background: linear-gradient(180deg, var(--clay-primary-400), var(--clay-primary)); transition: height var(--clay-dur-slow) var(--clay-ease); }
.clay-bars > div.is-muted > i { background: var(--clay-surface-3); }
.clay-donut { --v: 68; width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--clay-primary) calc(var(--v) * 1%), var(--clay-secondary) 0 calc(var(--v) * 1% + 18%), var(--clay-surface-3) 0); display: grid; place-items: center; position: relative; }
.clay-donut::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; background: var(--clay-surface); }
.clay-donut > * { position: relative; font-weight: 700; }

/* Typography helpers */
.clay-prose { max-width: 68ch; display: flex; flex-direction: column; gap: 12px; color: var(--clay-text-2); }
.clay-prose h2, .clay-prose h3 { color: var(--clay-text); }
.clay-blockquote { margin: 0; padding: 4px 0 4px 18px; border-inline-start: 3px solid var(--clay-primary); font-size: 1.1em; color: var(--clay-text); font-style: italic; }
.clay-pre { margin: 0; padding: 14px 16px; border-radius: var(--clay-radius); background: #0f0f17; color: #e6e4f5; font-family: var(--clay-font-mono); font-size: 12.5px; line-height: 1.6; overflow-x: auto; }
.clay-mark { background: color-mix(in oklab, var(--clay-warning) 30%, transparent); color: inherit; padding: 0 3px; border-radius: 3px; }

/* ==========================================================================
   23. Layout extras & web sections
   ========================================================================== */
.clay-splitter { display: flex; height: 200px; border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); overflow: hidden; --clay-split: 40%; }
.clay-splitter > :first-child { flex: 0 0 var(--clay-split); overflow: auto; }
.clay-splitter > :last-child { flex: 1; overflow: auto; }
.clay-splitter-handle { flex: 0 0 8px; cursor: col-resize; background: var(--clay-surface-2); position: relative; touch-action: none; }
.clay-splitter-handle::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: 2px; height: 28px; transform: translate(-50%, -50%); border-radius: 2px; background: var(--clay-border-strong); }
.clay-splitter-handle:hover::after, .clay-splitter-handle.is-drag::after { background: var(--clay-primary); }
.clay-scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: var(--clay-border-strong) transparent; }
.clay-ratio { aspect-ratio: var(--clay-ratio, 16 / 9); border-radius: var(--clay-radius); overflow: hidden; background: var(--clay-surface-2); display: grid; place-items: center; color: var(--clay-text-3); }

.clay-section { padding: calc(var(--clay-unit) * 16) calc(var(--clay-unit) * 6); display: flex; flex-direction: column; gap: calc(var(--clay-unit) * 4); }
.clay-hero-sec { text-align: center; align-items: center; background: radial-gradient(60% 60% at 50% 0%, var(--clay-primary-soft), transparent); }
.clay-hero-sec .clay-display { max-width: 14ch; }
.clay-hero-sec p { max-width: 56ch; color: var(--clay-text-2); font-size: 1.1em; }
.clay-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: var(--clay-primary-soft); color: var(--clay-primary-ink); font-size: calc(var(--clay-fs-caption) * var(--clay-font-scale)); font-weight: var(--clay-fw-strong); }
.clay-feature { display: flex; flex-direction: column; gap: 8px; }
.clay-feature-icon { width: 44px; height: 44px; border-radius: var(--clay-radius); display: grid; place-items: center; background: var(--clay-primary-soft); color: var(--clay-primary-ink); }
.clay-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px; align-items: stretch; }
.clay-price-card { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--clay-surface); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); position: relative; }
.clay-price-card.is-featured { border: 2px solid var(--clay-primary); box-shadow: var(--clay-shadow-3); }
.clay-price-card.is-featured::before { content: "Most popular"; position: absolute; top: -12px; left: 24px; padding: 2px 10px; border-radius: 999px; background: var(--clay-primary); color: var(--clay-on-primary); font-size: 11px; font-weight: 700; }
.clay-price { font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-h1) * var(--clay-font-scale)); font-weight: var(--clay-fw-heading); letter-spacing: -0.03em; line-height: 1; }
.clay-price small { font-size: 0.4em; font-weight: 500; color: var(--clay-text-3); letter-spacing: 0; }
.clay-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); color: var(--clay-text-2); }
.clay-checklist li::before { content: "✓"; color: var(--clay-success); font-weight: 800; margin-inline-end: 8px; }
.clay-quote-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--clay-surface); border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); }
.clay-quote-card p { font-size: 1.02em; }
.clay-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px; color: var(--clay-text-3); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.clay-site-footer { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; padding: 32px 24px; background: var(--clay-surface); border-top: var(--clay-border-w) solid var(--clay-border); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-site-footer h5 { margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clay-text-3); }
.clay-site-footer a { display: block; padding: 3px 0; color: var(--clay-text-2); text-decoration: none; }
.clay-site-footer a:hover { color: var(--clay-text); }
@media (max-width: 700px) { .clay-site-footer { grid-template-columns: 1fr 1fr; } .clay-site-footer > :first-child { grid-column: span 2; } }
.clay-auth { width: min(100%, 380px); margin: auto; display: flex; flex-direction: column; gap: 14px; }
.clay-or { display: flex; align-items: center; gap: 12px; color: var(--clay-text-3); font-size: 12px; }
.clay-or::before, .clay-or::after { content: ""; flex: 1; height: 1px; background: var(--clay-border); }
.clay-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.clay-gallery > div { aspect-ratio: 1; border-radius: var(--clay-radius); background: linear-gradient(135deg, var(--clay-primary-200), var(--clay-primary-500)); }
.clay-gallery > div:nth-child(3n+2) { background: linear-gradient(135deg, var(--clay-secondary), var(--clay-primary-300)); }
.clay-gallery > div:nth-child(4n) { background: linear-gradient(135deg, var(--clay-info), var(--clay-primary-400)); }

/* Surfaces: Fluent Mica / Acrylic, macOS vibrancy */
.clay-mica { background: linear-gradient(135deg, color-mix(in oklab, var(--clay-primary) 8%, var(--clay-bg)), var(--clay-bg) 60%); }
.clay-acrylic { background: color-mix(in oklab, var(--clay-surface) 65%, transparent); -webkit-backdrop-filter: blur(30px) saturate(125%); backdrop-filter: blur(30px) saturate(125%); border: 1px solid var(--clay-border); }

/* macOS path control & box */
.clay-path { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--clay-text-2); }
.clay-path span { display: inline-flex; align-items: center; gap: 4px; }
.clay-path span + span::before { content: "›"; margin-inline-end: 4px; opacity: 0.6; }
.clay-path .clay-icon { width: 14px; height: 14px; color: var(--clay-primary); }
.clay-box { position: relative; padding: 18px 14px 14px; border-radius: 8px; background: rgb(0 0 0 / 0.03); border: 0.5px solid var(--clay-border-strong); }
.clay-box > legend, .clay-box > .clay-box-title { position: absolute; top: -9px; left: 10px; padding: 0 4px; font-size: 11px; color: var(--clay-text-2); background: var(--clay-bg); }

/* ==========================================================================
   23b. More components — context menu, editor, media, emoji, range, gauge, M3 expressive
   ========================================================================== */
.clay-menu.is-ctx { position: fixed; z-index: 9990; }
.clay-ctx-area { display: grid; place-items: center; min-height: 140px; width: 100%; border: 2px dashed var(--clay-border-strong); border-radius: var(--clay-radius-lg); color: var(--clay-text-3); font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); user-select: none; }

.clay-watermark { position: relative; overflow: hidden; }
.clay-watermark::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.08; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='110'%3E%3Ctext x='10' y='60' transform='rotate(-22 90 55)' font-family='sans-serif' font-size='16' font-weight='700' fill='%23000'%3ECONFIDENTIAL%3C/text%3E%3C/svg%3E"); }
[data-clay-mode="dark"] .clay-watermark::after { filter: invert(1); }

.clay-editor { border: var(--clay-border-w) solid var(--clay-border-strong); border-radius: var(--clay-radius); background: var(--clay-surface); overflow: hidden; }
.clay-editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 6px; border-bottom: var(--clay-border-w) solid var(--clay-border); background: var(--clay-surface-2); }
.clay-editor-toolbar button { min-width: 30px; height: 30px; padding: 0 6px; border: 0; border-radius: var(--clay-radius-xs); background: none; color: var(--clay-text-2); cursor: pointer; font-size: 14px; display: inline-grid; place-items: center; }
.clay-editor-toolbar button:hover, .clay-editor-toolbar button[aria-pressed="true"] { background: var(--clay-surface-3); color: var(--clay-text); }
.clay-editor-toolbar .clay-icon { width: 16px; height: 16px; }
.clay-editor-toolbar .clay-divider-v { margin: 4px; height: 20px; }
.clay-editor-body { min-height: 120px; padding: 14px 16px; outline: none; line-height: 1.6; }
.clay-editor-body:focus { box-shadow: inset 0 0 0 2px var(--clay-primary-soft); }

.clay-player { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--clay-radius-lg); background: var(--clay-surface); box-shadow: var(--clay-shadow-2); width: min(100%, 420px); }
.clay-player-art { aspect-ratio: 16 / 9; border-radius: var(--clay-radius); background: linear-gradient(135deg, var(--clay-primary), var(--clay-secondary)); display: grid; place-items: center; color: #fff; }
.clay-player-art .clay-icon { width: 48px; height: 48px; }
.clay-player-row { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--clay-text-3); font-variant-numeric: tabular-nums; }
.clay-player-controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.clay-player-controls .clay-btn--icon.clay-btn--lg { width: 56px; min-height: 56px; border-radius: 50%; }

.clay-emoji { width: 300px; max-width: 100%; padding: 10px; border-radius: var(--clay-radius-lg); background: var(--clay-elevated); border: var(--clay-border-w) solid var(--clay-border); box-shadow: var(--clay-shadow-3); display: flex; flex-direction: column; gap: 8px; }
.clay-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; font-size: 22px; }
.clay-emoji-grid button { aspect-ratio: 1; border: 0; background: none; border-radius: var(--clay-radius-sm); cursor: pointer; font-size: inherit; }
.clay-emoji-grid button:hover { background: var(--clay-surface-2); transform: scale(1.12); }
.clay-emoji-cats { display: flex; justify-content: space-between; border-top: var(--clay-border-w) solid var(--clay-border); padding-top: 6px; color: var(--clay-text-3); }
.clay-emoji-cats .clay-icon { width: 18px; height: 18px; }

.clay-shortcuts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 24px; font-size: calc(var(--clay-fs-label) * var(--clay-font-scale)); }
.clay-shortcuts > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-shortcuts h4 { grid-column: 1 / -1; margin: 10px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--clay-text-3); }

.clay-calendar-grid > button.is-range { background: var(--clay-primary-soft); border-radius: 0; }
.clay-calendar-grid > button.is-start, .clay-calendar-grid > button.is-end { background: var(--clay-primary); color: var(--clay-on-primary); }
.clay-calendar-grid > button.is-start { border-radius: 50% 0 0 50%; }
.clay-calendar-grid > button.is-end { border-radius: 0 50% 50% 0; }
.clay-calendar-grid > button.is-start.is-end { border-radius: 50%; }

.clay-gauge { --v: 0.62; position: relative; width: 120px; aspect-ratio: 2 / 1.15; display: grid; place-items: end center; }
.clay-gauge::before { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(from -120deg, #34c759, #ffcc00 calc(240deg * 0.5), #ff3b30 240deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.clay-gauge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px var(--clay-text); transform: rotate(calc(-120deg + 240deg * var(--v))) translateY(-50px); transform-origin: center; }
.clay-gauge-ring { --v: 0.7; width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(from -135deg, var(--clay-primary) calc(270deg * var(--v)), var(--clay-surface-3) 0 270deg, transparent 0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%); }

.clay-fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.clay-fab-menu-item { display: inline-flex; align-items: center; gap: 12px; height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 28px; background: color-mix(in oklab, var(--clay-primary) 22%, var(--clay-surface)); color: var(--clay-text); font-weight: 500; font-size: 16px; cursor: pointer; box-shadow: var(--clay-shadow-2); }
.clay-float-toolbar { display: inline-flex; align-items: center; gap: 4px; padding: 8px; border-radius: 999px; background: var(--clay-surface-3); box-shadow: var(--clay-shadow-3); }
.clay-float-toolbar button { width: 48px; height: 48px; border: 0; border-radius: 50%; background: none; color: var(--clay-text-2); display: grid; place-items: center; cursor: pointer; }
.clay-float-toolbar button.is-active { background: var(--clay-primary); color: var(--clay-on-primary); border-radius: 16px; }
.clay-shape-loader { width: 48px; height: 48px; background: var(--clay-primary); animation: clay-morph 2.4s var(--clay-ease) infinite; }
.clay-shape-loader--contained { padding: 10px; width: 68px; height: 68px; border-radius: 50%; background: var(--clay-primary-soft); display: grid; place-items: center; animation: none; }
.clay-shape-loader--contained::before { content: ""; width: 38px; height: 38px; background: var(--clay-primary); animation: clay-morph 2.4s var(--clay-ease) infinite; }
@keyframes clay-morph {
  0% { border-radius: 50%; transform: rotate(0); }
  25% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(90deg) scale(0.9); }
  50% { border-radius: 12px; transform: rotate(180deg); }
  75% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: rotate(270deg) scale(0.92); }
  100% { border-radius: 50%; transform: rotate(360deg); }
}
.clay-qr { width: 132px; height: 132px; padding: 8px; background: #fff; border-radius: var(--clay-radius-sm); box-shadow: inset 0 0 0 1px var(--clay-border); }
.clay-qr svg { width: 100%; height: 100%; }
.clay-lightbox { width: min(760px, calc(100vw - 32px)); background: #0b0b10; color: #fff; }
.clay-lightbox .clay-slide { aspect-ratio: 16 / 10; border-radius: 0; }
.clay-thumb { width: 96px; aspect-ratio: 1; border: 0; padding: 0; border-radius: var(--clay-radius); cursor: zoom-in; background: linear-gradient(135deg, var(--clay-primary-300), var(--clay-primary)); transition: transform var(--clay-dur) var(--clay-ease); }
.clay-thumb:hover { transform: scale(1.04); }

/* ==========================================================================
   23c. Event calendar, countdown, copy, theme toggle, sortable, vertical steps, dock
   ========================================================================== */
.clay-events { border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius-lg); overflow: hidden; background: var(--clay-surface); width: 100%; }
.clay-events-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-events-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.clay-events-grid > span { padding: 6px 8px; font-size: 11px; font-weight: var(--clay-fw-strong); color: var(--clay-text-3); text-transform: uppercase; border-bottom: var(--clay-border-w) solid var(--clay-border); }
.clay-events-grid > div { min-height: 78px; padding: 6px; border-right: var(--clay-border-w) solid var(--clay-border); border-bottom: var(--clay-border-w) solid var(--clay-border); font-size: 12px; display: flex; flex-direction: column; gap: 3px; }
.clay-events-grid > div:nth-child(7n + 7) { border-right: 0; }
.clay-events-grid > div.is-muted { color: var(--clay-text-3); background: var(--clay-surface-2); }
.clay-events-grid > div.is-today > b { background: var(--clay-primary); color: var(--clay-on-primary); border-radius: 999px; padding: 0 6px; align-self: flex-start; }
.clay-event { padding: 2px 6px; border-radius: 4px; background: var(--clay-primary-soft); color: var(--clay-primary-ink); font-size: 11px; font-weight: var(--clay-fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.clay-event--success { background: var(--clay-success-soft); color: var(--clay-success); }
.clay-event--warning { background: var(--clay-warning-soft); color: var(--clay-warning); }
.clay-countdown { display: inline-flex; gap: 8px; align-items: flex-start; font-variant-numeric: tabular-nums; }
.clay-countdown > div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.clay-countdown b { min-width: 64px; padding: 10px 8px; border-radius: var(--clay-radius); background: var(--clay-surface-2); font-family: var(--clay-font-display); font-size: calc(var(--clay-fs-h2) * var(--clay-font-scale)); text-align: center; line-height: 1; }
.clay-countdown small { font-size: 11px; color: var(--clay-text-3); text-transform: uppercase; letter-spacing: 0.06em; }
.clay-countdown > i { font-style: normal; font-size: 26px; padding-top: 10px; color: var(--clay-text-3); }
.clay-btn.is-copied { --_bg: var(--clay-success); --_fg: #fff; }
.clay-copy-field { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border: var(--clay-border-w) solid var(--clay-border-strong); border-radius: var(--clay-input-radius); background: var(--clay-surface-2); font-family: var(--clay-font-mono); font-size: 13px; }
.clay-copy-field code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clay-theme-toggle { position: relative; width: 64px; height: 34px; border-radius: 999px; border: 0; cursor: pointer; padding: 0; background: linear-gradient(180deg, #8fd3ff, #5aa9ff); transition: background var(--clay-dur-slow) var(--clay-ease); }
.clay-theme-toggle::before { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6c8, #ffc93c); box-shadow: 0 0 14px rgb(255 201 60 / 0.7); transition: transform var(--clay-dur-slow) var(--clay-ease-spring), background var(--clay-dur-slow), box-shadow var(--clay-dur-slow); }
.clay-theme-toggle[aria-checked="true"] { background: linear-gradient(180deg, #1b1a3a, #2e2a5c); }
.clay-theme-toggle[aria-checked="true"]::before { transform: translateX(30px); background: radial-gradient(circle at 65% 35%, #f4f1ff 55%, #c9c3ee); box-shadow: inset -6px -3px 0 0 #d6d0f7, 0 0 12px rgb(201 195 238 / 0.5); }
.clay-sortable { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 420px; }
.clay-sortable li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--clay-radius); background: var(--clay-surface); border: var(--clay-border-w) solid var(--clay-border); box-shadow: var(--clay-shadow-1); cursor: grab; user-select: none; transition: transform var(--clay-dur) var(--clay-ease), box-shadow var(--clay-dur), opacity var(--clay-dur); }
.clay-sortable li:active { cursor: grabbing; }
.clay-sortable li.is-dragging { opacity: 0.55; transform: scale(1.02); box-shadow: var(--clay-shadow-3); }
.clay-drag-handle { color: var(--clay-text-3); letter-spacing: -2px; font-weight: 700; }
.clay-steps--vertical { flex-direction: column; gap: 0; }
.clay-steps--vertical .clay-step { flex-direction: row; gap: 14px; padding-bottom: 18px; position: relative; }
.clay-steps--vertical .clay-step::before { width: 26px; height: 26px; flex: none; border-radius: 50%; content: counter(step); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--clay-text-2); background: var(--clay-surface-3); }
.clay-steps--vertical .clay-step.is-done::before { content: "✓"; color: var(--clay-on-primary); }
.clay-steps--vertical .clay-step.is-current::before { color: var(--clay-on-primary); box-shadow: 0 0 0 4px var(--clay-primary-soft); }
.clay-steps--vertical .clay-step::after { content: ""; position: absolute; left: 12px; top: 30px; bottom: 2px; width: 2px; background: var(--clay-border); }
.clay-steps--vertical .clay-step:last-child::after { display: none; }
.clay-steps--vertical .clay-step small { display: block; font-weight: 400; color: var(--clay-text-3); }
.clay-dock { display: inline-flex; align-items: flex-end; gap: 6px; padding: 6px 8px; border-radius: 20px; background: color-mix(in oklab, var(--clay-surface) 55%, transparent); -webkit-backdrop-filter: var(--clay-glass); backdrop-filter: var(--clay-glass); border: 0.5px solid var(--clay-border-strong); box-shadow: var(--clay-shadow-3); }
.clay-dock button { width: 48px; height: 48px; border: 0; border-radius: 12px; cursor: pointer; display: grid; place-items: center; color: #fff; position: relative; transition: transform var(--clay-dur) var(--clay-ease-spring), margin var(--clay-dur) var(--clay-ease-spring); }
.clay-dock button:hover { transform: translateY(-8px) scale(1.25); margin: 0 6px; }
.clay-dock button.is-running::after { content: ""; position: absolute; bottom: -6px; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--clay-text-2); }
.clay-hidden-more[hidden] { display: none; }

/* ==========================================================================
   25. Interaction states — press feedback everywhere, plus forced states
   Force a state for docs, QA or design reviews:
     <button class="clay-btn is-hover">  ·  <div data-clay-force="pressed"> …every control inside… </div>
   States: hover · focus · pressed · disabled
   ========================================================================== */
/* Press feedback for every clickable surface */
.clay-chip, .clay-menu-item, .clay-sidebar-item, .clay-page, .clay-option, .clay-tab, .clay-tabbar-item, .clay-segmented label, .clay-toggle-group > button, .clay-toggle, .clay-cascader li, .clay-tabview-tab, .clay-commandbar button, .clay-calendar-grid > button, .clay-navrail-item, .clay-list-item--action, .clay-mega a, .clay-tree summary, .clay-tree-leaf, .clay-editor-toolbar button, .clay-emoji-grid button, .clay-swatch-row button, .clay-card--interactive {
  transition: background-color var(--clay-dur) var(--clay-ease), color var(--clay-dur) var(--clay-ease), box-shadow var(--clay-dur) var(--clay-ease), transform var(--clay-dur) var(--clay-ease), border-color var(--clay-dur);
}
.clay-chip:active, .clay-menu-item:active, .clay-sidebar-item:active, .clay-page:active, .clay-option:active, .clay-tab:active, .clay-segmented label:active, .clay-toggle-group > button:active, .clay-toggle:active, .clay-cascader li:active, .clay-tabview-tab:active, .clay-commandbar button:active, .clay-calendar-grid > button:active, .clay-editor-toolbar button:active, .clay-emoji-grid button:active, .clay-swatch-row button:active { transform: scale(0.96); }
.clay-tabbar-item:active .clay-icon, .clay-navrail-item:active .clay-icon { transform: scale(0.88); }
.clay-list-item--action:active, .clay-mega a:active, .clay-tree summary:active, .clay-tree-leaf:active { background: color-mix(in oklab, var(--clay-text) 10%, transparent); }
.clay-card--interactive:active { transform: translateY(-1px) scale(0.99); box-shadow: var(--clay-shadow-2); }
.clay-fab:active { transform: scale(0.95); box-shadow: var(--clay-shadow-2); }
.clay-tabbar-item .clay-icon, .clay-navrail-item .clay-icon { transition: transform var(--clay-dur) var(--clay-ease-spring), background-color var(--clay-dur), padding var(--clay-dur); }

/* Forced: hover */
.clay-btn:is(.is-hover, [data-clay-force="hover"] *) { background: color-mix(in oklab, var(--_bg) 90%, var(--_fg)); }
.clay-btn--link:is(.is-hover, [data-clay-force="hover"] *) { background: transparent; opacity: 0.8; }
.clay-chip:is(.is-hover, [data-clay-force="hover"] *) { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-chip[aria-pressed="true"]:is(.is-hover, [data-clay-force="hover"] *) { background: color-mix(in oklab, var(--clay-primary) 20%, transparent); }
.clay-menu-item:is(.is-hover, [data-clay-force="hover"] *), .clay-sidebar-item:is(.is-hover, [data-clay-force="hover"] *), .clay-page:is(.is-hover, [data-clay-force="hover"] *), .clay-option:is(.is-hover, [data-clay-force="hover"] *), .clay-cascader li:is(.is-hover, [data-clay-force="hover"] *), .clay-tabview-tab:is(.is-hover, [data-clay-force="hover"] *), .clay-commandbar button:is(.is-hover, [data-clay-force="hover"] *), .clay-calendar-grid > button:is(.is-hover, [data-clay-force="hover"] *), .clay-navrail-item:is(.is-hover, [data-clay-force="hover"] *), .clay-tree summary:is(.is-hover, [data-clay-force="hover"] *), .clay-tree-leaf:is(.is-hover, [data-clay-force="hover"] *), .clay-mega a:is(.is-hover, [data-clay-force="hover"] *), .clay-editor-toolbar button:is(.is-hover, [data-clay-force="hover"] *) { background: var(--clay-surface-2); color: var(--clay-text); }
.clay-list-item--action:is(.is-hover, [data-clay-force="hover"] *) { background: color-mix(in oklab, var(--clay-text) 5%, transparent); }
.clay-tab:is(.is-hover, [data-clay-force="hover"] *), .clay-segmented label:is(.is-hover, [data-clay-force="hover"] *), .clay-toggle-group > button:is(.is-hover, [data-clay-force="hover"] *), .clay-tabbar-item:is(.is-hover, [data-clay-force="hover"] *) { color: var(--clay-text); }
.clay-toggle:is(.is-hover, [data-clay-force="hover"] *) { border-color: var(--clay-text-3); color: var(--clay-text); }
.clay-input:is(.is-hover, [data-clay-force="hover"] *), .clay-select:is(.is-hover, [data-clay-force="hover"] *), .clay-textarea:is(.is-hover, [data-clay-force="hover"] *) { border-color: color-mix(in oklab, var(--clay-input-border) 60%, var(--clay-text)); }
.clay-check:is(.is-hover, [data-clay-force="hover"] *), .clay-radio:is(.is-hover, [data-clay-force="hover"] *) { border-color: var(--clay-primary); }
.clay-switch:is(.is-hover, [data-clay-force="hover"] *) { filter: brightness(0.96); }
.clay-card--interactive:is(.is-hover, [data-clay-force="hover"] *) { transform: translateY(-3px); box-shadow: var(--clay-shadow-3); }
.clay-fab:is(.is-hover, [data-clay-force="hover"] *) { transform: translateY(-2px); box-shadow: var(--clay-shadow-4); }
[data-clay-tooltip]:is(.is-hover, [data-clay-force="hover"] *)::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* Forced: focus */
.clay-btn:is(.is-focus, [data-clay-force="focus"] *), .clay-chip:is(.is-focus, [data-clay-force="focus"] *), .clay-tab:is(.is-focus, [data-clay-force="focus"] *), .clay-check:is(.is-focus, [data-clay-force="focus"] *), .clay-radio:is(.is-focus, [data-clay-force="focus"] *), .clay-switch:is(.is-focus, [data-clay-force="focus"] *), .clay-menu-item:is(.is-focus, [data-clay-force="focus"] *), .clay-sidebar-item:is(.is-focus, [data-clay-force="focus"] *), .clay-page:is(.is-focus, [data-clay-force="focus"] *), .clay-toggle:is(.is-focus, [data-clay-force="focus"] *), .clay-toggle-group > button:is(.is-focus, [data-clay-force="focus"] *), .clay-fab:is(.is-focus, [data-clay-force="focus"] *), .clay-tabbar-item:is(.is-focus, [data-clay-force="focus"] *), .clay-option:is(.is-focus, [data-clay-force="focus"] *), .clay-card--interactive:is(.is-focus, [data-clay-force="focus"] *) { box-shadow: var(--clay-focus-ring); }
.clay-segmented label:is(.is-focus, [data-clay-force="focus"] *) { box-shadow: var(--clay-focus-ring); }
.clay-input:is(.is-focus, [data-clay-force="focus"] *), .clay-select:is(.is-focus, [data-clay-force="focus"] *), .clay-textarea:is(.is-focus, [data-clay-force="focus"] *), .clay-tags:is(.is-focus, [data-clay-force="focus"] *), .clay-otp input:is(.is-focus, [data-clay-force="focus"] *) { border-color: var(--clay-input-focus-border); box-shadow: var(--clay-input-focus); }
.clay-range:is(.is-focus, [data-clay-force="focus"] *)::-webkit-slider-thumb { box-shadow: var(--clay-focus-ring); }

/* Forced: pressed */
.clay-btn:is(.is-pressed, [data-clay-force="pressed"] *) { transform: scale(var(--clay-press-scale)); background: color-mix(in oklab, var(--_bg) 84%, var(--_fg)); }
.clay-chip:is(.is-pressed, [data-clay-force="pressed"] *), .clay-menu-item:is(.is-pressed, [data-clay-force="pressed"] *), .clay-sidebar-item:is(.is-pressed, [data-clay-force="pressed"] *), .clay-page:is(.is-pressed, [data-clay-force="pressed"] *), .clay-option:is(.is-pressed, [data-clay-force="pressed"] *), .clay-tab:is(.is-pressed, [data-clay-force="pressed"] *), .clay-segmented label:is(.is-pressed, [data-clay-force="pressed"] *), .clay-toggle-group > button:is(.is-pressed, [data-clay-force="pressed"] *), .clay-toggle:is(.is-pressed, [data-clay-force="pressed"] *), .clay-tabview-tab:is(.is-pressed, [data-clay-force="pressed"] *), .clay-commandbar button:is(.is-pressed, [data-clay-force="pressed"] *), .clay-calendar-grid > button:is(.is-pressed, [data-clay-force="pressed"] *) { transform: scale(0.96); background: var(--clay-surface-3); }
.clay-list-item--action:is(.is-pressed, [data-clay-force="pressed"] *) { background: color-mix(in oklab, var(--clay-text) 10%, transparent); }
.clay-check:is(.is-pressed, [data-clay-force="pressed"] *), .clay-radio:is(.is-pressed, [data-clay-force="pressed"] *) { transform: scale(0.9); }
.clay-switch:is(.is-pressed, [data-clay-force="pressed"] *)::before { width: calc(var(--clay-switch-thumb) * 1.15); }
.clay-range:is(.is-pressed, [data-clay-force="pressed"] *)::-webkit-slider-thumb { transform: scale(1.12); }
.clay-card--interactive:is(.is-pressed, [data-clay-force="pressed"] *) { transform: translateY(-1px) scale(0.99); }
.clay-fab:is(.is-pressed, [data-clay-force="pressed"] *) { transform: scale(0.95); }
.clay-tabbar-item:is(.is-pressed, [data-clay-force="pressed"] *) .clay-icon, .clay-navrail-item:is(.is-pressed, [data-clay-force="pressed"] *) .clay-icon { transform: scale(0.88); }

/* Forced: disabled */
[data-clay-force="disabled"] :is(.clay-btn, .clay-chip, .clay-input, .clay-select, .clay-textarea, .clay-check, .clay-radio, .clay-switch, .clay-range, .clay-tab, .clay-toggle, .clay-fab, .clay-segmented, .clay-list-item--action, .clay-menu-item, .clay-page, .clay-sidebar-item, .clay-tabbar-item, .clay-stepper, .clay-numberbox, .clay-tags, .clay-otp, .clay-rating, .clay-card--interactive),
.clay-chip.is-disabled, .clay-tab.is-disabled, .clay-menu-item.is-disabled, .clay-list-item--action.is-disabled { opacity: 0.42; pointer-events: none; box-shadow: none; filter: saturate(0.6); }

/* ==========================================================================
   24. Motion preferences
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root, [data-clay-os] { --clay-dur: 1ms; --clay-dur-slow: 1ms; }
  .clay-spinner, .clay-skeleton, .clay-progress--indeterminate > span { animation-duration: 2.5s; }
}
[data-clay-motion="off"] { --clay-dur: 1ms; --clay-dur-slow: 1ms; }

/* Icon gallery */
.clay-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; width: 100%; }
.clay-icon-tile { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 4px 10px; border: var(--clay-border-w) solid var(--clay-border); border-radius: var(--clay-radius); background: var(--clay-surface); color: var(--clay-text-2); font: 500 10.5px var(--clay-font-mono); cursor: pointer; transition: color var(--clay-dur), border-color var(--clay-dur), transform var(--clay-dur) var(--clay-ease), background-color var(--clay-dur); }
.clay-icon-tile:hover { color: var(--clay-primary-ink); border-color: var(--clay-primary); transform: translateY(-2px); }
.clay-icon-tile:active { transform: scale(0.95); }
.clay-icon-tile .clay-icon { width: 24px; height: 24px; }
.clay-icon-tile.is-copied { background: var(--clay-success-soft); color: var(--clay-success); }
.clay-icon-tile span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }