/* ==========================================================================
Project CMO — Design System stylesheet (cmo.css) v1.4 · 2026-10-05
One source of truth for the look and feel of every sub-app.
- Tokens live on :root as CSS custom properties (light) and
[data-theme="dark"] / prefers-color-scheme (dark).
- Every class is prefixed `cmo-`. Never restyle these classes in an app;
add a token or a component here instead (rule DS-GEN-3).
- Responsive rules use container queries on `.cmo-app`, so the same CSS
works in a full page and inside a preview frame.
Breakpoints: mobile < 640 · tablet 640–1023 · desktop ≥ 1024 · wide ≥ 1440
========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Geist+Mono:wght@400;500&display=swap");
/* ---------- 1. Tokens: light (default) ---------- */
:root {
color-scheme: light;
/* Colour scales (primitives). Components never use these directly: use the --cmo-color-* roles (DS-COL-9). */
--cmo-blue-50: #E8F0FE;
--cmo-blue-100: #C8DCFC;
--cmo-blue-200: #A8C7FA;
--cmo-blue-300: #8AB4F8;
--cmo-blue-400: #558EED;
--cmo-blue-500: #1A66E0;
--cmo-blue-600: #1557C9;
--cmo-blue-700: #124BAE;
--cmo-blue-800: #1B407F;
--cmo-blue-900: #1F3352;
--cmo-grey-0: #FFFFFF;
--cmo-grey-50: #F8F9FA;
--cmo-grey-100: #F1F3F4;
--cmo-grey-200: #E8EAED;
--cmo-grey-300: #DADCE0;
--cmo-grey-400: #BDC1C6;
--cmo-grey-500: #9AA0A6;
--cmo-grey-600: #80868B;
--cmo-grey-700: #5F6368;
--cmo-grey-800: #3C4043;
--cmo-grey-850: #2A2D33;
--cmo-grey-900: #202124;
--cmo-grey-950: #17191C;
--cmo-grey-1000: #0F1012;
/* Colour roles, light (generated: keep identical to theme.ts) */
--cmo-color-bg: var(--cmo-grey-0);
--cmo-color-surface: var(--cmo-grey-50);
--cmo-color-surface-raised: var(--cmo-grey-0);
--cmo-color-field: var(--cmo-grey-0);
--cmo-color-surface-sunken: var(--cmo-grey-100);
--cmo-color-line: var(--cmo-grey-300);
--cmo-color-line-strong: var(--cmo-grey-600);
--cmo-color-text: var(--cmo-grey-900);
--cmo-color-text-muted: var(--cmo-grey-700);
--cmo-color-text-placeholder: var(--cmo-grey-700);
--cmo-color-text-disabled: var(--cmo-grey-500);
--cmo-color-inverse: var(--cmo-grey-900);
--cmo-color-on-inverse: var(--cmo-grey-0);
--cmo-color-on-inverse-muted: var(--cmo-grey-400);
--cmo-color-inverse-line: transparent;
--cmo-color-selected-bg: var(--cmo-grey-900);
--cmo-color-selected-fg: var(--cmo-grey-0);
--cmo-color-accent: var(--cmo-blue-500);
--cmo-color-accent-hover: var(--cmo-blue-600);
--cmo-color-accent-active: var(--cmo-blue-700);
--cmo-color-on-accent: var(--cmo-grey-0);
--cmo-color-accent-tint: var(--cmo-blue-50);
--cmo-color-link: var(--cmo-blue-600);
--cmo-color-link-hover: var(--cmo-blue-700);
--cmo-color-focus: var(--cmo-blue-500);
--cmo-color-success: #12693D;
--cmo-color-success-tint: #D5E8DB;
--cmo-color-success-fill: #188038;
--cmo-color-on-success: var(--cmo-grey-0);
--cmo-color-warning: #7A4F00;
--cmo-color-warning-tint: #FEECC7;
--cmo-color-warning-fill: #F9AB00;
--cmo-color-on-warning: var(--cmo-grey-900);
--cmo-color-danger: #B3261E;
--cmo-color-danger-tint: #F9DEDC;
--cmo-color-danger-fill: #D93025;
--cmo-color-on-danger: var(--cmo-grey-0);
--cmo-color-info: var(--cmo-blue-700);
--cmo-color-info-tint: var(--cmo-blue-100);
--cmo-color-info-fill: var(--cmo-blue-500);
--cmo-color-on-info: var(--cmo-grey-0);
--cmo-data-blue: var(--cmo-blue-500); --cmo-data-blue-tint: var(--cmo-blue-50); --cmo-data-blue-ink: #12479D;
--cmo-data-coral: #F25C54; --cmo-data-coral-tint: #FDE5E3; --cmo-data-coral-ink: #A9403B;
--cmo-data-amber: #F6A800; --cmo-data-amber-tint: #FEF3D6; --cmo-data-amber-ink: #AC7600;
--cmo-data-violet: #8B5CF6; --cmo-data-violet-tint: #EFE8FE; --cmo-data-violet-ink: #6140AC;
--cmo-data-green: #22A95B; --cmo-data-green-tint: #E3F5EA; --cmo-data-green-ink: #187640;
--cmo-data-cyan: #14A3B8; --cmo-data-cyan-tint: #DDF4F7; --cmo-data-cyan-ink: #0E7281;
--cmo-stage-engaged: #5B2FC2;
--cmo-stage-engaged-tint: #E6DCFC;
--cmo-stage-lost: var(--cmo-grey-700);
--cmo-stage-lost-tint: var(--cmo-grey-200);
--cmo-shadow-sm: 0 1px 3px rgba(60, 64, 67, 0.15);
--cmo-shadow-md: 0 2px 15px rgba(0, 0, 0, 0.11);
--cmo-shadow-lg: 0 12px 40px rgba(32, 33, 36, 0.18);
/* Lead / pipeline stages */
--cmo-stage-new: var(--cmo-color-info); --cmo-stage-new-tint: var(--cmo-color-info-tint);
--cmo-stage-nurturing: var(--cmo-color-warning); --cmo-stage-nurturing-tint: var(--cmo-color-warning-tint);
--cmo-stage-customer: var(--cmo-color-success); --cmo-stage-customer-tint: var(--cmo-color-success-tint);
/* Typography */
--cmo-font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
--cmo-font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;
--cmo-font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
--cmo-text-display: 72px; --cmo-lh-display: 1.02;
--cmo-text-h1: 48px; --cmo-lh-h1: 1.08;
--cmo-text-h2: 32px; --cmo-lh-h2: 1.15;
--cmo-text-h3: 24px; --cmo-lh-h3: 1.2;
--cmo-text-h4: 18px; --cmo-lh-h4: 1.3;
--cmo-text-body-lg: 18px; --cmo-lh-body-lg: 1.55;
--cmo-text-body: 16px; --cmo-lh-body: 1.55;
--cmo-text-ui: 14px; --cmo-lh-ui: 1.4;
--cmo-text-caption: 13px; --cmo-lh-caption: 1.4;
--cmo-text-overline: 12px;
--cmo-tracking-tight: -0.03em;
--cmo-tracking-snug: -0.015em;
--cmo-tracking-overline: 0.08em;
/* Spacing (4 px base) */
--cmo-space-0: 0; --cmo-space-0-5: 2px; --cmo-space-1: 4px; --cmo-space-2: 8px;
--cmo-space-3: 12px; --cmo-space-4: 16px; --cmo-space-5: 20px; --cmo-space-6: 24px;
--cmo-space-8: 32px; --cmo-space-10: 40px; --cmo-space-12: 48px; --cmo-space-16: 64px;
--cmo-space-20: 80px; --cmo-space-24: 96px;
/* Radius */
--cmo-radius-xs: 4px; --cmo-radius-sm: 6px; --cmo-radius-md: 10px;
--cmo-radius-lg: 20px; --cmo-radius-xl: 28px; --cmo-radius-pill: 999px;
/* Sizes */
--cmo-control-sm: 36px; --cmo-control-md: 44px; --cmo-control-lg: 52px;
--cmo-touch-min: 44px;
--cmo-sidebar-w: 240px; --cmo-rail-w: 72px; --cmo-topbar-h: 64px; --cmo-tabbar-h: 64px;
--cmo-content-max: 1280px; --cmo-reading-max: 680px;
/* Layers */
--cmo-z-base: 0; --cmo-z-sticky: 100; --cmo-z-dropdown: 200; --cmo-z-overlay: 300;
--cmo-z-dialog: 400; --cmo-z-toast: 500; --cmo-z-tooltip: 600;
/* Motion */
--cmo-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--cmo-dur-micro: 120ms; --cmo-dur-standard: 240ms; --cmo-dur-considered: 400ms; --cmo-dur-ambient: 1600ms;
}
/* ---------- 2. Tokens: dark ---------- */
[data-theme="dark"] {
color-scheme: dark;
--cmo-color-bg: var(--cmo-grey-950);
--cmo-color-surface: var(--cmo-grey-900);
--cmo-color-surface-raised: var(--cmo-grey-850);
--cmo-color-field: var(--cmo-grey-900);
--cmo-color-surface-sunken: var(--cmo-grey-950);
--cmo-color-line: var(--cmo-grey-800);
--cmo-color-line-strong: var(--cmo-grey-600);
--cmo-color-text: var(--cmo-grey-200);
--cmo-color-text-muted: var(--cmo-grey-500);
--cmo-color-text-placeholder: var(--cmo-grey-500);
--cmo-color-text-disabled: var(--cmo-grey-700);
--cmo-color-inverse: var(--cmo-grey-1000);
--cmo-color-on-inverse: var(--cmo-grey-200);
--cmo-color-on-inverse-muted: var(--cmo-grey-500);
--cmo-color-inverse-line: var(--cmo-grey-850);
--cmo-color-selected-bg: var(--cmo-grey-200);
--cmo-color-selected-fg: var(--cmo-grey-900);
--cmo-color-accent: var(--cmo-blue-300);
--cmo-color-accent-hover: var(--cmo-blue-200);
--cmo-color-accent-active: var(--cmo-blue-100);
--cmo-color-on-accent: var(--cmo-grey-950);
--cmo-color-accent-tint: var(--cmo-blue-900);
--cmo-color-link: var(--cmo-blue-300);
--cmo-color-link-hover: var(--cmo-blue-200);
--cmo-color-focus: var(--cmo-blue-300);
--cmo-color-success: #81C995;
--cmo-color-success-tint: #1B3324;
--cmo-color-success-fill: #81C995;
--cmo-color-on-success: var(--cmo-grey-950);
--cmo-color-warning: #FDD663;
--cmo-color-warning-tint: #3A3112;
--cmo-color-warning-fill: #FCC934;
--cmo-color-on-warning: var(--cmo-grey-950);
--cmo-color-danger: #F28B82;
--cmo-color-danger-tint: #3E1F1D;
--cmo-color-danger-fill: #F28B82;
--cmo-color-on-danger: var(--cmo-grey-950);
--cmo-color-info: var(--cmo-blue-300);
--cmo-color-info-tint: var(--cmo-blue-900);
--cmo-color-info-fill: var(--cmo-blue-300);
--cmo-color-on-info: var(--cmo-grey-950);
--cmo-data-blue: var(--cmo-blue-300); --cmo-data-blue-tint: var(--cmo-blue-900); --cmo-data-blue-ink: #8AB4F8;
--cmo-data-coral: #FF8A80; --cmo-data-coral-tint: #40211F; --cmo-data-coral-ink: #FF8A80;
--cmo-data-amber: #FCC934; --cmo-data-amber-tint: #3A3112; --cmo-data-amber-ink: #FCC934;
--cmo-data-violet: #B69CFF; --cmo-data-violet-tint: #2C2347; --cmo-data-violet-ink: #B69CFF;
--cmo-data-green: #6DD58C; --cmo-data-green-tint: #1B3324; --cmo-data-green-ink: #6DD58C;
--cmo-data-cyan: #5CD0E0; --cmo-data-cyan-tint: #163A40; --cmo-data-cyan-ink: #5CD0E0;
--cmo-stage-engaged: #C2A8FF;
--cmo-stage-engaged-tint: #2C2347;
--cmo-stage-lost: var(--cmo-grey-500);
--cmo-stage-lost-tint: var(--cmo-grey-850);
--cmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--cmo-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--cmo-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--cmo-color-bg: var(--cmo-grey-950);
--cmo-color-surface: var(--cmo-grey-900);
--cmo-color-surface-raised: var(--cmo-grey-850);
--cmo-color-field: var(--cmo-grey-900);
--cmo-color-surface-sunken: var(--cmo-grey-950);
--cmo-color-line: var(--cmo-grey-800);
--cmo-color-line-strong: var(--cmo-grey-600);
--cmo-color-text: var(--cmo-grey-200);
--cmo-color-text-muted: var(--cmo-grey-500);
--cmo-color-text-placeholder: var(--cmo-grey-500);
--cmo-color-text-disabled: var(--cmo-grey-700);
--cmo-color-inverse: var(--cmo-grey-1000);
--cmo-color-on-inverse: var(--cmo-grey-200);
--cmo-color-on-inverse-muted: var(--cmo-grey-500);
--cmo-color-inverse-line: var(--cmo-grey-850);
--cmo-color-selected-bg: var(--cmo-grey-200);
--cmo-color-selected-fg: var(--cmo-grey-900);
--cmo-color-accent: var(--cmo-blue-300);
--cmo-color-accent-hover: var(--cmo-blue-200);
--cmo-color-accent-active: var(--cmo-blue-100);
--cmo-color-on-accent: var(--cmo-grey-950);
--cmo-color-accent-tint: var(--cmo-blue-900);
--cmo-color-link: var(--cmo-blue-300);
--cmo-color-link-hover: var(--cmo-blue-200);
--cmo-color-focus: var(--cmo-blue-300);
--cmo-color-success: #81C995;
--cmo-color-success-tint: #1B3324;
--cmo-color-success-fill: #81C995;
--cmo-color-on-success: var(--cmo-grey-950);
--cmo-color-warning: #FDD663;
--cmo-color-warning-tint: #3A3112;
--cmo-color-warning-fill: #FCC934;
--cmo-color-on-warning: var(--cmo-grey-950);
--cmo-color-danger: #F28B82;
--cmo-color-danger-tint: #3E1F1D;
--cmo-color-danger-fill: #F28B82;
--cmo-color-on-danger: var(--cmo-grey-950);
--cmo-color-info: var(--cmo-blue-300);
--cmo-color-info-tint: var(--cmo-blue-900);
--cmo-color-info-fill: var(--cmo-blue-300);
--cmo-color-on-info: var(--cmo-grey-950);
--cmo-data-blue: var(--cmo-blue-300); --cmo-data-blue-tint: var(--cmo-blue-900); --cmo-data-blue-ink: #8AB4F8;
--cmo-data-coral: #FF8A80; --cmo-data-coral-tint: #40211F; --cmo-data-coral-ink: #FF8A80;
--cmo-data-amber: #FCC934; --cmo-data-amber-tint: #3A3112; --cmo-data-amber-ink: #FCC934;
--cmo-data-violet: #B69CFF; --cmo-data-violet-tint: #2C2347; --cmo-data-violet-ink: #B69CFF;
--cmo-data-green: #6DD58C; --cmo-data-green-tint: #1B3324; --cmo-data-green-ink: #6DD58C;
--cmo-data-cyan: #5CD0E0; --cmo-data-cyan-tint: #163A40; --cmo-data-cyan-ink: #5CD0E0;
--cmo-stage-engaged: #C2A8FF;
--cmo-stage-engaged-tint: #2C2347;
--cmo-stage-lost: var(--cmo-grey-500);
--cmo-stage-lost-tint: var(--cmo-grey-850);
--cmo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
--cmo-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
--cmo-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5);
}
}
/* ---------- 3. Base ---------- */
.cmo-app, .cmo-app *, .cmo-app *::before, .cmo-app *::after { box-sizing: border-box; }
.cmo-app {
container: cmo / inline-size;
font-family: var(--cmo-font-sans);
font-size: var(--cmo-text-body);
line-height: var(--cmo-lh-body);
color: var(--cmo-color-text);
background: var(--cmo-color-bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.cmo-app :focus-visible { outline: 2px solid var(--cmo-color-focus); outline-offset: 2px; }
.cmo-app ::selection { background: var(--cmo-color-accent-tint); color: var(--cmo-color-text); }
/* Resets use :where() (zero specificity) so a component class always wins, e.g. white text on .cmo-btn--primary. */
:where(.cmo-app) :where(img, svg, video) { display: block; max-width: 100%; }
:where(.cmo-app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
/* ---------- 4. Typography ---------- */
.cmo-display, .cmo-h1, .cmo-h2, .cmo-h3, .cmo-h4 { margin: 0; font-weight: 600; color: var(--cmo-color-text); text-wrap: balance; }
.cmo-display, .cmo-h1 { font-weight: 500; }
.cmo-display { font-size: var(--cmo-text-display); line-height: var(--cmo-lh-display); letter-spacing: -0.04em; }
.cmo-h1 { font-size: var(--cmo-text-h1); line-height: var(--cmo-lh-h1); letter-spacing: var(--cmo-tracking-tight); }
.cmo-h2 { font-size: var(--cmo-text-h2); line-height: var(--cmo-lh-h2); letter-spacing: -0.02em; }
.cmo-h3 { font-size: var(--cmo-text-h3); line-height: var(--cmo-lh-h3); letter-spacing: var(--cmo-tracking-snug); }
.cmo-h4 { font-size: var(--cmo-text-h4); line-height: var(--cmo-lh-h4); }
.cmo-body-lg { font-size: var(--cmo-text-body-lg); line-height: var(--cmo-lh-body-lg); }
.cmo-body { font-size: var(--cmo-text-body); line-height: var(--cmo-lh-body); }
.cmo-ui { font-size: var(--cmo-text-ui); line-height: var(--cmo-lh-ui); }
.cmo-caption { font-size: var(--cmo-text-caption); line-height: var(--cmo-lh-caption); color: var(--cmo-color-text-muted); }
.cmo-overline { font-family: var(--cmo-font-mono); font-size: var(--cmo-text-overline); letter-spacing: var(--cmo-tracking-overline); text-transform: uppercase; color: var(--cmo-color-text-muted); }
.cmo-mono, .cmo-num { font-family: var(--cmo-font-mono); font-variant-numeric: tabular-nums; }
.cmo-serif-accent { font-family: var(--cmo-font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.cmo-muted { color: var(--cmo-color-text-muted); }
.cmo-prose { max-width: var(--cmo-reading-max); }
.cmo-prose p { margin: 0 0 var(--cmo-space-4); }
.cmo-link { color: var(--cmo-color-link); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cmo-link:hover { color: var(--cmo-color-link-hover); text-decoration-thickness: 2px; }
.cmo-kbd { font-family: var(--cmo-font-mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--cmo-color-line); border-bottom-width: 2px; border-radius: var(--cmo-radius-xs); background: var(--cmo-color-surface-raised); }
.cmo-code { font-family: var(--cmo-font-mono); font-size: 0.9em; padding: 1px 6px; border-radius: var(--cmo-radius-xs); background: var(--cmo-color-surface-sunken); }
@container cmo (max-width: 1023px) {
.cmo-display { font-size: 56px; } .cmo-h1 { font-size: 40px; } .cmo-h2 { font-size: 28px; } .cmo-h3 { font-size: 22px; }
}
@container cmo (max-width: 639px) {
.cmo-display { font-size: 40px; line-height: 1.04; } .cmo-h1 { font-size: 32px; } .cmo-h2 { font-size: 24px; } .cmo-h3 { font-size: 20px; }
.cmo-body-lg { font-size: 17px; }
}
/* ---------- 5. Layout ---------- */
.cmo-container { width: 100%; max-width: var(--cmo-content-max); margin-inline: auto; padding-inline: var(--cmo-space-12); }
.cmo-stack { display: flex; flex-direction: column; gap: var(--cmo-gap, var(--cmo-space-4)); }
.cmo-row { display: flex; align-items: center; gap: var(--cmo-gap, var(--cmo-space-3)); flex-wrap: wrap; }
.cmo-spacer { flex: 1 1 auto; }
.cmo-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--cmo-space-6); }
.cmo-grid-auto { display: grid; grid-template-columns: repeat(var(--cmo-cols, 4), minmax(0, 1fr)); gap: var(--cmo-gap, var(--cmo-space-4)); }
.cmo-divider { border: 0; border-top: 1px solid var(--cmo-color-line); margin: var(--cmo-space-4) 0; }
.cmo-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@container cmo (max-width: 1023px) {
.cmo-container { padding-inline: var(--cmo-space-8); }
.cmo-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--cmo-space-6); }
.cmo-grid-auto { grid-template-columns: repeat(var(--cmo-cols-tablet, 2), minmax(0, 1fr)); }
}
@container cmo (max-width: 639px) {
.cmo-container { padding-inline: var(--cmo-space-4); }
.cmo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cmo-space-4); }
.cmo-grid-auto { grid-template-columns: repeat(var(--cmo-cols-mobile, 1), minmax(0, 1fr)); }
}
/* ---------- 6. Buttons ---------- */
.cmo-btn {
--_h: var(--cmo-control-md);
display: inline-flex; align-items: center; justify-content: center; gap: var(--cmo-space-2);
min-height: var(--_h); min-width: var(--cmo-touch-min); padding: 0 var(--cmo-space-6);
border-radius: var(--cmo-radius-pill); border: 1px solid transparent;
font-family: var(--cmo-font-sans); font-size: 15px; font-weight: 600; line-height: 1; white-space: nowrap;
cursor: pointer; text-decoration: none; user-select: none;
transition: background-color var(--cmo-dur-micro) var(--cmo-ease), border-color var(--cmo-dur-micro) var(--cmo-ease), color var(--cmo-dur-micro) var(--cmo-ease), transform var(--cmo-dur-micro) var(--cmo-ease);
}
.cmo-btn:active:not(:disabled) { transform: translateY(1px); }
.cmo-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.cmo-btn--sm { --_h: var(--cmo-control-sm); padding: 0 var(--cmo-space-4); font-size: 13px; }
.cmo-btn--lg { --_h: var(--cmo-control-lg); padding: 0 var(--cmo-space-8); font-size: 16px; }
.cmo-btn--block { width: 100%; }
.cmo-btn--primary { background: var(--cmo-color-accent); color: var(--cmo-color-on-accent); }
.cmo-btn--primary:hover { background: var(--cmo-color-accent-hover); }
.cmo-btn--primary:active { background: var(--cmo-color-accent-active); }
.cmo-btn--secondary { background: var(--cmo-color-selected-bg); color: var(--cmo-color-selected-fg); }
.cmo-btn--secondary:hover { opacity: 0.9; }
.cmo-btn--outline { background: var(--cmo-color-surface-raised); border-color: var(--cmo-color-line); color: var(--cmo-color-link); }
.cmo-btn--outline:hover { background: var(--cmo-color-accent-tint); border-color: var(--cmo-color-accent-tint); }
.cmo-btn--ghost { background: transparent; color: var(--cmo-color-text); }
.cmo-btn--ghost:hover { background: color-mix(in srgb, var(--cmo-color-text) 8%, transparent); }
.cmo-btn--danger { background: var(--cmo-color-danger-fill); color: var(--cmo-color-on-danger); }
.cmo-btn--danger:hover { filter: brightness(1.08); }
.cmo-btn--link { background: none; border: 0; padding: 0; min-width: 0; min-height: var(--cmo-touch-min); color: var(--cmo-color-link); }
.cmo-btn--icon { padding: 0; width: var(--_h); }
.cmo-btn:disabled, .cmo-btn[aria-disabled="true"] { background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text-disabled); border-color: transparent; cursor: not-allowed; transform: none; filter: none; opacity: 1; }
.cmo-btn[aria-busy="true"] { position: relative; color: transparent !important; pointer-events: none; }
.cmo-btn[aria-busy="true"]::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cmo-color-on-accent); border-right-color: transparent; animation: cmo-spin 700ms linear infinite; }
.cmo-btn--outline[aria-busy="true"]::after, .cmo-btn--ghost[aria-busy="true"]::after { border-color: var(--cmo-color-text); border-right-color: transparent; }
.cmo-btn__cost { font-family: var(--cmo-font-mono); font-size: 12px; font-weight: 500; padding: 2px 6px; border-radius: var(--cmo-radius-xs); background: color-mix(in srgb, currentColor 14%, transparent); }
.cmo-btn-group { display: inline-flex; gap: var(--cmo-space-2); flex-wrap: wrap; }
@container cmo (max-width: 639px) {
.cmo-btn-group--stack-mobile { display: flex; flex-direction: column-reverse; width: 100%; }
.cmo-btn-group--stack-mobile .cmo-btn { width: 100%; }
}
/* ---------- 7. Form fields ---------- */
.cmo-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cmo-label { font-size: 14px; font-weight: 600; color: var(--cmo-color-text); display: flex; gap: 6px; align-items: baseline; }
.cmo-label__optional { font-weight: 400; color: var(--cmo-color-text-muted); font-size: 13px; }
.cmo-label__required { color: var(--cmo-color-danger); }
.cmo-help { font-size: 13px; line-height: 1.4; color: var(--cmo-color-text-muted); }
.cmo-error-text { font-size: 13px; line-height: 1.4; color: var(--cmo-color-danger); display: flex; gap: 6px; align-items: flex-start; font-weight: 500; }
.cmo-success-text { font-size: 13px; color: var(--cmo-color-success); font-weight: 500; }
.cmo-input, .cmo-select, .cmo-textarea {
width: 100%; min-height: var(--cmo-control-md);
padding: 0 var(--cmo-space-3);
border: 1px solid var(--cmo-color-line-strong); border-radius: var(--cmo-radius-md);
background: var(--cmo-color-field); color: var(--cmo-color-text);
font-family: var(--cmo-font-sans); font-size: 15px; line-height: 1.4;
transition: border-color var(--cmo-dur-micro) var(--cmo-ease), box-shadow var(--cmo-dur-micro) var(--cmo-ease);
appearance: none; -webkit-appearance: none;
}
.cmo-input::placeholder, .cmo-textarea::placeholder { color: var(--cmo-color-text-placeholder); opacity: 1; }
.cmo-input:hover, .cmo-select:hover, .cmo-textarea:hover { border-color: var(--cmo-color-text-muted); }
.cmo-input:focus, .cmo-select:focus, .cmo-textarea:focus { outline: none; border-color: var(--cmo-color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cmo-color-accent) 35%, transparent); }
.cmo-input[aria-invalid="true"], .cmo-select[aria-invalid="true"], .cmo-textarea[aria-invalid="true"] { border-color: var(--cmo-color-danger-fill); box-shadow: 0 0 0 1px var(--cmo-color-danger-fill); }
.cmo-input[data-state="success"], .cmo-select[data-state="success"] { border-color: var(--cmo-color-success-fill); box-shadow: 0 0 0 1px var(--cmo-color-success-fill); }
.cmo-input[data-state="warning"] { border-color: var(--cmo-color-warning-fill); box-shadow: 0 0 0 1px var(--cmo-color-warning-fill); }
.cmo-input:disabled, .cmo-select:disabled, .cmo-textarea:disabled { background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text-disabled); border-color: var(--cmo-color-line); cursor: not-allowed; }
.cmo-input[readonly] { background: transparent; border-style: dashed; }
.cmo-input--sm { min-height: var(--cmo-control-sm); font-size: 14px; }
.cmo-textarea { padding: var(--cmo-space-3); min-height: 112px; resize: vertical; line-height: 1.5; }
.cmo-select { padding-right: 40px; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235F6368' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; }
.cmo-input-group { position: relative; display: flex; align-items: stretch; }
.cmo-input-group > .cmo-input { flex: 1; }
.cmo-input-group__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--cmo-color-text-muted); pointer-events: none; }
.cmo-input-group__icon + .cmo-input { padding-left: 40px; }
.cmo-input-group__action { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); }
.cmo-input-group__addon { display: flex; align-items: center; padding: 0 var(--cmo-space-3); border: 1px solid var(--cmo-color-line-strong); background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text-muted); font-size: 14px; }
.cmo-input-group__addon:first-child { border-right: 0; border-radius: var(--cmo-radius-md) 0 0 var(--cmo-radius-md); }
.cmo-input-group__addon:first-child + .cmo-input { border-radius: 0 var(--cmo-radius-md) var(--cmo-radius-md) 0; }
.cmo-counter { font-family: var(--cmo-font-mono); font-size: 12px; color: var(--cmo-color-text-muted); align-self: flex-end; }
.cmo-form { display: flex; flex-direction: column; gap: var(--cmo-space-5); }
.cmo-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cmo-space-5) var(--cmo-space-4); }
.cmo-form-grid > .cmo-field--full { grid-column: 1 / -1; }
.cmo-fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cmo-space-3); }
.cmo-fieldset > legend { padding: 0; margin-bottom: var(--cmo-space-2); font-size: 14px; font-weight: 600; }
@container cmo (max-width: 639px) {
.cmo-form-grid { grid-template-columns: minmax(0, 1fr); }
/* iOS zooms into inputs under 16px: keep 16px on phones */
.cmo-input, .cmo-select, .cmo-textarea, .cmo-combobox__input { font-size: 16px; }
}
/* Checkbox, radio, switch */
.cmo-check { display: inline-flex; align-items: flex-start; gap: var(--cmo-space-3); min-height: var(--cmo-touch-min); padding: 10px 0; cursor: pointer; font-size: 15px; line-height: 1.4; }
.cmo-check input { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--cmo-color-line-strong); background: var(--cmo-color-field); border-radius: 5px; display: grid; place-content: center; cursor: pointer; transition: background-color var(--cmo-dur-micro) var(--cmo-ease), border-color var(--cmo-dur-micro) var(--cmo-ease); }
.cmo-check input[type="radio"] { border-radius: 50%; }
.cmo-check input:checked { background: var(--cmo-color-accent); border-color: var(--cmo-color-accent); }
.cmo-check input[type="checkbox"]:checked::after { content: ""; width: 11px; height: 6px; border-left: 2px solid var(--cmo-color-on-accent); border-bottom: 2px solid var(--cmo-color-on-accent); transform: translateY(-1px) rotate(-45deg); }
.cmo-check input[type="checkbox"]:indeterminate { background: var(--cmo-color-accent); border-color: var(--cmo-color-accent); }
.cmo-check input[type="checkbox"]:indeterminate::after { content: ""; width: 10px; height: 2px; background: var(--cmo-color-on-accent); }
.cmo-check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cmo-color-on-accent); }
.cmo-check input:focus-visible { outline: 2px solid var(--cmo-color-focus); outline-offset: 2px; }
.cmo-check input:disabled, .cmo-check input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.cmo-check__hint { display: block; font-size: 13px; color: var(--cmo-color-text-muted); }
.cmo-switch { display: inline-flex; align-items: center; gap: var(--cmo-space-3); min-height: var(--cmo-touch-min); cursor: pointer; font-size: 15px; }
.cmo-switch input { appearance: none; -webkit-appearance: none; margin: 0; width: 44px; height: 26px; border-radius: 999px; background: var(--cmo-color-line-strong); position: relative; cursor: pointer; flex-shrink: 0; transition: background-color var(--cmo-dur-standard) var(--cmo-ease); }
.cmo-switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; box-shadow: var(--cmo-shadow-sm); transition: transform var(--cmo-dur-standard) var(--cmo-ease); }
.cmo-switch input:checked { background: var(--cmo-color-accent); }
.cmo-switch input:checked::after { transform: translateX(18px); background: var(--cmo-color-on-accent); }
.cmo-switch input:focus-visible { outline: 2px solid var(--cmo-color-focus); outline-offset: 2px; }
.cmo-switch input:disabled { opacity: 0.5; cursor: not-allowed; }
/* Range */
.cmo-range { width: 100%; accent-color: var(--cmo-color-accent); height: var(--cmo-touch-min); }
/* Combobox (ARIA 1.2: input[role=combobox] + ul[role=listbox]) */
.cmo-combobox { position: relative; }
.cmo-combobox__input { padding-right: 40px; }
.cmo-combobox__toggle { position: absolute; right: 2px; top: 2px; height: calc(var(--cmo-control-md) - 4px); width: 40px; border: 0; background: transparent; border-radius: 8px; color: var(--cmo-color-text-muted); cursor: pointer; display: grid; place-items: center; }
.cmo-listbox { position: absolute; z-index: var(--cmo-z-dropdown); left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 264px; overflow-y: auto; background: var(--cmo-color-surface-raised); border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-md); box-shadow: var(--cmo-shadow-md); }
.cmo-listbox[hidden] { display: none; }
.cmo-option { display: flex; align-items: center; gap: var(--cmo-space-2); min-height: 40px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 15px; }
.cmo-option__meta { margin-left: auto; font-size: 12px; color: var(--cmo-color-text-muted); font-family: var(--cmo-font-mono); }
.cmo-option[aria-selected="true"] { font-weight: 600; }
.cmo-option[aria-selected="true"]::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cmo-color-accent); }
.cmo-option.is-active, .cmo-option:hover { background: var(--cmo-color-accent-tint); }
.cmo-listbox__empty { padding: 12px 10px; font-size: 14px; color: var(--cmo-color-text-muted); }
.cmo-option mark { background: none; color: inherit; text-decoration: underline; text-underline-offset: 2px; font-weight: 700; }
/* File upload */
.cmo-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--cmo-space-2); text-align: center; padding: var(--cmo-space-8) var(--cmo-space-4); border: 1.5px dashed var(--cmo-color-line-strong); border-radius: var(--cmo-radius-lg); background: var(--cmo-color-field); color: var(--cmo-color-text-muted); font-size: 14px; cursor: pointer; }
.cmo-dropzone:hover, .cmo-dropzone.is-over { border-color: var(--cmo-color-accent); background: var(--cmo-color-accent-tint); }
.cmo-dropzone strong { color: var(--cmo-color-text); }
/* ---------- 8. Badges, chips, avatars ---------- */
.cmo-badge { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--cmo-radius-pill); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }
.cmo-badge--dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cmo-badge--success { background: var(--cmo-color-success-tint); color: var(--cmo-color-success); }
.cmo-badge--warning { background: var(--cmo-color-warning-tint); color: var(--cmo-color-warning); }
.cmo-badge--danger { background: var(--cmo-color-danger-tint); color: var(--cmo-color-danger); }
.cmo-badge--info { background: var(--cmo-color-info-tint); color: var(--cmo-color-info); }
.cmo-badge--accent { background: var(--cmo-color-accent-tint); color: var(--cmo-color-link); }
.cmo-badge--solid-success { background: var(--cmo-color-success-fill); color: var(--cmo-color-on-success); }
.cmo-badge--solid-warning { background: var(--cmo-color-warning-fill); color: var(--cmo-color-on-warning); }
.cmo-badge--solid-danger { background: var(--cmo-color-danger-fill); color: var(--cmo-color-on-danger); }
.cmo-badge--solid-info { background: var(--cmo-color-info-fill); color: var(--cmo-color-on-info); }
.cmo-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cmo-color-danger-fill); color: var(--cmo-color-on-danger); font-family: var(--cmo-font-mono); font-size: 11px; font-weight: 500; line-height: 1; }
.cmo-badge--live { background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse); border-radius: var(--cmo-radius-pill); box-shadow: none; }
.cmo-badge--solid-success, .cmo-badge--solid-warning, .cmo-badge--solid-danger, .cmo-badge--solid-info { box-shadow: none; }
.cmo-badge--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cmo-color-accent); animation: cmo-pulse var(--cmo-dur-ambient) ease-in-out infinite; }
.cmo-stage { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--cmo-radius-pill); font-size: 13px; font-weight: 600; white-space: nowrap; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }
.cmo-stage--new { background: var(--cmo-stage-new-tint); color: var(--cmo-stage-new); }
.cmo-stage--engaged { background: var(--cmo-stage-engaged-tint); color: var(--cmo-stage-engaged); }
.cmo-stage--nurturing { background: var(--cmo-stage-nurturing-tint); color: var(--cmo-stage-nurturing); }
.cmo-stage--customer { background: var(--cmo-stage-customer-tint); color: var(--cmo-stage-customer); }
.cmo-stage--lost { background: var(--cmo-stage-lost-tint); color: var(--cmo-stage-lost); }
.cmo-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: var(--cmo-radius-pill); border: 1px solid var(--cmo-color-line-strong); background: transparent; font-size: 14px; font-weight: 500; color: var(--cmo-color-text); cursor: pointer; }
.cmo-chip[aria-pressed="true"], .cmo-chip.is-selected { background: var(--cmo-color-selected-bg); border-color: var(--cmo-color-selected-bg); color: var(--cmo-color-selected-fg); }
.cmo-chip__remove { display: grid; place-items: center; width: 20px; height: 20px; margin-right: -6px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.cmo-chip__remove:hover { background: color-mix(in srgb, currentColor 15%, transparent); }
.cmo-avatar { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text); font-size: 14px; font-weight: 600; overflow: hidden; flex-shrink: 0; }
.cmo-avatar--sm { width: 28px; height: 28px; font-size: 11px; }
.cmo-avatar--lg { width: 56px; height: 56px; font-size: 18px; }
.cmo-avatar img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- 9. Cards ---------- */
.cmo-card { background: var(--cmo-color-surface); border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-lg); padding: var(--cmo-space-5); display: flex; flex-direction: column; gap: var(--cmo-space-3); min-width: 0; }
.cmo-card--raised { background: var(--cmo-color-surface-raised); box-shadow: var(--cmo-shadow-sm); }
.cmo-card--inverse { background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse); border-color: var(--cmo-color-inverse-line); }
.cmo-card--inverse .cmo-muted, .cmo-card--inverse .cmo-caption { color: var(--cmo-color-on-inverse-muted); }
.cmo-card--interactive { cursor: pointer; transition: border-color var(--cmo-dur-micro) var(--cmo-ease), transform var(--cmo-dur-micro) var(--cmo-ease); text-decoration: none; color: inherit; }
.cmo-card--interactive:hover { border-color: var(--cmo-color-line-strong); }
.cmo-card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--cmo-space-3); }
.cmo-card__title { margin: 0; font-size: 17px; font-weight: 600; }
.cmo-stat { display: flex; flex-direction: column; gap: 4px; }
.cmo-stat__label { font-size: 13px; color: var(--cmo-color-text-muted); }
.cmo-stat__value { font-family: var(--cmo-font-mono); font-size: 28px; font-weight: 500; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cmo-stat__delta { font-family: var(--cmo-font-mono); font-size: 13px; color: var(--cmo-color-success); }
.cmo-stat__delta--down { color: var(--cmo-color-danger); }
/* ---------- 10. AI components ---------- */
.cmo-signal { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cmo-color-accent); flex-shrink: 0; }
.cmo-signal--working { animation: cmo-pulse var(--cmo-dur-ambient) ease-in-out infinite; }
.cmo-ai-card { background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse); border: 1px solid var(--cmo-color-inverse-line); border-radius: var(--cmo-radius-xl); padding: var(--cmo-space-6); display: flex; flex-direction: column; gap: var(--cmo-space-4); }
.cmo-ai-card__meta { display: flex; align-items: center; gap: var(--cmo-space-2); font-size: 13px; color: var(--cmo-color-on-inverse-muted); }
.cmo-ai-card__body { font-size: 20px; line-height: 1.35; font-weight: 500; margin: 0; }
.cmo-ai-card .cmo-btn--outline, .cmo-card--inverse .cmo-btn--outline { background: transparent; box-shadow: none; color: var(--cmo-color-on-inverse); border-color: color-mix(in srgb, var(--cmo-color-on-inverse) 30%, transparent); }
.cmo-ai-card .cmo-btn--outline:hover { background: color-mix(in srgb, var(--cmo-color-on-inverse) 8%, transparent); }
.cmo-why { background: var(--cmo-color-field); border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-md); padding: var(--cmo-space-3) var(--cmo-space-4); font-size: 14px; line-height: 1.5; color: var(--cmo-color-text-muted); }
.cmo-why strong { color: var(--cmo-color-text); }
.cmo-ai-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--cmo-space-2); }
.cmo-ai-steps li { display: flex; align-items: center; gap: var(--cmo-space-3); font-size: 14px; color: var(--cmo-color-text-muted); }
.cmo-ai-steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--cmo-color-line-strong); flex-shrink: 0; box-sizing: border-box; }
.cmo-ai-steps li.is-done::before { border: 0; background: var(--cmo-color-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cmo-ai-steps li.is-current { color: var(--cmo-color-text); font-weight: 600; }
.cmo-ai-steps li.is-current::before { border: 2px solid var(--cmo-color-accent); background: radial-gradient(circle, var(--cmo-color-accent) 0 3px, transparent 4px); }
.cmo-ghost-text { color: var(--cmo-color-text-placeholder); }
.cmo-confidence { display: inline-flex; align-items: center; gap: var(--cmo-space-2); font-size: 13px; color: var(--cmo-color-text-muted); }
.cmo-confidence__bars { display: inline-flex; gap: 2px; }
.cmo-confidence__bars i { width: 4px; height: 12px; border-radius: 1px; background: var(--cmo-color-line); }
.cmo-confidence__bars i.on { background: var(--cmo-color-accent); }
/* ---------- 11. Tables ---------- */
.cmo-table-wrap { border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-lg); overflow: auto; background: var(--cmo-color-surface); }
.cmo-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmo-table th { position: sticky; top: 0; z-index: 1; text-align: left; font-family: var(--cmo-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cmo-color-text-muted); background: var(--cmo-color-surface-sunken); padding: 10px 16px; white-space: nowrap; }
.cmo-table th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.cmo-table th[aria-sort] button:focus-visible { outline: 2px solid var(--cmo-color-focus); outline-offset: 2px; border-radius: 2px; }
.cmo-table td { padding: 12px 16px; border-top: 1px solid var(--cmo-color-line); vertical-align: middle; }
.cmo-table tbody tr:hover { background: color-mix(in srgb, var(--cmo-color-accent) 6%, transparent); }
.cmo-table tbody tr[aria-selected="true"] { background: var(--cmo-color-accent-tint); }
.cmo-table .is-num { text-align: right; font-family: var(--cmo-font-mono); font-variant-numeric: tabular-nums; }
.cmo-table__primary { font-weight: 600; }
@container cmo (max-width: 639px) {
.cmo-table--stack thead { display: none; }
.cmo-table--stack, .cmo-table--stack tbody, .cmo-table--stack tr, .cmo-table--stack td { display: block; width: 100%; }
.cmo-table--stack tr { padding: 12px 16px; border-top: 1px solid var(--cmo-color-line); }
.cmo-table--stack tr:first-child { border-top: 0; }
.cmo-table--stack td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
.cmo-table--stack td::before { content: attr(data-label); font-size: 13px; color: var(--cmo-color-text-muted); text-align: left; }
.cmo-table--stack td.cmo-table__primary { font-size: 16px; padding-bottom: 6px; }
.cmo-table--stack td.cmo-table__primary::before { content: none; }
.cmo-table--stack .is-num { font-family: var(--cmo-font-mono); }
}
/* Lists */
.cmo-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-lg); background: var(--cmo-color-surface); overflow: hidden; }
.cmo-list__item { display: flex; align-items: center; gap: var(--cmo-space-3); min-height: 56px; padding: 10px 16px; border-top: 1px solid var(--cmo-color-line); }
.cmo-list__item:first-child { border-top: 0; }
.cmo-list__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cmo-list__title { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmo-list__sub { font-size: 13px; color: var(--cmo-color-text-muted); }
a.cmo-list__item, button.cmo-list__item { color: inherit; text-decoration: none; width: 100%; background: none; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; font: inherit; cursor: pointer; }
a.cmo-list__item:hover, button.cmo-list__item:hover { background: color-mix(in srgb, var(--cmo-color-accent) 6%, transparent); }
/* ---------- 12. Navigation ---------- */
.cmo-tabs { display: flex; gap: var(--cmo-space-1); border-bottom: 1px solid var(--cmo-color-line); overflow-x: auto; scrollbar-width: none; }
.cmo-tab { position: relative; min-height: var(--cmo-touch-min); padding: 0 var(--cmo-space-4); border: 0; background: none; font-size: 15px; font-weight: 500; color: var(--cmo-color-text-muted); cursor: pointer; white-space: nowrap; }
.cmo-tab:hover { color: var(--cmo-color-text); }
.cmo-tab[aria-selected="true"] { color: var(--cmo-color-text); font-weight: 600; }
.cmo-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--cmo-color-text); }
.cmo-tab__count { margin-left: 6px; font-family: var(--cmo-font-mono); font-size: 12px; color: var(--cmo-color-text-muted); }
.cmo-segmented { display: inline-flex; padding: 3px; border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-pill); background: var(--cmo-color-surface-sunken); gap: 2px; }
.cmo-segmented button { min-height: 38px; padding: 0 16px; border: 0; border-radius: var(--cmo-radius-pill); background: transparent; font-size: 14px; font-weight: 500; color: var(--cmo-color-text-muted); cursor: pointer; }
.cmo-segmented button[aria-pressed="true"] { background: var(--cmo-color-surface-raised); color: var(--cmo-color-text); font-weight: 600; box-shadow: var(--cmo-shadow-sm); }
.cmo-breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--cmo-color-text-muted); list-style: none; margin: 0; padding: 0; }
.cmo-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--cmo-color-line-strong); }
.cmo-breadcrumb a { color: var(--cmo-color-text-muted); text-decoration: none; }
.cmo-breadcrumb a:hover { color: var(--cmo-color-text); text-decoration: underline; }
.cmo-breadcrumb [aria-current="page"] { color: var(--cmo-color-text); font-weight: 600; }
.cmo-pagination { display: flex; align-items: center; gap: var(--cmo-space-1); flex-wrap: wrap; }
.cmo-pagination button { min-width: 40px; min-height: 40px; border-radius: 8px; border: 1px solid transparent; background: transparent; font-family: var(--cmo-font-mono); font-size: 14px; cursor: pointer; color: var(--cmo-color-text); }
.cmo-pagination button:hover { background: var(--cmo-color-surface); }
.cmo-pagination button[aria-current="page"] { background: var(--cmo-color-selected-bg); color: var(--cmo-color-selected-fg); }
.cmo-pagination__summary { margin-left: auto; font-size: 13px; color: var(--cmo-color-text-muted); }
@container cmo (max-width: 639px) {
.cmo-pagination__pages { display: none; }
.cmo-pagination__summary { margin: 0 auto; }
}
/* App shell: desktop sidebar → tablet rail → mobile bottom tabs */
.cmo-shell { display: grid; grid-template-columns: var(--cmo-sidebar-w) minmax(0, 1fr); min-height: 100%; background: var(--cmo-color-bg); }
.cmo-sidebar { background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse-muted); padding: var(--cmo-space-5) var(--cmo-space-3); display: flex; flex-direction: column; gap: 2px; }
.cmo-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 0 10px var(--cmo-space-5); color: var(--cmo-color-on-inverse); font-weight: 700; font-size: 17px; letter-spacing: -0.02em; }
.cmo-nav-item { display: flex; align-items: center; gap: 12px; min-height: var(--cmo-touch-min); padding: 0 12px; border-radius: 10px; color: inherit; text-decoration: none; font-size: 14px; font-weight: 500; }
.cmo-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.cmo-nav-item:hover { background: color-mix(in srgb, var(--cmo-color-on-inverse) 8%, transparent); color: var(--cmo-color-on-inverse); }
.cmo-nav-item[aria-current="page"] { background: color-mix(in srgb, var(--cmo-color-on-inverse) 12%, transparent); color: var(--cmo-color-on-inverse); font-weight: 600; }
.cmo-nav-item__badge { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: var(--cmo-color-accent); }
.cmo-main { min-width: 0; display: flex; flex-direction: column; }
.cmo-topbar { position: sticky; top: 0; z-index: var(--cmo-z-sticky); display: flex; align-items: center; gap: var(--cmo-space-3); min-height: var(--cmo-topbar-h); padding: 0 var(--cmo-space-8); background: color-mix(in srgb, var(--cmo-color-bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cmo-color-line); }
.cmo-topbar__title { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.cmo-page { padding: var(--cmo-space-8); display: flex; flex-direction: column; gap: var(--cmo-space-6); width: 100%; max-width: var(--cmo-content-max); }
.cmo-tabbar { display: none; }
.cmo-only-mobile { display: none !important; }
@container cmo (max-width: 1023px) {
.cmo-shell { grid-template-columns: var(--cmo-rail-w) minmax(0, 1fr); }
.cmo-sidebar { padding: var(--cmo-space-4) var(--cmo-space-2); align-items: center; }
.cmo-sidebar__brand span, .cmo-nav-item span { display: none; }
.cmo-sidebar__brand { padding: 0 0 var(--cmo-space-4); }
.cmo-nav-item { width: 48px; justify-content: center; padding: 0; position: relative; }
.cmo-nav-item__badge { position: absolute; top: 8px; right: 8px; }
.cmo-topbar { padding: 0 var(--cmo-space-6); }
.cmo-page { padding: var(--cmo-space-6); }
}
@container cmo (max-width: 639px) {
.cmo-shell { grid-template-columns: minmax(0, 1fr); padding-bottom: calc(var(--cmo-tabbar-h) + env(safe-area-inset-bottom)); }
.cmo-sidebar { display: none; }
.cmo-topbar { padding: 0 var(--cmo-space-4); min-height: 56px; }
.cmo-topbar__title { font-size: 18px; }
.cmo-page { padding: var(--cmo-space-4); gap: var(--cmo-space-4); }
.cmo-only-desktop { display: none !important; }
.cmo-only-mobile { display: initial !important; }
.cmo-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); position: sticky; bottom: 0; z-index: var(--cmo-z-sticky); background: var(--cmo-color-surface-raised); border-top: 1px solid var(--cmo-color-line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.cmo-tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; color: var(--cmo-color-text-muted); text-decoration: none; font-size: 11px; font-weight: 500; border-radius: 10px; }
.cmo-tabbar a svg { width: 22px; height: 22px; }
.cmo-tabbar a[aria-current="page"] { color: var(--cmo-color-text); font-weight: 700; }
}
/* ---------- 13. Overlays ---------- */
.cmo-backdrop { position: fixed; inset: 0; z-index: var(--cmo-z-overlay); background: rgba(12, 14, 13, 0.55); }
.cmo-dialog { z-index: var(--cmo-z-dialog); width: min(560px, calc(100% - 32px)); max-height: calc(100% - 64px); overflow: auto; padding: 0; border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-xl); background: var(--cmo-color-surface-raised); color: var(--cmo-color-text); box-shadow: var(--cmo-shadow-lg); }
dialog.cmo-dialog::backdrop { background: rgba(12, 14, 13, 0.55); }
dialog.cmo-dialog[open] { animation: cmo-rise var(--cmo-dur-standard) var(--cmo-ease); }
.cmo-dialog__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cmo-space-4); padding: var(--cmo-space-6) var(--cmo-space-6) 0; }
.cmo-dialog__title { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.015em; }
.cmo-dialog__body { padding: var(--cmo-space-4) var(--cmo-space-6); font-size: 15px; color: var(--cmo-color-text-muted); }
.cmo-dialog__footer { display: flex; justify-content: flex-end; gap: var(--cmo-space-2); padding: var(--cmo-space-4) var(--cmo-space-6) var(--cmo-space-6); }
.cmo-dialog--static { position: relative; margin: 0 auto; }
@container cmo (max-width: 639px) {
.cmo-dialog { width: 100%; max-width: 100%; border-radius: var(--cmo-radius-xl) var(--cmo-radius-xl) 0 0; margin: auto 0 0; }
.cmo-dialog__footer { flex-direction: column-reverse; }
.cmo-dialog__footer .cmo-btn { width: 100%; }
.cmo-dialog__header::before { content: ""; position: absolute; left: 50%; top: 8px; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 2px; background: var(--cmo-color-line-strong); }
.cmo-dialog__header { position: relative; padding-top: var(--cmo-space-8); }
}
@media (max-width: 639px) {
dialog.cmo-dialog { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: var(--cmo-radius-xl) var(--cmo-radius-xl) 0 0; }
}
.cmo-menu { min-width: 200px; padding: 4px; margin: 0; list-style: none; background: var(--cmo-color-surface-raised); border: 1px solid var(--cmo-color-line); border-radius: var(--cmo-radius-md); box-shadow: var(--cmo-shadow-md); z-index: var(--cmo-z-dropdown); }
.cmo-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; background: none; font-size: 14px; color: var(--cmo-color-text); text-align: left; cursor: pointer; }
.cmo-menu__item:hover, .cmo-menu__item:focus-visible { background: var(--cmo-color-accent-tint); outline: none; }
.cmo-menu__item--danger { color: var(--cmo-color-danger); }
.cmo-menu__sep { height: 1px; margin: 4px 6px; background: var(--cmo-color-line); }
.cmo-tooltip { position: relative; display: inline-flex; }
.cmo-tooltip__bubble { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); z-index: var(--cmo-z-tooltip); padding: 6px 10px; border-radius: 8px; background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse); font-size: 12px; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--cmo-dur-micro) var(--cmo-ease), transform var(--cmo-dur-micro) var(--cmo-ease); }
.cmo-tooltip:hover .cmo-tooltip__bubble, .cmo-tooltip:focus-within .cmo-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ---------- 14. Feedback ---------- */
.cmo-alert { --_fill: var(--cmo-color-info-fill); display: flex; gap: var(--cmo-space-3); align-items: flex-start; padding: var(--cmo-space-4); border-radius: var(--cmo-radius-md); background: var(--cmo-color-info-tint); border: 1px solid color-mix(in srgb, var(--_fill) 45%, transparent); color: var(--cmo-color-text); font-size: 14px; line-height: 1.5; }
.cmo-alert > svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--_fill); }
.cmo-alert__title { font-weight: 600; display: block; }
.cmo-alert__actions { margin-left: auto; display: flex; gap: var(--cmo-space-2); flex-shrink: 0; align-self: center; }
.cmo-alert--success { --_fill: var(--cmo-color-success-fill); background: var(--cmo-color-success-tint); }
.cmo-alert--warning { --_fill: var(--cmo-color-warning-fill); background: var(--cmo-color-warning-tint); }
.cmo-alert--danger { --_fill: var(--cmo-color-danger-fill); background: var(--cmo-color-danger-tint); }
.cmo-alert--credits { --_fill: var(--cmo-color-warning-fill); background: var(--cmo-color-surface); }
.cmo-banner { display: flex; align-items: center; justify-content: center; gap: var(--cmo-space-3); flex-wrap: wrap; min-height: 44px; padding: 8px 16px; font-size: 14px; font-weight: 500; background: var(--cmo-color-warning-fill); color: var(--cmo-color-on-warning); text-align: center; }
.cmo-banner--danger { background: var(--cmo-color-danger-fill); color: var(--cmo-color-on-danger); }
.cmo-banner--info { background: var(--cmo-color-info-fill); color: var(--cmo-color-on-info); }
@container cmo (max-width: 639px) { .cmo-alert { flex-wrap: wrap; } .cmo-alert__actions { margin-left: 32px; } }
.cmo-toast-region { position: fixed; z-index: var(--cmo-z-toast); bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.cmo-toast { --_fill: var(--cmo-color-accent); --_on: var(--cmo-color-on-accent); pointer-events: auto; display: flex; align-items: center; gap: var(--cmo-space-3); min-height: 56px; padding: 10px 10px 10px 12px; border-radius: var(--cmo-radius-md); background: var(--cmo-color-inverse); color: var(--cmo-color-on-inverse); border: 1px solid var(--cmo-color-inverse-line); box-shadow: var(--cmo-shadow-lg); font-size: 14px; animation: cmo-rise var(--cmo-dur-standard) var(--cmo-ease); }
.cmo-toast__icon { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: var(--_fill); color: var(--_on); }
.cmo-toast__icon svg { width: 16px; height: 16px; }
.cmo-toast__title { display: block; font-weight: 600; }
.cmo-toast__sub { display: block; color: var(--cmo-color-on-inverse-muted); font-size: 13px; }
.cmo-toast__close { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--cmo-color-on-inverse-muted); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.cmo-toast__close:hover { background: color-mix(in srgb, var(--cmo-color-on-inverse) 10%, transparent); }
.cmo-toast--success { --_fill: var(--cmo-color-success-fill); --_on: var(--cmo-color-on-success); }
.cmo-toast--warning { --_fill: var(--cmo-color-warning-fill); --_on: var(--cmo-color-on-warning); }
.cmo-toast--danger { --_fill: var(--cmo-color-danger-fill); --_on: var(--cmo-color-on-danger); }
.cmo-toast--info { --_fill: var(--cmo-color-info-fill); --_on: var(--cmo-color-on-info); }
.cmo-toast__msg { flex: 1; }
.cmo-toast .cmo-btn--link { color: color-mix(in srgb, var(--cmo-color-accent) 45%, #FFFFFF); min-height: 36px; padding: 0 8px; }
[data-theme="dark"] .cmo-toast .cmo-btn--link { color: var(--cmo-color-link); }
.cmo-progress { height: 6px; border-radius: 3px; background: var(--cmo-color-line); overflow: hidden; }
.cmo-progress__bar { height: 100%; border-radius: 3px; background: var(--cmo-color-accent); transition: width var(--cmo-dur-considered) var(--cmo-ease); }
.cmo-progress--success .cmo-progress__bar { background: var(--cmo-color-success-fill); }
.cmo-progress--warning .cmo-progress__bar { background: var(--cmo-color-warning-fill); }
.cmo-progress--danger .cmo-progress__bar { background: var(--cmo-color-danger-fill); }
.cmo-progress--indeterminate .cmo-progress__bar { width: 35%; animation: cmo-indeterminate 1.4s var(--cmo-ease) infinite; }
.cmo-progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--cmo-color-text-muted); margin-bottom: 6px; }
.cmo-spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--cmo-color-line); border-top-color: var(--cmo-color-accent); animation: cmo-spin 700ms linear infinite; }
.cmo-skeleton { border-radius: var(--cmo-radius-sm); background: linear-gradient(90deg, var(--cmo-color-surface-sunken) 0%, var(--cmo-color-surface) 50%, var(--cmo-color-surface-sunken) 100%); background-size: 200% 100%; animation: cmo-shimmer 1.4s linear infinite; }
.cmo-steps { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--cmo-space-2); counter-reset: step; }
.cmo-steps li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--cmo-color-text-muted); counter-increment: step; }
.cmo-steps li::before { content: ""; height: 4px; border-radius: 2px; background: var(--cmo-color-line); }
.cmo-steps li.is-done::before, .cmo-steps li.is-current::before { background: var(--cmo-color-accent); }
.cmo-steps li.is-current { color: var(--cmo-color-text); font-weight: 600; }
.cmo-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cmo-timeline li { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: center; min-height: 44px; font-size: 14px; position: relative; }
.cmo-timeline li::before { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px dashed var(--cmo-color-line-strong); box-sizing: border-box; }
.cmo-timeline li.is-done::before { border: 0; background: var(--cmo-color-inverse) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238AB4F8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; }
.cmo-timeline li.is-current::before { border: 2px solid var(--cmo-color-link); background: radial-gradient(circle, var(--cmo-color-link) 0 3px, transparent 4px); }
.cmo-timeline__when { font-family: var(--cmo-font-mono); font-size: 12px; color: var(--cmo-color-text-muted); }
.cmo-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cmo-space-3); padding: var(--cmo-space-12) var(--cmo-space-6); }
.cmo-state__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--cmo-color-surface-sunken); color: var(--cmo-color-text-muted); }
.cmo-state__icon svg { width: 24px; height: 24px; }
.cmo-state__title { margin: 0; font-size: 18px; font-weight: 600; }
.cmo-state__text { margin: 0; max-width: 360px; font-size: 14px; color: var(--cmo-color-text-muted); }
.cmo-accordion { border-top: 1px solid var(--cmo-color-line); }
.cmo-accordion details { border-bottom: 1px solid var(--cmo-color-line); }
.cmo-accordion summary { display: flex; justify-content: space-between; align-items: center; min-height: 52px; cursor: pointer; font-weight: 600; font-size: 15px; list-style: none; }
.cmo-accordion summary::-webkit-details-marker { display: none; }
.cmo-accordion summary::after { content: "+"; font-family: var(--cmo-font-mono); font-size: 18px; color: var(--cmo-color-text-muted); }
.cmo-accordion details[open] summary::after { content: "−"; }
.cmo-accordion__body { padding: 0 0 var(--cmo-space-4); font-size: 14px; color: var(--cmo-color-text-muted); }
/* ---------- 14b. Icon tiles & data colours ---------- */
.cmo-icon-tile { --_c: var(--cmo-data-blue-ink); --_t: var(--cmo-data-blue-tint); display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--cmo-radius-md); background: var(--_t); color: var(--_c); flex-shrink: 0; }
.cmo-icon-tile svg { width: 20px; height: 20px; }
.cmo-icon-tile--sm { width: 32px; height: 32px; border-radius: 8px; } .cmo-icon-tile--sm svg { width: 16px; height: 16px; }
.cmo-icon-tile--lg { width: 52px; height: 52px; border-radius: var(--cmo-radius-lg); } .cmo-icon-tile--lg svg { width: 24px; height: 24px; }
.cmo-icon-tile--coral { --_c: var(--cmo-data-coral-ink); --_t: var(--cmo-data-coral-tint); }
.cmo-icon-tile--amber { --_c: var(--cmo-data-amber-ink); --_t: var(--cmo-data-amber-tint); }
.cmo-icon-tile--violet { --_c: var(--cmo-data-violet-ink); --_t: var(--cmo-data-violet-tint); }
.cmo-icon-tile--green { --_c: var(--cmo-data-green-ink); --_t: var(--cmo-data-green-tint); }
.cmo-icon-tile--cyan { --_c: var(--cmo-data-cyan-ink); --_t: var(--cmo-data-cyan-tint); }
/* Bar chart: */
.cmo-bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 8px; }
.cmo-bars__col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; }
.cmo-bars__col i { display: block; width: 100%; max-width: 36px; height: var(--v, 50%); border-radius: 6px 6px 2px 2px; background: var(--_c, var(--cmo-data-blue)); }
.cmo-bars__col i.is-muted { background: var(--cmo-color-line); }
.cmo-bars__col span { font-family: var(--cmo-font-mono); font-size: 11px; color: var(--cmo-color-text-muted); }
.cmo-stackbar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.cmo-stackbar i { display: block; height: 100%; }
.cmo-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--cmo-color-text-muted); list-style: none; margin: 0; padding: 0; }
.cmo-legend li { display: inline-flex; align-items: center; gap: 6px; }
.cmo-legend li::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--_c, var(--cmo-data-blue)); }
/* Brand mark: