/* dazzle v0.104.0 | MIT License | https://github.com/manwithacat/dazzle */ @layer reset, vendor, tokens, base, utilities, components, overrides; @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html, body { height: 100%; } body { line-height: var(--leading-normal, 1.5); -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } h1, h2, h3, h4, h5, h6 { line-height: var(--leading-tight, 1.2); text-wrap: balance; } #root, #__next { isolation: isolate; } input[type="number"] { -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } textarea { resize: vertical; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } @layer vendor, tokens, base, components; @layer vendor { @font-face { font-family: "Geist"; src: url("/static/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("/static/fonts/geist-mono-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } } @layer tokens { :root { --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 0.75rem; --space-lg: 1rem; --space-xl: 1.5rem; --space-2xl: 2rem; --space-3xl: 3rem; --space-fluid-sm: clamp(0.5rem, 1vw, 0.75rem); --space-fluid-md: clamp(0.75rem, 1.5vw, 1rem); --space-fluid-lg: clamp(1rem, 2.5vw, 1.5rem); --text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem); --text-sm: clamp(0.875rem, 0.8rem + 0.25vw, 1rem); --text-base: clamp(1rem, 0.9rem + 0.3vw, 1.125rem); --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem); --text-xl: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); --text-2xl: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); --text-3xl: clamp(2.25rem, 1.9rem + 1.5vw, 3rem); --text-display: clamp(3rem, 2.4rem + 2.5vw, 4.5rem); --dz-heading-app-page-title: var(--text-lg); --dz-heading-app-section-title: var(--text-base); --dz-heading-app-subsection-title: var(--text-sm); --dz-heading-marketing-hero: var(--dz-font-size-hero-headline, 3.5rem); --dz-heading-marketing-cta: var(--dz-font-size-cta-headline, 3rem); --dz-heading-marketing-section: var(--dz-font-size-section-headline, 2.25rem); --font-system: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Consolas, "Liberation Mono", monospace; --leading-tight: 1.2; --leading-normal: 1.5; --leading-loose: 1.8; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --focus-ring-color: color-mix(in oklab, var(--colour-brand) 40%, transparent); --focus-ring-width: 2px; --focus-ring-offset: 2px; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.75rem; --radius-full: 9999px; --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.04), 0 1px 3px hsl(0 0% 0% / 0.06); --shadow-md: 0 2px 4px hsl(0 0% 0% / 0.04), 0 4px 8px hsl(0 0% 0% / 0.08); --shadow-lg: 0 4px 8px hsl(0 0% 0% / 0.04), 0 12px 24px hsl(0 0% 0% / 0.12); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.5, -0.5, 0.5, 1.5); --ease-spring-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-spring-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-spring-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --ease-spring-4: cubic-bezier(0.5, 1.5, 0.75, 1.25); --ease-spring-5: cubic-bezier(0.5, 1.75, 0.75, 1.25); --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25); --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25); --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25); --duration-fast: 80ms; --duration-base: 150ms; --duration-slow: 300ms; --animation-fade-in: dz-fade-in var(--duration-base) var(--ease-out); --animation-fade-out: dz-fade-out var(--duration-base) var(--ease-in); --animation-scale-up: dz-scale-up var(--duration-base) var(--ease-spring-2); --animation-scale-down: dz-scale-down var(--duration-base) var(--ease-in); --animation-slide-in-up: dz-slide-in-up var(--duration-base) var(--ease-out); --animation-slide-in-down: dz-slide-in-down var(--duration-base) var(--ease-out); --animation-slide-in-left: dz-slide-in-left var(--duration-base) var(--ease-out); --animation-slide-in-right: dz-slide-in-right var(--duration-base) var(--ease-out); --animation-slide-out-up: dz-slide-out-up var(--duration-base) var(--ease-in); --animation-slide-out-down: dz-slide-out-down var(--duration-base) var(--ease-in); --animation-slide-out-left: dz-slide-out-left var(--duration-base) var(--ease-in); --animation-slide-out-right: dz-slide-out-right var(--duration-base) var(--ease-in); --animation-shake-x: dz-shake-x 0.4s var(--ease-out); --animation-pulse: dz-pulse 2s var(--ease-in-out) infinite; --width-prose: 65ch; --width-content: 56rem; --width-page: 80rem; --dz-touch-target-min: 44px; --neutral-50: oklch(98.5% 0.002 247.84); --neutral-100: oklch(96.7% 0.003 264.54); --neutral-200: oklch(92.8% 0.006 264.53); --neutral-300: oklch(86.9% 0.012 252.89); --neutral-400: oklch(70.6% 0.022 261.32); --neutral-500: oklch(55.1% 0.027 264.36); --neutral-600: oklch(44.6% 0.030 256.80); --neutral-700: oklch(37.3% 0.034 259.73); --neutral-800: oklch(27.8% 0.030 256.85); --neutral-900: oklch(21.0% 0.034 264.66); --neutral-950: oklch(13.0% 0.028 261.69); --brand-50: oklch(97.0% 0.014 254.60); --brand-100: oklch(93.2% 0.032 255.59); --brand-200: oklch(88.2% 0.059 254.13); --brand-300: oklch(80.9% 0.105 251.81); --brand-400: oklch(70.7% 0.165 254.62); --brand-500: oklch(62.3% 0.214 259.81); --brand-600: oklch(54.6% 0.245 262.88); --brand-700: oklch(48.8% 0.243 264.05); --brand-800: oklch(42.4% 0.199 265.64); --brand-900: oklch(37.9% 0.146 265.52); --brand-950: oklch(28.2% 0.091 267.94); --success-500: oklch(64.8% 0.150 142.50); --success-600: oklch(53.0% 0.140 142.50); --warning-500: oklch(76.9% 0.188 70.08); --warning-600: oklch(52.0% 0.150 70.08); --danger-500: oklch(63.7% 0.208 25.33); --danger-600: oklch(51.0% 0.195 25.33); --colour-bg: light-dark(var(--neutral-50), var(--neutral-950)); --colour-surface: light-dark(white, var(--neutral-900)); --colour-surface-muted: light-dark(var(--neutral-100), var(--neutral-800)); --colour-text: light-dark(var(--neutral-900), var(--neutral-50)); --colour-text-muted: light-dark(var(--neutral-600), var(--neutral-400)); --colour-border: light-dark(var(--neutral-200), var(--neutral-700)); --colour-brand: var(--brand-600); --colour-brand-text: light-dark(var(--brand-600), var(--brand-300)); --colour-brand-contrast: white; --colour-accent: var(--brand-500); --colour-success: light-dark(var(--success-600), oklch(74% 0.13 142.50)); --colour-warning: light-dark(var(--warning-600), oklch(80% 0.13 70.08)); --colour-danger: light-dark(var(--danger-600), oklch(75% 0.15 25.33)); --colour-info: oklch(60% 0.13 220); --colour-success-soft: light-dark(oklch(from var(--colour-success) 96.5% 0.04 h), oklch(from var(--colour-success) 28% 0.06 h)); --colour-warning-soft: light-dark(oklch(from var(--colour-warning) 96.5% 0.04 h), oklch(from var(--colour-warning) 28% 0.06 h)); --colour-danger-soft: light-dark(oklch(from var(--colour-danger) 96.5% 0.04 h), oklch(from var(--colour-danger) 28% 0.06 h)); --colour-brand-soft: light-dark(oklch(from var(--colour-brand) 96.5% 0.04 h), oklch(from var(--colour-brand) 28% 0.06 h)); color-scheme: light dark; } [data-theme="dark"] { color-scheme: dark; } [data-theme="light"] { color-scheme: light; } @media (prefers-color-scheme: dark) { @supports not (color: light-dark(white, black)) { :root { --colour-bg: var(--neutral-950); --colour-surface: var(--neutral-900); --colour-surface-muted: var(--neutral-800); --colour-text: var(--neutral-50); --colour-text-muted: var(--neutral-400); --colour-border: var(--neutral-700); --colour-success: oklch(74% 0.13 142.50); --colour-warning: oklch(80% 0.13 70.08); --colour-danger: oklch(75% 0.15 25.33); --colour-brand-text: var(--brand-300); --colour-success-soft: oklch(from var(--colour-success) 28% 0.06 h); --colour-warning-soft: oklch(from var(--colour-warning) 28% 0.06 h); --colour-danger-soft: oklch(from var(--colour-danger) 28% 0.06 h); --colour-brand-soft: oklch(from var(--colour-brand) 28% 0.06 h); } } } @keyframes dz-fade-in { from { opacity: 0; } } @keyframes dz-fade-out { to { opacity: 0; } } @keyframes dz-scale-up { from { transform: scale(0.92); opacity: 0; } } @keyframes dz-scale-down { to { transform: scale(0.92); opacity: 0; } } @keyframes dz-slide-in-up { from { transform: translateY(8%); opacity: 0; } } @keyframes dz-slide-in-down { from { transform: translateY(-8%); opacity: 0; } } @keyframes dz-slide-in-left { from { transform: translateX(8%); opacity: 0; } } @keyframes dz-slide-in-right { from { transform: translateX(-8%); opacity: 0; } } @keyframes dz-slide-out-up { to { transform: translateY(-8%); opacity: 0; } } @keyframes dz-slide-out-down { to { transform: translateY(8%); opacity: 0; } } @keyframes dz-slide-out-left { to { transform: translateX(-8%); opacity: 0; } } @keyframes dz-slide-out-right { to { transform: translateX(8%); opacity: 0; } } @keyframes dz-shake-x { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @keyframes dz-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { [style*="animation"], [class*="dz-anim-"], .dz-toast { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } } @layer tokens { :root { --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, 'Cascadia Code', monospace; --space-0: 0; --space-0-5: 0.125rem; --space-1: 0.25rem; --space-1-5: 0.375rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --radius-sm: 0.25rem; --radius: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.625rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; --shadow-xs: 0 1px 2px 0 hsl(240 5.9% 10% / 0.03); --shadow-sm: 0 1px 3px 0 hsl(240 5.9% 10% / 0.06), 0 1px 2px -1px hsl(240 5.9% 10% / 0.06); --shadow-md: 0 4px 6px -1px hsl(240 5.9% 10% / 0.07), 0 2px 4px -2px hsl(240 5.9% 10% / 0.05); --shadow-lg: 0 10px 15px -3px hsl(240 5.9% 10% / 0.07), 0 4px 6px -4px hsl(240 5.9% 10% / 0.05); --shadow-xl: 0 20px 25px -5px hsl(240 5.9% 10% / 0.08), 0 8px 10px -6px hsl(240 5.9% 10% / 0.05); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --dz-shadow-sm: var(--shadow-sm); --dz-shadow-card: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 20px -10px oklch(0 0 0 / 0.14); --dz-shadow-md: var(--shadow-md); --dz-shadow-lg: var(--shadow-lg); --dz-transition-fast: var(--duration-fast); --dz-transition-normal: var(--duration-normal); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 15%, transparent); --dz-hero-bg-from: oklch(0.45 0.18 265); --dz-hero-bg-to: oklch(0.38 0.20 280); --dz-shadow-hero: 0 20px 60px -12px oklch(0 0 0 / 0.25); --dz-shadow-xl: var(--shadow-xl); --dz-text-foreground: oklch(0.15 0 0); --dz-text-emphasis: oklch(0.35 0 0); --dz-text-body: oklch(0.45 0 0); --dz-text-muted: oklch(0.5 0 0); --dz-surface-card: white; --dz-feature-icon-bg: oklch(0.92 0.03 260); --dz-section-alt-bg: oklch(0.97 0.01 260); --dz-pricing-highlight-bg: oklch(0.45 0.18 270); --dz-card-shadow-hover: 0 2px 4px oklch(0 0 0 / 0.06), 0 20px 36px -14px oklch(0 0 0 / 0.22); --dz-card-border: 1px solid oklch(0 0 0 / 0.06); --dz-card-icon-ring: inset 0 0 0 1px oklch(0 0 0 / 0.06); --dz-cta-fill: white; --dz-cta-text: var(--dz-hero-bg-from); --dz-cta-fill-hover: var(--dz-hero-btn-hover, oklch(0.98 0 0)); --dz-cta-shadow: 0 6px 20px -8px oklch(0 0 0 / 0.35); --dz-cta-shadow-hover: 0 12px 28px -8px oklch(0 0 0 / 0.45); --dz-border-default: oklch(0 0 0 / 0.1); --dz-border-subtle: oklch(0 0 0 / 0.08); --dz-border-input: oklch(0 0 0 / 0.15); --dz-hero-overlay: oklch(1 0 0 / 0.1); --dz-hero-border: oklch(1 0 0 / 0.5); --dz-hero-border-hover: oklch(1 0 0 / 0.7); --dz-hero-text-dimmed: oklch(1 0 0 / 0.8); --dz-hero-border-dim: oklch(1 0 0 / 0.15); --dz-hero-btn-hover: oklch(0.98 0 0); --dz-header-bg: oklch(1 0 0 / 0.95); --dz-footer-bg: oklch(0.15 0.01 260); --dz-footer-text: oklch(0.7 0 0); --dz-footer-link: oklch(0.6 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); --dz-logo-color: oklch(0.25 0.02 260); --dz-error-bg: oklch(0.95 0.03 25); --dz-error-text: oklch(0.45 0.15 25); --dz-ring-glow: 0 0 0 3px oklch(0.50 0.18 270 / 0.15); --dz-spacing-hero-y: 6rem; --dz-spacing-section-y: 5rem; --dz-spacing-feature-gap: 2rem; --dz-spacing-card-padding: 1.5rem; --dz-font-size-fluid-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem); --dz-font-size-fluid-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem); --dz-font-size-fluid-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem); --dz-font-size-fluid-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem); --dz-font-size-fluid-xl: clamp(1.25rem, 1rem + 1.25vw, 1.75rem); --dz-font-size-fluid-2xl: clamp(1.5rem, 1.1rem + 2vw, 2.25rem); --dz-font-size-fluid-3xl: clamp(1.875rem, 1.3rem + 2.875vw, 3rem); --dz-font-size-hero-headline: clamp(2.25rem, 1.5rem + 3.75vw, 3.5rem); --dz-font-weight-hero-headline: 800; --dz-line-height-hero-headline: 1.1; --dz-letter-spacing-hero-headline: -0.02em; --dz-font-size-subhead: 1.25rem; --dz-line-height-subhead: 1.5; --dz-font-size-cta-headline: 3rem; --dz-font-size-section-headline: 2.25rem; --dz-font-weight-section-headline: 700; --dz-line-height-section-headline: 1.2; --dz-letter-spacing-section-headline: -0.01em; --dz-font-size-body: 1rem; --dz-line-height-body: 1.6; --dz-radius-button: 0.5rem; --dz-radius-card: 0.75rem; --dz-radius-lg: 1rem; --dz-radius-sm: 0.375rem; } .dark, [data-theme="dark"] { --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2); --dz-sidebar-from: hsl(240 10% 5%); --dz-sidebar-to: hsl(240 10% 8%); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 20%, transparent); --dz-section-alt-bg: oklch(0.08 0.01 260); --dz-feature-icon-bg: oklch(0.20 0.04 260); --dz-text-foreground: oklch(0.95 0 0); --dz-text-emphasis: oklch(0.85 0 0); --dz-text-body: oklch(0.70 0 0); --dz-text-muted: oklch(0.55 0 0); --dz-surface-card: oklch(0.18 0.01 260); --dz-border-default: oklch(1 0 0 / 0.12); --dz-border-subtle: oklch(1 0 0 / 0.08); --dz-border-input: oklch(1 0 0 / 0.15); --dz-header-bg: oklch(0.15 0.01 260 / 0.95); --dz-footer-bg: oklch(0.08 0.01 260); --dz-footer-text: oklch(0.65 0 0); --dz-footer-link: oklch(0.55 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); --dz-logo-color: oklch(0.95 0 0); --dz-error-bg: oklch(0.20 0.06 25); --dz-error-text: oklch(0.80 0.15 25); --dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.1); --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.2), 0 1px 2px -1px hsl(0 0% 0% / 0.15); --shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.2), 0 2px 4px -2px hsl(0 0% 0% / 0.15); --shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.25), 0 4px 6px -4px hsl(0 0% 0% / 0.15); --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.3), 0 8px 10px -6px hsl(0 0% 0% / 0.2); --dz-sidebar-from: hsl(240 10% 5%); --dz-sidebar-to: hsl(240 10% 8%); --dz-accent-glow: color-mix(in oklab, var(--colour-brand) 20%, transparent); --dz-section-alt-bg: oklch(0.08 0.01 260); --dz-feature-icon-bg: oklch(0.20 0.04 260); --dz-text-foreground: oklch(0.95 0 0); --dz-text-emphasis: oklch(0.85 0 0); --dz-text-body: oklch(0.70 0 0); --dz-text-muted: oklch(0.55 0 0); --dz-surface-card: oklch(0.18 0.01 260); --dz-border-default: oklch(1 0 0 / 0.12); --dz-border-subtle: oklch(1 0 0 / 0.08); --dz-border-input: oklch(1 0 0 / 0.15); --dz-header-bg: oklch(0.15 0.01 260 / 0.95); --dz-footer-bg: oklch(0.08 0.01 260); --dz-footer-text: oklch(0.65 0 0); --dz-footer-link: oklch(0.55 0 0); --dz-footer-border: oklch(1 0 0 / 0.1); --dz-footer-heading: oklch(1 0 0); --dz-logo-color: oklch(0.95 0 0); --dz-error-bg: oklch(0.20 0.06 25); --dz-error-text: oklch(0.80 0.15 25); --dz-ring-glow: 0 0 0 3px oklch(0.60 0.18 270 / 0.15); } } body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--colour-text); background-color: var(--colour-bg); } code, pre, kbd, samp { font-family: var(--font-mono); } a, button, .btn, input, select, textarea, .dz-card, .menu li a { transition: all var(--duration-fast) var(--ease-default); } :focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } :focus:not(:focus-visible) { outline: none; } @media (prefers-contrast: high) { :root { --colour-border: light-dark(var(--neutral-600), var(--neutral-400)); --colour-text-muted: light-dark(var(--neutral-700), var(--neutral-300)); } .btn { border: 2px solid currentColor; } .badge { border: 1px solid currentColor; } .dz-card { border-width: 2px; } .input, .select, .textarea { border-width: 2px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .drawer-side aside, .drawer-side > aside.bg-base-200, .drawer-side > aside.bg-base-100 { background: var(--colour-surface); border-inline-end: 1px solid var(--colour-border); } .drawer-side aside > div:first-child { border-block-end-color: var(--colour-border); } .drawer-side aside > div:first-child a { color: var(--colour-text); letter-spacing: -0.01em; } .drawer-side .menu a { color: var(--colour-text-muted); border-radius: var(--radius-md); margin-bottom: 0.125rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; } .drawer-side .menu a:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .drawer-side .menu a.active { background: var(--colour-brand); color: var(--colour-brand-contrast); font-weight: 500; box-shadow: none; } .drawer-side aside > div:last-child { border-block-start-color: var(--colour-border); } .navbar { backdrop-filter: blur(8px); background: color-mix(in oklab, var(--colour-bg) 85%, transparent); border-block-end: 1px solid var(--colour-border); } .navbar .text-xl { font-weight: 600; letter-spacing: -0.02em; } .dz-card { box-shadow: var(--shadow-sm); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); transition: box-shadow var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default); } .dz-card:hover { box-shadow: var(--shadow-md); } .dz-card[onclick]:hover, .dz-card a:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); } .dz-card-body { padding: var(--space-xl); } .dz-card-label { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-card-value { font-size: var(--text-2xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; } .dz-card-delta { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--colour-success); } .dz-card-delta svg { width: 0.875rem; height: 0.875rem; } .card-title { font-weight: 600; letter-spacing: -0.01em; } .modal-box { box-shadow: var(--shadow-xl); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); } .modal-backdrop { background: color-mix(in oklab, var(--colour-text) 50%, transparent); backdrop-filter: blur(4px); } .dz-page-header { margin-block-end: 1.5rem; } .dz-page-header h1, .dz-page-header .text-2xl { font-weight: 700; letter-spacing: -0.02em; color: var(--colour-text); } .dz-page-header .text-sm { color: var(--colour-text-muted); } .dz-action-bar { display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem; gap: 1rem; } .dz-action-bar .btn { gap: 0.5rem; } .menu.shadow { border: 1px solid var(--colour-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); background: var(--colour-surface); color: var(--colour-text); } .loading { color: var(--colour-brand); } .dz-spinner { display: inline-block; width: 1rem; height: 1rem; border: 2px solid var(--colour-surface-muted); border-top-color: var(--colour-brand); border-radius: 50%; animation: dz-spin 0.6s linear infinite; } .dz-spinner--sm { width: 0.75rem; height: 0.75rem; border-width: 1.5px; } @keyframes dz-spin { to { transform: rotate(360deg); } } .htmx-request .htmx-hide-on-request { display: none; } .toast .alert { animation: dz-toast-in var(--duration-slow) var(--ease-out); } @keyframes dz-toast-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } .overflow-x-auto[role="region"] { container-type: inline-size; container-name: table-container; } @container table-container (max-width: 480px) { .table thead { display: none; } .table tbody tr { display: block; margin-block-end: 0.75rem; border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 0.5rem; } .table tbody td { display: flex; justify-content: space-between; padding-block: 0.25rem; padding-inline: 0.5rem; border-block-end: none; } .table tbody td::before { content: attr(data-label); font-weight: 500; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--colour-text-muted); } } input[type="range"][data-dz-slider] { -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer; height: 16px; padding: 0; } input[type="range"][data-dz-slider]:focus { outline: none; } input[type="range"][data-dz-slider]::-webkit-slider-runnable-track { height: 4px; background: var(--colour-surface-muted); border-radius: 2px; border: 0; } input[type="range"][data-dz-slider]::-moz-range-track { height: 4px; background: var(--colour-surface-muted); border-radius: 2px; border: 0; } input[type="range"][data-dz-slider]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; height: 16px; width: 16px; border-radius: 50%; background: var(--colour-brand); border: 0; cursor: pointer; margin-top: -6px; transition: filter 80ms cubic-bezier(0.2, 0, 0, 1), box-shadow 80ms cubic-bezier(0.2, 0, 0, 1); } input[type="range"][data-dz-slider]::-webkit-slider-thumb:hover { filter: brightness(1.05); } input[type="range"][data-dz-slider]:focus::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--focus-ring-color); } input[type="range"][data-dz-slider]::-moz-range-thumb { height: 16px; width: 16px; border-radius: 50%; background: var(--colour-brand); border: 0; cursor: pointer; transition: filter 80ms cubic-bezier(0.2, 0, 0, 1), box-shadow 80ms cubic-bezier(0.2, 0, 0, 1); } input[type="range"][data-dz-slider]::-moz-range-thumb:hover { filter: brightness(1.05); } input[type="range"][data-dz-slider]:focus::-moz-range-thumb { box-shadow: 0 0 0 2px var(--focus-ring-color); } input[type="range"][data-dz-slider]:disabled { opacity: 0.6; cursor: not-allowed; } .pcr-app { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: 6px; box-shadow: 0 4px 12px rgb(0 0 0 / 0.08), 0 1px 3px rgb(0 0 0 / 0.06); font-family: inherit; padding: 12px; } .pcr-app .pcr-selection .pcr-color-preview { border-radius: 3px; border: 1px solid var(--colour-border); } .pcr-app .pcr-selection .pcr-color-chooser, .pcr-app .pcr-selection .pcr-color-opacity { margin-inline-start: 8px; } .pcr-app .pcr-interaction { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--colour-border); } .pcr-app .pcr-interaction input, .pcr-app .pcr-interaction .pcr-result { background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: 3px; color: var(--colour-text); font-size: 12px; font-family: ui-monospace, Menlo, monospace; padding: 4px 8px; height: 26px; } .pcr-app .pcr-interaction input:focus, .pcr-app .pcr-interaction .pcr-result:focus { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .pcr-app .pcr-interaction .pcr-type.active, .pcr-app .pcr-interaction .pcr-type:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .pcr-app .pcr-interaction .pcr-type { background: transparent; color: var(--colour-text-muted); border: 1px solid var(--colour-border); border-radius: 3px; padding: 4px 8px; font-size: 11px; font-weight: 500; } .pcr-app .pcr-interaction .pcr-save { background: var(--colour-brand); color: var(--colour-brand-contrast); border: 1px solid var(--colour-brand); border-radius: 3px; padding: 4px 10px; font-size: 12px; font-weight: 500; transition: filter 80ms cubic-bezier(0.2, 0, 0, 1); } .pcr-app .pcr-interaction .pcr-save:hover { filter: brightness(1.1); } .pcr-app .pcr-interaction .pcr-cancel, .pcr-app .pcr-interaction .pcr-clear { background: transparent; color: var(--colour-text-muted); border: 1px solid var(--colour-border); border-radius: 3px; padding: 4px 10px; font-size: 12px; } .pcr-app .pcr-swatches { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--colour-border); } .pcr-app .pcr-swatches > button { border: 1px solid var(--colour-border); border-radius: 3px; margin: 2px; } input[aria-invalid="true"][type="hidden"] + .pcr-app, [data-dz-widget="colorpicker"] .pcr-trigger[aria-invalid="true"] { outline: 1px solid var(--colour-danger); } progress[data-dz-file-progress], progress[data-dz-progress] { appearance: none; -webkit-appearance: none; border: 0; height: 4px; overflow: hidden; border-radius: 2px; background: var(--colour-surface-muted); } progress[data-dz-file-progress]::-webkit-progress-bar, progress[data-dz-progress]::-webkit-progress-bar { background: var(--colour-surface-muted); border-radius: 2px; } progress[data-dz-file-progress]::-webkit-progress-value, progress[data-dz-progress]::-webkit-progress-value { background: var(--colour-brand); border-radius: 2px; transition: width 120ms cubic-bezier(0.2, 0, 0, 1); } progress[data-dz-file-progress]::-moz-progress-bar, progress[data-dz-progress]::-moz-progress-bar { background: var(--colour-brand); border-radius: 2px; } } @layer base { body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: var(--text-base); font-weight: var(--weight-regular); color: var(--colour-text); background: var(--colour-bg); } h1 { font-size: var(--text-3xl); font-weight: var(--weight-semibold); letter-spacing: -0.02em; } h2 { font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: -0.015em; } h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: -0.01em; } h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); } h5 { font-size: var(--text-base); font-weight: var(--weight-semibold); } h6 { font-size: var(--text-sm); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.05em; } a { color: inherit; text-decoration-color: var(--colour-border); text-underline-offset: 0.15em; } a:hover, a:focus-visible { text-decoration-color: currentColor; } input, textarea, select { box-sizing: border-box; background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } button { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: var(--space-sm) var(--space-md); cursor: pointer; font-weight: var(--weight-medium); transition: background var(--duration-fast) var(--ease-out); } button:hover:not(:disabled) { background: var(--colour-bg); } button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } :where(a, summary, [tabindex]:not([tabindex="-1"]), [role="button"], [role="tab"], [role="menuitem"]):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } button:disabled { cursor: not-allowed; opacity: 0.6; } code, kbd, samp, pre { font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size: 0.95em; } pre { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-md); overflow-x: auto; } table { border-collapse: collapse; width: 100%; } th, td { text-align: start; padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--colour-border); } th { font-weight: var(--weight-semibold); color: var(--colour-text-muted); font-size: var(--text-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } @layer components { .dz-accordion { border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); overflow: hidden; } .dz-accordion__item + .dz-accordion__item { border-block-start: 1px solid var(--colour-border); } .dz-accordion__trigger { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-out); } .dz-accordion__trigger::-webkit-details-marker { display: none; } .dz-accordion__trigger:hover { background: var(--colour-surface-muted); } .dz-accordion__trigger:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .dz-accordion__trigger::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.55; mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base) var(--ease-out); } .dz-accordion__item[open] .dz-accordion__trigger::after { transform: rotate(180deg); } .dz-accordion__panel { padding: 0 var(--space-lg) var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); line-height: var(--leading-normal); } @media (prefers-reduced-motion: reduce) { .dz-accordion__trigger, .dz-accordion__trigger::after { transition: none; } } } @layer components { .dz-alert { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) var(--space-lg); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); font-size: var(--text-sm); } .dz-alert__icon { display: inline-flex; width: 1.125rem; height: 1.125rem; flex-shrink: 0; margin-block-start: 0.125rem; } .dz-alert__icon svg { width: 100%; height: 100%; display: block; } .dz-alert__title { font-weight: var(--weight-semibold); margin-block-end: 0.125rem; } .dz-alert__description { color: var(--colour-text-muted); line-height: var(--leading-normal); } .dz-alert[data-dz-tone="info"] { background: var(--colour-brand-soft); border-color: color-mix(in oklab, var(--colour-brand) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="info"] .dz-alert__icon { color: var(--colour-brand); } .dz-alert[data-dz-tone="success"] { background: var(--colour-success-soft); border-color: color-mix(in oklab, var(--colour-success) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="success"] .dz-alert__icon { color: var(--colour-success); } .dz-alert[data-dz-tone="warning"] { background: var(--colour-warning-soft); border-color: color-mix(in oklab, var(--colour-warning) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="warning"] .dz-alert__icon { color: var(--colour-warning); } .dz-alert[data-dz-tone="destructive"] { background: var(--colour-danger-soft); border-color: color-mix(in oklab, var(--colour-danger) 25%, var(--colour-border)); } .dz-alert[data-dz-tone="destructive"] .dz-alert__icon { color: var(--colour-danger); } .dz-separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-lg); margin-inline: 0; } .dz-separator--vertical { display: inline-block; width: 0; align-self: stretch; border-block-start: none; border-inline-start: 1px solid var(--colour-border); margin-block: 0; margin-inline: var(--space-md); } [data-dz-tooltip] { position: relative; } [data-dz-tooltip]::after { content: attr(data-dz-tooltip); position: absolute; inset-block-end: calc(100% + 0.375rem); inset-inline-start: 50%; translate: -50% 0; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); background: var(--colour-text); color: var(--colour-bg); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); z-index: 50; } [data-dz-tooltip]:hover::after, [data-dz-tooltip]:focus-visible::after { opacity: 1; transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { [data-dz-tooltip]::after { transition: none; } } .dz-menu { position: relative; display: inline-block; } .dz-menu > summary { list-style: none; cursor: pointer; gap: var(--space-2xs); } .dz-menu > summary::-webkit-details-marker { display: none; } .dz-menu > summary::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.65; -webkit-mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base, 150ms) var(--ease-out, ease); } .dz-menu[open] > summary::after { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .dz-menu > summary::after { transition: none; } } .dz-menu__panel { position: absolute; inset-block-start: calc(100% + 0.25rem); inset-inline-end: 0; min-width: 11rem; padding: var(--space-xs); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 40; } .dz-menu__item { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); background: none; color: var(--colour-text); font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; } .dz-menu__item:hover { background: var(--colour-bg); } .dz-menu__item[data-dz-tone="destructive"] { color: var(--colour-danger); } .dz-menu__separator { border: none; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-xs); } dialog.dz-alert-dialog { width: min(26rem, calc(100vw - 2rem)); padding: var(--space-2xl); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-lg); text-align: center; } dialog.dz-alert-dialog::backdrop { background: oklch(13% 0.028 261.69 / 0.5); backdrop-filter: blur(2px); } .dz-alert-dialog__icon { display: inline-flex; width: 2rem; height: 2rem; color: var(--colour-danger); margin-block-end: var(--space-md); } .dz-alert-dialog__icon svg { width: 100%; height: 100%; } .dz-alert-dialog__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); margin: 0 0 var(--space-sm); } .dz-alert-dialog__message { color: var(--colour-text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-xl); } .dz-alert-dialog__actions { display: flex; gap: var(--space-md); justify-content: center; } } @layer components { .dz-badge { display: inline-flex; align-items: center; border-radius: var(--radius-sm); font-weight: var(--weight-medium); padding-inline: var(--space-sm); height: 1.25rem; font-size: var(--text-xs); } .dz-badge-sm { padding-inline: var(--space-xs); height: 1rem; font-size: 0.625rem; line-height: 1; } .dz-badge-icon { margin-inline-end: var(--space-xs); font-size: 0.875em; line-height: 1; } .dz-badge[data-dz-tone="success"] { background: var(--colour-success-soft); color: var(--colour-success); } .dz-badge[data-dz-tone="warning"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-badge[data-dz-tone="info"] { background: var(--colour-brand-soft); color: var(--colour-brand-text); } .dz-badge[data-dz-tone="destructive"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-badge[data-dz-tone="neutral"], .dz-badge:not([data-dz-tone]) { background: var(--colour-bg); color: var(--colour-text-muted); } .dz-badge.bordered { border: 1px solid var(--colour-border); } .dz-badge.bordered[data-dz-tone="success"] { border-color: var(--colour-success); } .dz-badge.bordered[data-dz-tone="warning"] { border-color: var(--colour-warning); } .dz-badge.bordered[data-dz-tone="info"] { border-color: var(--colour-brand); } .dz-badge.bordered[data-dz-tone="destructive"] { border-color: var(--colour-danger); } .dz-badge-empty { color: var(--colour-text-muted); font-size: var(--text-xs); } .dz-badge-icon { display: inline-flex; width: 0.875em; height: 0.875em; flex-shrink: 0; } .dz-badge-icon svg { width: 100%; height: 100%; display: block; } } @layer components { .dz-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-button[data-dz-variant="ghost"] { background: transparent; border: 1px solid transparent; color: var(--colour-text-muted); } .dz-button[data-dz-variant="ghost"]:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-button[data-dz-variant="ghost"]:active { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-button[data-dz-variant="outline"] { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); } .dz-button[data-dz-variant="outline"]:hover { background: var(--colour-bg); } .dz-button[data-dz-variant="outline"]:active { background: var(--colour-surface-muted); } .dz-button[data-dz-variant="destructive"] { background: var(--colour-surface); color: var(--colour-danger); border: 1px solid var(--colour-danger); } .dz-button[data-dz-variant="destructive"]:hover { background: var(--colour-danger-soft); } .dz-button[data-dz-variant="destructive"]:active { background: color-mix(in oklch, var(--colour-danger) 16%, var(--colour-surface)); } .dz-button[data-dz-variant="primary"] { background: var(--colour-brand); color: var(--colour-brand-contrast); border: 1px solid var(--colour-brand); box-shadow: var(--shadow-sm); } .dz-button[data-dz-variant="primary"]:hover { background: var(--brand-700); border-color: var(--brand-700); } .dz-button[data-dz-variant="primary"]:active { box-shadow: none; transform: translateY(0.5px); } .dz-button[data-dz-variant="primary"]:disabled, .dz-button[data-dz-variant="primary"][aria-disabled="true"] { opacity: 0.6; pointer-events: none; } .dz-button[data-dz-size="sm"] { height: 1.75rem; padding-inline: var(--space-md); font-size: var(--text-xs); } } @layer components { dialog.dz-dialog { width: min(32rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-lg); outline: none; } dialog.dz-dialog:focus, dialog.dz-dialog:focus-visible { outline: none; } dialog.dz-dialog::backdrop { background: oklch(13% 0.028 261.69 / 0.4); backdrop-filter: blur(2px); } .dz-dialog__header { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md); } .dz-dialog__title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-dialog__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0 0; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-dialog__close:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-dialog__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-dialog__close svg { width: 1rem; height: 1rem; } .dz-dialog__body { padding: 0 var(--space-lg); font-size: var(--text-sm); color: var(--colour-text); line-height: var(--leading-normal); } .dz-dialog__body > p { margin: 0; color: var(--colour-text-muted); } .dz-dialog__footer { display: flex; justify-content: flex-end; gap: var(--space-sm); padding: var(--space-lg); } @media (prefers-reduced-motion: reduce) { .dz-dialog__close { transition: none; } } } @layer components { dialog.dz-drawer { width: min(24rem, calc(100vw - 3rem)); max-width: none; height: 100dvh; max-height: none; padding: 0; border: none; border-radius: 0; background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-lg); outline: none; margin-block: 0; margin-inline: auto 0; border-inline-start: 1px solid var(--colour-border); translate: 0 0; transition: translate var(--duration-base) var(--ease-out), width var(--duration-base) var(--ease-out), overlay var(--duration-base) var(--ease-out) allow-discrete, display var(--duration-base) var(--ease-out) allow-discrete; } dialog.dz-drawer:focus, dialog.dz-drawer:focus-visible { outline: none; } @media (min-width: 40rem) { dialog.dz-drawer[data-dz-width="sm"] { width: min(24rem, calc(100vw - 3rem)); } dialog.dz-drawer[data-dz-width="md"] { width: min(32rem, calc(100vw - 3rem)); } dialog.dz-drawer[data-dz-width="lg"] { width: min(42rem, calc(100vw - 3rem)); } dialog.dz-drawer[data-dz-width="xl"] { width: min(56rem, calc(100vw - 3rem)); } dialog.dz-drawer[data-dz-width="full"] { width: calc(100vw - 3rem); } } dialog.dz-drawer[data-dz-side="left"] { margin-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--colour-border); } @starting-style { dialog.dz-drawer[open] { translate: 100% 0; } dialog.dz-drawer[data-dz-side="left"][open] { translate: -100% 0; } } dialog.dz-drawer:not([open]) { translate: 100% 0; } dialog.dz-drawer[data-dz-side="left"]:not([open]) { translate: -100% 0; } dialog.dz-drawer::backdrop { background: oklch(13% 0.028 261.69 / 0.4); backdrop-filter: blur(2px); } dialog.dz-drawer[open] { display: flex; flex-direction: column; } dialog.dz-drawer > form { display: contents; } .dz-drawer__header { display: flex; align-items: flex-start; gap: var(--space-md); flex: none; padding: var(--space-lg); border-block-end: 1px solid var(--colour-border); } .dz-drawer__title { flex: 1; min-width: 0; margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-drawer__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin: calc(var(--space-xs) * -1) calc(var(--space-xs) * -1) 0 0; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-drawer__close:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-drawer__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-drawer__close svg { width: 1rem; height: 1rem; } .dz-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-lg); font-size: var(--text-sm); color: var(--colour-text); line-height: var(--leading-normal); } .dz-drawer__body > p { margin: 0; color: var(--colour-text-muted); } .dz-drawer__footer { display: flex; justify-content: flex-end; gap: var(--space-sm); flex: none; padding: var(--space-lg); border-block-start: 1px solid var(--colour-border); } .dz-drawer-header { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-md); padding-block: var(--space-sm); border-block-end: 1px solid var(--colour-border); flex-shrink: 0; } .dz-drawer-button { display: inline-flex; align-items: center; gap: var(--space-xs); height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; text-decoration: none; transition: background var(--duration-fast) var(--ease-out); } .dz-drawer-button:hover { background: var(--colour-bg); } .dz-drawer-content { flex: 1; overflow-y: auto; padding: var(--space-md); } @media (prefers-reduced-motion: reduce) { dialog.dz-drawer { transition: none; } dialog.dz-drawer[open], dialog.dz-drawer:not([open]) { translate: 0 0; } .dz-drawer__close { transition: none; } } #dz-detail-drawer.dz-drawer { width: min(42rem, calc(100vw - 3rem)); } } @layer components { .dz-form-field { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; } .dz-form-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-form-required { color: var(--colour-danger); margin-inline-start: var(--space-xs); } .dz-form-hint { font-size: var(--text-xs); color: var(--colour-text-muted); line-height: var(--leading-normal); } .dz-form-error { font-size: var(--text-xs); color: var(--colour-danger); margin-block-start: var(--space-xs); } .dz-form-input { width: 100%; box-sizing: border-box; height: auto; min-height: 2.5rem; line-height: 1.4; padding-block: var(--space-sm); padding-inline: var(--space-md); font-size: var(--text-sm); color: var(--colour-text); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } select.dz-form-input { height: 2.5rem; -webkit-appearance: none; appearance: none; } .dz-form-input::placeholder { color: var(--colour-text-muted); } .dz-form-input:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-form-input[aria-invalid="true"] { border-color: var(--colour-danger); } .dz-form-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--colour-danger); } .dz-form-textarea { height: auto; min-height: 6rem; padding-block: var(--space-sm); resize: vertical; } .dz-form-checkbox-label { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; font-size: var(--text-sm); color: var(--colour-text); } .dz-form-checkbox { width: 1rem; height: 1rem; border-radius: var(--radius-sm); accent-color: var(--colour-brand); } .dz-form-money-group { display: flex; width: 100%; } .dz-form-money-prefix { display: inline-flex; align-items: center; min-height: 2.5rem; padding-inline: var(--space-md); background: var(--colour-bg); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); border: 1px solid var(--colour-border); border-inline-end: 0; border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); } .dz-form-money-select { height: auto; min-height: 2.5rem; line-height: 1.4; padding-block: var(--space-sm); width: 7rem; padding-inline: var(--space-sm); background: var(--colour-surface); color: var(--colour-text); font-size: var(--text-sm); border: 1px solid var(--colour-border); border-inline-end: 0; border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); } .dz-form-money-select:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); } .dz-form-input-trailing { border-start-start-radius: 0; border-end-start-radius: 0; } .dz-file-upload-preview { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md); margin-block-end: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-bg); } .dz-file-upload-preview-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--colour-success); } .dz-file-upload-preview-name { font-size: var(--text-sm); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-file-upload-preview-clear { width: 1.5rem; height: 1.5rem; margin-inline-start: auto; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--colour-text-muted); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-file-upload-preview-clear:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-file-upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 8rem; border: 2px dashed var(--colour-border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-file-upload-zone:hover, .dz-file-upload-zone.dragging { background: var(--colour-bg); border-color: var(--colour-brand); } .dz-file-upload-zone-icon { width: 2rem; height: 2rem; margin-block-end: var(--space-sm); color: var(--colour-text-muted); opacity: 0.6; } .dz-file-upload-zone-prompt { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-file-upload-progress { width: 100%; height: 0.25rem; margin-block-start: var(--space-sm); border-radius: 2px; } .dz-form-color-group { display: flex; align-items: center; gap: var(--space-md); } .dz-form-color-input { block-size: 2rem; inline-size: 2rem; padding: 0; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: transparent; cursor: pointer; transition: filter var(--duration-fast) var(--ease-out); } .dz-form-color-input:hover { filter: brightness(1.05); } .dz-form-color-input::-webkit-color-swatch-wrapper { padding: 0; } .dz-form-color-input::-webkit-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 1px); } .dz-form-color-input::-moz-color-swatch { border: 0; border-radius: calc(var(--radius-sm) - 1px); } .dz-form-color-hex { font-family: var(--font-mono, monospace); font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-form-richtext { border: 1px solid var(--colour-border); border-radius: var(--radius-sm); overflow: hidden; background: var(--colour-bg); } .dz-form-richtext[aria-invalid="true"] { border-color: var(--colour-danger); } .dz-form-slider-group { display: flex; align-items: center; gap: var(--space-md); } .dz-form-slider { inline-size: 100%; } .dz-form-slider-value { font-family: var(--font-mono, monospace); font-size: var(--text-xs); color: var(--colour-text); min-inline-size: 2rem; text-align: end; } .dz-form-companion { margin-block: var(--space-md); padding: var(--space-md); border-radius: var(--radius-md); background: var(--colour-bg); border: 1px solid var(--colour-border); } .dz-form-companion-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--colour-text-muted); margin-block-end: var(--space-2xs); } .dz-form-companion-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: var(--space-sm); } .dz-form-companion-summary-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-sm); } .dz-form-companion-metric { display: flex; flex-direction: column; gap: var(--space-2xs); padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); } .dz-form-companion-metric-label { font-size: var(--text-xs); color: var(--colour-text-muted); text-transform: capitalize; } .dz-form-companion-metric-value { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); font-variant-numeric: tabular-nums; } .dz-form-companion-metric-expr { display: none; } .dz-form-companion-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .dz-form-companion-entry { display: flex; flex-direction: column; gap: var(--space-2xs); padding-inline-start: var(--space-md); border-inline-start: 2px solid var(--colour-border); } .dz-form-companion-entry--ok { border-inline-start-color: var(--colour-success, hsl(145 55% 45%)); } .dz-form-companion-entry--warn { border-inline-start-color: var(--colour-warn, hsl(40 90% 55%)); } .dz-form-companion-entry--pending { border-inline-start-color: var(--colour-text-muted); opacity: 0.85; } .dz-form-companion-entry-title { font-weight: var(--weight-medium); color: var(--colour-text); } .dz-form-companion-entry-caption { font-size: var(--text-sm); color: var(--colour-text-muted); line-height: 1.4; } .dz-form-companion-pipeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-sm); counter-reset: pipeline-step; } .dz-form-companion-stage { counter-increment: pipeline-step; padding: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); position: relative; } .dz-form-companion-stage::before { content: counter(pipeline-step); display: inline-block; width: 1.25rem; height: 1.25rem; text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--colour-text-muted); margin-block-end: var(--space-2xs); } .dz-form-companion-stage-label { display: block; font-weight: var(--weight-medium); color: var(--colour-text); } .dz-form-companion-stage-caption { display: block; font-size: var(--text-sm); color: var(--colour-text-muted); line-height: 1.4; } .dz-form-companion-placeholder { font-size: var(--text-sm); color: var(--colour-text-muted); font-style: italic; } input.dz-checkbox, input.dz-radio { appearance: none; width: 1rem; height: 1rem; margin: 0; border: 1px solid var(--colour-border); background: var(--colour-surface); cursor: pointer; flex-shrink: 0; display: inline-grid; place-content: center; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } input.dz-checkbox { border-radius: var(--radius-sm); } input.dz-radio { border-radius: var(--radius-full); } input.dz-checkbox:checked, input.dz-radio:checked { background: var(--colour-brand); border-color: var(--colour-brand); } input.dz-checkbox:checked::before { content: ""; width: 0.625rem; height: 0.625rem; background: var(--colour-brand-contrast); clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 16%, 84% 4%, 38% 71%); } input.dz-radio:checked::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: var(--radius-full); background: var(--colour-brand-contrast); } input.dz-switch { appearance: none; width: 2rem; height: 1.125rem; margin: 0; border: 1px solid transparent; border-radius: var(--radius-full); background: var(--neutral-300); cursor: pointer; flex-shrink: 0; position: relative; transition: background var(--duration-base) var(--ease-out); } input.dz-switch::before { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 2px; translate: 0 -50%; width: 0.875rem; height: 0.875rem; border-radius: var(--radius-full); background: white; box-shadow: var(--shadow-sm); transition: inset-inline-start var(--duration-base) var(--ease-out); } input.dz-switch:checked { background: var(--colour-brand); } input.dz-switch:checked::before { inset-inline-start: calc(100% - 0.875rem - 2px); } @media (prefers-color-scheme: dark) { input.dz-switch { background: var(--neutral-700); } } [data-theme="dark"] input.dz-switch { background: var(--neutral-700); } [data-theme="dark"] input.dz-switch:checked { background: var(--colour-brand); } @media (prefers-reduced-motion: reduce) { input.dz-switch, input.dz-switch::before { transition: none; } } } @layer components { .dz-form-richtext .dz-richtext-toolbar { display: flex; flex-wrap: wrap; gap: var(--dz-space-1, 0.25rem); padding: var(--dz-space-1, 0.25rem); border: 1px solid var(--dz-color-border, #e5e7eb); border-bottom: none; border-radius: var(--dz-radius-sm, 0.25rem) var(--dz-radius-sm, 0.25rem) 0 0; background: var(--dz-color-surface-subtle, #f9fafb); } .dz-form-richtext .dz-richtext-toolbar button[data-cmd] { appearance: none; border: 1px solid transparent; background: transparent; color: var(--dz-color-text, #111827); min-width: 2rem; min-height: 2rem; padding: 0 var(--dz-space-2, 0.5rem); border-radius: var(--dz-radius-sm, 0.25rem); font-family: var(--dz-font-sans); font-size: var(--text-sm, 0.875rem); cursor: pointer; line-height: 1; } .dz-form-richtext .dz-richtext-toolbar button[data-cmd]:hover, .dz-form-richtext .dz-richtext-toolbar button[data-cmd]:focus-visible { background: var(--dz-color-surface-hover, #f3f4f6); border-color: var(--dz-color-border, #e5e7eb); outline: none; } .dz-form-richtext .dz-richtext-toolbar button[data-cmd][aria-pressed="true"], .dz-form-richtext .dz-richtext-toolbar button[data-cmd].is-active { background: var(--dz-color-surface-selected, #dbeafe); border-color: var(--dz-color-primary, #3b82f6); color: var(--dz-color-primary, #3b82f6); } .dz-form-richtext [data-dz-editor] { min-height: 8rem; padding: var(--dz-space-3, 0.75rem); border: 1px solid var(--dz-color-border, #e5e7eb); border-radius: 0 0 var(--dz-radius-sm, 0.25rem) var(--dz-radius-sm, 0.25rem); background: var(--dz-color-surface, #ffffff); color: var(--dz-color-text, #111827); font-family: var(--dz-font-sans); font-size: var(--text-base, 1rem); line-height: 1.5; outline: none; } .dz-form-richtext [data-dz-editor]:focus-visible, .dz-form-richtext [data-dz-editor]:focus-within { border-color: var(--dz-color-primary, #3b82f6); box-shadow: 0 0 0 2px var(--dz-color-primary-soft, rgba(59, 130, 246, 0.2)); } .dz-form-richtext [data-dz-editor] p { margin: 0 0 var(--dz-space-2, 0.5rem) 0; } .dz-form-richtext [data-dz-editor] p:last-child { margin-bottom: 0; } .dz-form-richtext [data-dz-editor] strong { font-weight: 700; } .dz-form-richtext [data-dz-editor] em { font-style: italic; } .dz-form-richtext [data-dz-editor] u { text-decoration: underline; } .dz-form-richtext [data-dz-editor] s { text-decoration: line-through; } .dz-form-richtext [data-dz-editor] h2 { font-size: var(--dz-heading-app-section-title, var(--text-base)); font-weight: 700; margin: var(--dz-space-3, 0.75rem) 0 var(--dz-space-2, 0.5rem) 0; line-height: 1.25; } .dz-form-richtext [data-dz-editor] h3 { font-size: var(--dz-heading-app-subsection-title, var(--text-sm)); font-weight: 600; margin: var(--dz-space-2, 0.5rem) 0; line-height: 1.3; } .dz-form-richtext [data-dz-editor] ul, .dz-form-richtext [data-dz-editor] ol { margin: 0 0 var(--dz-space-2, 0.5rem) 0; padding-left: 1.5rem; } .dz-form-richtext [data-dz-editor] li { margin: 0; } .dz-form-richtext [data-dz-editor] blockquote { margin: var(--dz-space-2, 0.5rem) 0; padding-left: var(--dz-space-3, 0.75rem); border-left: 3px solid var(--dz-color-border, #e5e7eb); color: var(--dz-color-text-subtle, #6b7280); } .dz-form-richtext [data-dz-editor] code { font-family: var(--dz-font-mono, ui-monospace, SFMono-Regular, monospace); font-size: 0.9em; background: var(--dz-color-surface-subtle, #f3f4f6); padding: 0.1em 0.3em; border-radius: var(--dz-radius-xs, 0.125rem); } .dz-form-richtext [data-dz-editor] a { color: var(--dz-color-primary, #3b82f6); text-decoration: underline; } .dz-form-richtext .dz-richtext-toolbar-sep { display: inline-block; width: 1px; align-self: stretch; background: var(--dz-color-border, #e5e7eb); margin: 0 var(--dz-space-1, 0.25rem); } } @layer components { @layer components { .dz-page { margin: 0; min-height: 100vh; background: var(--colour-bg, var(--colour-surface)); color: var(--colour-text); font-family: var(--font-sans, "Inter", system-ui, sans-serif); } .dz-page > .dz-stack:only-child { max-width: 36rem; margin: var(--space-xl) auto; padding: var(--space-xl) var(--space-lg); } .dz-app-sidebar { flex: 0 0 auto; width: 16rem; } .dz-app-header { display: flex; align-items: center; padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--colour-border); } .dz-app-main { flex: 1 1 auto; padding: var(--space-md); } .dz-app-footer { padding: var(--space-sm) var(--space-md); border-block-start: 1px solid var(--colour-border); } .dz-error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-md); min-height: 60vh; padding: var(--space-xl) var(--space-md); text-align: center; } .dz-error-page__code { margin: 0; font-size: var(--text-4xl, 3rem); font-weight: var(--weight-bold); color: var(--colour-text-muted); letter-spacing: -0.02em; } .dz-error-page__message { margin: 0; font-size: var(--text-lg); color: var(--colour-text); max-width: 40rem; } .dz-error-page__action { margin-block-start: var(--space-md); padding: var(--space-sm) var(--space-lg); color: var(--colour-brand-contrast); background: var(--colour-brand); border-radius: var(--radius-sm); text-decoration: none; } .dz-topbar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--colour-border); } .dz-topbar-leading { display: flex; align-items: center; gap: var(--space-xs); } .dz-topbar-title { flex: 1 1 auto; min-width: 0; } .dz-topbar-title-text { font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-topbar-trailing { display: flex; align-items: center; gap: var(--space-xs); margin-inline-start: auto; } .dz-sidebar { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); height: 100%; background: var(--colour-surface); border-inline-end: 1px solid var(--colour-border); } .dz-sidebar__header { padding-block-end: var(--space-sm); border-block-end: 1px solid var(--colour-border); } .dz-sidebar__items, .dz-nav-group__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2xs, 2px); } .dz-nav-item { display: block; } .dz-nav-link { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-xs) var(--space-sm); color: var(--colour-text); text-decoration: none; border-radius: var(--radius-sm); } .dz-nav-link:hover { background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04)); } .dz-nav-link[aria-current="page"] { background: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.08)); font-weight: var(--weight-medium); } .dz-nav-group { } .dz-nav-group__header { cursor: pointer; padding: var(--space-xs) var(--space-sm); color: var(--colour-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.05em; list-style: none; } .dz-nav-group__header::-webkit-details-marker { display: none; } .dz-surface { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-md); background: var(--colour-surface); color: var(--colour-text); } .dz-surface__header { display: flex; flex-direction: column; gap: var(--space-xs); padding-block-end: var(--space-sm); border-block-end: 1px solid var(--colour-border); } .dz-surface__body { display: flex; flex-direction: column; gap: var(--space-md); } .dz-surface__footer { padding-block-start: var(--space-sm); border-block-start: 1px solid var(--colour-border); } .dz-heading { margin: 0; color: var(--colour-text); font-weight: var(--weight-semibold); line-height: 1.25; } .dz-heading--level-1 { font-size: var(--text-xl); } .dz-heading--level-2 { font-size: var(--text-lg); } .dz-heading--level-3 { font-size: var(--text-base); } .dz-heading--level-4 { font-size: var(--text-sm); font-weight: var(--weight-medium); } .dz-heading--level-5 { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-heading--level-6 { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .dz-grid { display: grid; gap: var(--space-md); } .dz-grid--columns-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .dz-grid--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dz-grid--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dz-grid--columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .dz-grid--columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dz-grid--columns-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .dz-grid--columns-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); } .dz-grid--columns-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .dz-grid--columns-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); } .dz-grid--columns-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .dz-grid--columns-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); } .dz-grid--columns-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); } .dz-region { display: flex; flex-direction: column; gap: var(--space-sm); } .dz-region--kind-list { overflow-x: auto; } .dz-region--kind-list > .dz-table { width: 100%; border-collapse: collapse; background: var(--colour-surface); } .dz-region--kind-list > .dz-table thead > tr { border-block-end: 1px solid var(--colour-border); text-align: left; } .dz-region--kind-list > .dz-table th { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-region--kind-list > .dz-table > tbody > tr { border-block-end: 1px solid var(--colour-border); transition: background-color 0.12s ease; } .dz-region--kind-list > .dz-table > tbody > tr:last-child { border-block-end: none; } .dz-region--kind-list > .dz-table > tbody > tr:hover { background: light-dark(rgba(0, 0, 0, 0.04), rgba(255, 255, 255, 0.04)); } .dz-region--kind-list > .dz-table td { padding: var(--space-sm) var(--space-md); color: var(--colour-text); } .dz-region--kind-detail { overflow-x: auto; } .dz-region--kind-related { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid var(--colour-border); } .dz-region--kind-related .dz-heading--level-2 { margin-block-end: var(--space-sm); } .dz-region--kind-form { } .dz-form-stack { display: flex; flex-direction: column; gap: var(--space-md); max-width: 40rem; } .dz-field { display: flex; flex-direction: column; gap: var(--space-xs); } .dz-field__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-field__input { padding: var(--space-sm) var(--space-md); font-size: var(--text-base); color: var(--colour-text); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); } .dz-field__input:focus { outline: 2px solid var(--colour-accent); outline-offset: 1px; } .dz-ref-picker { display: flex; flex-direction: column; gap: var(--space-xs); } .dz-ref-picker__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-ref-picker__select { padding: var(--space-sm) var(--space-md); font-size: var(--text-base); color: var(--colour-text); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); } .dz-submit { align-self: flex-start; padding: var(--space-sm) var(--space-lg); font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--colour-brand-contrast); background: var(--colour-brand); border: none; border-radius: var(--radius-sm); cursor: pointer; } .dz-submit--variant-secondary { background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); } .dz-submit--variant-danger { background: var(--danger-600); color: var(--colour-brand-contrast); } .dz-text { color: var(--colour-text); } .dz-text--tone-default { color: var(--colour-text); } .dz-text--tone-muted { color: var(--colour-text-muted); } .dz-text--tone-danger { color: var(--colour-danger); } .dz-text--tone-success { color: var(--colour-success); } .dz-text--tone-warning { color: var(--colour-warning); } } .dz-icon, .dz-task-inbox-item-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; vertical-align: -0.125em; width: 1em; height: 1em; color: inherit; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; fill: none; } .dz-icon-solid { fill: currentColor; stroke: none; } .dz-task-inbox-item-icon { width: 1.25rem; height: 1.25rem; color: var(--colour-text-muted); } .dz-icon--size-xs { width: 0.75rem; height: 0.75rem; } .dz-icon--size-sm { width: 1rem; height: 1rem; } .dz-icon--size-md { width: 1.25rem; height: 1.25rem; } .dz-icon--size-lg { width: 1.5rem; height: 1.5rem; } .dz-icon--size-xl { width: 2rem; height: 2rem; } .dz-icon svg, .dz-action-card-icon svg, .dz-status-list-icon svg, .dz-task-inbox-item-icon svg { width: 100%; height: 100%; display: block; } .dz-icon-demo { display: flex; align-items: center; gap: var(--space-lg); color: var(--colour-brand); } .dz-nav-link__icon, .dz-nav-group__icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; flex-shrink: 0; color: var(--colour-text-muted); } .dz-nav-link:hover .dz-nav-link__icon, .dz-nav-link[aria-current="page"] .dz-nav-link__icon { color: currentColor; } .dz-nav-link__icon svg, .dz-nav-group__icon svg { width: 100%; height: 100%; display: block; } .dz-nav-link { display: flex; align-items: center; gap: var(--space-sm); } .dz-empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--colour-text-muted); display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 12rem; } .dz-empty-state__title { color: var(--colour-text); font-weight: 600; margin-bottom: 0.25rem; } .dz-empty-state__description { color: var(--colour-text-muted); font-size: 0.875rem; } .dz-empty-state__icon { display: inline-flex; width: 2rem; height: 2rem; color: var(--colour-text-muted); margin-block-end: var(--space-sm); } .dz-empty-state__icon svg { width: 100%; height: 100%; display: block; } .dz-page > .dz-stack:has(> .dz-card .dz-empty-state) { min-height: 100vh; display: grid; place-items: center; padding: var(--space-2xl); background: var(--colour-bg); } .dz-page > .dz-stack:has(> .dz-card .dz-empty-state) > .dz-card { width: 100%; max-width: 28rem; text-align: center; padding: var(--space-2xl); } .dz-page > .dz-stack:has(> .dz-card .dz-empty-state) .dz-empty-state__action a { display: inline-flex; align-items: center; justify-content: center; height: 2.25rem; padding-inline: var(--space-lg); border-radius: var(--radius-md); background: var(--colour-brand); color: var(--colour-brand-contrast); font-weight: var(--weight-medium); text-decoration: none; box-shadow: var(--shadow-sm); } .dz-page > .dz-stack:has(> .dz-card .dz-empty-state) .dz-empty-state__action a:hover { background: var(--brand-700); } } @layer components { .dz-progress { width: 100%; height: 0.5rem; border-radius: var(--radius-full); background: color-mix(in oklab, var(--colour-brand) 12%, var(--colour-bg)); overflow: hidden; } .dz-progress__bar { width: var(--dz-progress-value, 0%); height: 100%; border-radius: var(--radius-full); background: var(--colour-brand); transition: width var(--duration-slow) var(--ease-out); } .dz-progress[data-dz-tone="success"] .dz-progress__bar { background: var(--colour-success); } .dz-progress[data-dz-tone="warning"] .dz-progress__bar { background: var(--colour-warning); } .dz-progress[data-dz-tone="destructive"] .dz-progress__bar { background: var(--colour-danger); } @media (prefers-reduced-motion: reduce) { .dz-progress__bar { transition: none; } } .dz-avatar { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--colour-brand-soft); color: var(--colour-brand-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.02em; overflow: hidden; flex-shrink: 0; user-select: none; } .dz-avatar[data-dz-size="sm"] { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; } .dz-avatar[data-dz-size="lg"] { width: 2.75rem; height: 2.75rem; font-size: var(--text-sm); } .dz-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .dz-avatar-group { display: inline-flex; } .dz-avatar-group .dz-avatar { border: 2px solid var(--colour-surface); } .dz-avatar-group .dz-avatar + .dz-avatar { margin-inline-start: -0.5rem; } .dz-breadcrumb ol { display: flex; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); } .dz-breadcrumb li { display: flex; align-items: center; gap: var(--space-sm); color: var(--colour-text-muted); } .dz-breadcrumb li + li::before { content: ""; width: 0.875rem; height: 0.875rem; background: currentColor; opacity: 0.5; mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); } .dz-breadcrumb a { color: var(--colour-text-muted); text-decoration: none; } .dz-breadcrumb a:hover { color: var(--colour-text); } .dz-breadcrumb [aria-current="page"] { color: var(--colour-text); font-weight: var(--weight-medium); } .dz-toggle-group { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: color-mix(in oklab, var(--colour-text) 4%, var(--colour-bg)); margin: 0; } .dz-toggle-group label { position: relative; cursor: pointer; } .dz-toggle-group input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dz-toggle-group span { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.25rem var(--space-md); border-radius: calc(var(--radius-md) - 2px); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-toggle-group input:checked + span { background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-sm); } .dz-toggle-group input:focus-visible + span { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-popover { position: relative; display: inline-block; } .dz-popover > summary { list-style: none; cursor: pointer; } .dz-popover > summary::-webkit-details-marker { display: none; } .dz-popover__panel { position: absolute; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0; min-width: 14rem; padding: var(--space-lg); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); z-index: 40; } .dz-popover[data-dz-align="end"] .dz-popover__panel { inset-inline-start: auto; inset-inline-end: 0; } .dz-kbd { display: inline-flex; align-items: center; padding: 0.125rem 0.375rem; border: 1px solid var(--colour-border); border-block-end-width: 2px; border-radius: var(--radius-sm); background: var(--colour-surface); font-family: var(--font-mono); font-size: 0.6875rem; color: var(--colour-text-muted); } .dz-button:has(> .dz-kbd), button:has(> .dz-kbd) { gap: var(--space-sm); } dialog.dz-command { width: min(34rem, calc(100vw - 2rem)); padding: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-lg); background: var(--colour-surface); box-shadow: var(--shadow-lg); margin-block: 12vh auto; margin-inline: auto; } dialog.dz-command::backdrop { background: oklch(13% 0.028 261.69 / 0.4); backdrop-filter: blur(2px); } .dz-command__bar { display: flex; align-items: center; border-block-end: 1px solid var(--colour-border); } .dz-command__input { flex: 1; min-width: 0; padding: var(--space-lg); border: none; background: transparent; color: var(--colour-text); font-family: var(--font-sans); font-size: var(--text-base); outline: none; box-sizing: border-box; } .dz-command__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; margin-inline-end: var(--space-sm); padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text-muted); cursor: pointer; } .dz-command__close:hover { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-command__close:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-command__close svg { width: 1rem; height: 1rem; } .dz-command__results { max-height: 20rem; overflow-y: auto; padding: var(--space-xs); } .dz-command__group { padding: var(--space-sm) var(--space-md) var(--space-xs); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.06em; color: var(--colour-text-muted); } .dz-command__item { display: flex; align-items: center; gap: var(--space-md); width: 100%; padding: var(--space-sm) var(--space-md); border: none; border-radius: var(--radius-sm); background: none; color: var(--colour-text); font-size: var(--text-sm); text-align: start; text-decoration: none; cursor: pointer; } .dz-command__item:hover, .dz-command__item[aria-selected="true"] { background: color-mix(in oklab, var(--colour-brand) 8%, var(--colour-surface)); } .dz-command__item .dz-kbd { margin-inline-start: auto; } .dz-command__empty { padding: var(--space-xl); text-align: center; color: var(--colour-text-muted); font-size: var(--text-sm); } .dz-hover-card { position: relative; display: inline-block; } .dz-hover-card__panel { position: absolute; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0; width: 18rem; padding: var(--space-lg); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transition: opacity var(--duration-fast) var(--ease-out); z-index: 45; } .dz-hover-card:hover .dz-hover-card__panel, .dz-hover-card:focus-within .dz-hover-card__panel { opacity: 1; visibility: visible; transition-delay: 400ms; } @media (prefers-reduced-motion: reduce) { .dz-hover-card__panel { transition: none; } } .dz-scroll-area { overflow: auto; scrollbar-width: thin; scrollbar-color: color-mix(in oklab, var(--colour-text) 25%, transparent) transparent; } .dz-scroll-area::-webkit-scrollbar { width: 8px; height: 8px; } .dz-scroll-area::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--colour-text) 25%, transparent); border-radius: var(--radius-full); } .dz-scroll-area::-webkit-scrollbar-track { background: transparent; } .dz-toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); } .dz-master-detail { display: grid; grid-template-columns: 14rem 1fr; gap: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-md); overflow: hidden; min-height: 12rem; background: var(--colour-surface); } .dz-master-detail-pair .dz-master-detail { grid-template-columns: minmax(18rem, 2fr) minmax(20rem, 3fr); min-height: 22rem; border-radius: var(--radius-lg); } .dz-master-detail__list { list-style: none; margin: 0; padding: var(--space-xs); border-inline-end: 1px solid var(--colour-border); background: var(--colour-surface); min-width: 0; overflow: auto; max-height: min(70vh, 40rem); } .dz-master-detail-pair .dz-master-detail__list { padding: 0; } .dz-master-detail-pair .dz-master-detail__list .dz-card { border: none; border-radius: 0; box-shadow: none; background: transparent; } .dz-master-detail-pair .dz-master-detail__list .dz-card-header { padding: var(--space-sm) var(--space-md); border-bottom: 1px solid var(--colour-border); } .dz-master-detail-pair .dz-master-detail__list .dz-card-body { padding: 0; } a.dz-master-detail__item, button.dz-master-detail__item { display: block; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-sm); color: var(--colour-text); text-decoration: none; font-size: var(--text-sm); border: none; background: transparent; width: 100%; text-align: start; cursor: pointer; } a.dz-master-detail__item:hover, button.dz-master-detail__item:hover { background: var(--colour-bg); } a.dz-master-detail__item[aria-current="true"], button.dz-master-detail__item[aria-current="true"] { background: var(--colour-brand-soft); color: var(--colour-brand-text); font-weight: var(--weight-medium); } tr.dz-master-detail__item { cursor: pointer; } tr.dz-master-detail__item:hover > td { background: var(--colour-bg); } tr.dz-master-detail__item[aria-current="true"] > td { background: var(--colour-brand-soft); color: var(--colour-brand-text); font-weight: var(--weight-medium); } .dz-master-detail__detail { padding: var(--space-md); min-width: 0; overflow: auto; max-height: min(70vh, 40rem); } .dz-master-detail-pair .dz-master-detail__detail { padding: var(--space-md) var(--space-lg); } .dz-master-detail__empty { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--space-xs); min-height: 10rem; color: var(--colour-text-muted, var(--colour-text)); opacity: 0.85; } .dz-master-detail__empty .dz-empty-state-title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); } .dz-master-detail__empty .dz-empty-state-description { margin: 0; font-size: var(--text-sm); } } @layer components { tr.htmx-swapping { opacity: 0; transform: translateX(var(--space-lg)); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); } tr.htmx-added, tr.htmx-settling { animation: dz-row-highlight 600ms var(--ease-out); } @keyframes dz-row-highlight { from { background-color: var(--colour-success-soft); } to { background-color: transparent; } } button.htmx-request, .dz-button.htmx-request { pointer-events: none; opacity: 0.7; } .dz-spinner-track { opacity: 0.25; } .dz-spinner-head { opacity: 0.75; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-block; } .htmx-request.htmx-indicator { display: inline-block; } @media (prefers-reduced-motion: reduce) { tr.htmx-swapping { transform: none; } tr.htmx-added, tr.htmx-settling { animation: none; } } } @layer components { .dz-toast-enter { opacity: 0; transform: translateX(1rem); transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } .dz-toast-leave { opacity: 0; transform: translateX(1rem); transition: opacity var(--duration-base) var(--ease-in), transform var(--duration-base) var(--ease-in); } #dz-toast .alert { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); } @view-transition { navigation: auto; } #main-content { view-transition-name: main-content; } ::view-transition-old(main-content) { animation: dz-view-fade-out var(--duration-base) var(--ease-in) forwards; } ::view-transition-new(main-content) { animation: dz-view-fade-in 200ms var(--ease-out); } @keyframes dz-view-fade-out { to { opacity: 0; transform: translateY(4px); } } @keyframes dz-view-fade-in { from { opacity: 0; transform: translateY(4px); } } dialog::backdrop { background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(2px); } dialog[open] { animation: dz-dialog-in 200ms var(--ease-out); } @keyframes dz-dialog-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } body.select-none { user-select: none; -webkit-user-select: none; } body.cursor-col-resize, body.cursor-col-resize * { cursor: col-resize !important; } @media (prefers-reduced-motion: reduce) { ::view-transition-old(main-content), ::view-transition-new(main-content) { animation: none; } } } @layer components { .dz-pagination { display: flex; align-items: center; justify-content: space-between; padding-inline: 0.25rem; padding-block: var(--space-sm); font-size: var(--text-sm); } .dz-pagination-summary { color: var(--colour-text-muted); } .dz-pagination-pages { display: flex; align-items: center; gap: 0.25rem; } .dz-pagination-page { height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-pagination-page:hover { background: var(--colour-bg); } .dz-pagination-page:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-pagination-page.is-current { background: var(--colour-brand); color: var(--colour-brand-contrast); } .dz-pagination-page:disabled { opacity: 0.4; cursor: not-allowed; } .dz-pagination-page:disabled:hover { background: transparent; } .dz-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; height: 2rem; padding-inline: var(--space-xs); font-size: var(--text-sm); color: var(--colour-text-muted); user-select: none; } } @layer components { .dz-skeleton { --dz-skeleton-base: var(--colour-surface-muted); --dz-skeleton-sheen: color-mix(in oklab, var(--colour-text) 8%, var(--colour-surface-muted)); display: block; width: 100%; border-radius: var(--radius-sm); background-color: var(--dz-skeleton-base); background-image: linear-gradient( 90deg, transparent 0%, var(--dz-skeleton-sheen) 50%, transparent 100% ); background-size: 200% 100%; background-repeat: no-repeat; animation: dz-skeleton-sweep 1.4s var(--ease-out, ease) infinite; } .dz-skeleton[data-dz-shape="text"] { height: 0.75rem; border-radius: var(--radius-full); } .dz-skeleton[data-dz-shape="text"]:last-child { width: 65%; } .dz-skeleton[data-dz-shape="circle"] { width: 2.5rem; height: 2.5rem; flex: none; border-radius: var(--radius-full); } .dz-skeleton[data-dz-shape="block"] { min-height: 4rem; border-radius: var(--radius-md); } .dz-skeleton-lines { display: flex; flex-direction: column; gap: var(--space-sm); } @keyframes dz-skeleton-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } } @media (prefers-reduced-motion: reduce) { .dz-skeleton { animation: none; } } } @layer components { .dz-switch { display: inline-flex; align-items: center; gap: var(--space-sm); cursor: pointer; user-select: none; font-size: var(--text-sm); color: var(--colour-text); } .dz-switch input[data-dz-switch] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .dz-switch__track { position: relative; display: inline-block; width: 2.5rem; height: 1.375rem; flex: none; border-radius: var(--radius-full); background: var(--colour-surface-muted); border: 1px solid var(--colour-border); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .dz-switch__track::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1rem; height: 1rem; border-radius: var(--radius-full); background: var(--colour-surface); box-shadow: var(--shadow-sm, 0 1px 2px color-mix(in oklab, var(--colour-text) 12%, transparent)); transition: transform var(--duration-fast) var(--ease-out); } .dz-switch input[data-dz-switch]:checked + .dz-switch__track { background: var(--colour-brand); border-color: var(--colour-brand); } .dz-switch input[data-dz-switch]:checked + .dz-switch__track::after { transform: translateX(1.125rem); background: var(--colour-brand-contrast, var(--colour-surface)); } .dz-switch input[data-dz-switch]:focus-visible + .dz-switch__track { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .dz-switch input[data-dz-switch]:disabled + .dz-switch__track { opacity: 0.5; cursor: not-allowed; } .dz-switch:has(input[data-dz-switch]:disabled) { cursor: not-allowed; opacity: 0.7; } @media (prefers-reduced-motion: reduce) { .dz-switch__track, .dz-switch__track::after { transition: none; } } } @layer components { .dz-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 2rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-surface); color: var(--colour-text); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-toggle:hover { background: var(--colour-surface-muted); } .dz-toggle[aria-pressed="true"] { background: var(--colour-brand-soft); border-color: color-mix(in oklab, var(--colour-brand) 40%, var(--colour-border)); color: var(--colour-brand-text); } .dz-toggle:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .dz-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .dz-toggle[data-dz-size="sm"] { min-height: 1.75rem; padding-inline: var(--space-xs); font-size: var(--text-xs); } } @layer components { .dz-aspect-ratio { position: relative; display: block; width: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--colour-surface-muted); aspect-ratio: 16 / 9; } .dz-aspect-ratio[data-dz-ratio="1/1"] { aspect-ratio: 1 / 1; } .dz-aspect-ratio[data-dz-ratio="4/3"] { aspect-ratio: 4 / 3; } .dz-aspect-ratio[data-dz-ratio="16/9"] { aspect-ratio: 16 / 9; } .dz-aspect-ratio[data-dz-ratio="21/9"] { aspect-ratio: 21 / 9; } .dz-aspect-ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } } @layer components { .dz-item { display: flex; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); padding-inline: var(--space-md); border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--colour-text); text-align: start; width: 100%; box-sizing: border-box; } .dz-item[data-dz-variant="outline"] { border-color: var(--colour-border); background: var(--colour-surface); } .dz-item[data-dz-variant="muted"] { background: var(--colour-surface-muted); } a.dz-item { text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } a.dz-item:hover, button.dz-item:hover { background: var(--colour-surface-muted); } .dz-item:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .dz-item__media { flex: none; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); background: var(--colour-brand-soft); color: var(--colour-brand-text); font-size: var(--text-sm); font-weight: var(--weight-medium); overflow: hidden; } .dz-item__media > img { width: 100%; height: 100%; object-fit: cover; } .dz-item__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; } .dz-item__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-item__description { font-size: var(--text-xs); color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-item__actions { flex: none; display: flex; align-items: center; gap: var(--space-xs); } .dz-item-group { display: flex; flex-direction: column; gap: var(--space-xs); } } @layer components { .dz-hover-card { position: relative; display: inline-block; } .dz-hover-card__trigger { color: var(--colour-brand-text); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; background: none; border: 0; padding: 0; font: inherit; } .dz-hover-card__trigger:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; border-radius: var(--radius-sm); } .dz-hover-card__content { position: absolute; z-index: var(--z-popover, 40); top: calc(100% + var(--space-xs)); left: 0; min-width: 14rem; max-width: 18rem; padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); box-shadow: var(--shadow-md, 0 8px 24px color-mix(in oklab, var(--colour-text) 12%, transparent)); color: var(--colour-text); font-size: var(--text-sm); opacity: 0; visibility: hidden; transform: translateY(-0.25rem); pointer-events: none; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out); } .dz-hover-card:hover .dz-hover-card__content, .dz-hover-card:focus-within .dz-hover-card__content { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dz-hover-card__title { font-weight: var(--weight-medium); margin: 0 0 var(--space-xs); } .dz-hover-card__description { margin: 0; color: var(--colour-text-muted); font-size: var(--text-xs); line-height: 1.4; } @media (prefers-reduced-motion: reduce) { .dz-hover-card__content { transition: none; } } @media (hover: none) { .dz-hover-card:hover .dz-hover-card__content { opacity: 0; visibility: hidden; pointer-events: none; } .dz-hover-card:focus-within .dz-hover-card__content { opacity: 1; visibility: visible; pointer-events: auto; } } } @layer components { .dz-carousel { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 42rem; } .dz-carousel[data-dz-size="sm"] { max-width: 28rem; } .dz-carousel[data-dz-size="lg"] { max-width: 56rem; } .dz-carousel__viewport { position: relative; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); aspect-ratio: 16 / 9; } .dz-carousel__viewport[data-dz-ratio="1/1"] { aspect-ratio: 1 / 1; } .dz-carousel__viewport[data-dz-ratio="4/3"] { aspect-ratio: 4 / 3; } .dz-carousel__viewport[data-dz-ratio="16/9"] { aspect-ratio: 16 / 9; } .dz-carousel__viewport[data-dz-ratio="21/9"] { aspect-ratio: 21 / 9; } .dz-carousel__track { display: grid; grid-template-areas: "slide"; height: 100%; } .dz-carousel__slide { grid-area: slide; display: none; position: relative; align-items: center; justify-content: center; min-height: 0; min-width: 0; padding: 0; color: var(--colour-text-muted); font-size: var(--text-sm); } .dz-carousel__slide[data-dz-active] { display: flex; } .dz-carousel__slide--media { background: var(--colour-surface); } .dz-carousel__media { display: block; width: 100%; height: 100%; min-height: 0; box-sizing: border-box; position: relative; } .dz-carousel__media img, .dz-carousel__media svg { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .dz-carousel__media--contain { display: flex; align-items: center; justify-content: center; background: var(--colour-surface-muted); padding: 0; } .dz-carousel__media--contain img, .dz-carousel__media--contain svg { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .dz-carousel__media--cover { display: block; } .dz-carousel__media--cover .dz-aspect-ratio { width: 100%; height: 100%; border-radius: 0; background: transparent; } .dz-carousel__chip { position: absolute; top: var(--space-sm); inset-inline-start: var(--space-sm); z-index: 1; margin: 0; padding: 0.2rem 0.5rem; border-radius: var(--radius-sm); background: oklch(0% 0 0 / 0.55); color: oklch(100% 0 0); font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: 1.2; pointer-events: none; } .dz-carousel__slide--hero { display: none; flex-direction: column; align-items: stretch; justify-content: flex-end; } .dz-carousel__slide--hero[data-dz-active] { display: flex; } .dz-carousel__slide--hero > .dz-carousel__media { position: absolute; inset: 0; } .dz-carousel__hero { position: relative; z-index: 1; margin-top: auto; padding: var(--space-lg) var(--space-md) var(--space-md); background: linear-gradient( to top, oklch(12% 0.02 260 / 0.92) 0%, oklch(12% 0.02 260 / 0.55) 55%, oklch(12% 0.02 260 / 0) 100% ); color: oklch(98% 0 0); text-align: start; } .dz-carousel__hero-kicker { margin: 0 0 0.15rem; font-size: var(--text-xs); opacity: 0.85; letter-spacing: 0.02em; text-transform: uppercase; } .dz-carousel__hero-title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: 1.25; color: inherit; } .dz-carousel__hero-text { margin: 0.35rem 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); opacity: 0.9; max-width: 28rem; } .dz-carousel__hero .dz-button { margin-top: var(--space-sm); } .dz-carousel__hero-live { margin-top: var(--space-xs); min-height: 1.25rem; font-size: var(--text-xs); } .dz-carousel__caption { margin: 0; font-size: var(--text-xs); color: var(--colour-text-muted); line-height: var(--leading-normal); } .dz-carousel__status { margin: 0; font-size: var(--text-xs); color: var(--colour-text-muted); text-align: center; } .dz-carousel__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; } .dz-carousel__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-surface); color: var(--colour-text); font-size: var(--text-lg); line-height: 1; cursor: pointer; } .dz-carousel__btn:hover { background: var(--colour-surface-muted); } .dz-carousel__btn:disabled { opacity: 0.45; cursor: not-allowed; } .dz-carousel__dots { display: flex; gap: var(--space-xs); align-items: center; } .dz-carousel__dot { position: relative; width: 1.5rem; height: 1.5rem; border-radius: 999px; border: none; padding: 0; background: transparent; cursor: pointer; flex: none; } .dz-carousel__dot::before { content: ""; position: absolute; inset: 50%; width: 0.5rem; height: 0.5rem; transform: translate(-50%, -50%); border-radius: 999px; background: var(--colour-border); } .dz-carousel__dot[aria-current="true"]::before { background: var(--colour-brand); width: 1rem; } @media (prefers-reduced-motion: reduce) { } } @layer components { .dz-menubar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); padding-inline: var(--space-2xs); } .dz-menubar__item { position: relative; } .dz-menubar__trigger { display: inline-flex; align-items: center; min-height: 2rem; padding-inline: var(--space-sm); border: none; background: transparent; color: var(--colour-text); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; border-radius: var(--radius-sm); list-style: none; } .dz-menubar__trigger::-webkit-details-marker { display: none; } .dz-menubar__item[open] > .dz-menubar__trigger, .dz-menubar__trigger:hover { background: var(--colour-surface-muted); } .dz-menubar__panel { position: absolute; top: 100%; left: 0; z-index: 20; min-width: 10rem; margin-top: 0.125rem; padding: var(--space-2xs); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); box-shadow: var(--shadow-md, 0 4px 16px color-mix(in oklab, #000 12%, transparent)); } .dz-menubar__panel a, .dz-menubar__panel button { display: block; width: 100%; text-align: left; padding: var(--space-xs) var(--space-sm); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text); font-size: var(--text-sm); text-decoration: none; cursor: pointer; } .dz-menubar__panel a:hover, .dz-menubar__panel button:hover { background: var(--colour-surface-muted); } } @layer components { .dz-bubble { display: inline-block; max-width: min(36rem, 100%); padding-block: var(--space-xs); padding-inline: var(--space-sm); border-radius: var(--radius-lg, 0.75rem); background: var(--colour-surface-muted); color: var(--colour-text); font-size: var(--text-sm); line-height: 1.45; word-wrap: break-word; overflow-wrap: anywhere; } .dz-bubble[data-dz-from="out"] { background: var(--colour-brand-soft, var(--colour-brand)); color: var(--colour-brand-text, var(--colour-text)); } .dz-bubble[data-dz-from="in"] { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-bubble[data-dz-tone="danger"] { background: color-mix(in oklab, var(--colour-danger, #c0392b) 18%, var(--colour-surface)); color: var(--colour-text); } .dz-bubble p { margin: 0; } .dz-bubble p + p { margin-top: var(--space-2xs); } } @layer components { .dz-message { display: flex; align-items: flex-end; gap: var(--space-sm); width: 100%; max-width: 100%; box-sizing: border-box; } .dz-message[data-dz-from="out"] { flex-direction: row-reverse; } .dz-message__media { flex: none; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--colour-brand-soft); color: var(--colour-brand-text); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-medium); overflow: hidden; } .dz-message__media > img { width: 100%; height: 100%; object-fit: cover; } .dz-message__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; max-width: min(36rem, calc(100% - 3rem)); } .dz-message[data-dz-from="out"] .dz-message__body { align-items: flex-end; } .dz-message[data-dz-from="in"] .dz-message__body { align-items: flex-start; } .dz-message__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-size: var(--text-xs, 0.75rem); color: var(--colour-text-muted, var(--colour-text-secondary, #6b7280)); } .dz-message[data-dz-from="out"] .dz-message__meta { flex-direction: row-reverse; } .dz-message__author { font-weight: var(--weight-medium); color: var(--colour-text); } .dz-message__time { font-variant-numeric: tabular-nums; } } @layer components { .dz-message-scroller { display: flex; flex-direction: column; gap: var(--space-md); width: 100%; max-height: min(28rem, 70vh); overflow-x: hidden; overflow-y: auto; padding: var(--space-md); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); box-sizing: border-box; scroll-behavior: smooth; } .dz-message-scroller[data-dz-size="sm"] { max-height: 14rem; padding: var(--space-sm); gap: var(--space-sm); } .dz-message-scroller[data-dz-size="lg"] { max-height: min(40rem, 80vh); } .dz-message-scroller:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .dz-message-scroller__empty { margin: auto; padding: var(--space-lg); color: var(--colour-text-muted, var(--colour-text-secondary, #6b7280)); font-size: var(--text-sm); text-align: center; } } @layer components { .dz-navigation-menu { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; width: 100%; border-bottom: 1px solid var(--colour-border); background: var(--colour-surface); padding-inline: var(--space-sm); } .dz-navigation-menu__list { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; padding: 0; list-style: none; } .dz-navigation-menu__item { position: relative; } .dz-navigation-menu__link, .dz-navigation-menu__trigger { display: inline-flex; align-items: center; gap: var(--space-2xs); min-height: 2.75rem; padding-inline: var(--space-md); border: none; background: transparent; color: var(--colour-text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; cursor: pointer; border-radius: var(--radius-sm); list-style: none; } .dz-navigation-menu__trigger::-webkit-details-marker { display: none; } .dz-navigation-menu__trigger::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; opacity: 0.65; -webkit-mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); mask: center / contain no-repeat url('data:image/svg+xml;utf8,'); transition: transform var(--duration-base, 150ms) var(--ease-out, ease); } .dz-navigation-menu__branch[open] > .dz-navigation-menu__trigger::after, details.dz-navigation-menu__branch[open] > .dz-navigation-menu__trigger::after { transform: rotate(180deg); } .dz-navigation-menu__item[open] > .dz-navigation-menu__trigger, .dz-navigation-menu__link:hover, .dz-navigation-menu__trigger:hover, .dz-navigation-menu__link[aria-current="page"] { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-navigation-menu__branch[open] > .dz-navigation-menu__trigger { background: var(--colour-surface-muted); color: var(--colour-text); } .dz-navigation-menu__link:focus-visible, .dz-navigation-menu__trigger:focus-visible { outline: 2px solid var(--colour-brand); outline-offset: 2px; } .dz-navigation-menu__panel { position: absolute; top: 100%; left: 0; z-index: 30; min-width: 16rem; max-width: min(36rem, 90vw); margin-top: 0; padding: var(--space-md); border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); box-shadow: var(--shadow-md, 0 4px 16px color-mix(in oklab, #000 12%, transparent)); } .dz-navigation-menu__panel[data-dz-layout="mega"] { display: grid; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: var(--space-md) var(--space-lg); min-width: 24rem; } .dz-navigation-menu__group { display: flex; flex-direction: column; gap: var(--space-2xs); min-width: 0; } .dz-navigation-menu__group-title { margin: 0 0 var(--space-2xs); padding-inline: var(--space-xs); font-size: var(--text-xs, 0.75rem); font-weight: var(--weight-semibold, 600); letter-spacing: 0.04em; text-transform: uppercase; color: var(--colour-text-muted, var(--colour-text-secondary, #6b7280)); } .dz-navigation-menu__panel a { display: block; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); color: var(--colour-text); font-size: var(--text-sm); text-decoration: none; } .dz-navigation-menu__panel a:hover { background: var(--colour-surface-muted); } .dz-navigation-menu__panel a small { display: block; margin-top: 0.125rem; font-size: var(--text-xs, 0.75rem); font-weight: normal; color: var(--colour-text-muted, var(--colour-text-secondary, #6b7280)); } @media (prefers-reduced-motion: reduce) { .dz-navigation-menu__trigger::after { transition: none; } } } @layer components { .dz-marker { position: relative; display: inline-flex; flex-direction: column; align-items: center; width: max-content; max-width: 12rem; color: var(--colour-brand); font-size: var(--text-xs, 0.75rem); text-align: center; cursor: default; } .dz-marker__pin { display: block; width: 1.5rem; height: 1.5rem; border-radius: 50% 50% 50% 0; background: currentColor; transform: rotate(-45deg); box-shadow: 0 1px 3px color-mix(in oklab, #000 25%, transparent); } .dz-marker__pin::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0.5rem; height: 0.5rem; border-radius: 999px; background: var(--colour-surface); transform: translate(-50%, -50%) rotate(45deg); } .dz-marker__pin { position: relative; } .dz-marker__label { margin-top: 0.25rem; padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); color: var(--colour-text); font-weight: var(--weight-medium); line-height: 1.2; box-shadow: var(--shadow-sm, 0 1px 2px color-mix(in oklab, #000 8%, transparent)); } .dz-marker[data-dz-tone="success"] { color: var(--colour-success, #1a7f37); } .dz-marker[data-dz-tone="warning"] { color: var(--colour-warning, #b45309); } .dz-marker[data-dz-tone="danger"] { color: var(--colour-danger, #c0392b); } .dz-marker[data-dz-size="lg"] .dz-marker__pin { width: 2rem; height: 2rem; } .dz-marker[data-dz-size="lg"] .dz-marker__pin::after { width: 0.625rem; height: 0.625rem; } .dz-marker:focus-within .dz-marker__label, .dz-marker:hover .dz-marker__label { border-color: currentColor; } } @layer components { .dz-table { display: flex; flex-direction: column; gap: var(--space-md); font-variant-numeric: tabular-nums; } .dz-table-toolbar { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; } .dz-table-toolbar-filters { flex: 1 1 0; min-width: 0; } .dz-table-col-menu { position: relative; } summary.dz-table-col-menu-trigger { list-style: none; } summary.dz-table-col-menu-trigger::-webkit-details-marker { display: none; } .dz-table-col-menu-trigger { display: inline-flex; align-items: center; gap: var(--space-xs); height: 1.75rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); background: var(--colour-bg); border: 1px solid var(--colour-border); cursor: pointer; user-select: none; transition: background var(--duration-fast) var(--ease-out); } .dz-table-col-menu-trigger:hover { background: var(--colour-surface); } .dz-table-col-menu-panel { position: absolute; right: 0; top: 100%; margin-block-start: var(--space-xs); width: 11rem; z-index: 100; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding-block: var(--space-xs); overflow: hidden; } .dz-table-col-menu-item { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: var(--space-xs); cursor: pointer; font-size: var(--text-sm); color: var(--colour-text); transition: background var(--duration-fast) var(--ease-out); } .dz-table-col-menu-item:hover { background: var(--colour-bg); } .dz-table-col-menu-reset { display: block; width: 100%; padding-inline: var(--space-md); padding-block: var(--space-xs); margin-block-start: var(--space-xs); border: none; border-block-start: 1px solid var(--colour-border); background: none; text-align: start; cursor: pointer; font-size: var(--text-sm); color: var(--colour-text-muted); transition: background var(--duration-fast) var(--ease-out); } .dz-table-col-menu-reset:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-table-col-menu-checkbox { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-sm); accent-color: var(--colour-brand); cursor: pointer; } .dz-table-scroll { position: relative; border: 1px solid var(--colour-border); border-radius: var(--radius-md); overflow: hidden; min-height: calc(min(var(--dz-list-rows, 10), 10) * 2.75rem + 3rem); } .dz-table-scroll-x { overflow-x: auto; } .dz-table-loading { position: absolute; inset: 0; z-index: 10; display: none; align-items: center; justify-content: center; background: color-mix(in oklch, var(--colour-bg) 60%, transparent); backdrop-filter: blur(1px); pointer-events: none; opacity: 0; transition: opacity 80ms; } .dz-table:has(.htmx-request) .dz-table-loading { display: flex; opacity: 1; } .dz-table-loading-spinner { width: 1.25rem; height: 1.25rem; color: var(--colour-text-muted); animation: dz-spin 1s linear infinite; } @keyframes dz-spin { to { transform: rotate(360deg); } } .dz-table-grid { width: 100%; border-collapse: collapse; } .dz-table-th { position: relative; padding-inline: var(--space-md); padding-block: var(--space-sm); text-align: start; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-text-muted); user-select: none; } .dz-table-th-select { width: 2.5rem; } .dz-table-th-actions { width: 4rem; } .dz-inline-edit-input { width: 100%; height: 1.75rem; padding-inline: var(--space-sm); font-size: var(--text-sm); color: var(--colour-text); background: var(--colour-surface); border-radius: var(--radius-sm); border: 1px solid var(--colour-brand); outline: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .dz-inline-edit-input:focus-visible { box-shadow: 0 0 0 2px color-mix(in oklch, var(--colour-brand) 20%, transparent); } .dz-inline-edit-input:disabled { opacity: 0.5; cursor: not-allowed; } .dz-inline-edit-select { padding-inline-end: var(--space-lg); appearance: none; } .dz-inline-edit-checkbox { width: 1rem; height: 1rem; border-radius: var(--radius-sm); accent-color: var(--colour-brand); cursor: pointer; } .dz-inline-edit-checkbox:disabled { opacity: 0.5; cursor: not-allowed; } .dz-table-resize-handle { position: absolute; top: 0; right: 0; width: 8px; height: 100%; cursor: col-resize; touch-action: none; z-index: 1; } .dz-table-resize-handle::after { content: ""; position: absolute; top: 20%; bottom: 20%; right: 1px; width: 2px; border-radius: 1px; background: transparent; transition: background var(--duration-fast) var(--ease-out); } .dz-table-resize-handle:hover::after, [data-dz-resizing] .dz-table-resize-handle::after { background: var(--colour-border); } [data-dz-grid][data-dz-resizing] { cursor: col-resize; user-select: none; } @media (pointer: coarse) { .dz-table-resize-handle { width: 24px; } .dz-table-resize-handle::after { background: var(--colour-border); } } .dz-table-sort-button { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; background: transparent; border: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; transition: color var(--duration-fast) var(--ease-out); } .dz-table-sort-button:hover { color: var(--colour-text); } .dz-table-sort-icon { pointer-events: none; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .dz-table-sort-button:hover .dz-table-sort-icon { opacity: 0.4; } .dz-table-th[aria-sort="ascending"] .dz-table-sort-icon { opacity: 1; transform: none; } .dz-table-th[aria-sort="descending"] .dz-table-sort-icon { opacity: 1; transform: rotate(180deg); } .dz-table-body > tr + tr { border-block-start: 1px solid var(--colour-border); } .dz-table-empty { display: none; flex-direction: column; align-items: center; gap: var(--space-md); padding-block: var(--space-3xl); color: var(--colour-text-muted); } .dz-table-grid:not(:has(tbody tr td)) ~ .dz-table-empty { display: flex; } .dz-table-empty-icon { width: 2.5rem; height: 2.5rem; opacity: 0.3; } .dz-table-empty-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--colour-text); margin: 0; } .dz-table-empty-hint { font-size: var(--text-sm); margin: 0; } .dz-table-footer { display: flex; align-items: center; justify-content: space-between; } .dz-tr-action-icon { width: 0.875rem; height: 0.875rem; display: block; } .dz-bulk-actions { display: none; align-items: center; gap: var(--space-md); } .dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-actions, [data-dz-grid]:not([data-dz-bulk-count="0"]) .dz-bulk-actions { display: flex; } .dz-bulk-plural { display: inline; } .dz-table[data-dz-bulk-count="1"] .dz-bulk-plural, [data-dz-grid][data-dz-bulk-count="1"] .dz-bulk-plural { display: none; } .dz-bulk-summary-selected { display: none; } .dz-bulk-summary-rows { display: inline; } .dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-summary-selected, [data-dz-grid]:not([data-dz-bulk-count="0"]) .dz-bulk-summary-selected { display: inline; } .dz-table:not([data-dz-bulk-count="0"]) .dz-bulk-summary-rows, [data-dz-grid]:not([data-dz-bulk-count="0"]) .dz-bulk-summary-rows { display: none; } .dz-bulk-delete { display: inline-flex; align-items: center; gap: 0.375rem; height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-danger); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-bulk-delete:hover { background: color-mix(in oklch, var(--colour-danger) 8%, transparent); } .dz-bulk-clear { font-size: var(--text-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .dz-bulk-clear:hover { color: var(--colour-text); } .dz-bulk-matching { font-size: var(--text-sm); color: var(--colour-brand-text); background: transparent; border: 0; cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .dz-bulk-matching:hover { text-decoration: underline; } .dz-table[data-dz-grid-all-matching="true"] .dz-bulk-matching, [data-dz-grid][data-dz-grid-all-matching="true"] .dz-bulk-matching { display: none; } .dz-grid-announce { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dz-filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: flex-end; } .dz-filter-cell { display: flex; flex-direction: column; gap: 0.125rem; width: 10rem; } .dz-filter-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-filter-select, .dz-filter-input { min-height: 2rem; width: 100%; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-surface); padding-inline: var(--space-sm); padding-block: 0.25rem; font-size: var(--text-sm); color: var(--colour-text); outline: none; transition: box-shadow var(--duration-base) var(--ease-out); } .dz-filter-select:focus-visible, .dz-filter-input:focus-visible { box-shadow: 0 0 0 1px var(--colour-brand); } .dz-tr-row { height: 2.25rem; font-size: var(--text-sm); color: var(--colour-text); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .dz-tr-row:hover { background: var(--colour-surface); } .dz-tr-row.is-selected { background: color-mix(in oklch, var(--colour-brand) 10%, transparent); } .dz-tr-row.is-saving { opacity: 0.7; } .dz-tr-row.is-error { border-inline-start: 2px solid var(--colour-danger); } .dz-tr-checkbox-cell { width: 2.5rem; padding-inline: var(--space-md); } .dz-tr-checkbox { width: 0.875rem; height: 0.875rem; border-radius: var(--radius-sm); accent-color: var(--colour-brand); cursor: pointer; } .dz-tr-cell { padding-inline: var(--space-md); } .dz-tr-cell.is-numeric { text-align: end; font-variant-numeric: tabular-nums; } .dz-tr-cell-display { display: block; width: 100%; border-radius: var(--radius-sm); padding-inline: 0.25rem; margin-inline: -0.25rem; padding-block: 0.125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: outline var(--duration-fast) var(--ease-out); touch-action: manipulation; } .dz-tr-cell-display:hover { outline: 1px solid var(--colour-border); cursor: text; } .dz-tr-cell-truncate { display: block; max-width: 15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-tr-actions-cell { width: 4rem; padding-inline: var(--space-sm); text-align: end; } .dz-tr-actions { display: inline-flex; align-items: center; gap: 0.125rem; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out); } .dz-tr-row:hover .dz-tr-actions { opacity: 1; } .dz-tr-action { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); text-decoration: none; } .dz-tr-action:hover { background: color-mix(in oklch, var(--colour-bg) 50%, transparent); color: var(--colour-text); } .dz-tr-action.is-destructive:hover { background: color-mix(in oklch, var(--colour-danger) 10%, transparent); color: var(--colour-danger); } .dz-tr-empty-cell { text-align: center; padding-block: var(--space-2xl); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-tr-empty-link { margin-inline-start: var(--space-sm); color: var(--colour-brand); text-decoration: none; } .dz-tr-empty-link:hover { text-decoration: underline; } } @layer components { .dz-stack { display: flex; flex-direction: column; gap: var(--space-md); } .dz-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); } .dz-cluster[data-dz-align="start"] { align-items: flex-start; } .dz-cluster[data-dz-align="end"] { align-items: flex-end; } .dz-cluster[data-dz-align="baseline"] { align-items: baseline; } .dz-cluster[data-dz-align="stretch"] { align-items: stretch; } .dz-cluster[data-dz-justify="end"] { justify-content: flex-end; } .dz-cluster[data-dz-justify="between"] { justify-content: space-between; } .dz-cluster[data-dz-justify="center"] { justify-content: center; } .dz-stack[data-dz-gap="none"], .dz-cluster[data-dz-gap="none"], .dz-auto-grid[data-dz-gap="none"] { gap: 0; } .dz-stack[data-dz-gap="xs"], .dz-cluster[data-dz-gap="xs"], .dz-auto-grid[data-dz-gap="xs"] { gap: var(--space-xs); } .dz-stack[data-dz-gap="sm"], .dz-cluster[data-dz-gap="sm"], .dz-auto-grid[data-dz-gap="sm"] { gap: var(--space-sm); } .dz-stack[data-dz-gap="md"], .dz-cluster[data-dz-gap="md"], .dz-auto-grid[data-dz-gap="md"] { gap: var(--space-md); } .dz-stack[data-dz-gap="lg"], .dz-cluster[data-dz-gap="lg"], .dz-auto-grid[data-dz-gap="lg"] { gap: var(--space-lg); } .dz-stack[data-dz-gap="xl"], .dz-cluster[data-dz-gap="xl"], .dz-auto-grid[data-dz-gap="xl"] { gap: var(--space-xl); } .dz-sidebar-layout { display: flex; flex-wrap: wrap; gap: var(--space-lg); } .dz-sidebar-layout > :first-child { flex-basis: var(--dz-sidebar-width, 16rem); flex-grow: 1; } .dz-sidebar-layout > :last-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--dz-sidebar-content-min, 50%); } .dz-sidebar-layout[data-dz-side="end"] > :first-child { flex-basis: 0; flex-grow: 999; min-inline-size: var(--dz-sidebar-content-min, 50%); } .dz-sidebar-layout[data-dz-side="end"] > :last-child { flex-basis: var(--dz-sidebar-width, 16rem); flex-grow: 1; min-inline-size: 0; } .dz-auto-grid { display: grid; grid-template-columns: repeat( auto-fit, minmax(min(var(--dz-grid-min, 14rem), 100%), 1fr) ); gap: var(--space-md); } .dz-center { box-sizing: content-box; margin-inline: auto; max-inline-size: 65ch; } .dz-center[data-dz-measure="wide"] { max-inline-size: 90ch; } .dz-center[data-dz-measure="full"] { max-inline-size: none; } } @layer components { .dz-app-shell { } .dz-app-content { display: flex; flex-direction: column; min-height: 100vh; transition: padding var(--duration-base) var(--ease-out); } @media (min-width: 64rem) { [data-dz-sidebar="open"] .dz-app-content { padding-inline-start: 16rem; } } .dz-topbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; align-items: center; height: 3.5rem; padding-inline: var(--space-md); gap: var(--space-md); background: color-mix(in oklch, var(--colour-bg) 85%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid color-mix(in oklch, var(--colour-border) 50%, transparent); box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04); } @media (min-width: 64rem) { .dz-topbar { padding-inline: var(--space-lg); } } .dz-topbar-leading, .dz-topbar-trailing { flex: none; display: flex; align-items: center; gap: var(--space-sm); } .dz-sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: none; border-radius: var(--radius-md); background: transparent; color: var(--colour-text); cursor: pointer; } .dz-sidebar-toggle:hover { background: var(--colour-surface); } .dz-sidebar-toggle__icon, .dz-sidebar-toggle__icon::before, .dz-sidebar-toggle__icon::after { display: block; width: 1.125rem; height: 2px; background: currentColor; border-radius: 1px; } .dz-sidebar-toggle__icon { position: relative; } .dz-sidebar-toggle__icon::before, .dz-sidebar-toggle__icon::after { content: ""; position: absolute; inset-inline-start: 0; } .dz-sidebar-toggle__icon::before { inset-block-start: -6px; } .dz-sidebar-toggle__icon::after { inset-block-start: 6px; } .dz-topbar-title { flex: 1 1 0; min-width: 0; } .dz-topbar-title-text { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-topbar-user { font-size: var(--text-sm); color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12.5rem; display: none; } @media (min-width: 40rem) { .dz-topbar-user { display: inline; } } .dz-icon-button { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-icon-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-icon-button > svg { width: 1.25rem; height: 1.25rem; } .dz-icon-button.is-mobile-only { display: inline-flex; } @media (min-width: 64rem) { .dz-icon-button.is-mobile-only { display: none; } } .dz-icon-button.is-desktop-only { display: none; } @media (min-width: 64rem) { .dz-icon-button.is-desktop-only { display: inline-flex; } } .dz-app-main { flex: 1 1 0; padding: var(--space-md); } @media (min-width: 64rem) { .dz-app-main { padding: var(--space-lg); } } .dz-page-purpose { font-size: var(--text-sm); color: var(--colour-text-muted); margin-block: 0.25rem var(--space-md); } .dz-app-backdrop { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); z-index: 30; } @media (min-width: 64rem) { .dz-app-backdrop { display: none !important; } } .dz-sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; width: 16rem; background: var(--colour-surface); border-inline-end: 1px solid var(--colour-border); display: flex; flex-direction: column; transform: translateX(-100%); transition: transform var(--duration-base) var(--ease-out); } [data-dz-sidebar="open"] .dz-sidebar { transform: translateX(0); } .dz-sidebar-brand { padding: var(--space-md); border-block-end: 1px solid var(--colour-border); display: flex; align-items: center; justify-content: space-between; } .dz-sidebar-brand-text { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-sidebar-nav { flex: 1 1 0; overflow-y: auto; } .dz-sidebar-nav-list { padding: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; list-style: none; margin: 0; } .dz-sidebar-nav-link { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-text-muted); text-decoration: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-sidebar-nav-link:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-sidebar-nav-link[aria-current="page"] { background: var(--colour-bg); color: var(--colour-text); font-weight: var(--weight-medium); } .dz-sidebar-nav-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .dz-sidebar-nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-sidebar-nav-group-summary { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; list-style: none; transition: background var(--duration-fast) var(--ease-out); } .dz-sidebar-nav-group-summary::-webkit-details-marker { display: none; } .dz-sidebar-nav-group-summary:hover { background: var(--colour-bg); } .dz-sidebar-nav-group-children { padding-inline-start: var(--space-md); margin-block-start: 0.125rem; display: flex; flex-direction: column; gap: 0.125rem; list-style: none; } .dz-sidebar-footer { margin-block-start: auto; border-block-start: 1px solid var(--colour-border); } .dz-sidebar-user-block { padding: 0.75rem; padding-block-end: 0.25rem; } .dz-sidebar-user-name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: var(--space-md); } .dz-sidebar-action-row { margin-block-start: 0.25rem; } .dz-sidebar-action-button { display: flex; align-items: center; gap: var(--space-sm); width: 100%; padding-inline: var(--space-md); padding-block: 0.375rem; border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-sidebar-action-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-sidebar-action-button > svg { width: 1rem; height: 1rem; flex-shrink: 0; } .dz-sidebar-darkmode { padding: 0.75rem; padding-block-start: 0.25rem; display: none; } @media (min-width: 64rem) { .dz-sidebar-darkmode { display: block; } } } @layer components { .dz-workspace { padding: var(--space-md); } .dz-workspace-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-block-end: var(--space-md); flex-wrap: wrap; } .dz-workspace-title { font-size: var(--dz-heading-app-page-title); font-weight: var(--weight-medium); color: var(--colour-text); margin: 0; } .dz-workspace-primary-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; justify-content: flex-end; } .dz-workspace-action { display: inline-flex; align-items: center; gap: var(--space-xs); height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); background: var(--colour-brand); color: var(--colour-brand-contrast); text-decoration: none; transition: opacity var(--duration-fast) var(--ease-out); } .dz-workspace-action:hover { opacity: 0.9; } .dz-workspace-context { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-md); } .dz-workspace-context-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-workspace-context-select { height: 2rem; padding-inline: var(--space-sm); font-size: var(--text-sm); color: var(--colour-text); background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); } .dz-workspace-context-select:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-workspace-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-sm); margin-block-end: var(--space-md); } .dz-workspace-toolbar-spacer { flex: 1 1 0; } .dz-workspace-reset { height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); background: transparent; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-workspace-reset:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-workspace-save { height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); } .dz-workspace-save [data-dz-when] { display: none; } .dz-workspace-save[data-dz-save-state="clean"] [data-dz-when="clean"], .dz-workspace-save[data-dz-save-state="dirty"] [data-dz-when="dirty"], .dz-workspace-save[data-dz-save-state="saving"] [data-dz-when="saving"], .dz-workspace-save[data-dz-save-state="saved"] [data-dz-when="saved"], .dz-workspace-save[data-dz-save-state="error"] [data-dz-when="error"] { display: inline-flex; } .dz-workspace-save[data-dz-save-state="clean"] { color: var(--colour-text-muted); cursor: default; } .dz-workspace-save[data-dz-save-state="dirty"] { background: var(--colour-brand); color: var(--colour-brand-contrast); } .dz-workspace-save[data-dz-save-state="saving"] { background: var(--colour-brand); color: var(--colour-brand-contrast); opacity: 0.7; } .dz-workspace-save[data-dz-save-state="saved"] { background: var(--success-600); color: white; } .dz-workspace-save[data-dz-save-state="error"] { border-color: var(--colour-danger); color: var(--colour-danger); } .dz-workspace-save-busy { display: inline-flex; align-items: center; gap: var(--space-xs); } .dz-workspace-save-busy-icon { width: 0.75rem; height: 0.75rem; animation: dz-spin 1s linear infinite; } } @layer components { .dz-status-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding-inline-start: 0; } .dz-status-list > li + li { border-block-start: 1px solid var(--colour-border); } .dz-status-list-entry { display: flex; align-items: flex-start; gap: var(--space-md); padding-block: var(--space-md); } .dz-status-list-entry:first-child { padding-block-start: 0.25rem; } .dz-status-list-entry:last-child { padding-block-end: 0.25rem; } .dz-status-list-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-block-start: 0.125rem; flex-shrink: 0; } .dz-status-list-icon-spacer { width: 1.25rem; flex-shrink: 0; } .dz-status-list-text { flex: 1 1 0; min-width: 0; } .dz-status-list-title { font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--colour-text); } .dz-status-list-caption { font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-status-list-pill { flex-shrink: 0; padding-inline: var(--space-sm); padding-block: 0.125rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; } .dz-status-list-entry[data-dz-state="positive"] .dz-status-list-pill { background: var(--colour-success-soft); color: var(--colour-success); } .dz-status-list-entry[data-dz-state="warning"] .dz-status-list-pill { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-status-list-entry[data-dz-state="destructive"] .dz-status-list-pill { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-status-list-entry[data-dz-state="accent"] .dz-status-list-pill { background: var(--colour-brand-soft); color: var(--colour-brand); } .dz-status-list-entry[data-dz-state="positive"] .dz-status-list-icon { color: var(--colour-success); } .dz-status-list-entry[data-dz-state="warning"] .dz-status-list-icon { color: var(--colour-warning); } .dz-status-list-entry[data-dz-state="destructive"] .dz-status-list-icon { color: var(--colour-danger); } .dz-status-list-entry[data-dz-state="accent"] .dz-status-list-icon { color: var(--colour-brand); } .dz-status-list-entry[data-dz-state="neutral"] .dz-status-list-icon, .dz-status-list-entry:not([data-dz-state]) .dz-status-list-icon { color: var(--colour-text-muted); } } @layer components { .dz-action-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); margin-block-start: var(--space-sm); } @media (min-width: 40rem) { .dz-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .dz-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dz-action-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); text-decoration: none; color: var(--colour-text); transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } a.dz-action-card { cursor: pointer; } a.dz-action-card:hover { background: var(--colour-bg); } .dz-action-card-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .dz-action-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; color: var(--colour-text-muted); } .dz-action-card-icon-spacer { width: 1.25rem; height: 1.25rem; display: inline-block; } .dz-action-card-count { font-family: var(--font-mono); font-size: var(--text-xs); padding-inline: var(--space-sm); padding-block: 0.125rem; border-radius: var(--radius-full); } .dz-action-card-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); line-height: var(--leading-tight); } .dz-action-card[data-dz-tone="positive"] { border-color: var(--colour-success-soft); background: var(--colour-success-soft); } .dz-action-card[data-dz-tone="positive"]:hover { background: var(--colour-success-soft); } .dz-action-card[data-dz-tone="warning"] { border-color: var(--colour-warning-soft); background: var(--colour-warning-soft); } .dz-action-card[data-dz-tone="warning"]:hover { background: var(--colour-warning-soft); } .dz-action-card[data-dz-tone="destructive"] { border-color: var(--colour-danger-soft); background: var(--colour-danger-soft); } .dz-action-card[data-dz-tone="destructive"]:hover { background: var(--colour-danger-soft); } .dz-action-card[data-dz-tone="accent"] { border-color: var(--colour-brand-soft); background: var(--colour-brand-soft); } .dz-action-card[data-dz-tone="accent"]:hover { background: var(--colour-brand-soft); } .dz-action-card[data-dz-tone="neutral"], .dz-action-card:not([data-dz-tone]) { border-color: var(--colour-border); background: var(--colour-surface); } .dz-action-card[data-dz-tone="neutral"]:hover, .dz-action-card:not([data-dz-tone]):hover { background: color-mix(in oklab, var(--colour-surface-muted) 40%, transparent); } .dz-action-card-count[data-dz-tone-badge="positive"] { background: var(--colour-success-soft); color: var(--colour-success); } .dz-action-card-count[data-dz-tone-badge="warning"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-action-card-count[data-dz-tone-badge="destructive"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-action-card-count[data-dz-tone-badge="accent"] { background: var(--colour-brand-soft); color: var(--colour-brand-text); } .dz-action-card-count[data-dz-tone-badge="neutral"], .dz-action-card-count:not([data-dz-tone-badge]) { background: var(--colour-surface-muted); color: var(--colour-text-muted); } .dz-metric-delta[data-dz-delta-tone="positive"] { color: var(--colour-success); } .dz-metric-delta[data-dz-delta-tone="destructive"] { color: var(--colour-danger); } .dz-metric-delta[data-dz-delta-tone="neutral"], .dz-metric-delta:not([data-dz-delta-tone]) { color: var(--colour-text-muted); } } @layer components { .dz-queue-count-row { display: flex; align-items: center; justify-content: flex-end; margin-block-end: var(--space-sm); } .dz-queue-count { display: inline-flex; align-items: center; padding-inline: var(--space-sm); height: 1.25rem; border-radius: var(--radius-xs, 0.1875rem); font-size: var(--text-xs); font-weight: var(--weight-medium); background: var(--colour-brand); color: var(--colour-brand-contrast); } .dz-queue-metrics { display: flex; gap: var(--space-md); margin-block-end: var(--space-md); } .dz-queue-metric { flex: 1 1 0; text-align: center; padding: var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--colour-bg) 60%, transparent); border: 1px solid var(--colour-border); } .dz-queue-metric-value { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-queue-metric-label { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-queue-filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-block-end: var(--space-sm); } .dz-queue-filter-select { height: 1.75rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-xs); color: var(--colour-text); } .dz-queue-filter-select:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-queue-rows { display: flex; flex-direction: column; gap: var(--space-sm); } .dz-queue-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md); border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .dz-queue-row:not([data-dz-attn]):hover { background: var(--colour-bg); } .dz-queue-row-main { flex: 1 1 0; min-width: 0; } .dz-queue-row-main.is-clickable { cursor: pointer; } .dz-queue-row-headline { display: flex; align-items: center; gap: var(--space-sm); } .dz-queue-row-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-queue-row-attn { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-queue-row-date { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-queue-row-actions { display: flex; gap: 0.25rem; flex-shrink: 0; } .dz-queue-action { height: 1.75rem; padding-inline: 0.625rem; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: transparent; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text); cursor: pointer; display: inline-flex; align-items: center; transition: background var(--duration-fast) var(--ease-out); } .dz-queue-action:hover { background: var(--colour-bg); } .dz-queue-overflow { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } .dz-queue-empty { text-align: center; padding-block: var(--space-md); } } @layer components { .dz-kanban-board { display: flex; gap: var(--space-md); overflow-x: auto; padding-block-end: var(--space-sm); min-height: 12.5rem; } .dz-kanban-column { flex-shrink: 0; width: 16.25rem; min-width: 16.25rem; background: color-mix(in oklch, var(--colour-bg) 60%, transparent); border-radius: var(--radius-md); padding: var(--space-sm); } .dz-kanban-column-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-sm); padding-inline: 0.25rem; } .dz-kanban-column-count { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-kanban-stack { display: flex; flex-direction: column; gap: var(--space-sm); max-height: 60vh; overflow-y: auto; } .dz-kanban-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); box-shadow: 0 1px 3px oklch(0% 0 0 / 0.04); } .dz-kanban-card.is-clickable { cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); } .dz-kanban-card.is-clickable:hover { box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06); border-color: color-mix(in oklch, var(--colour-brand) 50%, var(--colour-border)); } .dz-kanban-card-body { padding: var(--space-sm); } .dz-kanban-card-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin-block-end: 0.25rem; } .dz-kanban-card-field { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-kanban-card-attn { font-size: var(--text-xs); margin-block-start: 0.25rem; } .dz-kanban-card-attn[data-dz-attn="critical"] { color: var(--colour-danger); } .dz-kanban-card-attn[data-dz-attn="warning"] { color: var(--colour-warning); } .dz-kanban-card-attn[data-dz-attn="notice"] { color: var(--colour-brand); } .dz-kanban-empty { font-size: var(--text-xs); color: var(--colour-text-muted); text-align: center; padding-block: var(--space-md); } .dz-kanban-overflow { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-sm); } .dz-kanban-overflow-text { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-kanban-load-all { height: 1.5rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; display: inline-flex; align-items: center; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-kanban-load-all:hover { background: var(--colour-bg); color: var(--colour-text); } } @layer components { .dz-timeline-list { position: relative; padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--colour-border); display: flex; flex-direction: column; gap: var(--space-md); list-style: none; margin: 0; } .dz-timeline-item { position: relative; } .dz-timeline-bullet-wrap { position: absolute; inset-inline-start: -1.3125rem; top: 0.375rem; display: inline-flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; } .dz-timeline-bullet { width: 0.75rem; height: 0.75rem; } .dz-timeline-row { display: flex; gap: var(--space-md); } .dz-timeline-date { font-size: var(--text-xs); color: var(--colour-text-muted); min-width: 5rem; padding-block-start: 0.25rem; } .dz-timeline-content { flex: 1 1 0; padding-inline: var(--space-sm); padding-block: var(--space-xs); border-radius: var(--radius-sm); } .dz-timeline-content.is-clickable { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-timeline-content.is-clickable:hover { background: var(--colour-bg); } .dz-timeline-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin: 0; } .dz-timeline-field { font-size: var(--text-xs); color: var(--colour-text-muted); margin: 0; } .dz-timeline-overflow { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } .dz-attn-border { border-inline-start-width: 4px; border-inline-start-style: solid; } .dz-attn-border.dz-attn-tone-critical { border-inline-start-color: var(--colour-danger); } .dz-attn-border.dz-attn-tone-warning { border-inline-start-color: var(--colour-warning); } .dz-attn-border.dz-attn-tone-notice { border-inline-start-color: var(--colour-brand); } .dz-attn-tint.dz-attn-tone-critical { background: color-mix(in oklch, var(--colour-danger) 8%, transparent); } .dz-attn-tint.dz-attn-tone-warning { background: color-mix(in oklch, var(--colour-warning) 8%, transparent); } .dz-attn-tint.dz-attn-tone-notice { background: color-mix(in oklch, var(--colour-brand) 6%, transparent); } .dz-attn-both { border-inline-start-width: 4px; border-inline-start-style: solid; } .dz-attn-both.dz-attn-tone-critical { border-inline-start-color: var(--colour-danger); background: color-mix(in oklch, var(--colour-danger) 4%, transparent); } .dz-attn-both.dz-attn-tone-warning { border-inline-start-color: var(--colour-warning); background: color-mix(in oklch, var(--colour-warning) 4%, transparent); } .dz-attn-both.dz-attn-tone-notice { border-inline-start-color: var(--colour-brand); background: color-mix(in oklch, var(--colour-brand) 4%, transparent); } .dz-attn-bullet.dz-attn-tone-critical { color: var(--colour-danger); } .dz-attn-bullet.dz-attn-tone-warning { color: var(--colour-warning); } .dz-attn-bullet.dz-attn-tone-notice { color: var(--colour-brand); } .dz-attn-bullet.dz-attn-tone-default { color: var(--colour-brand); } } @layer components { .dz-activity-feed { position: relative; padding-inline-start: var(--space-md); border-inline-start: 1px solid var(--colour-border); display: flex; flex-direction: column; gap: var(--space-md); list-style: none; margin: 0; } .dz-activity-row { position: relative; } .dz-activity-dot { position: absolute; inset-inline-start: -1.3125rem; top: 0.375rem; display: inline-flex; align-items: center; justify-content: center; width: 0.75rem; height: 0.75rem; } .dz-activity-dot > svg { width: 0.75rem; height: 0.75rem; color: var(--colour-brand); } .dz-activity-row-inner { display: flex; gap: var(--space-md); } .dz-activity-time { font-size: var(--text-xs); color: var(--colour-text-muted); min-width: 5rem; padding-block-start: 0.25rem; } .dz-activity-bubble { flex: 1 1 0; padding-inline: var(--space-sm); padding-block: var(--space-xs); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--colour-bg) 70%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-activity-bubble.is-clickable { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-activity-bubble.is-clickable:hover { background: var(--colour-bg); } .dz-activity-actor { font-weight: var(--weight-medium); } .dz-activity-empty { text-align: center; font-size: var(--text-sm); color: var(--colour-text-muted); padding-block: var(--space-2xl); } } @layer components { .dz-related-group { margin-block-end: var(--space-md); } .dz-related-tab-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); margin-block-end: var(--space-sm); } .dz-related-create-row { display: flex; justify-content: flex-end; margin-block-end: var(--space-sm); } .dz-related-create-button { display: inline-flex; align-items: center; height: 1.75rem; padding-inline: 0.625rem; border-radius: var(--radius-sm); background: var(--colour-brand); color: var(--colour-brand-contrast); font-size: var(--text-xs); font-weight: var(--weight-medium); text-decoration: none; transition: filter var(--duration-fast) var(--ease-out); } .dz-related-create-button:hover { filter: brightness(1.1); } .dz-related-empty { text-align: center; padding-block: var(--space-lg); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-related-status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-md); } .dz-related-status-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-md); cursor: pointer; transition: box-shadow var(--duration-base) var(--ease-out); } .dz-related-status-card:hover { box-shadow: 0 2px 8px oklch(0% 0 0 / 0.06); } .dz-related-status-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); } .dz-related-status-card-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 0.125rem; } .dz-related-status-card-primary { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: normal; overflow: visible; margin: 0; line-height: 1.35; } .dz-related-status-card-secondary { display: block; font-size: var(--text-xs); color: var(--colour-text-muted); white-space: normal; overflow: visible; margin: 0; line-height: 1.35; } .dz-related-status-card-badge { flex-shrink: 0; } .dz-related-tab-count { margin-inline-start: 0.25rem; display: inline-flex; align-items: center; padding-inline: 0.375rem; height: 1rem; border-radius: var(--radius-sm); background: var(--colour-bg); font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-related-table-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; margin-block-start: var(--space-sm); } .dz-related-table-create-row { display: flex; justify-content: flex-end; padding: var(--space-md); padding-block-end: 0; } .dz-related-table-scroll { overflow-x: auto; } .dz-related-table { width: 100%; border-collapse: collapse; } .dz-related-table > thead > tr { background: color-mix(in oklch, var(--colour-bg) 70%, transparent); border-block-end: 1px solid var(--colour-border); } .dz-related-table th { text-align: start; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); padding-inline: var(--space-md); padding-block: var(--space-sm); letter-spacing: -0.01em; } .dz-related-table > tbody > tr { border-block-end: 1px solid var(--colour-border); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-related-table > tbody > tr:last-child { border-block-end: 0; } .dz-related-table > tbody > tr:hover { background: var(--colour-bg); } .dz-related-table td { font-size: var(--text-sm); color: var(--colour-text); padding-inline: var(--space-md); padding-block: 0.625rem; } .dz-related-table-empty-cell { text-align: center; padding-block: var(--space-2xl); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-related-file-list { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); overflow: hidden; } .dz-related-file-list > * + * { border-block-start: 1px solid var(--colour-border); } .dz-related-file-row { display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-md); padding-block: var(--space-md); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-related-file-row:hover { background: var(--colour-bg); } .dz-related-file-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: color-mix(in oklch, var(--colour-text-muted) 60%, transparent); } .dz-related-file-text { flex: 1 1 0; min-width: 0; } .dz-related-file-primary { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .dz-related-file-secondary { font-size: var(--text-xs); color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; } .dz-related-file-date { font-size: var(--text-xs); color: var(--colour-text-muted); flex-shrink: 0; } } @layer components { .dz-metrics-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 40rem) { .dz-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .dz-metrics-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .dz-metric-tile { padding: var(--space-md); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--colour-bg) 60%, transparent); } .dz-metric-tile[data-dz-tone="positive"] { background: color-mix(in oklab, var(--colour-success) 10%, transparent); } .dz-metric-tile[data-dz-tone="warning"] { background: color-mix(in oklab, var(--colour-warning) 10%, transparent); } .dz-metric-tile[data-dz-tone="destructive"] { background: color-mix(in oklab, var(--colour-danger) 10%, transparent); } .dz-metric-tile[data-dz-tone="accent"] { background: color-mix(in oklab, var(--colour-brand) 10%, transparent); } .dz-metric-label { font-size: var(--text-xs); color: var(--colour-text-muted); letter-spacing: -0.01em; } .dz-metric-value { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-start: 0.125rem; font-variant-numeric: tabular-nums; } .dz-metric-delta { margin-block-start: var(--space-xs); font-size: var(--text-xs); font-variant-numeric: tabular-nums; } } @layer components { .dz-sparkline-headline { display: flex; align-items: baseline; gap: var(--space-sm); } .dz-sparkline-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--colour-text); line-height: 1; } .dz-sparkline-bucket-label { font-size: var(--text-xs); color: var(--colour-text-muted); font-family: var(--font-mono); } .dz-sparkline-svg { margin-block-start: var(--space-xs); width: 100%; height: 2rem; } .dz-sparkline-empty { text-align: center; padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--colour-text-muted); } } @layer components { .dz-funnel-stages { display: flex; flex-direction: column; gap: 0.25rem; margin-block-start: var(--space-sm); } .dz-funnel-stage-row { display: flex; flex-direction: column; align-items: center; } .dz-funnel-stage { border-radius: var(--radius-sm); padding-inline: var(--space-md); padding-block: 0.375rem; text-align: center; background: color-mix( in oklab, var(--colour-brand) calc(var(--dz-funnel-fade, 100) * 1%), var(--colour-surface) ); color: var(--colour-text); min-width: 7.5rem; } .dz-funnel-stage[data-dz-funnel-step="0"] { --dz-funnel-fade: 60; } .dz-funnel-stage[data-dz-funnel-step="1"] { --dz-funnel-fade: 50; } .dz-funnel-stage[data-dz-funnel-step="2"] { --dz-funnel-fade: 41; } .dz-funnel-stage[data-dz-funnel-step="3"] { --dz-funnel-fade: 33; } .dz-funnel-stage[data-dz-funnel-step="4"] { --dz-funnel-fade: 26; } .dz-funnel-stage[data-dz-funnel-step="5"] { --dz-funnel-fade: 20; } .dz-funnel-stage[data-dz-funnel-step="6"] { --dz-funnel-fade: 15; } .dz-funnel-stage[data-dz-funnel-step="7"] { --dz-funnel-fade: 11; } .dz-funnel-stage-label { font-size: var(--text-xs); font-weight: var(--weight-medium); } .dz-funnel-stage-count { font-size: var(--text-xs); margin-inline-start: 0.25rem; } .dz-funnel-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-bar-chart-bars { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-sm); } .dz-bar-chart-row { display: flex; align-items: center; gap: var(--space-sm); } .dz-bar-chart-label { width: 6rem; text-align: end; font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bar-chart-label.is-wide { width: 7rem; color: var(--colour-text-muted); } .dz-bar-chart-track { flex: 1 1 0; height: 1.25rem; background: var(--colour-bg); border-radius: var(--radius-full); overflow: hidden; } .dz-bar-chart-fill { height: 100%; background: var(--colour-brand); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-out); } .dz-bar-chart-value { width: 2.5rem; text-align: end; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bar-chart-value.is-wide { width: 2.5rem; color: var(--colour-text); } .dz-bar-chart-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-chart-svg { width: 100%; height: auto; } .dz-radar-svg { overflow: visible; } .dz-chart-legend { display: flex; flex-wrap: wrap; column-gap: var(--space-md); row-gap: 0.25rem; margin-block-start: var(--space-sm); font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-chart-legend-item { display: inline-flex; align-items: center; gap: 0.25rem; } .dz-chart-legend-swatch { display: inline-block; width: 0.625rem; height: 0.625rem; border-radius: var(--radius-sm); } .dz-chart-legend-name { font-family: var(--font-mono); } .dz-chart-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } } @layer components { .dz-heatmap-scroll { overflow-x: auto; } .dz-heatmap-grid { width: 100%; font-size: var(--text-sm); border-collapse: collapse; } .dz-heatmap-grid > thead > tr { border-block-end: 1px solid var(--colour-border); } .dz-heatmap-grid th { padding-inline: var(--space-sm); padding-block: var(--space-xs); text-align: center; font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-heatmap-grid > tbody > tr { border-block-end: 1px solid var(--colour-border); } .dz-heatmap-grid > tbody > tr:last-child { border-block-end: 0; } .dz-heatmap-grid > tbody > tr.is-clickable { cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-heatmap-grid > tbody > tr.is-clickable:hover { background: var(--colour-bg); } .dz-heatmap-row-label { padding-inline: var(--space-sm); padding-block: var(--space-xs); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-heatmap-cell { padding-inline: var(--space-sm); padding-block: var(--space-xs); text-align: center; transition: opacity var(--duration-fast) var(--ease-out); } .dz-heatmap-cell[data-dz-heatmap-tone="bad"] { background: var(--colour-danger-soft); color: var(--colour-danger); } .dz-heatmap-cell[data-dz-heatmap-tone="warn"] { background: var(--colour-warning-soft); color: var(--colour-warning); } .dz-heatmap-cell[data-dz-heatmap-tone="good"] { background: var(--colour-success-soft); color: var(--colour-success); } .dz-heatmap-overflow { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-pivot-scroll { overflow-x: auto; } .dz-pivot-grid { width: 100%; font-size: var(--text-sm); border-collapse: collapse; } .dz-pivot-grid > thead > tr { border-block-end: 1px solid var(--colour-border); } .dz-pivot-grid th { padding-inline: var(--space-sm); padding-block: var(--space-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); text-align: start; } .dz-pivot-grid th.is-measure { text-align: end; font-family: var(--font-mono); } .dz-pivot-grid > tbody > tr { border-block-end: 1px solid var(--colour-border); } .dz-pivot-grid > tbody > tr:last-child { border-block-end: 0; } .dz-pivot-grid td { padding-inline: var(--space-sm); padding-block: var(--space-xs); color: var(--colour-text); } .dz-pivot-grid td.is-measure { text-align: end; font-family: var(--font-mono); } .dz-pivot-null { color: var(--colour-text-muted); } .dz-pivot-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-bullet-rows { display: flex; flex-direction: column; gap: var(--space-sm); margin-block-start: var(--space-sm); } .dz-bullet-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); } .dz-bullet-label { width: 6rem; text-align: end; color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bullet-track { flex: 1 1 0; position: relative; height: 1.25rem; background: var(--colour-bg); border-radius: var(--radius-sm); overflow: hidden; } .dz-bullet-band { position: absolute; inset-block: 0; opacity: 0.18; } .dz-bullet-actual { position: absolute; inset-block: 0.25rem; inset-inline-start: 0; background: var(--colour-brand); border-radius: var(--radius-sm); } .dz-bullet-target { position: absolute; inset-block: 0; width: 2px; background: var(--colour-text); } .dz-bullet-value { width: 4rem; text-align: end; font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bullet-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } } @layer components { .dz-histogram-svg { width: 100%; height: auto; } .dz-histogram-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } } @layer components { .dz-box-plot-svg { width: 100%; height: auto; } .dz-box-plot-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } } @layer components { .dz-bar-track-rows { display: flex; flex-direction: column; gap: 0.375rem; margin-block-start: var(--space-sm); } .dz-bar-track-row { display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-xs); } .dz-bar-track-label { width: 7rem; text-align: end; color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-bar-track { flex: 1 1 0; position: relative; height: 1rem; background: var(--colour-bg); border-radius: var(--radius-full); overflow: hidden; } .dz-bar-track-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--colour-brand); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-out); } .dz-bar-track-value { width: 4rem; text-align: end; font-family: var(--font-mono); color: var(--colour-text-muted); } .dz-bar-track-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); font-family: var(--font-mono); } } @layer components { .dz-progress-header { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-sm); } .dz-progress-header > progress { flex: 1 1 0; height: 0.5rem; width: 100%; } .dz-progress-header > span { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; color: var(--colour-text); } .dz-progress-stages { display: flex; flex-wrap: wrap; gap: var(--space-xs); } .dz-progress-chip { display: inline-flex; align-items: center; padding-inline: var(--space-sm); padding-block: 0.125rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--weight-medium); border: 1px solid var(--colour-border); background: var(--colour-bg); color: var(--colour-text-muted); } .dz-progress-chip[data-dz-stage-tone="complete"] { background: var(--colour-success-soft); color: var(--colour-success); border-color: color-mix(in oklch, var(--colour-success) 30%, transparent); } .dz-progress-chip[data-dz-stage-tone="active"] { background: var(--colour-warning-soft); color: var(--colour-warning); border-color: color-mix(in oklch, var(--colour-warning) 30%, transparent); } .dz-progress-summary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-task-inbox-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-block-end: var(--space-sm); } .dz-task-inbox-chip { display: inline-flex; align-items: baseline; gap: var(--space-xs); padding-inline: var(--space-sm); padding-block: 0.125rem; border-radius: var(--radius-sm); font-size: var(--text-xs); border: 1px solid var(--colour-border); background: var(--colour-bg); color: var(--colour-text-muted); text-decoration: none; } .dz-task-inbox-chip-count { font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-task-inbox-chip-label { color: var(--colour-text-muted); } } @layer components { .dz-grid-list { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 40rem) { .dz-grid-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 64rem) { .dz-grid-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dz-grid-cell { border-radius: var(--radius-sm); padding: var(--space-md); transition: background var(--duration-fast) var(--ease-out); } .dz-grid-cell.is-clickable { cursor: pointer; } .dz-grid-cell.is-clickable:hover { background: var(--colour-bg); } .dz-grid-cell-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin-block-end: 0.375rem; } .dz-grid-cell-field { font-size: var(--text-xs); color: var(--colour-text-muted); margin: 0; } .dz-grid-cell-field-label { font-size: var(--text-xs); } } @layer components { .dz-list-actions { display: flex; align-items: center; justify-content: flex-end; margin-block-end: var(--space-md); } .dz-list-action-group { display: flex; align-items: center; gap: 0.25rem; } .dz-list-csv-button { height: 1.75rem; width: 1.75rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-list-csv-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-list-csv-button > svg { width: 1rem; height: 1rem; } .dz-list-scroll { overflow-x: auto; } .dz-list-table { width: 100%; border-collapse: collapse; } .dz-list-table > thead > tr { background: color-mix(in oklch, var(--colour-bg) 70%, transparent); border-block-end: 1px solid var(--colour-border); } .dz-list-table th { text-align: start; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); padding-inline: var(--space-md); padding-block: var(--space-sm); letter-spacing: -0.01em; } .dz-list-table > tbody > tr { border-block-end: 1px solid var(--colour-border); transition: background var(--duration-fast) var(--ease-out); } .dz-list-table > tbody > tr:last-child { border-block-end: 0; } .dz-list-row.is-clickable { cursor: pointer; } .dz-list-row.is-clickable:hover { background: var(--colour-bg); } .dz-list-table td { font-size: var(--text-sm); color: var(--colour-text); padding-inline: var(--space-md); padding-block: var(--space-sm); } .dz-list-sort-link { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: var(--space-xs); text-decoration: none; color: inherit; transition: color var(--duration-fast) var(--ease-out); } .dz-list-sort-link:hover { color: var(--colour-text); } .dz-list-overflow { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } } @layer components { .dz-detail { max-width: 48rem; margin-inline: auto; } .dz-detail-wide { max-width: 64rem; } .dz-detail-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-xl); } .dz-detail-header-title { display: flex; align-items: center; gap: var(--space-md); } .dz-detail-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-detail-actions { display: flex; gap: var(--space-sm); } .dz-detail-toolbar { display: flex; gap: var(--space-sm); margin-block-end: var(--space-lg); } .dz-detail-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .dz-detail-card-body { padding: var(--space-lg); } .dz-detail-list { container-type: inline-size; } .dz-detail-list > * + * { border-block-start: 1px solid var(--colour-border); } .dz-detail-row { display: flex; flex-direction: column; gap: var(--space-xs); padding-block: var(--space-md); } @container (width > 32rem) { .dz-detail-row { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-lg); } } .dz-detail-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-detail-value { font-size: var(--text-sm); color: var(--colour-text); } .dz-detail-file-link { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--colour-brand); text-decoration: none; } .dz-detail-file-link:hover { text-decoration: underline; } .dz-detail-file-icon { width: 1rem; height: 1rem; } .dz-detail-related-group { margin-block-start: var(--space-xl); } .dz-detail-related-label { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: var(--space-md); } .dz-detail-region-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-xs) var(--space-md); margin: 0; } .dz-detail-region-grid > dt.dz-detail-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--colour-text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } .dz-detail-region-grid > dd.dz-detail-value { font-size: var(--text-sm); color: var(--colour-text); margin: 0; } .dz-empty-dense { font-size: var(--text-sm); color: var(--colour-text-muted); margin: 0; } } @layer components { dz-onboarding-step { display: block; } @media (prefers-reduced-motion: no-preference) { dz-onboarding-step { transition: opacity 0.15s ease; } } .dz-onboarding-popover { position: fixed; bottom: var(--space-xl); left: 50%; transform: translateX(-50%); z-index: 9000; max-width: min(28rem, calc(100vw - var(--space-xl) * 2)); padding: var(--space-lg); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); font-size: var(--text-sm); } .dz-onboarding-popover__chrome { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); } .dz-onboarding-popover__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-onboarding-popover__body { margin: 0 0 var(--space-md); color: var(--colour-text-muted); line-height: 1.5; } .dz-onboarding-popover__actions { display: flex; justify-content: flex-end; } .dz-onboarding-spotlight { position: fixed; inset: 0; z-index: 9100; } .dz-onboarding-spotlight__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.55); } .dz-onboarding-spotlight__ring { position: absolute; top: 50%; left: 50%; width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border-radius: var(--radius-full); box-shadow: 0 0 0 999px rgb(0 0 0 / 0.0), 0 0 0 4px var(--colour-brand); pointer-events: none; } .dz-onboarding-spotlight__card { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 8rem)); max-width: min(26rem, calc(100vw - var(--space-xl) * 2)); padding: var(--space-lg); background: var(--colour-surface); color: var(--colour-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .dz-onboarding-spotlight__title { margin: 0 0 var(--space-sm); font-size: var(--text-lg); font-weight: var(--weight-medium); } .dz-onboarding-spotlight__body { margin: 0 0 var(--space-md); color: var(--colour-text-muted); line-height: 1.5; } .dz-onboarding-spotlight__dismiss { position: absolute; top: var(--space-sm); right: var(--space-sm); } .dz-onboarding-inline-card { margin: var(--space-lg) 0; padding: var(--space-lg); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .dz-onboarding-inline-card__chrome { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-sm); } .dz-onboarding-inline-card__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); } .dz-onboarding-inline-card__body { margin: 0 0 var(--space-md); color: var(--colour-text-muted); line-height: 1.5; } .dz-onboarding-inline-card__actions { display: flex; gap: var(--space-sm); } .dz-onboarding-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-md); padding: var(--space-3xl) var(--space-xl); background: var(--colour-surface); color: var(--colour-text); border: 1px dashed var(--colour-border); border-radius: var(--radius-lg); margin: var(--space-xl) 0; } .dz-onboarding-empty-state__icon { width: 3rem; height: 3rem; border-radius: var(--radius-full); background: var(--colour-brand); opacity: 0.15; } .dz-onboarding-empty-state__title { margin: 0; font-size: var(--text-xl); font-weight: var(--weight-medium); } .dz-onboarding-empty-state__body { margin: 0; max-width: 36rem; color: var(--colour-text-muted); line-height: 1.5; } .dz-onboarding-empty-state__actions { display: flex; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); } .dz-onboarding-banner { position: sticky; top: 0; z-index: 8000; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm) var(--space-lg); background: var(--colour-brand); color: var(--colour-brand-contrast); font-size: var(--text-sm); } .dz-onboarding-banner__message { flex: 1 1 auto; min-width: 0; } .dz-onboarding-banner__title { font-weight: var(--weight-medium); } .dz-onboarding-banner__separator { opacity: 0.7; } .dz-onboarding-banner__body { opacity: 0.9; } .dz-onboarding-banner__actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; } .dz-onboarding-checklist-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-md); margin: var(--space-sm) 0; } .dz-onboarding-checklist-item__indicator { width: 1.25rem; height: 1.25rem; border-radius: var(--radius-sm); border: 2px solid var(--colour-border); background: transparent; } .dz-onboarding-checklist-item__content { min-width: 0; } .dz-onboarding-checklist-item__title { margin: 0 0 var(--space-xs); font-size: var(--text-sm); font-weight: var(--weight-medium); } .dz-onboarding-checklist-item__body { margin: 0; font-size: var(--text-xs); color: var(--colour-text-muted); line-height: 1.4; } .dz-onboarding-checklist-item__actions { display: flex; gap: var(--space-sm); } .dz-onboarding-checklist-item__dismiss--hidden { display: none; } .dz-onboarding-blocking-task { display: contents; } .dz-onboarding-blocking-task__backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.55); z-index: 9199; } .dz-onboarding-blocking-task__dialog { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9200; max-width: min(32rem, calc(100vw - var(--space-xl) * 2)); padding: var(--space-xl); background: var(--colour-surface); color: var(--colour-text); border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } .dz-onboarding-blocking-task__title { margin: 0 0 var(--space-md); font-size: var(--text-xl); font-weight: var(--weight-medium); } .dz-onboarding-blocking-task__body { margin: 0 0 var(--space-lg); color: var(--colour-text-muted); line-height: 1.5; } .dz-onboarding-blocking-task__actions { display: flex; justify-content: flex-end; } .dz-onboarding-nudge { position: fixed; bottom: var(--space-xl); right: var(--space-xl); z-index: 8500; display: flex; align-items: center; gap: var(--space-md); max-width: min(24rem, calc(100vw - var(--space-xl) * 2)); padding: var(--space-md) var(--space-lg); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); font-size: var(--text-sm); } .dz-onboarding-nudge__content { flex: 1 1 auto; min-width: 0; } .dz-onboarding-nudge__title { display: block; margin-bottom: var(--space-xs); font-weight: var(--weight-medium); } .dz-onboarding-nudge__body { display: block; color: var(--colour-text-muted); } .dz-onboarding-nudge__actions { display: flex; gap: var(--space-xs); flex: 0 0 auto; } :where([class*="dz-onboarding-"][class$="__dismiss"]) { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; background: transparent; border: none; border-radius: var(--radius-sm); color: inherit; cursor: pointer; font-size: var(--text-base); line-height: 1; opacity: 0.6; transition: opacity 0.1s ease; } :where([class*="dz-onboarding-"][class$="__dismiss"]):hover { opacity: 1; } :where([class*="dz-onboarding-"][class$="__cta"]) { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-xs) var(--space-md); background: var(--colour-brand); color: var(--colour-brand-contrast); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-sm); cursor: pointer; border: none; transition: filter 0.1s ease; } :where([class*="dz-onboarding-"][class$="__cta"]):hover { filter: brightness(0.92); } .dz-onboarding-empty-state__dismiss { width: auto; padding: var(--space-xs) var(--space-md); font-size: var(--text-sm); font-weight: var(--weight-medium); opacity: 1; color: var(--colour-text-muted); } .dz-onboarding-banner__cta { background: var(--colour-brand-contrast); color: var(--colour-brand); } .dz-onboarding-banner__cta:hover { filter: brightness(0.96); } .dz-onboarding-banner__dismiss { color: var(--colour-brand-contrast); } } @layer components { .dz-tree-node { background: color-mix(in oklch, var(--colour-bg) 70%, transparent); border-radius: var(--radius-sm); margin-block-end: var(--space-xs); } .dz-tree-summary { font-size: var(--text-sm); padding-inline: var(--space-md); padding-block: 0.375rem; display: flex; align-items: center; gap: var(--space-sm); cursor: pointer; list-style: none; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .dz-tree-summary::-webkit-details-marker { display: none; } .dz-tree-summary:hover { background: var(--colour-bg); } .dz-tree-chevron { width: 0.75rem; height: 0.75rem; color: var(--colour-text-muted); transition: transform var(--duration-fast) var(--ease-out); flex-shrink: 0; } .dz-tree-node[open] > .dz-tree-summary .dz-tree-chevron { transform: rotate(90deg); } .dz-tree-label { font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-tree-count { margin-inline-start: auto; display: inline-flex; align-items: center; padding-inline: 0.375rem; height: 1rem; border-radius: var(--radius-sm); font-size: var(--text-xs); color: var(--colour-text-muted); background: var(--colour-bg); } .dz-tree-children { padding-inline-start: var(--space-lg); padding-inline-end: var(--space-sm); padding-block-end: var(--space-xs); } .dz-tree-flat-item { padding-inline: var(--space-sm); padding-block: 0.375rem; font-size: var(--text-sm); color: var(--colour-text); border-block-end: 1px solid var(--colour-border); } .dz-tree-flat-item:last-child { border-block-end: 0; } } @layer components { .dz-diagram-scroll { overflow-x: auto; } .dz-diagram-source { font-size: var(--text-sm); color: var(--colour-text); } .dz-diagram-empty { font-size: var(--text-sm); color: var(--colour-text-muted); margin: 0; } } @layer components { .dz-confirm-panel { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-inline-size: 24rem; inline-size: 100%; padding: var(--space-lg); } .dz-confirm-summary { padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); margin-block-end: var(--space-md); } .dz-confirm-summary[data-dz-confirm-tone="success"] { border-color: color-mix(in oklch, var(--colour-success) 40%, transparent); background: color-mix(in oklch, var(--colour-success) 6%, transparent); } .dz-confirm-summary[data-dz-confirm-tone="muted"] { background: color-mix(in oklch, var(--colour-bg) 60%, transparent); } .dz-confirm-summary-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-confirm-summary-body { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-confirm-checklist { display: flex; flex-direction: column; gap: var(--space-sm); list-style: none; margin: 0 0 var(--space-md); padding-inline-start: 0; } .dz-confirm-row { display: flex; align-items: flex-start; gap: var(--space-sm); } .dz-confirm-checkbox { margin-block-start: 0.125rem; flex-shrink: 0; width: 1rem; height: 1rem; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); accent-color: var(--colour-brand); } .dz-confirm-row-label { flex: 1 1 0; cursor: pointer; } .dz-confirm-title { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--colour-text); margin-block-end: var(--space-xs); } .dz-confirm-caption { display: block; font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-sm); margin-block-start: var(--space-sm); list-style: none; } .dz-confirm-primary { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); background: var(--colour-brand); color: var(--colour-brand-contrast); text-decoration: none; border: 0; cursor: pointer; transition: opacity var(--duration-fast) var(--ease-out); } .dz-confirm-primary:hover { opacity: 0.9; } .dz-confirm-primary[aria-disabled="true"] { background: var(--colour-bg); color: var(--colour-text-muted); cursor: not-allowed; pointer-events: none; } .dz-confirm-secondary { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid var(--colour-border); background: transparent; color: var(--colour-text); text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-confirm-secondary:hover { background: var(--colour-bg); } .dz-confirm-revoke { display: inline-flex; align-items: center; justify-content: center; padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid color-mix(in oklch, var(--colour-danger) 50%, transparent); background: transparent; color: var(--colour-danger); text-decoration: none; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-confirm-revoke:hover { background: color-mix(in oklch, var(--colour-danger) 8%, transparent); } .dz-confirm-audit { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: var(--space-md); line-height: var(--leading-tight); } } @layer components { .dz-search-box-region { display: flex; flex-direction: column; gap: var(--space-sm); } .dz-search-box-input-row { display: flex; align-items: center; } .dz-search-box-input { width: 100%; height: 2.25rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-sm); color: var(--colour-text); } .dz-search-box-input:focus-visible { outline: none; border-color: var(--colour-brand); box-shadow: 0 0 0 1px var(--colour-brand); } .dz-search-box-region:has(.dz-search-box-input:not(:placeholder-shown)) .dz-search-box-empty:not(.dz-search-box-empty--no-results) { display: none; } .dz-search-box-empty { font-size: var(--text-sm); color: var(--colour-text-muted); padding-block: var(--space-sm); } .dz-search-box-result-count { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-end: var(--space-xs); } .dz-search-box-result-list { list-style: none; margin: 0; padding-inline-start: 0; display: flex; flex-direction: column; } .dz-search-box-result { border-block-end: 1px solid var(--colour-border); } .dz-search-box-result:last-child { border-block-end: 0; } .dz-search-box-result-link { display: block; padding-block: var(--space-sm); padding-inline: var(--space-xs); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--duration-fast) var(--ease-out); } .dz-search-box-result-link:hover { background: var(--colour-bg); } .dz-search-box-result-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-search-box-result-snippets { list-style: none; margin: 0.125rem 0 0; padding-inline-start: 0; } .dz-search-box-result-snippet { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-search-box-result-snippet-field { font-weight: var(--weight-medium); margin-inline-end: 0.25rem; } .dz-search-box-result-link mark { background: var(--colour-warning-soft); color: inherit; border-radius: 2px; } .dz-select-result-confirm { padding: var(--space-md); font-size: var(--text-sm); color: var(--colour-success); } .dz-select-result-input { width: 100%; height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-sm); color: var(--colour-text); } .dz-search-result-row { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: var(--space-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-search-result-row:hover, .dz-search-result-row:focus-visible { background: var(--colour-bg); outline: none; } .dz-search-result-media { flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: var(--radius-full); background: var(--colour-brand-soft); color: var(--colour-brand-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; line-height: 1; user-select: none; } .dz-search-result-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .dz-search-result-media svg { width: 1rem; height: 1rem; } .dz-search-result-body { min-width: 0; flex: 1 1 auto; } .dz-search-result-name { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--colour-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-search-result-secondary { font-size: var(--text-xs); color: var(--colour-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dz-search-result-empty { padding: var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); } } @layer components { .dz-form-section-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: var(--space-md); } .dz-form-section-note { font-size: var(--text-sm); color: var(--colour-text-muted); margin-block-end: var(--space-md); } .dz-form-section { display: flex; flex-direction: column; gap: var(--space-md); margin-block-end: var(--space-lg); } .dz-form-errors { display: flex; gap: var(--space-md); padding: var(--space-md); margin-block-end: var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--colour-danger); background: color-mix(in oklch, var(--colour-danger) 8%, transparent); } .dz-form-errors-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: var(--colour-danger); } .dz-form-errors-body { min-width: 0; } .dz-form-errors-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-form-errors-list { font-size: var(--text-sm); color: var(--colour-text); list-style: disc inside; margin: 0.125rem 0 0; padding-inline-start: 0; display: flex; flex-direction: column; gap: 0.125rem; } .dz-form-stepper { display: flex; align-items: center; width: 100%; margin-block-end: var(--space-xl); gap: var(--space-sm); list-style: none; padding-inline-start: 0; } .dz-form-stepper-item { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; cursor: pointer; } .dz-form-stepper-item.is-not-last { flex: 1 1 0; } .dz-form-stepper-circle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); border: 1px solid var(--colour-border); background: var(--colour-surface); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--colour-text-muted); transition: background var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-form-stepper-circle.is-active { background: var(--colour-brand); color: var(--colour-brand-contrast); border-color: var(--colour-brand); } .dz-form-stepper-circle > svg { width: 0.75rem; height: 0.75rem; } .dz-form-stepper-label { font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--colour-text-muted); transition: color var(--duration-base) var(--ease-out); } .dz-form-stepper-button { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .dz-form-stepper-button:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } [data-dz-state="complete"] .dz-form-stepper-circle span { display: none; } [data-dz-state="complete"] .dz-form-stepper-circle::after { content: "\2713"; } .dz-form-stepper-label.is-active { color: var(--colour-text); } .dz-form-stepper-connector { flex: 1 1 0; height: 1px; background: var(--colour-border); transition: background var(--duration-base) var(--ease-out); } .dz-form-stepper-connector.is-active { background: var(--colour-brand); } .dz-steps { display: flex; align-items: center; width: 100%; list-style: none; padding-inline-start: 0; margin: 0; } .dz-steps-item { display: flex; align-items: center; } .dz-steps-item.is-not-last { flex: 1 1 0; } .dz-steps-row { display: flex; align-items: center; gap: var(--space-sm); } .dz-steps-circle { flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--colour-bg); color: var(--colour-text-muted); } .dz-steps-circle.is-completed { background: var(--colour-brand); color: var(--colour-brand-contrast); } .dz-steps-label { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-steps-label.is-completed { color: var(--colour-text); font-weight: var(--weight-medium); } .dz-steps-connector { flex: 1 1 0; margin-inline: var(--space-md); height: 1px; background: var(--colour-border); } .dz-steps-connector.is-completed { background: var(--colour-brand); } } @layer components { .dz-date-range-picker { display: flex; align-items: center; gap: var(--space-sm); margin-block-end: var(--space-sm); } .dz-date-range-label { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-date-range-input { height: 1.75rem; padding-inline: var(--space-sm); width: 9rem; border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-xs); color: var(--colour-text); } .dz-date-range-input:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } } @layer components { .dz-search-select { position: relative; width: 100%; } .dz-search-select-input { width: 100%; box-sizing: border-box; height: auto; min-height: 2.5rem; line-height: 1.4; padding-block: var(--space-sm); padding-inline-start: var(--space-md); padding-inline-end: 2rem; border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-sm); color: var(--colour-text); outline: none; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-search-select-input::placeholder { color: var(--colour-text-muted); } .dz-search-select-input:focus-visible { box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-search-select-input[aria-invalid="true"] { border-color: var(--colour-danger); } .dz-search-select-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--colour-danger); } .dz-search-select-spinner { position: absolute; inset-inline-end: var(--space-md); inset-block-start: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; color: var(--colour-text-muted); } .dz-search-select-spinner-icon { width: 1rem; height: 1rem; animation: dz-spin 1s linear infinite; } .dz-search-select-results { position: absolute; z-index: 50; width: 100%; margin-block-start: 0.25rem; max-height: 15rem; overflow-y: auto; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .dz-search-select-prompt { padding-inline: var(--space-md); padding-block: var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-search-select:not([data-dz-open="true"]) .dz-search-select-results { display: none; } } @layer components { .dz-combobox { position: relative; display: block; width: 100%; } .dz-combobox[data-dz-enhanced] > select[data-dz-combobox] { display: none !important; } .dz-combobox-input { width: 100%; box-sizing: border-box; height: auto; min-height: 2.5rem; line-height: 1.4; padding-block: var(--space-sm); padding-inline-start: var(--space-md); padding-inline-end: 2rem; border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); font-size: var(--text-sm); color: var(--colour-text); outline: none; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-combobox-input::placeholder { color: var(--colour-text-muted); } .dz-combobox-input:focus-visible { box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-combobox-input[aria-invalid="true"] { border-color: var(--colour-danger); } .dz-combobox-input[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--colour-danger); } .dz-combobox-listbox { position: absolute; z-index: 50; inset-inline: 0; margin-block-start: 0.25rem; padding: 0; max-height: 15rem; overflow-y: auto; list-style: none; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .dz-combobox-option { display: block; padding-inline: var(--space-md); padding-block: var(--space-sm); font-size: var(--text-sm); color: var(--colour-text); cursor: pointer; } .dz-combobox-option[hidden] { display: none; } .dz-combobox-option:hover, .dz-combobox-option[data-dz-active="true"] { background: var(--colour-surface-muted); } .dz-combobox-option[aria-selected="true"] { color: var(--colour-brand); font-weight: 500; } .dz-combobox-create { border-block-start: 1px solid var(--colour-border); color: var(--colour-brand-text); font-weight: var(--weight-medium); } .dz-combobox-create[hidden] { display: none; } .dz-combobox-empty { padding-inline: var(--space-md); padding-block: var(--space-md); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-combobox:not([data-dz-open="true"]) .dz-combobox-listbox { display: none; } } @layer components { .dz-code { position: relative; display: flex; flex-direction: column; min-width: 0; max-width: 100%; width: 100%; margin: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: light-dark(var(--neutral-50), var(--neutral-900)); color: light-dark(var(--neutral-900), var(--neutral-100)); overflow: hidden; box-sizing: border-box; } .dz-code__meta { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex: 0 0 auto; gap: var(--space-sm); width: 100%; min-width: 0; box-sizing: border-box; padding: var(--space-xs) var(--space-sm) var(--space-xs) var(--space-md); min-height: 2.25rem; border-block-end: 1px solid light-dark(var(--neutral-200), var(--neutral-700)); background: light-dark(var(--neutral-100), var(--neutral-800)); } .dz-code__lang { flex: 0 1 auto; font-family: var(--font-mono); font-size: 0.625rem; font-weight: var(--weight-medium); letter-spacing: 0.06em; text-transform: uppercase; color: light-dark(var(--neutral-600), var(--neutral-400)); user-select: none; white-space: nowrap; } .dz-code__copy { flex: 0 0 auto; margin-inline-start: auto; position: static; display: inline-flex; align-items: center; gap: 0.35rem; background: light-dark(var(--neutral-200), var(--neutral-700)); color: light-dark(var(--neutral-900), var(--neutral-100)); border: 1px solid light-dark(var(--neutral-300), var(--neutral-600)); border-radius: var(--radius-sm); padding: 0.3rem 0.65rem; font-size: 0.75rem; font-family: var(--font-sans); font-weight: var(--weight-medium); line-height: 1.2; cursor: pointer; transition: background 120ms var(--ease-default, ease); } .dz-code .dz-code__copy, .dz-code__meta .dz-code__copy { background: light-dark(var(--neutral-200), var(--neutral-700)); color: light-dark(var(--neutral-900), var(--neutral-100)); border: 1px solid light-dark(var(--neutral-300), var(--neutral-600)); } .dz-code .dz-code__copy:hover, .dz-code .dz-code__copy:hover:not(:disabled), .dz-code__meta .dz-code__copy:hover, .dz-code__meta .dz-code__copy:hover:not(:disabled) { background: light-dark(var(--neutral-300), var(--neutral-600)); color: light-dark(var(--neutral-900), var(--neutral-100)); } .dz-code .dz-code__copy:active, .dz-code__meta .dz-code__copy:active { background: light-dark(var(--neutral-400), var(--neutral-500)); } .dz-code .dz-code__copy:focus-visible, .dz-code__meta .dz-code__copy:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); } .dz-code__copy svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; } .dz-code__copy-idle, .dz-code__copy-done { display: inline-flex; align-items: center; gap: 0.35rem; } .dz-code__copy-done { display: none; color: var(--colour-success); } .dz-code__copy[data-copied] .dz-code__copy-idle { display: none; } .dz-code__copy[data-copied] .dz-code__copy-done { display: inline-flex; } .dz-code .dz-code__pre, .dz-code pre { flex: 1 1 auto; min-width: 0; margin: 0; padding: var(--space-md) var(--space-lg); overflow-x: auto; max-width: 100%; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; tab-size: 4; background: transparent; border: 0; border-radius: 0; color: inherit; box-sizing: border-box; } .dz-code .dz-code__source, .dz-code code { font-family: inherit; font-size: inherit; color: inherit; background: transparent; padding: 0; border-radius: 0; white-space: pre; } .dz-code__tok--kw { color: light-dark(var(--brand-700), var(--brand-300)); } .dz-code__tok--str { color: light-dark(var(--success-600), var(--success-500)); } .dz-code__tok--cmt { color: light-dark(var(--neutral-600), var(--neutral-400)); font-style: italic; } .dz-code__tok--num { color: light-dark(var(--warning-600), var(--warning-500)); } .dz-code__tok--dec { color: light-dark(var(--brand-600), var(--brand-200)); } .dz-code__tok--op { color: light-dark(var(--neutral-600), var(--neutral-300)); } .dz-code__tok--name { color: light-dark(var(--neutral-900), var(--neutral-100)); } .dz-code__tok--builtin { color: light-dark(var(--brand-600), var(--brand-200)); } } @layer components { .dz-tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); width: 100%; min-height: 2rem; padding-block: var(--space-xs); padding-inline: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); cursor: text; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-tags:focus-within { box-shadow: 0 0 0 1px var(--colour-brand); border-color: var(--colour-brand); } .dz-tags[aria-invalid="true"] { border-color: var(--colour-danger); } .dz-tags[aria-invalid="true"]:focus-within { box-shadow: 0 0 0 1px var(--colour-danger); } .dz-tags[data-dz-enhanced] > input[data-dz-tags] { display: none; } .dz-tags-list { display: contents; } .dz-tags-chip { display: inline-flex; align-items: center; gap: var(--space-xs); padding-block: 0.125rem; padding-inline: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-surface-muted); color: var(--colour-text); font-size: var(--text-sm); line-height: 1.4; } .dz-tags-chip-label { white-space: nowrap; } .dz-tags-remove { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; padding: 0; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--colour-text-muted); font-size: 1rem; line-height: 1; cursor: pointer; transition: color var(--duration-base) var(--ease-out); } .dz-tags-remove:hover { color: var(--colour-text); } .dz-tags-remove:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); } .dz-tags-entry { flex: 1 1 6rem; min-width: 6rem; height: 1.5rem; padding: 0; border: none; outline: none; background: transparent; font-size: var(--text-sm); color: var(--colour-text); } .dz-tags-entry::placeholder { color: var(--colour-text-muted); } } @layer components { .dz-profile-card { display: flex; flex-direction: column; gap: var(--space-md); } .dz-profile-identity { display: flex; align-items: flex-start; gap: var(--space-md); } .dz-profile-avatar, .dz-profile-initials { width: 3rem; height: 3rem; border-radius: var(--radius-full); background: var(--colour-bg); flex-shrink: 0; } .dz-profile-avatar { object-fit: cover; } .dz-profile-initials { display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--colour-text-muted); } .dz-profile-text { flex: 1 1 0; min-width: 0; } .dz-profile-primary { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-profile-secondary { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-profile-stats { display: grid; grid-template-columns: 1fr; gap: var(--space-sm); border-block-start: 1px solid var(--colour-border); padding-block-start: var(--space-md); margin: 0; } @media (min-width: 40rem) { .dz-profile-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .dz-profile-stat-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-text-muted); margin: 0; } .dz-profile-stat-value { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin-block-start: 0.125rem; } .dz-profile-facts { display: flex; flex-direction: column; gap: var(--space-xs); border-block-start: 1px solid var(--colour-border); padding-block-start: var(--space-md); font-size: var(--text-xs); color: var(--colour-text); list-style: none; margin: 0; padding-inline-start: 0; } .dz-profile-fact { display: flex; gap: var(--space-sm); line-height: var(--leading-tight); } .dz-profile-fact-bullet { color: var(--colour-text-muted); flex-shrink: 0; } .dz-profile-fact-text { min-width: 0; } } @layer components { .dz-auth-page { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: var(--space-xl) var(--space-md); background: var(--colour-bg); } .dz-auth-card-title { text-align: center; font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: var(--space-lg); } .dz-auth-card-subtitle { text-align: center; font-size: var(--text-sm); color: var(--colour-text-muted); margin-block: calc(var(--space-md) * -0.5) var(--space-md); } .dz-auth-qr-container img { inline-size: 12rem; block-size: 12rem; border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); } .dz-auth-card { width: 100%; max-width: 24rem; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-lg); } .dz-auth-error { display: none; flex-direction: row; gap: var(--space-sm); padding: var(--space-md); margin-block-end: var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--colour-danger); background: color-mix(in oklch, var(--colour-danger) 8%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-auth-error:not([hidden]) { display: flex; } .dz-auth-success { display: none; flex-direction: row; gap: var(--space-sm); padding: var(--space-md); margin-block-end: var(--space-md); border-radius: var(--radius-sm); border: 1px solid var(--colour-brand); background: color-mix(in oklch, var(--colour-brand) 8%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-auth-success:not([hidden]) { display: flex; } .dz-auth-form { display: flex; flex-direction: column; gap: var(--space-sm); } .dz-auth-field { display: flex; flex-direction: column; gap: 0.25rem; } .dz-auth-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); } .dz-auth-submit { inline-size: 100%; margin-block-start: var(--space-md); block-size: 2.25rem; } .dz-auth-input-code { inline-size: 100%; block-size: 2.5rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); background: var(--colour-bg); border: 1px solid var(--colour-border); color: var(--colour-text); font-size: 1.25rem; font-weight: var(--weight-semibold); letter-spacing: 0.4em; text-align: center; transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-auth-input-code::placeholder { color: var(--colour-text-muted); letter-spacing: 0.4em; } .dz-auth-input-code:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); } .dz-auth-section-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: 0.25rem; } .dz-auth-section-body { font-size: var(--text-sm); color: var(--colour-text-muted); margin-block-end: var(--space-md); } .dz-auth-qr-container { display: flex; justify-content: center; margin-block: var(--space-md); } .dz-auth-secret-inline { font-family: var(--font-mono, monospace); font-size: 0.6875rem; color: var(--colour-text); background: var(--colour-bg); padding-inline: 0.25rem; padding-block: 0.125rem; border-radius: var(--radius-xs, 0.1875rem); } .dz-auth-hr { border: 0; border-block-start: 1px solid var(--colour-border); margin-block: var(--space-xl); } .dz-auth-recovery-alert { border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-bg); padding: var(--space-md); } .dz-auth-recovery-alert-title { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--colour-text); } .dz-auth-recovery-alert-body { font-size: var(--text-xs); color: var(--colour-text-muted); margin-block-start: 0.25rem; } .dz-auth-recovery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-sm); margin-block-start: var(--space-md); font-family: var(--font-mono, monospace); font-size: var(--text-xs); } .dz-auth-recovery-pill { border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-surface); padding-inline: var(--space-sm); padding-block: var(--space-sm); text-align: center; font-size: var(--text-xs); color: var(--colour-text); } .dz-auth-back-link { display: block; inline-size: 100%; block-size: 2.25rem; line-height: 2.25rem; text-align: center; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); text-decoration: none; margin-block-start: var(--space-xl); transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-auth-back-link:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-auth-status-loading { text-align: center; font-size: var(--text-sm); color: var(--colour-text-muted); margin-block-start: var(--space-sm); } .dz-auth-status-row { display: flex; justify-content: space-between; align-items: center; padding-block: var(--space-md); border-block-end: 1px solid var(--colour-border); } .dz-auth-status-row.is-last { border-block-end: 0; } .dz-auth-status-label { font-size: var(--text-sm); color: var(--colour-text); } } @layer components { .dz-pdf { border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); overflow: hidden; } .dz-pdf-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-block-end: 1px solid var(--colour-border); } .dz-pdf-toolbar label { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-pdf-page-input { width: 3.5rem; height: 1.75rem; text-align: center; border: 1px solid var(--colour-border); border-radius: var(--radius-sm); background: var(--colour-surface); color: var(--colour-text); font-size: var(--text-sm); } .dz-pdf-page-count { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-pdf-toolbar-spacer { flex: 1 1 0; } .dz-pdf-status { font-size: var(--text-sm); color: var(--colour-text-muted); padding-inline: var(--space-md); } .dz-pdf-status:empty { display: none; } .dz-pdf-stage { overflow: auto; background: var(--colour-bg); padding: var(--space-md); min-height: 12rem; max-height: 40rem; } .dz-pdf-stage canvas { display: block; margin-inline: auto; box-shadow: var(--shadow-md, 0 2px 8px oklch(0% 0 0 / 0.15)); background: white; } [data-dz-pdf-error="true"] .dz-pdf-stage { display: flex; align-items: center; justify-content: center; color: var(--colour-text-muted); font-size: var(--text-sm); } } @layer components { .dz-pdf-viewer { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; background: var(--colour-bg); color: var(--colour-text); } .dz-pdf-viewer-header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-md); padding-block: var(--space-sm); padding-inline: var(--space-lg); background: var(--colour-surface); border-block-end: 1px solid var(--colour-border); } .dz-pdf-viewer-back { display: inline-flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-xs); padding-inline: var(--space-sm); font-size: var(--text-sm); color: var(--colour-text-muted); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--duration-base) var(--ease-out); } .dz-pdf-viewer-back:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-pdf-viewer-back:focus-visible { background: var(--colour-bg); color: var(--colour-text); outline: none; box-shadow: 0 0 0 2px var(--colour-brand); } .dz-pdf-viewer-title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-medium); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .dz-pdf-viewer-nav { display: inline-flex; align-items: center; gap: var(--space-xs); } .dz-pdf-viewer-nav-link { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; color: var(--colour-text-muted); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--duration-base) var(--ease-out); } .dz-pdf-viewer-nav-link:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-pdf-viewer-nav-link:focus-visible { background: var(--colour-bg); color: var(--colour-text); outline: none; box-shadow: 0 0 0 2px var(--colour-brand); } @media (forced-colors: active) { .dz-pdf-viewer-back:focus-visible, .dz-pdf-viewer-nav-link:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } } .dz-pdf-viewer-nav-link[aria-disabled="true"] { opacity: 0.4; pointer-events: none; } .dz-pdf-viewer-body { position: relative; background: var(--colour-bg); overflow: hidden; } .dz-pdf-viewer-embed { display: block; inline-size: 100%; block-size: 100%; border: 0; } .dz-pdf-viewer .dz-pdf.dz-pdf-viewer-embed { display: grid; grid-template-rows: auto auto 1fr; border-radius: 0; } .dz-pdf-viewer .dz-pdf-stage { max-height: none; block-size: auto; min-block-size: 0; } .dz-pdf-viewer-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xs); padding-inline: var(--space-lg); font-size: var(--text-xs); color: var(--colour-text-muted); background: var(--colour-surface); border-block-start: 1px solid var(--colour-border); } .dz-pdf-viewer-kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding-block: 0; padding-inline: var(--space-xs); background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); } .dz-pdf-viewer-kbd-label { margin-inline-end: var(--space-md); } .dz-pdf-viewer-kbd-sep { color: var(--colour-border); } .dz-pdf-viewer-footer-slot { display: flex; align-items: center; gap: var(--space-xs); } @media (max-width: 640px) { .dz-pdf-viewer-back-label { display: none; } } .dz-pdf-viewer-panel-toggle { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .dz-pdf-viewer-panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 360px; display: grid; grid-template-rows: auto 1fr; background: var(--colour-surface); border-inline-start: 1px solid var(--colour-border); box-shadow: -4px 0 12px hsl(0 0% 0% / 0.06); transform: translateX(100%); transition: transform var(--duration-base) var(--ease-out); z-index: 1; } .dz-pdf-viewer-panel-toggle:checked + .dz-pdf-viewer-panel { transform: translateX(0); } .dz-pdf-viewer-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); padding-inline: var(--space-lg); background: var(--colour-bg); border-block-end: 1px solid var(--colour-border); } .dz-pdf-viewer-panel-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); } .dz-pdf-viewer-panel-close { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; color: var(--colour-text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-base) var(--ease-out); } .dz-pdf-viewer-panel-close { background: transparent; border: 0; cursor: pointer; } .dz-pdf-viewer-panel-close:hover { background: var(--colour-surface); color: var(--colour-text); } .dz-pdf-viewer-panel-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--colour-brand); } @media (forced-colors: active) { .dz-pdf-viewer-panel-close:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } } .dz-pdf-viewer-panel-body { overflow-y: auto; padding: var(--space-lg); } @media (max-width: 768px) { .dz-pdf-viewer-panel { inline-size: 100%; } } .dz-pdf-viewer-help { inline-size: min(420px, calc(100vw - var(--space-2xl))); max-block-size: 80vh; padding: 0; border: 1px solid var(--colour-border); border-radius: var(--radius-md); background: var(--colour-surface); color: var(--colour-text); box-shadow: 0 16px 48px hsl(0 0% 0% / 0.16); } .dz-pdf-viewer-help::backdrop { background: hsl(0 0% 0% / 0.32); } .dz-pdf-viewer-help-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-sm); padding-inline: var(--space-lg); border-block-end: 1px solid var(--colour-border); } .dz-pdf-viewer-help-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); } .dz-pdf-viewer-help-close { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.75rem; block-size: 1.75rem; background: transparent; border: 0; color: var(--colour-text-muted); border-radius: var(--radius-sm); cursor: pointer; } .dz-pdf-viewer-help-close:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-pdf-viewer-help-close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--colour-brand); } @media (forced-colors: active) { .dz-pdf-viewer-help-close:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; box-shadow: none; } } .dz-pdf-viewer-help-list { margin: 0; padding-block: var(--space-sm); padding-inline: 0; font-size: var(--text-sm); } .dz-pdf-viewer-help-row { display: grid; grid-template-columns: 8rem 1fr; align-items: baseline; gap: var(--space-md); padding-block: var(--space-xs); padding-inline: var(--space-lg); } .dz-pdf-viewer-help-row dt { margin: 0; display: flex; align-items: center; gap: var(--space-xs); } .dz-pdf-viewer-help-row dd { margin: 0; color: var(--colour-text-muted); } .dz-pdf-viewer-help-row kbd { font-family: var(--font-mono); font-size: var(--text-xs); padding-block: 0; padding-inline: var(--space-xs); background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-sm); } } @layer components { .dz-tabs { display: block; } .dz-tabs__list { display: flex; border-block-end: 1px solid var(--colour-border); margin-block-end: var(--space-md); } .dz-tabs__tab { appearance: none; border-radius: 0; padding-inline: var(--space-md); padding-block: var(--space-sm); font-size: var(--text-sm); font-weight: var(--weight-regular, 400); color: var(--colour-text-muted); background: transparent; border: 0; border-block-end: 2px solid transparent; margin-block-end: -1px; cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .dz-tabs__tab:hover { color: var(--colour-text); background: transparent; } .dz-tabs__tab:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: calc(var(--focus-ring-offset) * -1); } .dz-tabs__tab[aria-current="true"] { border-block-end-color: var(--colour-brand); color: var(--colour-text); font-weight: var(--weight-medium); border-radius: 0; } .dz-tabs__loading { display: flex; justify-content: center; padding-block: var(--space-2xl); color: var(--colour-text-muted); } .dz-tabs__loading > svg { width: 1rem; height: 1rem; animation: dz-spin 1s linear infinite; } @media (prefers-reduced-motion: reduce) { .dz-tabs__tab { transition: none; } .dz-tabs__loading > svg { animation: none; } } } @layer components { @layer components { @media (pointer: coarse) { .dz-button, .dz-icon-button, .dz-card-action-button, .dz-list-csv-button, .dz-sidebar-action-button, .dz-add-card-button { min-height: var(--dz-touch-target-min); min-width: var(--dz-touch-target-min); } .dz-drawer__close, .dz-pdf-viewer-help-close, .dz-pdf-viewer-panel-close { min-height: var(--dz-touch-target-min); min-width: var(--dz-touch-target-min); } button, [role="button"], a.dz-link { min-height: var(--dz-touch-target-min); } } } } @layer components { .dz-card-body, .dz-drawer-content, .dz-detail-card-body, .dz-app-content, .dz-app-body, .dz-drawer__body, .dz-pdf-viewer-panel, .dz-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .dz-table-wrap, .dz-scroll-x { -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } } @layer components { .dz-toast { pointer-events: auto; max-width: 24rem; border-radius: var(--radius-md); border: 1px solid var(--colour-border); border-inline-start-width: 4px; background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-md); padding-inline: var(--space-md); padding-block: var(--space-md); display: flex; align-items: flex-start; gap: var(--space-md); transition: all var(--duration-base) var(--ease-out); } .dz-toast[data-dz-toast-level="success"] { border-inline-start-color: var(--colour-success); } .dz-toast[data-dz-toast-level="error"] { border-inline-start-color: var(--colour-danger); } .dz-toast[data-dz-toast-level="warning"] { border-inline-start-color: var(--colour-warning); } .dz-toast[data-dz-toast-level="info"] { border-inline-start-color: var(--colour-brand); } .dz-toast-icon { width: 0.75rem; height: 0.75rem; margin-block-start: 3px; flex-shrink: 0; } .dz-toast[data-dz-toast-level="success"] .dz-toast-icon { color: var(--colour-success); } .dz-toast[data-dz-toast-level="error"] .dz-toast-icon { color: var(--colour-danger); } .dz-toast[data-dz-toast-level="warning"] .dz-toast-icon { color: var(--colour-warning); } .dz-toast[data-dz-toast-level="info"] .dz-toast-icon { color: var(--colour-brand); } .dz-toast-message { font-size: var(--text-sm); color: var(--colour-text); } .dz-detail-fields-card { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .dz-detail-fields-body { padding: var(--space-lg); } .dz-detail-fields-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-detail-fields-list { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs) var(--space-md); margin-block-start: var(--space-md); } .dz-detail-text { white-space: pre-wrap; overflow-wrap: anywhere; } .dz-detail-fields-key { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text-muted); text-align: end; padding-block: 0.25rem; } .dz-detail-fields-value { font-size: var(--text-sm); padding-block: 0.25rem; word-break: break-all; } .dz-context-menu { position: relative; } .dz-context-menu-panel { z-index: 50; min-width: 11rem; padding-block: 0.25rem; border-radius: var(--radius-sm); background: var(--colour-surface); border: 1px solid var(--colour-border); box-shadow: var(--shadow-md); font-size: var(--text-sm); list-style: none; margin: 0; padding-inline-start: 0; } .dz-context-menu-divider { margin-block: 0.25rem; border-block-start: 1px solid var(--colour-border); } .dz-context-menu-item { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: 0.375rem; color: var(--colour-text); text-decoration: none; transition: background var(--duration-fast) var(--ease-out); } .dz-context-menu-item:hover { background: var(--colour-bg); } .dz-context-menu-item-icon { width: 0.875rem; height: 0.875rem; color: var(--colour-text-muted); } .dz-sentinel-cell { text-align: center; padding-block: var(--space-md); } .dz-sentinel-spinner { display: inline-block; width: 1rem; height: 1rem; animation: dz-spin 1s linear infinite; } .dz-experience-transition { display: inline-flex; align-items: center; height: 2.25rem; padding-inline: var(--space-md); font-weight: var(--weight-medium); border-radius: var(--radius-sm); font-size: var(--text-sm); border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), filter var(--duration-fast) var(--ease-out); } .dz-experience-transition[data-dz-transition-style="primary"] { background: var(--colour-brand); color: var(--colour-brand-contrast); } .dz-experience-transition[data-dz-transition-style="primary"]:hover { filter: brightness(1.1); } .dz-experience-transition[data-dz-transition-style="ghost"] { background: transparent; color: var(--colour-text-muted); } .dz-experience-transition[data-dz-transition-style="ghost"]:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-experience-transition[data-dz-transition-style="default"], .dz-experience-transition:not([data-dz-transition-style]) { background: transparent; color: var(--colour-text); border: 1px solid var(--colour-border); } .dz-experience-transition[data-dz-transition-style="default"]:hover, .dz-experience-transition:not([data-dz-transition-style]):hover { background: var(--colour-bg); } .dz-loading-spinner { display: flex; justify-content: center; padding-block: var(--space-md); } .dz-loading-spinner-icon { display: inline-block; width: 1.25rem; height: 1.25rem; animation: dz-spin 1s linear infinite; } .dz-skip-link { position: absolute; inset-block-start: -100vh; inset-inline-start: 0; padding: var(--space-sm); background: var(--colour-brand); color: var(--colour-brand-contrast); font-size: var(--text-sm); font-weight: var(--weight-semibold); border-radius: var(--radius-sm); z-index: 9999; text-decoration: none; transition: top var(--duration-fast) var(--ease-out); } .dz-skip-link:focus, .dz-skip-link:focus-visible { inset-block-start: 0.5rem; inset-inline-start: 0.5rem; } .dz-layout-shell { min-height: 100vh; display: flex; flex-direction: column; } .dz-layout-topbar { display: flex; align-items: center; padding-inline: var(--space-md); padding-block: var(--space-sm); background: var(--colour-surface); border-block-end: 1px solid var(--colour-border); box-shadow: var(--shadow-sm); } .dz-layout-topbar-title { flex: 1 1 0; } .dz-layout-topbar-title-text { font-size: var(--text-lg); font-weight: var(--weight-semibold); } .dz-layout-topbar-nav { display: flex; gap: var(--space-sm); flex: none; } .dz-layout-nav-link { display: inline-flex; align-items: center; height: 2rem; padding-inline: var(--space-md); border-radius: var(--radius-sm); color: var(--colour-text-muted); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-layout-nav-link:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-layout-main { flex: 1 1 0; margin-inline: auto; padding: var(--space-md); max-width: 64rem; width: 100%; } @media (min-width: 64rem) { .dz-layout-main { padding: var(--space-lg); } } .dz-layout-footer { text-align: center; padding: var(--space-md); background: var(--colour-surface); color: var(--colour-text); border-block-start: 1px solid var(--colour-border); } .dz-inline-edit { position: relative; margin-inline: -0.25rem; margin-block: -0.125rem; } .dz-ref-link { color: var(--colour-brand); text-decoration: none; transition: text-decoration-color var(--duration-fast) var(--ease-out); } .dz-ref-link:hover { text-decoration: underline; } .dz-cmdk-overlay { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding-block-start: 20vh; } .dz-cmdk-backdrop { position: fixed; inset: 0; background: oklch(0% 0 0 / 0.4); } .dz-cmdk-card { position: relative; width: 100%; max-width: 32rem; background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; } .dz-cmdk-search-row { display: flex; align-items: center; gap: var(--space-sm); padding-inline: var(--space-md); padding-block: var(--space-sm); border-block-end: 1px solid var(--colour-border); } .dz-cmdk-search-icon { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--colour-text-muted); } .dz-cmdk-search-input { width: 100%; background: transparent; font-size: var(--text-base); color: var(--colour-text); border: 0; outline: none; } .dz-cmdk-search-input::placeholder { color: var(--colour-text-muted); } .dz-cmdk-results { max-height: 20rem; overflow-y: auto; padding: 0.375rem; list-style: none; margin: 0; } .dz-cmdk-item { display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-cmdk-item:hover { background: var(--colour-bg); } .dz-cmdk-item.is-selected { background: color-mix(in oklch, var(--colour-brand) 10%, transparent); color: var(--colour-brand); } .dz-cmdk-item-icon { width: 1rem; height: 1rem; flex-shrink: 0; } .dz-cmdk-item-text { min-width: 0; } .dz-cmdk-item-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-cmdk-item-group { font-size: var(--text-xs); color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dz-cmdk-empty { padding-inline: var(--space-md); padding-block: var(--space-lg); text-align: center; font-size: var(--text-sm); font-style: italic; color: var(--colour-text-muted); } .dz-cmdk-footer { display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-md); padding-block: var(--space-sm); border-block-start: 1px solid var(--colour-border); font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-cmdk-hint { display: inline-flex; align-items: center; gap: 0.25rem; } .dz-cmdk-key { display: inline-flex; align-items: center; height: 1.25rem; padding-inline: 0.375rem; border-radius: var(--radius-sm); border: 1px solid var(--colour-border); background: var(--colour-bg); font-family: var(--font-mono); font-size: 0.625rem; color: var(--colour-text-muted); } .dz-app-body { min-height: 100vh; background: var(--colour-bg); } .dz-toast-stack { position: fixed; top: 1rem; right: 1rem; z-index: 50; display: flex; flex-direction: column; gap: var(--space-sm); max-width: 24rem; pointer-events: none; } .dz-review-shell { max-width: 56rem; } .dz-review-progress { display: inline-flex; align-items: center; gap: var(--space-sm); } .dz-review-progress-text { font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-review-progress-bar { inline-size: 6rem; block-size: 0.25rem; border-radius: var(--radius-xs); } .dz-review-nav { display: flex; justify-content: space-between; margin-block-end: var(--space-md); } .dz-review-actions { display: flex; gap: var(--space-sm); justify-content: flex-end; } .dz-review-notes-wrap { margin-block-end: var(--space-md); } .dz-review-notes-wrap[hidden] { display: none; } .dz-review-notes-label { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin-block-end: var(--space-xs); } .dz-review-notes-required { display: inline; font-size: var(--text-xs); font-weight: var(--weight-normal); color: var(--colour-danger); margin-inline-start: 0.25rem; } .dz-review-notes-textarea { inline-size: 100%; min-block-size: 6rem; resize: vertical; padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); background: var(--colour-bg); border: 1px solid var(--colour-border); color: var(--colour-text); font-size: var(--text-sm); transition: box-shadow var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out); } .dz-review-notes-textarea::placeholder { color: var(--colour-text-muted); } .dz-review-notes-textarea:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--colour-brand); } .dz-review-empty { text-align: center; padding-block: var(--space-2xl); } .dz-review-empty-icon { font-size: 3rem; margin-block-end: var(--space-sm); } .dz-review-empty-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--colour-text); margin-block-end: var(--space-xs); } .dz-review-empty-body { font-size: var(--text-sm); color: var(--colour-text-muted); margin-block-end: var(--space-md); } @keyframes dz-spin { to { transform: rotate(360deg); } } .dz-island { background: var(--colour-surface); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-lg); } .dz-island-header { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--space-md); } .dz-island-title { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--colour-text); margin: 0; } .dz-island-skeleton { block-size: 8rem; inline-size: 100%; border-radius: var(--radius-sm); } .dz-error-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-block-size: 60vh; padding-inline: var(--space-md); } .dz-error-code { font-size: 3rem; font-weight: var(--weight-semibold); line-height: 1; color: var(--colour-text); margin-block-end: var(--space-md); } .dz-error-message { font-size: var(--text-md); color: var(--colour-text-muted); margin-block-end: var(--space-md); text-align: center; max-inline-size: 30rem; } .dz-error-suggestions-card, .dz-error-detail-card { inline-size: 100%; max-inline-size: 30rem; margin-block-end: var(--space-lg); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); } .dz-error-suggestions-card { background: var(--colour-surface); } .dz-error-detail-card { background: color-mix(in oklch, var(--colour-bg) 70%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-error-suggestions-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--colour-text); margin-block-end: var(--space-sm); } .dz-error-suggestions-list { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; } .dz-error-suggestion-link { display: inline-flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); color: var(--colour-brand); text-decoration: none; } .dz-error-suggestion-link:hover { text-decoration: underline; } .dz-error-suggestion-url { font-family: var(--font-mono, monospace); font-size: var(--text-xs); color: var(--colour-text-muted); } .dz-error-detail-grid { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-md); row-gap: 0.375rem; margin: 0; } .dz-error-detail-label { color: var(--colour-text-muted); } .dz-error-detail-chip { display: inline-block; margin-inline-end: 0.25rem; padding-inline: 0.25rem; padding-block: 0.125rem; border-radius: var(--radius-xs); background: var(--colour-bg); border: 1px solid var(--colour-border); font-size: var(--text-xs); font-family: var(--font-mono, monospace); } .dz-error-actions { display: flex; align-items: center; gap: var(--space-sm); } .dz-card-picker { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-block-end: var(--space-sm); inline-size: 20rem; background: var(--colour-surface); color: var(--colour-text); box-shadow: var(--shadow-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); padding: var(--space-md); z-index: 50; max-block-size: 16rem; overflow-y: auto; display: none; } .dz-workspace[data-show-picker="1"] .dz-card-picker { display: block; } .dz-card-picker-title { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-text-muted); margin-block-end: var(--space-sm); } .dz-card-picker-entry { inline-size: 100%; text-align: start; padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); background: transparent; border: 0; display: flex; align-items: center; gap: var(--space-sm); font-size: var(--text-sm); cursor: pointer; transition: background var(--duration-fast) var(--ease-out); } .dz-card-picker-entry:hover { background: var(--colour-bg); } .dz-card-picker-display-tag { padding-inline: 0.375rem; padding-block: 0.125rem; border-radius: var(--radius-sm); background: var(--colour-bg); font-size: 0.6875rem; font-weight: var(--weight-medium); color: var(--colour-text-muted); } .dz-card-picker-title-text { color: var(--colour-text); } .dz-card-picker-entity { font-size: 0.6875rem; color: var(--colour-text-muted); margin-inline-start: auto; } .dz-card-picker-empty { font-size: var(--text-sm); color: var(--colour-text-muted); padding-block: var(--space-sm); } .dz-pipeline-stages { display: flex; flex-direction: column; gap: var(--space-md); margin-block-start: var(--space-sm); list-style: none; padding: 0; } @media (min-width: 48rem) { .dz-pipeline-stages { flex-direction: row; } } .dz-pipeline-stage { position: relative; flex: 1; display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); } .dz-pipeline-stage-label { font-size: 0.6875rem; font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-text-muted); } .dz-pipeline-stage-value { font-size: 1.5rem; font-weight: var(--weight-semibold); line-height: 1; color: var(--colour-text); } .dz-pipeline-stage-caption { font-size: var(--text-xs); line-height: 1.3; color: var(--colour-text-muted); } .dz-pipeline-stage-progress { display: flex; align-items: center; gap: var(--space-sm); margin-block-start: var(--space-xs); } .dz-pipeline-stage-progress-track { position: relative; flex: 1; block-size: 0.25rem; border-radius: 9999px; background: var(--colour-bg); overflow: hidden; } .dz-pipeline-stage-progress-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--colour-brand); border-radius: 9999px; transition: width 0.2s var(--ease-out); } .dz-pipeline-stage-progress-label { font-size: 0.6875rem; font-weight: var(--weight-medium); color: var(--colour-text-muted); font-variant-numeric: tabular-nums; } .dz-pipeline-connector { position: absolute; display: none; align-items: center; justify-content: center; inset-inline-end: -0.875rem; inset-block-start: 50%; transform: translateY(-50%); inline-size: 1.75rem; block-size: 1.75rem; z-index: 5; color: var(--colour-text-muted); } @media (min-width: 48rem) { .dz-pipeline-connector { display: flex; } } .dz-pipeline-connector-mobile { display: flex; align-items: center; justify-content: center; margin-block-start: var(--space-xs); color: var(--colour-text-muted); } @media (min-width: 48rem) { .dz-pipeline-connector-mobile { display: none; } } .dz-experience { max-inline-size: 56rem; margin-inline: auto; } .dz-experience-title { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--colour-text); margin-block-end: var(--space-xl); } .dz-experience-form-shell { max-inline-size: 42rem; } .dz-experience-form-body { display: flex; flex-direction: column; gap: var(--space-md); } .dz-experience-stage-title { font-size: var(--text-md); font-weight: var(--weight-semibold); margin-block-end: var(--space-md); } .dz-experience-actions { display: flex; gap: var(--space-md); padding-block-start: var(--space-md); } .dz-experience-actions-centered { justify-content: center; } .dz-experience-ready { display: flex; align-items: center; gap: var(--space-md); padding-inline: var(--space-md); padding-block: var(--space-sm); border-radius: var(--radius-sm); background: color-mix(in oklch, var(--colour-brand) 8%, transparent); border: 1px solid color-mix(in oklch, var(--colour-brand) 20%, transparent); font-size: var(--text-sm); color: var(--colour-text); } .dz-experience-placeholder { border-radius: var(--radius-md); background: var(--colour-bg); padding: var(--space-2xl); text-align: center; } .dz-experience-placeholder-title { font-size: var(--text-md); font-weight: var(--weight-medium); margin-block-end: var(--space-sm); } .dz-experience-placeholder-body { color: var(--colour-text-muted); } } @layer components { .dz-dashboard-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); align-items: start; } @media (min-width: 48rem) { .dz-dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } } .dz-card-wrapper { position: relative; outline: none; } .dz-card-wrapper:focus { box-shadow: 0 0 0 2px var(--colour-surface), 0 0 0 4px var(--colour-brand); } .dz-card-wrapper.is-animating { transition: all var(--duration-base) var(--ease-out); } .dz-card { border-radius: var(--radius-md); border: 1px solid var(--colour-border); background: var(--colour-surface); box-shadow: var(--shadow-sm); overflow: hidden; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } .dz-card.is-resizing { border-style: dashed; border-color: var(--colour-brand); } .dz-card-header { display: flex; align-items: center; justify-content: space-between; padding-inline: var(--space-md); padding-block: var(--space-sm); cursor: grab; min-height: 2.25rem; } .dz-card-header:active { cursor: grabbing; } .dz-card-header.is-dragging { cursor: grabbing; } .dz-card-titles { display: flex; flex-direction: column; } .dz-card-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-medium); text-transform: uppercase; letter-spacing: 0.04em; color: var(--colour-text-muted); line-height: 1; } .dz-card-title { font-size: var(--text-base); font-weight: var(--weight-medium); color: var(--colour-text); user-select: none; margin: 0; } .dz-card-actions { display: flex; align-items: center; gap: var(--space-xs); opacity: 0.6; transition: opacity var(--duration-fast) var(--ease-out); } .dz-card-wrapper:hover .dz-card-actions, .dz-card-wrapper:focus-within .dz-card-actions { opacity: 1; } .dz-card-action-button { width: 1.5rem; height: 1.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--colour-text-muted); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-card-action-button:hover { background: var(--colour-bg); color: var(--colour-text); } .dz-card-notice { margin-inline: var(--space-md); margin-block-end: var(--space-sm); padding-inline: var(--space-sm); padding-block: var(--space-xs); border-radius: var(--radius-sm); border-inline-start-width: 2px; border-inline-start-style: solid; } .dz-notice-band[data-dz-notice-tone="positive"] { background: color-mix(in oklab, var(--colour-success) 8%, transparent); border-left-color: var(--colour-success); } .dz-notice-band[data-dz-notice-tone="warning"] { background: color-mix(in oklab, var(--colour-warning) 10%, transparent); border-left-color: var(--colour-warning); } .dz-notice-band[data-dz-notice-tone="destructive"] { background: color-mix(in oklab, var(--colour-danger) 8%, transparent); border-left-color: var(--colour-danger); } .dz-notice-band[data-dz-notice-tone="accent"] { background: color-mix(in oklab, var(--colour-brand) 8%, transparent); border-left-color: var(--colour-brand); } .dz-notice-band[data-dz-notice-tone="neutral"], .dz-notice-band:not([data-dz-notice-tone]) { background: color-mix(in oklab, var(--colour-surface-muted) 40%, transparent); border-left-color: var(--colour-border); } .dz-card-notice-title { font-size: var(--text-xs); font-weight: var(--weight-medium); line-height: var(--leading-tight); color: var(--colour-text); } .dz-card-notice-body { font-size: var(--text-xs); line-height: var(--leading-tight); color: var(--colour-text-muted); margin-block-start: 0.125rem; } .dz-card-body { padding-inline: var(--space-md); padding-block-end: var(--space-md); } .dz-card-body[data-display] { min-height: 280px; } .dz-card-body[data-display="summary"], .dz-card-body[data-display="summary_row"] { min-height: 96px; } .dz-card-body[data-display="metrics"], .dz-card-body[data-display="metric"] { min-height: 140px; } .dz-card-body[data-display="bar_chart"], .dz-card-body[data-display="chart"], .dz-card-body[data-display="line_chart"], .dz-card-body[data-display="bar_track"], .dz-card-body[data-display="bullet"], .dz-card-body[data-display="funnel_chart"], .dz-card-body[data-display="heatmap"], .dz-card-body[data-display="radar"] { min-height: 280px; } .dz-card-body[data-display="kanban"] { min-height: 480px; } .dz-card-body[data-display="diagram"] { min-height: 360px; } .dz-card-body[data-display="profile_card"] { min-height: 200px; } .dz-card-body[data-display="action_grid"], .dz-card-body[data-display="pipeline_steps"], .dz-card-body[data-display="status_list"] { min-height: 200px; } .dz-card-body[data-display="pivot_table"], .dz-card-body[data-display="timeline"] { min-height: 320px; } .dz-card-skeleton { display: flex; flex-direction: column; gap: var(--space-sm); padding-block: var(--space-sm); animation: dz-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .dz-card-skeleton-line { height: 1rem; background: var(--colour-bg); border-radius: var(--radius-sm); } .dz-card-skeleton-line.is-thin { height: 0.75rem; } .dz-card-skeleton-line.w-3-4 { width: 75%; } .dz-card-skeleton-line.w-5-6 { width: 83.333%; } .dz-card-resize { position: absolute; top: 0; inset-inline-end: 0; width: 0.375rem; height: 100%; cursor: col-resize; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out); border-end-end-radius: var(--radius-md); border-start-end-radius: var(--radius-md); } .dz-card-wrapper:hover .dz-card-resize, .dz-card-wrapper:focus-within .dz-card-resize { opacity: 1; } .dz-card-resize:hover { background: color-mix(in oklch, var(--colour-brand) 30%, transparent); } .dz-add-card-row { position: relative; display: flex; justify-content: center; margin-block-start: var(--space-md); } .dz-add-card-button { display: inline-flex; align-items: center; gap: var(--space-sm); height: 2rem; padding-inline: var(--space-lg); font-size: var(--text-sm); font-weight: var(--weight-medium); border-radius: var(--radius-md); border: 2px dashed var(--colour-border); color: var(--colour-text-muted); background: transparent; cursor: pointer; transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); } .dz-add-card-button:hover { border-color: var(--colour-brand); color: var(--colour-text); } } @layer components { .dz-section-hero { background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%); color: white; padding: var(--dz-spacing-hero-y, 6rem) 1.5rem; text-align: center; position: relative; overflow: hidden; } .dz-section-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 30% 70%, oklch(1 0 0 / 0.1) 0%, transparent 50%); pointer-events: none; } .dz-hero-with-media { display: flex; align-items: center; gap: 3rem; } .dz-hero-with-media .dz-section-content { flex: 1; text-align: left; } .dz-hero-with-media .dz-cta-group { justify-content: flex-start; } .dz-hero-media { flex: 1; max-width: 50%; } .dz-hero-image { width: 100%; height: auto; border-radius: var(--dz-radius-lg, 1rem); box-shadow: var(--dz-shadow-xl, 0 20px 50px -12px oklch(0 0 0 / 0.3)); } @media (max-width: 768px) { .dz-hero-with-media { flex-direction: column; text-align: center; } .dz-hero-with-media .dz-section-content { text-align: center; } .dz-hero-with-media .dz-cta-group { justify-content: center; } .dz-hero-media { max-width: 100%; order: -1; } } .dz-section-features { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: var(--p, oklch(0.99 0 0)); } .dz-section-pricing { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); } .dz-section-faq { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-section-testimonials { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); } .dz-section-stats { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%); color: white; } .dz-section-cta { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%); color: white; text-align: center; } .dz-section-cta h2 { font-size: var(--dz-font-size-cta-headline, 3rem); font-weight: 800; letter-spacing: -0.02em; color: white; } .dz-section-cta .dz-button[data-dz-variant="primary"] { background: var(--dz-cta-fill); color: var(--dz-cta-text); border: none; font-weight: 700; font-size: 1.0625rem; padding: 0.875rem 1.75rem; border-radius: var(--dz-radius-button, 0.5rem); box-shadow: var(--dz-cta-shadow); transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms); } .dz-section-cta .dz-button[data-dz-variant="primary"]:hover { background: var(--dz-cta-fill-hover); box-shadow: var(--dz-cta-shadow-hover); transform: translateY(-1px); } .dz-section-steps { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-section-logo-cloud { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); text-align: center; } .dz-section-comparison { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-comparison-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; } .dz-comparison-table { width: 100%; border-collapse: collapse; text-align: center; } .dz-comparison-table th, .dz-comparison-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--dz-border-subtle); } .dz-comparison-table thead th { font-weight: 600; font-size: var(--text-base); padding-bottom: 1rem; } .dz-comparison-feature { text-align: left; font-weight: 500; } .dz-comparison-highlighted { background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260)); } .dz-section-value-highlight { padding: var(--dz-spacing-hero-y, 6rem) 1.5rem; text-align: center; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); } .dz-value-headline { font-size: var(--dz-font-size-hero-headline, 3.5rem); font-weight: var(--dz-font-weight-hero-headline, 800); line-height: var(--dz-line-height-hero-headline, 1.1); letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em); } .dz-value-body { max-width: 40rem; margin: 0 auto 2rem; font-size: var(--text-base); line-height: 1.6; color: var(--dz-text-body); } .dz-section-split-content { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .dz-split--reversed .dz-split-grid { direction: rtl; } .dz-split--reversed .dz-split-grid > * { direction: ltr; } .dz-split-text h2 { text-align: left; } .dz-split-text p { color: var(--dz-text-body); } .dz-cta-group--left { justify-content: flex-start; } .dz-split-media img { width: 100%; height: auto; border-radius: var(--dz-radius-lg, 1rem); box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1)); } @media (max-width: 768px) { .dz-split-grid { grid-template-columns: 1fr; } .dz-split--reversed .dz-split-grid { direction: ltr; } .dz-split-text h2 { text-align: center; } .dz-cta-group--left { justify-content: center; } } .dz-section-card-grid { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); } .dz-card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .dz-card-grid > * { flex: 0 1 320px; } .dz-card-grid:has(> :nth-child(4):last-child) > * { flex-basis: calc(50% - 0.75rem); max-width: 26rem; } .dz-card-item { background: var(--dz-surface-card); padding: var(--dz-spacing-card-padding, 1.5rem); border: var(--dz-card-border); border-radius: var(--dz-radius-card, 0.75rem); box-shadow: var(--dz-shadow-card); display: flex; flex-direction: column; transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms), border-color var(--dz-transition-fast, 150ms); } .dz-card-item:hover { transform: translateY(-2px); box-shadow: var(--dz-card-shadow-hover); border-color: color-mix(in oklab, var(--dz-hero-bg-from) 35%, transparent); } .dz-card-item h3 { font-size: var(--text-base); font-weight: 600; margin: 0.5rem 0; } .dz-card-item p { color: var(--dz-text-body); margin: 0 0 1rem; line-height: var(--dz-line-height-body, 1.6); flex: 1; } .dz-card-icon { width: 3rem; height: 3rem; background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260)); border-radius: 0.625rem; box-shadow: var(--dz-card-icon-ring); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--dz-hero-bg-from); } .dz-card-icon svg { width: 1.5rem; height: 1.5rem; } .dz-section-trust-bar { padding: 2rem 1.5rem; background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); border-top: 1px solid var(--dz-border-subtle); border-bottom: 1px solid var(--dz-border-subtle); } .dz-trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; align-items: center; } .dz-trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--text-sm); font-weight: 500; color: var(--dz-text-body); } .dz-trust-item svg { width: 1.25rem; height: 1.25rem; color: var(--dz-hero-bg-from); } .dz-section-team { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2rem; max-width: 64rem; margin: 0 auto; } .dz-team-card { text-align: center; padding: 2rem 1.5rem; } .dz-team-avatar { width: 6rem; height: 6rem; border-radius: 50%; margin: 0 auto 1rem; overflow: hidden; background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%); display: flex; align-items: center; justify-content: center; } .dz-team-avatar img { width: 100%; height: 100%; object-fit: cover; } .dz-team-initials { font-size: var(--text-xl); font-weight: 600; color: white; letter-spacing: 0.05em; } .dz-team-name { font-size: var(--text-base); font-weight: 600; margin: 0 0 0.25rem; } .dz-team-role { font-size: var(--text-sm); font-weight: 500; color: var(--dz-hero-bg-from); margin: 0 0 0.75rem; } .dz-team-bio { font-size: var(--text-sm); line-height: 1.6; color: var(--dz-text-body); margin: 0 0 1rem; } .dz-team-links { display: flex; gap: 0.75rem; justify-content: center; } .dz-team-link { color: var(--dz-text-body); transition: color var(--dz-transition-fast, 150ms); } .dz-team-link:hover { color: var(--dz-hero-bg-from); } .dz-team-link svg { width: 1.25rem; height: 1.25rem; } .dz-theme-toggle { background: transparent; border: none; cursor: pointer; padding: 0.5rem; border-radius: 0.375rem; color: var(--dz-text-body); transition: color var(--dz-transition-fast, 150ms), background var(--dz-transition-fast, 150ms); display: flex; align-items: center; justify-content: center; } .dz-theme-toggle:hover { color: var(--dz-text-foreground); background: var(--dz-border-subtle); } .dz-theme-toggle__icon { width: 1.25rem; height: 1.25rem; } .dz-theme-toggle__sun { display: none; } .dz-theme-toggle__moon { display: block; } [data-theme="dark"] .dz-theme-toggle__sun { display: block; } [data-theme="dark"] .dz-theme-toggle__moon { display: none; } .dz-bg-alt { background: var(--dz-section-alt-bg, oklch(0.97 0.01 260)); } .dz-bg-primary { background: linear-gradient(135deg, var(--dz-hero-bg-from) 0%, var(--dz-hero-bg-to) 100%); color: white; } .dz-bg-primary .dz-section-header h2, .dz-bg-primary .dz-section-header p { color: white; } .dz-bg-dark { background: oklch(0.15 0.01 260); color: oklch(0.9 0 0); } .dz-bg-dark .dz-section-header h2, .dz-bg-dark .dz-section-header p { color: oklch(0.9 0 0); } [data-theme="dark"] .dz-bg-alt { background: oklch(0.12 0.01 260); } [data-theme="dark"] .dz-section-features, [data-theme="dark"] .dz-section-faq, [data-theme="dark"] .dz-section-steps { background: oklch(0.12 0.01 260); } [data-theme="dark"] .dz-section-pricing, [data-theme="dark"] .dz-section-testimonials, [data-theme="dark"] .dz-section-logo-cloud, [data-theme="dark"] .dz-section-cta, [data-theme="dark"] .dz-section-value-highlight, [data-theme="dark"] .dz-section-card-grid, [data-theme="dark"] .dz-section-trust-bar { background: oklch(0.08 0.01 260); } [data-theme="dark"] .dz-section-comparison, [data-theme="dark"] .dz-section-split-content { background: oklch(0.12 0.01 260); } [data-theme="dark"] .dz-feature-item, [data-theme="dark"] .dz-testimonial-item, [data-theme="dark"] .dz-card-item, [data-theme="dark"] .dz-pricing-tier:not(.dz-pricing-highlighted) { background: oklch(0.18 0.01 260); } [data-theme="dark"] .dz-comparison-table th, [data-theme="dark"] .dz-comparison-table td { border-color: oklch(1 0 0 / 0.1); } [data-theme="dark"] .dz-comparison-highlighted { background: oklch(0.18 0.03 260); } [data-theme="dark"] .dz-section h2, [data-theme="dark"] .dz-feature-item h3, [data-theme="dark"] .dz-step-item h3, [data-theme="dark"] .dz-faq-item summary, [data-theme="dark"] .dz-pricing-tier h3 { color: oklch(0.95 0 0); } [data-theme="dark"] .dz-feature-item p, [data-theme="dark"] .dz-step-item p, [data-theme="dark"] .dz-testimonial-item blockquote, [data-theme="dark"] .dz-faq-item p { color: oklch(0.65 0 0); } [data-theme="dark"] .dz-faq-item { border-color: oklch(1 0 0 / 0.1); } [data-theme="dark"] .dz-prose { color: oklch(0.85 0 0); } [data-theme="dark"] .dz-prose h1, [data-theme="dark"] .dz-prose h2, [data-theme="dark"] .dz-prose h3 { color: oklch(0.95 0 0); } [data-theme="dark"] .dz-logo-item img { filter: grayscale(100%) invert(1); opacity: 0.5; } [data-theme="dark"] .dz-logo-item:hover img { filter: grayscale(0%) invert(1); opacity: 0.8; } [data-theme="dark"] .dz-btn-secondary, [data-theme="dark"] .btn-outline { color: oklch(0.85 0 0); border-color: oklch(0.85 0 0); } [data-theme="dark"] .dz-btn-secondary:hover, [data-theme="dark"] .btn-outline:hover { background: oklch(1 0 0 / 0.1); } @media (max-width: 768px) { .dz-section h1 { font-size: var(--text-3xl); } .dz-section h2 { font-size: var(--text-2xl); } .dz-section-markdown h2, .dz-section .prose h2 { font-size: var(--text-lg); } .dz-section-markdown h1, .dz-section .prose h1 { font-size: var(--text-2xl); } .dz-section-cta h2 { font-size: var(--text-2xl); } .dz-cta-group { flex-direction: column; align-items: center; } .dz-pricing-highlighted { transform: none; } .dz-stat-value { font-size: var(--text-2xl); } } .dz-site { display: flex; flex-direction: column; min-height: 100vh; } .dz-site-bg { background: var(--dz-surface-card, var(--colour-surface)); } .dz-site-header { position: sticky; top: 0; z-index: 100; background: var(--dz-header-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dz-border-subtle); } .dz-site-nav { max-width: min(72rem, 100%); width: 100%; min-width: 0; box-sizing: border-box; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .dz-site-logo { font-size: var(--text-lg); font-weight: 700; color: var(--dz-logo-color); text-decoration: none; flex-shrink: 0; min-width: 0; } .dz-nav-items { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; min-width: 0; max-width: 100%; } @media (max-width: 767px) { .dz-site-nav { flex-wrap: wrap; gap: 0.75rem 1rem; } .dz-nav-items { flex: 1 1 100%; width: 100%; max-width: 100%; gap: 0.4rem 0.75rem; justify-content: flex-start; } } .dz-nav-link { font-size: var(--text-sm); font-weight: 500; color: var(--dz-text-body); text-decoration: none; transition: color var(--dz-transition-fast, 150ms); } .dz-nav-link:hover { color: var(--dz-text-foreground); } .dz-nav-cta { font-size: var(--text-sm); font-weight: 600; color: white; background: var(--dz-hero-bg-from, oklch(0.50 0.18 270)); padding: 0.5rem 1rem; border-radius: var(--dz-radius-button, 0.375rem); text-decoration: none; transition: background var(--dz-transition-fast, 150ms); } .dz-nav-cta:hover { background: var(--dz-hero-bg-to, oklch(0.45 0.18 270)); } .dz-site-footer { margin-top: auto; background: var(--dz-footer-bg); color: var(--dz-footer-text); padding: 3rem 1.5rem 1.5rem; } .dz-footer-content { max-width: 72rem; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .dz-footer-col h4 { font-size: var(--text-sm); font-weight: 600; color: var(--dz-footer-heading); margin: 0 0 1rem; } .dz-footer-col ul { list-style: none; padding: 0; margin: 0; } .dz-footer-col li { margin-bottom: 0.5rem; } .dz-footer-col a { font-size: var(--text-sm); color: var(--dz-footer-link); text-decoration: none; transition: color var(--dz-transition-fast, 150ms); } .dz-footer-col a:hover { color: var(--dz-footer-heading); } .dz-footer-bottom { max-width: 72rem; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid var(--dz-footer-border); text-align: center; } .dz-footer-bottom p { font-size: var(--text-xs); margin: 0; } .dz-section-hero .dz-button[data-dz-variant="primary"] { background: var(--dz-cta-fill); color: var(--dz-cta-text); border: none; font-weight: 700; font-size: 1.0625rem; padding: 0.875rem 1.75rem; border-radius: var(--dz-radius-button, 0.5rem); box-shadow: var(--dz-cta-shadow); transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms), background var(--dz-transition-fast, 150ms); } .dz-section-hero .dz-button[data-dz-variant="primary"]:hover { background: var(--dz-cta-fill-hover); box-shadow: var(--dz-cta-shadow-hover); transform: translateY(-1px); } .dz-section-hero .dz-button[data-dz-variant="outline"], .dz-section-hero .dz-button[data-dz-variant="secondary"] { background: transparent; color: white; border: 1.5px solid var(--dz-hero-border, oklch(1 0 0 / 0.5)); font-weight: 600; font-size: 1.0625rem; padding: 0.875rem 1.75rem; border-radius: var(--dz-radius-button, 0.5rem); transition: background var(--dz-transition-fast, 150ms), border-color var(--dz-transition-fast, 150ms); } .dz-section-hero .dz-button[data-dz-variant="outline"]:hover, .dz-section-hero .dz-button[data-dz-variant="secondary"]:hover { background: var(--dz-hero-overlay); border-color: var(--dz-hero-border-hover); color: white; } .dz-section { width: 100%; } .dz-section-content { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; } .dz-section-header { text-align: center; max-width: 40rem; margin: 0 auto 3rem; } .dz-section-media { text-align: center; margin: 0 auto 2rem; max-width: 48rem; } .dz-section-media img { max-width: 100%; height: auto; border-radius: 0.5rem; } .dz-section h1 { font-size: var(--dz-font-size-hero-headline, 3.5rem); font-weight: var(--dz-font-weight-hero-headline, 800); line-height: var(--dz-line-height-hero-headline, 1.1); letter-spacing: var(--dz-letter-spacing-hero-headline, -0.02em); margin: 0 0 1.5rem; } .dz-section h2 { font-size: var(--dz-font-size-section-headline, 2.25rem); font-weight: var(--dz-font-weight-section-headline, 700); line-height: var(--dz-line-height-section-headline, 1.2); letter-spacing: var(--dz-letter-spacing-section-headline, -0.01em); margin: 0 0 2rem; text-align: center; } .dz-section h3 { font-size: var(--text-base); font-weight: 600; margin: 0.5rem 0; } .dz-section p { font-size: var(--dz-font-size-body, 1rem); line-height: var(--dz-line-height-body, 1.6); } .dz-section-markdown h1, .dz-section-markdown h2, .dz-section-markdown h3, .dz-section-markdown h4, .dz-section-markdown p, .dz-section .prose h1, .dz-section .prose h2, .dz-section .prose h3, .dz-section .prose h4, .dz-section .prose p { text-align: start; letter-spacing: normal; } .dz-section-markdown h1, .dz-section .prose h1 { font-size: var(--text-2xl); font-weight: 700; line-height: 1.25; margin: 2.5rem 0 1rem; } .dz-section-markdown h2, .dz-section .prose h2 { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; margin: 2rem 0 0.75rem; } .dz-section-markdown h3, .dz-section .prose h3 { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; margin: 1.5rem 0 0.5rem; } .dz-section-markdown h4, .dz-section .prose h4 { font-size: var(--text-base); font-weight: 600; line-height: 1.4; margin: 1.25rem 0 0.5rem; } .dz-section-markdown p, .dz-section .prose p { font-size: var(--dz-font-size-body, 1rem); line-height: 1.7; margin: 0 0 1em; } .dz-404-section { text-align: center; padding: var(--dz-spacing-hero-y, 6rem) 1.5rem; } .dz-404-headline { font-size: var(--dz-font-size-hero-headline, 3.5rem); font-weight: var(--dz-font-weight-hero-headline, 800); line-height: var(--dz-line-height-hero-headline, 1.1); margin-bottom: 1rem; } .dz-404-cta { margin-top: 2rem; } .dz-pricing-description { color: var(--dz-text-muted); margin: 0 0 1.5rem; font-size: var(--dz-font-size-body, 1rem); line-height: var(--dz-line-height-body, 1.6); } .dz-section-markdown { padding: var(--dz-spacing-section-y, 5rem) 1.5rem; } .dz-section-markdown .prose hr { border: none; height: 1px; background: linear-gradient(to right, transparent, var(--dz-border-subtle), transparent); margin: 3rem auto; max-width: 200px; } .dz-subhead { font-size: var(--text-lg); line-height: 1.6; opacity: 0.9; margin: 0 0 2rem; } .dz-cta-group { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .dz-features-grid, .dz-testimonials-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .dz-features-grid > *, .dz-testimonials-grid > * { flex: 0 1 320px; } .dz-features-grid:has(> :nth-child(4):last-child) > *, .dz-testimonials-grid:has(> :nth-child(4):last-child) > * { flex-basis: calc(50% - 0.75rem); max-width: 26rem; } .dz-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; } .dz-feature-item, .dz-testimonial-item { background: var(--dz-surface-card); padding: var(--dz-spacing-card-padding, 1.5rem); border: var(--dz-card-border); border-radius: var(--dz-radius-card, 0.75rem); box-shadow: var(--dz-shadow-card); transition: transform var(--dz-transition-fast, 150ms), box-shadow var(--dz-transition-fast, 150ms), border-color var(--dz-transition-fast, 150ms); } .dz-feature-item:hover { transform: translateY(-2px); box-shadow: var(--dz-card-shadow-hover); border-color: color-mix(in oklab, var(--dz-hero-bg-from) 35%, transparent); } .dz-feature-item h3 { font-size: var(--text-base); font-weight: 600; margin: 0.5rem 0; } .dz-feature-item p { color: var(--dz-text-body); margin: 0; line-height: var(--dz-line-height-body, 1.6); } .dz-feature-icon { width: 3rem; height: 3rem; background: var(--dz-feature-icon-bg, oklch(0.92 0.03 260)); border-radius: 0.625rem; box-shadow: var(--dz-card-icon-ring); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; color: var(--dz-hero-bg-from); } .dz-feature-icon svg { width: 1.5rem; height: 1.5rem; } .dz-faq-list { max-width: 48rem; margin: 0 auto; } .dz-faq-item { border-bottom: 1px solid var(--dz-border-default); padding: 1rem 0; } .dz-faq-item summary { font-weight: 600; cursor: pointer; list-style: none; } .dz-faq-item summary::-webkit-details-marker { display: none; } .dz-faq-item p { margin: 0.75rem 0 0; color: var(--dz-text-body); line-height: var(--dz-line-height-body, 1.6); } .dz-stats-grid { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); text-align: left; } @media (min-width: 64rem) { .dz-stats-grid { flex-direction: row; align-items: stretch; justify-content: space-around; gap: var(--space-lg); } } .dz-stat-item { padding: var(--space-md); } .dz-stat-value { font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--colour-text); display: block; font-variant-numeric: tabular-nums; } .dz-stat-label { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-section-steps-list { display: flex; flex-direction: column; align-items: stretch; gap: 1rem; list-style: none; padding: 0; margin: 0; width: 100%; } @media (min-width: 1024px) { .dz-section-steps-list { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 1.5rem; } } .dz-step-connector { display: none; } .dz-step-item { display: flex; gap: 1rem; align-items: flex-start; min-width: 0; } .dz-step-item.is-not-last { flex: initial; } .dz-step-number { width: 2.5rem; height: 2.5rem; background: var(--dz-hero-bg-from); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--text-base); flex-shrink: 0; } .dz-step-content { min-width: 0; width: 100%; } .dz-step-content h3 { font-size: var(--text-base); font-weight: 600; margin: 0 0 0.25rem; } .dz-step-content p { color: var(--dz-text-body); margin: 0; line-height: var(--dz-line-height-body, 1.6); font-size: var(--text-sm); } @media (min-width: 1024px) { .dz-step-item, .dz-step-item.is-not-last { flex: 1 1 0; min-width: 0; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; position: relative; } .dz-step-item.is-not-last .dz-step-connector { display: block; position: absolute; top: 1.5rem; left: calc(50% + 1.75rem); width: calc(50% + 0.75rem); height: 1px; margin: 0; flex: none; background: var(--dz-border-default, var(--colour-border)); pointer-events: none; } .dz-step-number { width: 3rem; height: 3rem; font-size: var(--text-lg); } .dz-step-content { text-align: center; } .dz-step-content h3 { font-size: var(--text-lg); margin: 0 0 0.5rem; } .dz-step-content p { font-size: var(--text-sm); } } .dz-logos-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 3rem; align-items: center; } .dz-logo-item img { height: 2rem; opacity: 0.6; filter: grayscale(100%); transition: all var(--duration-fast, 150ms); } .dz-logo-item:hover img { opacity: 1; filter: grayscale(0%); } .dz-pricing-tier { background: var(--dz-surface-card); padding: 2rem; border-radius: var(--dz-radius-card, 0.75rem); box-shadow: var(--dz-shadow-card, 0 1px 3px oklch(0 0 0 / 0.1)); display: flex; flex-direction: column; transition: transform var(--dz-transition-fast, 150ms); } .dz-pricing-tier:hover:not(.dz-pricing-highlighted) { transform: translateY(-4px); } .dz-pricing-tier h3 { font-size: var(--text-lg); font-weight: 600; margin: 0 0 0.5rem; } .dz-pricing-price { margin: 0 0 1.5rem; } .dz-price { font-size: var(--text-3xl); font-weight: 700; } .dz-period { font-size: var(--text-sm); color: var(--dz-text-muted); } .dz-pricing-features { list-style: none; padding: 0; margin: 0 0 1.5rem; flex: 1; } .dz-pricing-features li { padding: 0.5rem 0; border-bottom: 1px solid var(--dz-border-subtle); } .dz-pricing-highlighted { background: var(--dz-pricing-highlight-bg, var(--dz-hero-bg-from)); color: white; transform: scale(1.05); box-shadow: var(--dz-shadow-lg); } .dz-pricing-highlighted .dz-period, .dz-pricing-highlighted li { color: var(--dz-hero-text-dimmed); border-color: var(--dz-hero-border-dim); } .dz-testimonial-item:hover { transform: translateY(-4px); box-shadow: var(--dz-shadow-lg, 0 10px 15px -3px oklch(0 0 0 / 0.1)); } .dz-testimonial-item blockquote { font-style: italic; color: var(--dz-text-emphasis); margin: 0 0 1rem; line-height: var(--dz-line-height-body, 1.6); } .dz-testimonial-author { display: flex; align-items: center; gap: 0.75rem; } .dz-testimonial-author strong { display: block; font-size: var(--text-sm); } .dz-testimonial-author span { display: block; font-size: var(--text-xs); color: var(--dz-text-muted); } .dz-prose { max-width: 48rem; margin: 0 auto; padding: 3rem 1.5rem; } .dz-prose h1, .dz-prose h2, .dz-prose h3 { text-align: left; } .dz-page-legal .dz-section-markdown .prose { max-width: 45rem; margin: 0 auto; padding: 2rem 1.5rem; } .dz-page-legal .dz-section-markdown .prose h1, .dz-page-legal .dz-section-markdown .prose h2, .dz-page-legal .dz-section-markdown .prose h3 { text-align: left; } .dz-page-legal .dz-section-markdown .prose p { line-height: 1.7; } .dz-page-legal .dz-section-markdown .prose h2 { margin-top: 2em; margin-bottom: 0.75em; font-size: var(--text-lg); font-weight: 600; } .dz-page-legal .dz-section-markdown .prose h3 { margin-top: 1.5em; margin-bottom: 0.5em; font-size: var(--text-base); font-weight: 600; } .dz-task-surface-container { max-width: 75rem; margin: 0 auto; padding: var(--dz-spacing-card-padding, 1.5rem); } .dz-loading { text-align: center; padding: 4rem; color: var(--dz-text-muted); } .dz-error { text-align: center; padding: 2rem; color: var(--dz-error-text); } .dz-consent-banner { position: fixed; inset: auto 0 0 0; z-index: 1000; padding: 1.25rem 1rem; background: var(--dz-bg-card, var(--colour-surface)); border-top: 1px solid var(--dz-border, var(--colour-border)); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08); } .dz-consent-panel { max-width: 64rem; margin: 0 auto; color: var(--dz-text-primary, var(--colour-text)); font-size: var(--text-sm); line-height: 1.5; } .dz-consent-title { margin: 0 0 0.5rem 0; font-size: var(--text-base); font-weight: 600; } .dz-consent-description { margin: 0 0 1rem 0; color: var(--dz-text-muted, var(--colour-text-muted)); font-size: var(--text-sm); } .dz-consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 1rem; } .dz-consent-btn { appearance: none; border: 1px solid transparent; background: transparent; color: inherit; padding: 0.5rem 1rem; font: inherit; font-size: var(--text-sm); font-weight: 500; cursor: pointer; border-radius: 0.375rem; transition: background-color 0.15s ease, border-color 0.15s ease; } .dz-consent-btn:focus-visible { outline: 2px solid var(--dz-focus-ring, var(--colour-brand)); outline-offset: 2px; } .dz-consent-btn-primary { background: var(--dz-primary, var(--colour-brand)); color: var(--dz-primary-foreground, var(--colour-brand-contrast)); } .dz-consent-btn-primary:hover { filter: brightness(1.05); } .dz-consent-btn-secondary { border-color: var(--dz-border, var(--colour-border)); background: var(--dz-bg-card, var(--colour-surface)); } .dz-consent-btn-secondary:hover { background: var(--dz-bg-hover, var(--colour-surface-muted)); } .dz-consent-btn-link { text-decoration: underline; text-underline-offset: 2px; padding: 0.5rem 0; color: var(--dz-text-link, var(--colour-brand)); } .dz-consent-btn-link:hover { text-decoration-thickness: 2px; } .dz-consent-customize { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--dz-border, var(--colour-border)); } .dz-consent-category { border: 0; padding: 0.5rem 0; margin: 0; } .dz-consent-category + .dz-consent-category { border-top: 1px solid var(--dz-border, var(--colour-border)); } .dz-consent-category label { display: inline-flex; gap: 0.5rem; align-items: center; font-weight: 500; cursor: pointer; } .dz-consent-category input[type="checkbox"]:disabled + .dz-consent-category-label { color: var(--dz-text-muted, var(--colour-text-muted)); cursor: not-allowed; } .dz-consent-category-hint { margin: 0.25rem 0 0 1.5rem; color: var(--dz-text-muted, var(--colour-text-muted)); font-size: var(--text-xs); } .dz-consent-links { margin: 0.75rem 0 0 0; font-size: var(--text-xs); } .dz-consent-links a { color: var(--dz-text-link, var(--colour-brand)); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 640px) { .dz-consent-banner { padding: 1rem 0.75rem; } .dz-consent-actions { flex-direction: column; align-items: stretch; } .dz-consent-btn { width: 100%; } .dz-consent-btn-link { width: auto; align-self: center; } } .dz-stat { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding: var(--space-md) var(--space-lg); flex: 1 1 auto; min-width: 0; } .dz-stat-title { font-size: var(--text-sm); color: var(--colour-text-muted); } .dz-toast { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--colour-surface); color: var(--colour-text); border: 1px solid var(--colour-border); border-left-width: 4px; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); font-size: var(--text-sm); line-height: var(--leading-tight); max-width: min(28rem, calc(100vw - var(--space-xl) * 2)); } .dz-toast[data-dz-toast-level="info"] { border-left-color: var(--colour-brand); background: color-mix(in oklch, var(--colour-brand) 6%, var(--colour-surface)); } .dz-toast[data-dz-toast-level="success"] { border-left-color: var(--colour-success); background: color-mix(in oklch, var(--colour-success) 6%, var(--colour-surface)); } .dz-toast[data-dz-toast-level="warning"] { border-left-color: var(--colour-warning); background: color-mix(in oklch, var(--colour-warning) 6%, var(--colour-surface)); } .dz-toast[data-dz-toast-level="error"] { border-left-color: var(--colour-danger); background: color-mix(in oklch, var(--colour-danger) 6%, var(--colour-surface)); } } @layer components { @layer framework { .dz-feedback-btn { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 3rem; height: 3rem; border-radius: 9999px; background: var(--colour-brand); color: var(--colour-brand-contrast); border: none; cursor: pointer; z-index: 9998; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgb(0 0 0 / 0.15); transition: transform 0.15s ease, box-shadow 0.15s ease; } .dz-feedback-btn:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgb(0 0 0 / 0.2); } .dz-feedback-btn svg { width: 1.25rem; height: 1.25rem; } .dz-feedback-panel { position: fixed; top: 0; right: 0; width: 24rem; max-width: 100vw; height: 100dvh; background: var(--colour-surface); border-left: 1px solid var(--colour-border); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); z-index: 9999; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; overflow-y: auto; } .dz-feedback-panel.open { transform: translateX(0); } .dz-feedback-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--colour-border); } .dz-feedback-header h3 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--colour-text); } .dz-feedback-close { background: none; border: none; cursor: pointer; color: var(--colour-text); font-size: 1.25rem; padding: 0.25rem; } .dz-feedback-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; gap: 1rem; } .dz-feedback-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .dz-feedback-cat-btn { padding: 0.5rem 0.75rem; border: 1px solid var(--colour-border); border-radius: 0.375rem; background: var(--colour-surface-muted); color: var(--colour-text); cursor: pointer; font-size: 0.8125rem; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; } .dz-feedback-cat-btn:hover { border-color: var(--colour-brand); } .dz-feedback-cat-btn.selected { background: var(--colour-brand); color: var(--colour-brand-contrast); border-color: var(--colour-brand); } .dz-feedback-severities { display: flex; gap: 0.5rem; } .dz-feedback-sev-btn { flex: 1; padding: 0.375rem 0.5rem; border: 1px solid var(--colour-border); border-radius: 0.375rem; background: var(--colour-surface-muted); color: var(--colour-text); cursor: pointer; font-size: 0.75rem; text-align: center; transition: border-color 0.15s ease, background 0.15s ease; } .dz-feedback-sev-btn.selected[data-severity="blocker"] { background: var(--danger-600); color: white; border-color: var(--danger-600); } .dz-feedback-sev-btn.selected[data-severity="annoying"] { background: var(--warning-600); color: white; border-color: var(--warning-600); } .dz-feedback-sev-btn.selected[data-severity="minor"] { background: var(--success-600); color: white; border-color: var(--success-600); } .dz-feedback-description { width: 100%; min-height: 6rem; padding: 0.75rem; border: 1px solid var(--colour-border); border-radius: 0.375rem; background: var(--colour-surface); color: var(--colour-text); font-family: inherit; font-size: 0.875rem; resize: vertical; } .dz-feedback-description:focus { outline: 2px solid var(--colour-brand); outline-offset: -1px; } .dz-feedback-submit { width: 100%; padding: 0.625rem 1rem; border: none; border-radius: 0.375rem; background: var(--colour-brand); color: var(--colour-brand-contrast); font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: opacity 0.15s ease; } .dz-feedback-submit:hover { opacity: 0.9; } .dz-feedback-submit:disabled { opacity: 0.5; cursor: not-allowed; } .dz-feedback-label { font-size: 0.8125rem; font-weight: 500; color: var(--colour-text); } .dz-feedback-toast { position: fixed; bottom: 5rem; right: 1.5rem; padding: 0.75rem 1.25rem; border-radius: 0.375rem; background: var(--success-600); color: white; font-size: 0.875rem; z-index: 10000; opacity: 0; transform: translateY(0.5rem); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .dz-feedback-toast.visible { opacity: 1; transform: translateY(0); } .dz-feedback-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.3); z-index: 9998; opacity: 0; transition: opacity 0.25s ease; pointer-events: none; } .dz-feedback-backdrop.visible { opacity: 1; pointer-events: auto; } } }