/*
* ClickCompass design system (assets/ui.css), shared by the portal (index.php) and the admin
* console (admin.php). Page-specific rules live in app.css / admin.css, loaded after this file.
*
* Load order in :
*
* (or admin.css)
* (brand colour tokens, see below)
* (no defer: applies the saved theme before paint)
*
* Theming
* - Light is the default. Dark follows prefers-color-scheme, and [data-theme="dark"|"light"] on
* overrides it (CC.theme.set() in ui.js stores the choice).
* - Brand inputs: --brand, --brand-rgb, --brand-on, --brand-text and their --brand-dark* partners.
* lt_brand_style_tag() (PHP) or CC.applyBrand() (JS) set them for a custom colour; the defaults
* below are the ClickCompass teal. Components never use --brand* directly: they use the
* theme-resolved --accent* tokens (fills: --accent/--accent-on; text, links, focus: --accent-text).
*
* Sections
* 1. Tokens (light) 9. Buttons 17. Toasts
* 2. Tokens (dark) 10. Forms & fields 18. Progress, spinner, skeleton
* 3. Derived accent tokens 11. Choice controls 19. Empty states
* 4. Base & reset 12. Chips, badges, pills 20. Onboarding checklist
* 5. Layout utilities 13. Tabs 21. Help popover, tooltip, menu
* 6. Icons & brand mark 14. Tables 22. Stepper & instruction steps
* 7. App shells 15. Dialogs & drawers 23. Result card, QR, copy field
* 8. Cards, KPI, lists 16. Banners 24. Danger zone, charts, misc.
* 25. Accessibility & print
*/
/* ======================================================================
1. Tokens (light theme = default)
====================================================================== */
:root {
color-scheme: light;
/* Brand inputs (overridden by lt_brand_style_tag() / CC.applyBrand()) */
--brand: #0F766E;
--brand-rgb: 15 118 110;
--brand-on: #FFFFFF;
--brand-text: #0E6F67; /* AA on the page and on the 16% brand tint */
--brand-dark: #2DD4BF;
--brand-dark-rgb: 45 212 191;
--brand-dark-on: #0B1220;
--brand-dark-text: #2DD4BF;
--brand-ink: #0F172A; /* deep navy: wordmark "Click", sidebar */
--highlight: #F59E0B; /* signal amber: fills and icons only, never text on white */
--highlight-soft: #FEF3C7;
/* Theme-resolved accent (dark theme points these at --brand-dark*) */
--accent: var(--brand);
--accent-rgb: var(--brand-rgb);
--accent-on: var(--brand-on);
--accent-text: var(--brand-text);
--mix-shade: #000000; /* hover/active direction: darker in light, lighter in dark */
/* Neutrals */
--bg: #F1F5F9; /* page (mist) */
--surface: #FFFFFF; /* cards */
--surface-2: #F8FAFC; /* table headers, card footers, read-only fields */
--surface-3: #F1F5F9; /* segmented track, neutral badges */
--surface-hover: #F4F7FA;
--surface-raised: #FFFFFF; /* dialogs, popovers, menus */
--input-bg: #FFFFFF;
--border: #E2E8F0;
--border-strong: #CBD5E1;
--border-input: #8592A6; /* >= 3:1 on white (form control boundary) */
--text: #0F172A;
--text-2: #334155;
--text-muted: #5B6B82; /* >= 4.5:1 on the mist page and on white */
--text-inverse: #F8FAFC;
--track: #E2E8F0;
--skeleton: #E2E8F0;
--skeleton-shine: rgb(255 255 255 / 0.6);
--overlay: rgb(15 23 42 / 0.5);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6B82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
/* Semantic */
--success: #15803D;
--success-soft: #F0FDF4;
--success-border: #BBF7D0;
--warning: #B45309;
--warning-soft: #FFFBEB;
--warning-border: #FDE68A;
--danger: #DC2626; /* danger button fill (white text 4.8:1) */
--danger-hover: #B91C1C;
--danger-text: #B91C1C;
--danger-soft: #FEF2F2;
--danger-border: #FECACA;
--info: #0369A1;
--info-soft: #F0F9FF;
--info-border: #BAE6FD;
/* Status pills */
--status-live-bg: #CCFBF1; --status-live-fg: #134E4A;
--status-ready-bg: #FEF3C7; --status-ready-fg: #78350F;
--status-paused-bg: #FEE2E2; --status-paused-fg: #7F1D1D;
--status-problem-bg: #FEE2E2; --status-problem-fg: #991B1B; --status-problem-border: #FCA5A5;
--status-disabled-bg: #FEE2E2; --status-disabled-fg: #7F1D1D;
--status-neutral-bg: #E2E8F0; --status-neutral-fg: #334155;
--status-info-bg: #E0F2FE; --status-info-fg: #0C4A6E;
/* Tag chips: soft categorical set (CC.tagHue(text) picks 0-7) */
--tag-0-bg: #CCFBF1; --tag-0-fg: #134E4A; /* teal */
--tag-1-bg: #FEF3C7; --tag-1-fg: #78350F; /* amber */
--tag-2-bg: #E0E7FF; --tag-2-fg: #312E81; /* indigo */
--tag-3-bg: #FFE4E6; --tag-3-fg: #881337; /* rose */
--tag-4-bg: #E0F2FE; --tag-4-fg: #0C4A6E; /* sky */
--tag-5-bg: #ECFCCB; --tag-5-fg: #365314; /* lime */
--tag-6-bg: #EDE9FE; --tag-6-fg: #4C1D95; /* violet */
--tag-7-bg: #E2E8F0; --tag-7-fg: #334155; /* slate */
/* Charts: 7 hues in fixed order + slate for "Other" (validated: CVD-separated, >= 3:1 on the surface) */
--chart-1: #0D9488; /* teal */
--chart-2: #D97706; /* amber */
--chart-3: #4F46E5; /* indigo */
--chart-4: #E11D48; /* rose */
--chart-5: #0284C7; /* sky */
--chart-6: #65A30D; /* lime */
--chart-7: #A855F7; /* violet */
--chart-8: #64748B; /* slate = "Other" */
--chart-primary: var(--accent-text); /* single-series charts (clicks over time) */
--chart-grid: #E2E8F0;
--chart-axis: #5B6B82;
--chart-tooltip-bg: #0F172A;
--chart-tooltip-fg: #F8FAFC;
--chart-tooltip-border: #0F172A;
/* Sidebar (admin) and toasts: dark in both themes */
--sidebar-bg: #0F172A;
--sidebar-fg: #CBD5E1;
--sidebar-muted: #94A3B8;
--sidebar-hover: rgb(255 255 255 / 0.06);
--sidebar-active: rgb(255 255 255 / 0.10);
--sidebar-border: #1E293B;
--toast-bg: #0F172A;
--toast-fg: #F8FAFC;
--toast-border: #0F172A;
--tooltip-bg: #0F172A;
--tooltip-fg: #F8FAFC;
/* Type: system UI stack; scale 12 / 14 / 16 / 20 / 24 / 32 */
--font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
--fs-xs: 12px;
--fs-sm: 14px;
--fs-md: 16px;
--fs-lg: 20px;
--fs-xl: 24px;
--fs-2xl: 32px;
--lh-tight: 1.25;
--lh: 1.5;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Spacing: 4 px grid */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
/* Radii, shadows, motion */
--radius-sm: 6px;
--radius: 8px;
--radius-lg: 12px;
--radius-full: 999px;
--shadow-xs: 0 1px 2px rgb(15 23 42 / 0.06);
--shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 1px 3px rgb(15 23 42 / 0.07);
--shadow-md: 0 6px 16px -4px rgb(15 23 42 / 0.12), 0 2px 4px -2px rgb(15 23 42 / 0.06);
--shadow-lg: 0 24px 48px -12px rgb(15 23 42 / 0.30), 0 8px 16px -8px rgb(15 23 42 / 0.12);
--ease: cubic-bezier(0.2, 0, 0, 1);
--dur-fast: 120ms;
--dur: 200ms;
/* Sizes and layers */
--control-h: 40px;
--control-h-sm: 32px;
--control-h-lg: 48px;
--touch: 44px;
--topbar-h: 64px;
--bottomnav-h: 60px;
--sidebar-w: 248px;
--content-max: 1200px;
--z-sticky: 20;
--z-drawer: 40;
--z-popover: 45;
--z-dialog: 50;
--z-toast: 60;
}
/* ======================================================================
2. Tokens (dark theme). The same block twice: system preference
(unless data-theme="light") and explicit data-theme="dark".
====================================================================== */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
color-scheme: dark;
--accent: var(--brand-dark);
--accent-rgb: var(--brand-dark-rgb);
--accent-on: var(--brand-dark-on);
--accent-text: var(--brand-dark-text);
--mix-shade: #FFFFFF;
--highlight: #FBBF24;
--highlight-soft: #3A2C0C;
--bg: #0B1220;
--surface: #111A2B;
--surface-2: #152035;
--surface-3: #1A2539;
--surface-hover: #172236;
--surface-raised: #16213A;
--input-bg: #0E1626;
--border: #1F2A3D;
--border-strong: #2C3A52;
--border-input: #5B6B84;
--text: #E2E8F0;
--text-2: #CBD5E1;
--text-muted: #94A3B8;
--text-inverse: #0B1220;
--track: #1F2A3D;
--skeleton: #1C2638;
--skeleton-shine: rgb(255 255 255 / 0.06);
--overlay: rgb(2 6 23 / 0.72);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--success: #4ADE80;
--success-soft: #0F271D;
--success-border: #166534;
--warning: #FBBF24;
--warning-soft: #2A2110;
--warning-border: #854D0E;
--danger: #DC2626;
--danger-hover: #B91C1C;
--danger-text: #F87171;
--danger-soft: #2A1418;
--danger-border: #7F1D1D;
--info: #38BDF8;
--info-soft: #0B2236;
--info-border: #075985;
--status-live-bg: #0F3B37; --status-live-fg: #5EEAD4;
--status-ready-bg: #3A2C0C; --status-ready-fg: #FCD34D;
--status-paused-bg: #3D1A1F; --status-paused-fg: #FCA5A5;
--status-problem-bg: #4A1A1F; --status-problem-fg: #FECACA; --status-problem-border: #991B1B;
--status-disabled-bg: #3D1A1F; --status-disabled-fg: #FCA5A5;
--status-neutral-bg: #1F2A3D; --status-neutral-fg: #CBD5E1;
--status-info-bg: #0C2D48; --status-info-fg: #7DD3FC;
--tag-0-bg: #0F3B37; --tag-0-fg: #5EEAD4;
--tag-1-bg: #3A2C0C; --tag-1-fg: #FCD34D;
--tag-2-bg: #1E1B4B; --tag-2-fg: #A5B4FC;
--tag-3-bg: #4C0519; --tag-3-fg: #FDA4AF;
--tag-4-bg: #0C2D48; --tag-4-fg: #7DD3FC;
--tag-5-bg: #1A2E05; --tag-5-fg: #BEF264;
--tag-6-bg: #2E1065; --tag-6-fg: #C4B5FD;
--tag-7-bg: #1F2A3D; --tag-7-fg: #CBD5E1;
--chart-1: #0D9488;
--chart-2: #D97706;
--chart-3: #6366F1;
--chart-4: #F43F5E;
--chart-5: #0284C7;
--chart-6: #65A30D;
--chart-7: #A855F7;
--chart-8: #7C8BA1;
--chart-grid: #1F2A3D;
--chart-axis: #94A3B8;
--chart-tooltip-bg: #1A2539;
--chart-tooltip-fg: #E2E8F0;
--chart-tooltip-border: #2C3A52;
--sidebar-bg: #0D1525;
--sidebar-border: #1F2A3D;
--toast-bg: #1E293B;
--toast-fg: #F1F5F9;
--toast-border: #334155;
--tooltip-bg: #E2E8F0;
--tooltip-fg: #0F172A;
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
--shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.35);
--shadow-lg: 0 28px 56px -12px rgb(0 0 0 / 0.70), 0 8px 16px -8px rgb(0 0 0 / 0.45);
}
}
:root[data-theme="dark"] {
color-scheme: dark;
--accent: var(--brand-dark);
--accent-rgb: var(--brand-dark-rgb);
--accent-on: var(--brand-dark-on);
--accent-text: var(--brand-dark-text);
--mix-shade: #FFFFFF;
--highlight: #FBBF24;
--highlight-soft: #3A2C0C;
--bg: #0B1220;
--surface: #111A2B;
--surface-2: #152035;
--surface-3: #1A2539;
--surface-hover: #172236;
--surface-raised: #16213A;
--input-bg: #0E1626;
--border: #1F2A3D;
--border-strong: #2C3A52;
--border-input: #5B6B84;
--text: #E2E8F0;
--text-2: #CBD5E1;
--text-muted: #94A3B8;
--text-inverse: #0B1220;
--track: #1F2A3D;
--skeleton: #1C2638;
--skeleton-shine: rgb(255 255 255 / 0.06);
--overlay: rgb(2 6 23 / 0.72);
--select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
--success: #4ADE80;
--success-soft: #0F271D;
--success-border: #166534;
--warning: #FBBF24;
--warning-soft: #2A2110;
--warning-border: #854D0E;
--danger: #DC2626;
--danger-hover: #B91C1C;
--danger-text: #F87171;
--danger-soft: #2A1418;
--danger-border: #7F1D1D;
--info: #38BDF8;
--info-soft: #0B2236;
--info-border: #075985;
--status-live-bg: #0F3B37; --status-live-fg: #5EEAD4;
--status-ready-bg: #3A2C0C; --status-ready-fg: #FCD34D;
--status-paused-bg: #3D1A1F; --status-paused-fg: #FCA5A5;
--status-problem-bg: #4A1A1F; --status-problem-fg: #FECACA; --status-problem-border: #991B1B;
--status-disabled-bg: #3D1A1F; --status-disabled-fg: #FCA5A5;
--status-neutral-bg: #1F2A3D; --status-neutral-fg: #CBD5E1;
--status-info-bg: #0C2D48; --status-info-fg: #7DD3FC;
--tag-0-bg: #0F3B37; --tag-0-fg: #5EEAD4;
--tag-1-bg: #3A2C0C; --tag-1-fg: #FCD34D;
--tag-2-bg: #1E1B4B; --tag-2-fg: #A5B4FC;
--tag-3-bg: #4C0519; --tag-3-fg: #FDA4AF;
--tag-4-bg: #0C2D48; --tag-4-fg: #7DD3FC;
--tag-5-bg: #1A2E05; --tag-5-fg: #BEF264;
--tag-6-bg: #2E1065; --tag-6-fg: #C4B5FD;
--tag-7-bg: #1F2A3D; --tag-7-fg: #CBD5E1;
--chart-1: #0D9488;
--chart-2: #D97706;
--chart-3: #6366F1;
--chart-4: #F43F5E;
--chart-5: #0284C7;
--chart-6: #65A30D;
--chart-7: #A855F7;
--chart-8: #7C8BA1;
--chart-grid: #1F2A3D;
--chart-axis: #94A3B8;
--chart-tooltip-bg: #1A2539;
--chart-tooltip-fg: #E2E8F0;
--chart-tooltip-border: #2C3A52;
--sidebar-bg: #0D1525;
--sidebar-border: #1F2A3D;
--toast-bg: #1E293B;
--toast-fg: #F1F5F9;
--toast-border: #334155;
--tooltip-bg: #E2E8F0;
--tooltip-fg: #0F172A;
--shadow-xs: 0 1px 2px rgb(0 0 0 / 0.35);
--shadow-sm: 0 1px 2px rgb(0 0 0 / 0.35), 0 1px 3px rgb(0 0 0 / 0.25);
--shadow-md: 0 8px 24px -6px rgb(0 0 0 / 0.55), 0 2px 6px -2px rgb(0 0 0 / 0.35);
--shadow-lg: 0 28px 56px -12px rgb(0 0 0 / 0.70), 0 8px 16px -8px rgb(0 0 0 / 0.45);
}
/* ======================================================================
3. Derived accent tokens: color-mix() where supported, rgb()/alpha fallbacks otherwise.
Declared on :root so they follow whichever --accent the theme resolved.
====================================================================== */
:root {
--accent-hover: var(--accent);
--accent-active: var(--accent);
--accent-soft: rgb(var(--accent-rgb) / 0.10);
--accent-soft-hover: rgb(var(--accent-rgb) / 0.16);
--accent-border: rgb(var(--accent-rgb) / 0.45);
--focus: var(--accent-text);
--focus-ring: rgb(var(--accent-rgb) / 0.28);
--danger-ring: rgb(220 38 38 / 0.25);
}
@supports (color: color-mix(in srgb, red 50%, blue)) {
:root {
--accent-hover: color-mix(in srgb, var(--accent) 86%, var(--mix-shade));
--accent-active: color-mix(in srgb, var(--accent) 76%, var(--mix-shade));
--accent-soft: color-mix(in srgb, var(--accent) 10%, var(--surface));
--accent-soft-hover: color-mix(in srgb, var(--accent) 16%, var(--surface));
--accent-border: color-mix(in srgb, var(--accent) 45%, var(--surface));
}
}
/* ======================================================================
4. Base & reset
====================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
min-height: 100vh;
background: var(--bg);
color: var(--text);
font-family: var(--font);
font-size: var(--fs-sm);
line-height: var(--lh);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-semibold); line-height: var(--lh-tight); color: var(--text); }
h1 { font-size: var(--fs-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--fs-lg); letter-spacing: -0.005em; }
h3 { font-size: var(--fs-md); }
h4, h5, h6 { font-size: var(--fs-sm); }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
img, video { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:disabled { cursor: not-allowed; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.92em; }
strong, b { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-xs); }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
::selection { background: var(--accent-soft-hover); color: var(--text); }
[hidden] { display: none !important; }
/* One focus style everywhere (keyboard only) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip-link {
position: absolute;
z-index: calc(var(--z-toast) + 1);
left: var(--space-2);
top: -100px;
padding: var(--space-2) var(--space-4);
border-radius: var(--radius);
background: var(--surface-raised);
color: var(--text);
font-weight: var(--fw-semibold);
box-shadow: var(--shadow-md);
}
.skip-link:focus { top: var(--space-2); }
/* ======================================================================
5. Layout utilities
====================================================================== */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-6); }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--space-4)); }
.stack-xs { --stack-gap: var(--space-1); }
.stack-sm { --stack-gap: var(--space-2); }
.stack-md { --stack-gap: var(--space-3); }
.stack-lg { --stack-gap: var(--space-6); }
.stack-xl { --stack-gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--space-2)); }
.cluster-lg { --cluster-gap: var(--space-4); }
.row-between { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grid { display: grid; gap: var(--grid-gap, var(--space-4)); }
.grid-2, .grid-3, .grid-4 { display: grid; gap: var(--grid-gap, var(--space-4)); grid-template-columns: minmax(0, 1fr); }
.grid-auto { display: grid; gap: var(--grid-gap, var(--space-4)); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 280px)), 1fr)); }
@media (min-width: 768px) {
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.span-full { grid-column: 1 / -1; }
.section { display: flex; flex-direction: column; gap: var(--space-4); }
.section + .section { margin-top: var(--space-8); }
.section-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.section-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.section-subtitle { color: var(--text-muted); }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }
.min-w-0 { min-width: 0; }
.w-full { width: 100%; }
.ml-auto { margin-left: auto; }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
/* Text */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-muted { color: var(--text-muted); }
.text-2 { color: var(--text-2); }
.text-accent { color: var(--accent-text); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger-text); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.mono { font-family: var(--font-mono); font-size: 0.93em; }
.nums { font-variant-numeric: tabular-nums; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.break-anywhere { overflow-wrap: anywhere; word-break: normal; }
.prose { font-size: var(--fs-md); line-height: 1.6; color: var(--text-2); }
.prose > * + * { margin-top: var(--space-3); }
.visually-hidden, .sr-only {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
white-space: nowrap; border: 0;
}
@media (max-width: 639.98px) { .hide-sm { display: none !important; } }
@media (min-width: 640px) { .show-sm { display: none !important; } }
@media (max-width: 1023.98px) { .hide-md { display: none !important; } }
/* ======================================================================
6. Icons & brand mark
====================================================================== */
.icon {
display: inline-block;
flex: none;
width: 20px;
height: 20px;
vertical-align: middle;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
overflow: visible;
}
.icon-xs { width: 14px; height: 14px; }
.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; stroke-width: 1.75; }
.icon-spin { animation: cc-spin 0.9s linear infinite; }
.logo-mark {
display: inline-grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius);
background: var(--brand);
color: var(--brand-on);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.06);
}
.logo-mark .icon { width: 20px; height: 20px; stroke-width: 2.2; }
.logo-mark-sm { width: 24px; height: 24px; border-radius: var(--radius-sm); }
.logo-mark-sm .icon { width: 16px; height: 16px; }
.logo-mark-lg { width: 48px; height: 48px; border-radius: var(--radius-lg); }
.logo-mark-lg .icon { width: 30px; height: 30px; }
.brand {
display: inline-flex;
align-items: center;
gap: 10px;
min-width: 0;
color: var(--text);
text-decoration: none;
}
.wordmark { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -0.015em; color: var(--text); white-space: nowrap; }
.wordmark-accent { color: var(--accent-text); }
.wordmark-lg { font-size: var(--fs-lg); }
.tagline { color: var(--text-muted); }
/* ======================================================================
7. App shells
====================================================================== */
/* ---- Page header (both apps) ---- */
.page { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--space-8) var(--space-6) var(--space-12); }
.page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-6); }
.page-heading { min-width: 0; }
.page-title { font-size: var(--fs-xl); line-height: 1.3; font-weight: var(--fw-bold); letter-spacing: -0.015em; }
.page-subtitle { margin-top: var(--space-1); color: var(--text-muted); font-size: var(--fs-sm); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-bottom: var(--space-2); font-size: var(--fs-sm); color: var(--text-muted); }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; }
.breadcrumb .icon { width: 14px; height: 14px; }
/* ---- Portal: top bar + (mobile) bottom tab bar ---- */
.app-portal { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
/* Frosted top bar from 768 px up only: below that the tab bar inside it is position: fixed, and
backdrop-filter would make the top bar its containing block (the tab bar would cover the header). */
@supports (backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px)) {
@media (min-width: 768px) {
.topbar {
background: rgb(255 255 255 / 0.86);
-webkit-backdrop-filter: saturate(1.6) blur(10px);
backdrop-filter: saturate(1.6) blur(10px);
}
:root[data-theme="dark"] .topbar { background: rgb(17 26 43 / 0.86); }
}
@media (min-width: 768px) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .topbar { background: rgb(17 26 43 / 0.86); }
}
}
.topbar-inner {
display: flex;
align-items: center;
gap: var(--space-4);
height: var(--topbar-h);
max-width: var(--content-max);
margin-inline: auto;
padding-inline: var(--space-6);
}
.topbar-context {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
max-width: 240px;
padding-left: var(--space-4);
border-left: 1px solid var(--border);
color: var(--text-2);
font-weight: var(--fw-semibold);
}
.topbar-context > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topnav { display: flex; align-items: center; gap: var(--space-1); margin-left: var(--space-2); }
.topnav-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
height: 40px;
padding: 0 var(--space-3);
border-radius: var(--radius);
color: var(--text-2);
font-weight: var(--fw-semibold);
text-decoration: none;
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.topnav-link .icon { width: 18px; height: 18px; }
.topnav-link:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.topnav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-text); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-1); margin-left: auto; }
.topbar .brand { flex: none; }
@media (max-width: 639.98px), (pointer: coarse) {
.topbar .brand { min-height: var(--touch); min-width: var(--touch); justify-content: center; }
}
@media (max-width: 767.98px) {
.app-portal { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); }
.topbar-inner { height: 56px; gap: var(--space-2); padding-inline: var(--space-4); }
/* The nav sits at the bottom here, so the portal name may use all the room up to the buttons. */
.topbar-context { flex: 0 1 auto; max-width: none; padding-left: var(--space-3); }
.topnav {
position: fixed;
z-index: var(--z-sticky);
left: 0;
right: 0;
bottom: 0;
margin: 0;
gap: 0;
height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px));
padding: 0 var(--space-1) env(safe-area-inset-bottom, 0px);
background: var(--surface);
border-top: 1px solid var(--border);
box-shadow: 0 -4px 16px -8px rgb(15 23 42 / 0.12);
}
.topnav-link {
flex: 1 1 0;
min-width: 0;
flex-direction: column;
justify-content: center;
gap: 2px;
height: var(--bottomnav-h);
padding: var(--space-1);
border-radius: 0;
font-size: var(--fs-xs);
}
.topnav-link .icon { width: 22px; height: 22px; }
.topnav-link:hover { background: transparent; }
.topnav-link[aria-current="page"] { background: transparent; box-shadow: inset 0 2px 0 var(--accent-text); }
.page { padding: var(--space-5) var(--space-4) var(--space-8); }
.page-title { font-size: var(--fs-lg); }
.container { padding-inline: var(--space-4); }
}
@media (max-width: 479.98px) {
.topbar .wordmark { display: none; }
}
/* ---- Admin: left sidebar (desktop) / drawer (below 1024 px) ---- */
.app-admin { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.sidebar {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
overflow-y: auto;
overscroll-behavior: contain;
background: var(--sidebar-bg);
color: var(--sidebar-fg);
border-right: 1px solid var(--sidebar-border);
}
.sidebar :focus-visible { outline-color: var(--brand-dark); }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: var(--topbar-h); padding: 0 var(--space-4) 0 var(--space-5); }
.sidebar .brand, .sidebar .wordmark { color: #F8FAFC; }
.sidebar .wordmark-accent { color: var(--brand-dark); }
.sidebar .sidebar-close { display: none; color: var(--sidebar-fg); } /* .sidebar prefix: beats .btn { display } */
.sidenav { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); flex: 1 0 auto; }
.sidenav-section {
padding: var(--space-4) var(--space-3) var(--space-1);
color: var(--sidebar-muted);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.sidenav-link {
position: relative;
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 40px;
padding: 0 var(--space-3);
border-radius: var(--radius);
color: var(--sidebar-fg);
font-weight: var(--fw-medium);
text-decoration: none;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.sidenav-link .icon { color: var(--sidebar-muted); width: 18px; height: 18px; }
.sidenav-link:hover { background: var(--sidebar-hover); color: #FFFFFF; text-decoration: none; }
.sidenav-link[aria-current="page"] { background: var(--sidebar-active); color: #FFFFFF; font-weight: var(--fw-semibold); }
.sidenav-link[aria-current="page"] .icon { color: var(--brand-dark); }
.sidenav-link[aria-current="page"]::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-3));
top: 8px;
bottom: 8px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--brand-dark);
}
.sidenav-badge {
display: inline-grid;
place-items: center;
min-width: 20px;
height: 20px;
margin-left: auto;
padding: 0 6px;
border-radius: var(--radius-full);
background: rgb(255 255 255 / 0.12);
color: #F8FAFC;
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
font-variant-numeric: tabular-nums;
}
.sidenav-badge-alert { background: #DC2626; color: #FFFFFF; }
.sidebar-foot { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border-top: 1px solid var(--sidebar-border); }
.sidebar-user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); min-width: 0; }
.sidebar-user-email { color: #F8FAFC; font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-role { color: var(--sidebar-muted); font-size: var(--fs-xs); }
.sidebar .btn-ghost { --btn-fg: var(--sidebar-fg); --btn-bg-hover: var(--sidebar-hover); --btn-bg-active: var(--sidebar-active); }
.sidebar-foot .btn { justify-content: flex-start; padding-inline: var(--space-3); }
.mobilebar { display: none; }
.drawer-backdrop { display: none; }
@media (max-width: 1023.98px) {
.app-admin { grid-template-columns: minmax(0, 1fr); }
.sidebar {
position: fixed;
z-index: var(--z-drawer);
inset: 0 auto 0 0;
width: min(288px, 86vw);
transform: translateX(-100%);
visibility: hidden;
box-shadow: var(--shadow-lg);
transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.sidebar.is-open { transform: none; visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
.sidebar .sidebar-close { display: inline-flex; }
.drawer-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: calc(var(--z-drawer) - 1);
background: var(--overlay);
}
.drawer-backdrop[hidden] { display: none !important; }
.mobilebar {
position: sticky;
top: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
gap: var(--space-2);
height: 56px;
padding: 0 var(--space-3);
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.mobilebar .brand { margin-right: auto; }
}
@media (max-width: 767.98px) {
.app-admin .page { padding: var(--space-5) var(--space-4) var(--space-8); }
}
/* ---- Shared screens: sign-in, setup, invite, reset, suspended, 404 ---- */
.auth-page {
min-height: 100vh;
min-height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
padding: var(--space-10) var(--space-4);
background:
radial-gradient(1200px 480px at 50% -10%, var(--accent-soft), transparent 70%),
var(--bg);
}
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.auth-brand .wordmark { font-size: var(--fs-xl); }
.auth-card { width: 100%; max-width: 440px; }
.auth-card-wide { max-width: 640px; }
.auth-card > .card-body { padding: var(--space-8); }
.auth-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); letter-spacing: -0.015em; text-align: center; }
.auth-subtitle { margin-top: var(--space-2); color: var(--text-muted); text-align: center; font-size: var(--fs-md); }
.auth-foot { max-width: 440px; color: var(--text-muted); font-size: var(--fs-xs); text-align: center; }
/* .auth-head-long on the heading block: a lead of more than about two lines (the invite welcome)
reads better left-aligned on phones, together with its heading. */
@media (max-width: 479.98px) {
.auth-page { justify-content: flex-start; padding-top: var(--space-8); }
.auth-card > .card-body { padding: var(--space-5); }
.auth-head-long .auth-title, .auth-head-long .auth-subtitle { text-align: left; }
}
/* ======================================================================
8. Cards, KPI tiles, lists, description lists
====================================================================== */
.card {
min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card-pad { padding: var(--space-5); }
.card-header {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-2) var(--space-4);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border);
}
.card-header-plain { border-bottom: 0; padding-bottom: 0; }
.card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.4; }
.card-subtitle { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-sm); }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.card-body { padding: var(--space-5); }
.card-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
padding: var(--space-3) var(--space-5);
border-top: 1px solid var(--border);
background: var(--surface-2);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.card-footer-start { justify-content: flex-start; }
.card-highlight { border-color: var(--accent-border); box-shadow: 0 0 0 1px var(--accent-border), var(--shadow-sm); }
.card-interactive { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.card-interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
@media (max-width: 639.98px) {
.card-pad, .card-body { padding: var(--space-4); }
.card-header { padding: var(--space-3) var(--space-4); }
.card-footer { padding: var(--space-3) var(--space-4); }
}
/* KPI tiles */
.kpi-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 156px), 1fr)); }
.kpi {
position: relative;
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
padding: var(--space-4) var(--space-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.kpi-label { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.kpi-label .icon { width: 16px; height: 16px; }
.kpi-value { font-size: var(--fs-2xl); line-height: 1.15; font-weight: var(--fw-bold); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.kpi-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--fs-xs); }
.kpi-accent::before {
content: "";
position: absolute;
left: -1px;
top: 14px;
bottom: 14px;
width: 3px;
border-radius: 0 3px 3px 0;
background: var(--accent);
}
.kpi-link { color: inherit; text-decoration: none; }
.kpi-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.delta { display: inline-flex; align-items: center; gap: 2px; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.delta .icon { width: 14px; height: 14px; }
.delta-up { color: var(--success); }
.delta-down { color: var(--danger-text); }
@media (max-width: 639.98px) {
.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kpi { padding: var(--space-3) var(--space-4); }
.kpi-value { font-size: var(--fs-xl); }
}
/* List group: rows inside a card (accounts, users, settings rows) */
.list-group { display: flex; flex-direction: column; }
.list-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-3) var(--space-4);
padding: var(--space-4) var(--space-5);
border-top: 1px solid var(--border);
}
.list-group > .list-row:first-child { border-top: 0; }
.list-row-main { flex: 1 1 240px; min-width: 0; }
.list-row-title { font-weight: var(--fw-semibold); color: var(--text); }
.list-row-sub { color: var(--text-muted); font-size: var(--fs-sm); }
.list-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-left: auto; }
@media (max-width: 639.98px) {
.list-row { padding: var(--space-3) var(--space-4); }
.list-row-actions { margin-left: 0; }
}
/* Description list: key/value details */
.desc-list { display: grid; grid-template-columns: minmax(120px, max-content) minmax(0, 1fr); gap: var(--space-3) var(--space-6); }
.desc-list dt { color: var(--text-muted); font-weight: var(--fw-medium); }
.desc-list dd { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479.98px) {
.desc-list { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.desc-list dd + dt { margin-top: var(--space-3); }
}
/* Avatar (initials) */
.avatar {
display: inline-grid;
place-items: center;
flex: none;
width: 32px;
height: 32px;
border-radius: var(--radius-full);
background: var(--accent-soft-hover);
color: var(--accent-text);
font-size: var(--fs-xs);
font-weight: var(--fw-bold);
text-transform: uppercase;
}
.avatar-sm { width: 24px; height: 24px; font-size: 11px; }
/* ======================================================================
9. Buttons
====================================================================== */
.btn {
--btn-bg: var(--surface);
--btn-fg: var(--text);
--btn-border: var(--border-strong);
--btn-bg-hover: var(--surface-hover);
--btn-bg-active: var(--surface-3);
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--control-h);
padding: 0 var(--space-4);
border: 1px solid var(--btn-border);
border-radius: var(--radius);
background: var(--btn-bg);
color: var(--btn-fg);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
line-height: 1.2;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.btn .icon { width: 18px; height: 18px; margin-inline: -2px; }
.btn:hover { background: var(--btn-bg-hover); color: var(--btn-fg); text-decoration: none; }
.btn:active { background: var(--btn-bg-active); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-secondary { box-shadow: var(--shadow-xs); }
.btn-primary {
--btn-bg: var(--accent);
--btn-fg: var(--accent-on);
--btn-border: transparent;
--btn-bg-hover: var(--accent-hover);
--btn-bg-active: var(--accent-active);
box-shadow: var(--shadow-xs);
}
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--text-2);
--btn-border: transparent;
--btn-bg-hover: var(--surface-hover);
--btn-bg-active: var(--surface-3);
}
.btn-ghost:hover { --btn-fg: var(--text); }
.btn-danger {
--btn-bg: var(--danger);
--btn-fg: #FFFFFF;
--btn-border: transparent;
--btn-bg-hover: var(--danger-hover);
--btn-bg-active: var(--danger-hover);
box-shadow: var(--shadow-xs);
}
.btn-danger-quiet {
--btn-bg: transparent;
--btn-fg: var(--danger-text);
--btn-border: var(--danger-border);
--btn-bg-hover: var(--danger-soft);
--btn-bg-active: var(--danger-soft);
}
.btn-link {
min-height: 0;
padding: 0;
border: 0;
background: none;
color: var(--accent-text);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.btn-link:hover { background: none; color: var(--accent-text); text-decoration-thickness: 2px; }
.btn-sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-sm); }
.btn-sm .icon { width: 16px; height: 16px; }
.btn-lg { min-height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--fs-md); border-radius: 10px; }
.btn-lg .icon { width: 20px; height: 20px; }
.btn-icon { flex: none; width: var(--control-h); padding: 0; }
.btn-icon.btn-sm { width: var(--control-h-sm); }
.btn-icon.btn-lg { width: var(--control-h-lg); }
.btn-block { display: flex; width: 100%; }
.btn-group { display: inline-flex; flex-wrap: wrap; gap: var(--space-2); }
/* Copied / done feedback (CC.copyText swaps the label) */
.btn.is-done { --btn-fg: var(--success); }
.btn-primary.is-done { --btn-fg: var(--accent-on); }
/* Loading: keeps the width, shows a spinner; pair with disabled + aria-busy="true" */
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 18px;
height: 18px;
border: 2px solid var(--btn-fg);
border-right-color: transparent;
border-radius: 50%;
animation: cc-spin 0.7s linear infinite;
}
.btn.is-loading:disabled { opacity: 0.85; }
@media (max-width: 639.98px), (pointer: coarse) {
.btn, .btn-sm { min-height: var(--touch); }
.btn-lg { min-height: var(--control-h-lg); }
.btn-icon, .btn-icon.btn-sm { width: var(--touch); }
.btn-link { min-height: 0; }
}
/* ======================================================================
10. Forms & fields
====================================================================== */
.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form-grid { display: grid; gap: var(--space-4) var(--space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.form-actions-end { justify-content: flex-end; }
.fieldset { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.fieldset > legend, .legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label-row { display: flex; align-items: center; gap: var(--space-1); min-height: 20px; }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.label-optional { font-weight: 400; color: var(--text-muted); }
.help { color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.help a { color: var(--accent-text); }
.field-error {
display: flex;
align-items: flex-start;
gap: 6px;
color: var(--danger-text);
font-size: var(--fs-sm);
font-weight: var(--fw-medium);
line-height: 1.45;
}
.field-error .icon { width: 16px; height: 16px; margin-top: 1px; }
.field-success { display: flex; align-items: flex-start; gap: 6px; color: var(--success); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.field-success .icon { width: 16px; height: 16px; margin-top: 1px; }
.input, .select, .textarea {
display: block;
width: 100%;
min-height: var(--control-h);
padding: 0 var(--space-3);
border: 1px solid var(--border-input);
border-radius: var(--radius);
background-color: var(--input-bg);
color: var(--text);
font-size: var(--fs-sm);
line-height: 1.4;
transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
appearance: none;
-webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 1; }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-muted); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
.field.has-error .input, .field.has-error .select, .field.has-error .textarea { border-color: var(--danger-text); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus,
.field.has-error .input:focus, .field.has-error .textarea:focus { box-shadow: 0 0 0 3px var(--danger-ring); }
.input:disabled, .select:disabled, .textarea:disabled { background-color: var(--surface-2); color: var(--text-muted); border-color: var(--border-strong); opacity: 1; }
.input[readonly], .textarea[readonly] { background-color: var(--surface-2); }
.input-sm { min-height: var(--control-h-sm); }
.input-lg { min-height: var(--control-h-lg); font-size: var(--fs-md); }
.input.mono, .textarea.mono { font-family: var(--font-mono); font-size: 13px; }
input[type="search"].input::-webkit-search-cancel-button { cursor: pointer; }
.textarea { min-height: 96px; padding: 10px var(--space-3); resize: vertical; line-height: 1.5; }
.select {
padding-right: 36px;
background-image: var(--select-chevron);
background-repeat: no-repeat;
background-position: right 10px center;
background-size: 16px 16px;
cursor: pointer;
text-overflow: ellipsis;
}
.select::-ms-expand { display: none; }
@media (max-width: 639.98px), (pointer: coarse) {
.input, .select, .textarea { min-height: var(--touch); font-size: var(--fs-md); }
.input.mono, .textarea.mono { font-size: var(--fs-sm); }
}
/* Input with leading icon (search) */
.input-icon { position: relative; display: block; min-width: 0; }
.input-icon > .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.input-icon > .input { padding-left: 38px; }
/* Input + button(s) joined */
.input-group { display: flex; align-items: stretch; min-width: 0; }
.input-group > .input, .input-group > .select { flex: 1 1 auto; min-width: 0; }
.input-group > :not(:first-child) { margin-left: -1px; }
.input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .btn { flex: none; border-color: var(--border-input); box-shadow: none; }
.input-group > .input:focus { position: relative; z-index: 1; }
.input-addon {
display: inline-flex;
align-items: center;
padding: 0 var(--space-3);
border: 1px solid var(--border-input);
border-radius: var(--radius);
background: var(--surface-2);
color: var(--text-muted);
white-space: nowrap;
}
/* Colour picker next to a hex field: */
.color-swatch-input {
flex: none;
width: var(--control-h);
height: var(--control-h);
padding: 3px;
border: 1px solid var(--border-input);
border-radius: var(--radius);
background: var(--input-bg);
cursor: pointer;
}
.color-swatch-input::-webkit-color-swatch-wrapper { padding: 0; }
.color-swatch-input::-webkit-color-swatch { border: 0; border-radius: var(--radius-sm); }
.color-swatch-input::-moz-color-swatch { border: 0; border-radius: var(--radius-sm); }
/* .is-unset: the hex field holds no valid colour yet, so the swatch shows "empty" instead of the old colour. */
.color-swatch-input.is-unset::-webkit-color-swatch { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--border) 5px 7px) !important; }
.color-swatch-input.is-unset::-moz-color-swatch { background: repeating-linear-gradient(135deg, var(--surface-2) 0 5px, var(--border) 5px 7px) !important; }
@media (max-width: 639.98px), (pointer: coarse) { .color-swatch-input { width: var(--touch); height: var(--touch); } }
/* Checkbox & radio (native, themed) */
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; flex: none; cursor: pointer; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.check { display: inline-flex; align-items: flex-start; gap: 10px; min-height: 24px; cursor: pointer; color: var(--text); line-height: 1.4; }
.check > input { margin-top: 1px; }
.check-text { display: flex; flex-direction: column; gap: 2px; }
.check-desc { color: var(--text-muted); font-size: var(--fs-sm); }
.check-list { display: flex; flex-direction: column; gap: var(--space-3); }
@media (max-width: 639.98px), (pointer: coarse) {
.check { min-height: var(--touch); align-items: center; }
.check > input { margin-top: 0; width: 20px; height: 20px; }
/* With a description the box stays next to the first line of text. */
.check:has(.check-desc) { align-items: flex-start; }
.check:has(.check-desc) > input { margin-top: 2px; }
}
/* Switch: */
.switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-3); min-height: 32px; cursor: pointer; color: var(--text); }
.switch > input { position: absolute; opacity: 0; width: 40px; height: 24px; margin: 0; cursor: pointer; }
.switch-track {
position: relative;
flex: none;
width: 40px;
height: 24px;
border-radius: var(--radius-full);
background: var(--border-input);
transition: background-color var(--dur) var(--ease);
}
.switch-track::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 1px 2px rgb(15 23 42 / 0.3);
transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.switch > input:checked + .switch-track { background: var(--accent); }
.switch > input:checked + .switch-track::after { transform: translateX(16px); background: var(--accent-on); }
.switch > input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.switch > input:disabled + .switch-track { opacity: 0.5; }
.switch > input:disabled ~ * { color: var(--text-muted); cursor: not-allowed; }
.switch-text { display: flex; flex-direction: column; }
.switch-desc { color: var(--text-muted); font-size: var(--fs-sm); }
@media (max-width: 639.98px), (pointer: coarse) { .switch { min-height: var(--touch); } }
/* "More options" and FAQ disclosures () */
.disclosure > summary {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 36px;
color: var(--accent-text);
font-weight: var(--fw-semibold);
cursor: pointer;
list-style: none;
border-radius: var(--radius-sm);
}
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure > summary::before {
content: "";
width: 7px;
height: 7px;
margin: 0 3px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
transition: transform var(--dur-fast) var(--ease);
}
.disclosure[open] > summary::before { transform: rotate(45deg); }
.disclosure-body { padding-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 639.98px), (pointer: coarse) { .disclosure > summary { min-height: var(--touch); } }
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item > summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
min-height: var(--touch);
padding: var(--space-3) 0;
font-size: var(--fs-md);
font-weight: var(--fw-semibold);
color: var(--text);
cursor: pointer;
list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
content: "";
flex: none;
width: 8px;
height: 8px;
margin-right: 6px;
border-right: 2px solid var(--text-muted);
border-bottom: 2px solid var(--text-muted);
transform: rotate(45deg);
transition: transform var(--dur-fast) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-answer { padding: 0 0 var(--space-4); color: var(--text-2); font-size: var(--fs-md); line-height: 1.6; }
.faq-answer > * + * { margin-top: var(--space-2); }
/* ======================================================================
11. Choice controls: segmented control, choice cards
====================================================================== */
.segmented {
display: inline-flex;
max-width: 100%;
padding: 3px;
gap: 2px;
background: var(--surface-3);
border: 1px solid var(--border);
border-radius: 10px;
overflow-x: auto;
scrollbar-width: none;
}
.segmented::-webkit-scrollbar { display: none; }
.segmented { align-self: flex-start; } /* stays content-sized inside flex columns (.fieldset, .field) */
.segmented-block { display: flex; width: 100%; align-self: stretch; }
.segmented-item { position: relative; display: flex; flex: 0 0 auto; }
.segmented-block .segmented-item { flex: 1 1 0; }
.segmented-item > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented-item > span {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
width: 100%;
min-height: 34px;
padding: 0 var(--space-4);
border-radius: var(--radius);
color: var(--text-2);
font-size: var(--fs-sm);
font-weight: var(--fw-semibold);
white-space: nowrap;
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.segmented-item > span .icon { width: 16px; height: 16px; }
.segmented-item:hover > span { color: var(--text); }
.segmented-item > input:checked + span { background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-sm); }
.segmented-item > input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.segmented-item > input:disabled + span { opacity: 0.45; }
.segmented-item > input:disabled { cursor: not-allowed; }
@media (max-width: 639.98px), (pointer: coarse) { .segmented-item > span { min-height: var(--touch); } }
/* Choice cards: big options ("Connect my Vercel" / "Use the shared account") */
.choice-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice-input { position: absolute; top: 18px; left: 18px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas: "icon title check" "icon desc desc";
align-items: start;
gap: 2px var(--space-3);
height: 100%;
padding: var(--space-4);
border: 1.5px solid var(--border-strong);
border-radius: var(--radius-lg);
background: var(--surface);
transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.choice:hover .choice-body { border-color: var(--border-input); }
.choice-icon {
grid-area: icon;
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--surface-3);
color: var(--text-2);
transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.choice-title { grid-area: title; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); padding-top: 2px; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.choice-desc { grid-area: desc; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.45; }
.choice-check {
grid-area: check;
display: grid;
place-items: center;
width: 22px;
height: 22px;
margin-top: 2px;
border: 1.5px solid var(--border-input);
border-radius: 50%;
color: transparent;
transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.choice-check .icon { width: 14px; height: 14px; stroke-width: 3; }
.choice-input:checked + .choice-body { border-color: var(--accent-text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-text); }
.choice-input:checked + .choice-body .choice-icon { background: var(--accent); color: var(--accent-on); }
.choice-input:checked + .choice-body .choice-check { background: var(--accent); border-color: var(--accent); color: var(--accent-on); }
.choice-input:focus-visible + .choice-body { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-input:disabled + .choice-body { opacity: 0.55; cursor: not-allowed; }
.choice-compact .choice-body { grid-template-areas: "icon title check" "icon desc check"; padding: var(--space-3) var(--space-4); }
/* ======================================================================
12. Chips, badges, status pills
====================================================================== */
/* Badge: small rectangular label (provider, role, "Recommended") */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
height: 22px;
padding: 0 8px;
border-radius: var(--radius-sm);
background: var(--surface-3);
color: var(--text-2);
border: 1px solid var(--border);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.badge .icon { width: 13px; height: 13px; }
.badge-accent { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-border); }
.badge-solid { background: var(--accent); color: var(--accent-on); border-color: transparent; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: var(--success-border); }
.badge-warning { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); }
.badge-danger { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger-border); }
.badge-info { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.badge-count { min-width: 22px; justify-content: center; border-radius: var(--radius-full); font-variant-numeric: tabular-nums; }
/* Status pill: Live / Getting ready / Paused / Problem / Disabled (always icon + words) */
.pill {
--pill-bg: var(--status-neutral-bg);
--pill-fg: var(--status-neutral-fg);
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px 0 8px;
border: 1px solid var(--pill-border, transparent);
border-radius: var(--radius-full);
background: var(--pill-bg);
color: var(--pill-fg);
font-size: var(--fs-xs);
font-weight: var(--fw-semibold);
line-height: 1;
white-space: nowrap;
vertical-align: middle;
}
.pill .icon { width: 14px; height: 14px; stroke-width: 2.25; }
.pill-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pill-live { --pill-bg: var(--status-live-bg); --pill-fg: var(--status-live-fg); }
.pill-live .pill-dot { box-shadow: 0 0 0 3px rgb(20 184 166 / 0.25); }
.pill-ready { --pill-bg: var(--status-ready-bg); --pill-fg: var(--status-ready-fg); }
.pill-paused { --pill-bg: var(--status-paused-bg); --pill-fg: var(--status-paused-fg); }
.pill-problem { --pill-bg: var(--status-problem-bg); --pill-fg: var(--status-problem-fg); --pill-border: var(--status-problem-border); }
.pill-disabled { --pill-bg: var(--status-disabled-bg); --pill-fg: var(--status-disabled-fg); }
.pill-neutral { --pill-bg: var(--status-neutral-bg); --pill-fg: var(--status-neutral-fg); }
.pill-info { --pill-bg: var(--status-info-bg); --pill-fg: var(--status-info-fg); }
.pill-lg { height: 28px; padding: 0 12px 0 10px; font-size: var(--fs-sm); }
.status-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.status-note { color: var(--text-muted); font-size: var(--fs-xs); }
/* Chip: filter toggle (