@charset "UTF-8"; /* =================================== Theme Entry Point Architecture: 1. Base styles — engine-default tokens + component scaffolding. 2. Generated tokens (`themes//tokens.scss`) — produced by `tools/build-theme.ts` from each theme's `theme.json`. Emit under `.theme-scope[data-theme=""]` so multiple themes can coexist for runtime switching. 3. Hand-written overrides (`themes//overrides.scss`) — visual tweaks on engine components. Currently emit under `.theme-scope` (active-theme global); will migrate to data-theme-scoped later. =================================== */ /* Base styles (always included) */ /* =================================== Default Theme - All Components This partial imports all component styles Use this for themes to inherit all default styles =================================== */ /* Import variables FIRST so CSS custom properties are defined before use */ /* Import tokens from the tokens folder */ /* =================================== Design Tokens Index Imports all token files to define CSS custom properties =================================== */ /* =================================== Design Token Mixins Reusable selector fan-outs for tokens that respond to multiple activation conventions. Apps pick whatever idiom feels natural; the engine maps them all to the same token redefinitions. =================================== */ /** * Dark mode trigger fan-out. * * Emits @content under EVERY supported dark-mode selector so that any of * the following activations switch to the dark token values: * * ← legacy `.dark` class * ← modern variant attribute * ← "dark" as a named theme * ← scoped legacy * ← scoped variant * ← scoped named theme *
← ancestor legacy *
← ancestor variant *
← ancestor named theme * * Consumers don't have to pick a convention — the engine accepts all of * them. Brand themes (themes/groq/etc.) compose with this on * `[data-variant="dark"]` per the build-theme.ts contract; their own * dark-mode selector fan-out is handled by `tools/build-theme.ts`. */ /* =================================== Design Tokens Index Imports all token files to define CSS custom properties =================================== */ /* =================================== Color Token Definitions — shared by `:root` (engine defaults) and `.theme-scope` (themed scopes). Defining the same token set twice — at `:root` and `.theme-scope` — used to be a drift hazard (silent partial-coverage of `:root` meant consumers outside `.theme-scope` silently fell back to inlined hex defaults). Centralizing them in a mixin makes the two callsites stay in lockstep automatically. Light values live here; dark values live in `_colors.scss`'s `@include dark-mode { ... }` block, which already fans out to `:root.dark`/`.dark`/`[data-variant=dark]` selectors (see `_mixins.scss`'s `dark-mode` mixin). See `.brief/engine-root-token-coverage.md` for the architectural rationale (option A). =================================== */ /* =================================== Engine root defaults — for consumers outside `.theme-scope`. `:root` and `.theme-scope` both receive the full token set via the shared `color-tokens-light` mixin so they stay in lockstep. Consumers can choose to wrap in `.theme-scope` (to opt into a theme override or data-variant switching) or stay at `:root` (engine baseline only). See `.brief/engine-root-token-coverage.md` for the architectural decision (option A: mirror :root from .theme-scope via mixin). =================================== */ :root { /* =================================== Text Colors =================================== */ --color-text-primary: #0f172a; --color-text-secondary: oklch(21% 0.034 264.665); --color-text-tertiary: #9ca3af; /* Lighter than -muted, for de-emphasized list markers, etc. */ /* slate-500. Was #94a3b8 (slate-400) but that has ~3:1 contrast on white — fails WCAG AA (needs 4.5:1 for normal text). slate-500 has ~4.6:1 and reads as "a tad darker" without crossing into primary/secondary darkness. */ --color-text-muted: #64748b; --color-text-neutral: #475569; --color-text-neutral-dark: #334155; --color-text-disabled: #9ca3af; /* Readable disabled text color */ /* Inverted text — used inside .prose-invert and dark-bg surfaces */ --color-text-invert: #e5e7eb; --color-text-secondary-invert: #9ca3af; --color-text-tertiary-invert: #6b7280; /* =================================== Background Colors =================================== */ --color-bg-page: var(--color-bg-light); --color-bg-card: var(--color-bg-primary); --color-bg-primary: #ffffff; --color-bg-secondary: #f8fafc; --color-bg-muted: #f1f5f9; --color-bg-inverted-content: #374151; /* Dark content panels on inverted surfaces */ --color-bg-tertiary: var(--color-bg-inverted-content); /* Back-compat alias */ --color-bg-hover: rgba(0, 0, 0, 0.025); /* Subtle hover wash — works on light surfaces */ --color-bg-light: #F3F4F6; --color-bg-disabled: #f1f5f9; /* Disabled background color */ /* =================================== Border Colors =================================== */ --color-border: #e2e8f0; --color-border-light: #cbd5e1; --color-border-tab: #e4e4e7; /* Inverted borders — paired with --color-text-invert */ --color-border-invert: #374151; --color-border-strong-invert: #4b5563; /* Inverted code — paired with .prose-invert */ --color-code-text-invert: #f9fafb; --color-code-bg-invert: #374151; /* =================================== Primary Colors =================================== */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-active: #1d4ed8; --color-primary-dark: #1e40af; --color-primary-light: #eff6ff; --color-primary-lighter: #dbeafe; --color-primary-lightest: #bfdbfe; --color-primary-ring: rgba(59, 130, 246, 0.3); --color-primary-text: #ffffff; /* =================================== Success Colors =================================== */ --color-success: #10b981; /* Brighter, less dark green (emerald-500) */ --color-success-light: #d1fae5; --color-success-dark: #047857; --color-success-link: #059669; --color-success-link-hover: #047857; --color-success-ring: rgba(34, 197, 94, 0.3); --color-success-text: #ffffff; --color-success-200: #bbf7d0; --color-success-300: #86efac; /* Full ramp (emerald family, matches Tailwind emerald-N). 500 matches --color-success; 700 matches --color-success-dark. */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-400: #34d399; --color-success-500: #10b981; --color-success-600: #059669; --color-success-700: #047857; --color-success-800: #065f46; --color-success-900: #064e3b; --color-success-950: #022c22; /* =================================== Warning Colors =================================== */ --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-dark: #92400e; --color-warning-link: #d97706; --color-warning-link-hover: #b45309; --color-warning-ring: rgba(245, 158, 11, 0.3); --color-warning-text: #ffffff; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; /* Full ramp (amber family, matches Tailwind amber-N). */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; --color-warning-950: #451a03; /* =================================== Danger Colors =================================== */ --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-danger-dark: #b91c1c; --color-danger-link: #dc2626; --color-danger-link-hover: #b91c1c; --color-danger-ring: rgba(239, 68, 68, 0.3); --color-danger-text: #ffffff; --color-danger-200: #fecaca; --color-danger-300: #fca5a5; /* Full ramp (red family, matches Tailwind red-N). */ --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-400: #f87171; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-danger-800: #991b1b; --color-danger-900: #7f1d1d; --color-danger-950: #450a0a; /* =================================== Info Colors =================================== */ --color-info: #0ea5e9; --color-info-light: #e0f2fe; --color-info-dark: #075985; --color-info-link: #0284c7; --color-info-link-hover: #0369a1; --color-info-ring: rgba(14, 165, 233, 0.3); --color-info-text: #ffffff; --color-info-200: #bae6fd; --color-info-300: #7dd3fc; /* Full ramp (sky family, matches Tailwind sky-N). */ --color-info-50: #f0f9ff; --color-info-100: #e0f2fe; --color-info-400: #38bdf8; --color-info-500: #0ea5e9; --color-info-600: #0284c7; --color-info-700: #0369a1; --color-info-800: #075985; --color-info-900: #0c4a6e; --color-info-950: #082f49; /* =================================== Neutral Colors =================================== */ --color-neutral: #71717a; --color-neutral-light: #f4f4f5; --color-neutral-dark: #3f3f46; --color-neutral-link: #52525b; --color-neutral-link-hover: #3f3f46; --color-neutral-ring: rgba(113, 113, 122, 0.3); --color-neutral-text: #ffffff; /* Neutral Ramp 50..950 (zinc-based) */ --color-neutral-50: #fafafa; --color-neutral-100: #f4f4f5; --color-neutral-200: #e4e4e7; --color-neutral-300: #d4d4d8; --color-neutral-400: #a1a1aa; --color-neutral-500: #71717a; --color-neutral-600: #52525b; --color-neutral-700: #3f3f46; --color-neutral-800: #27272a; --color-neutral-900: #18181b; --color-neutral-950: #09090b; /* =================================== Code Colors — light mode (light gray bg + strong text contrast) =================================== */ --color-code-bg: #f8fafc; --color-code-text: #be185d; --color-code-bg-dark: #f1f5f9; --color-code-text-dark: #334155; --color-code-header-bg: #e2e8f0; --color-code-border: #e2e8f0; /* =================================== Syntax Highlighting — light mode (strong contrast on light bg) =================================== */ --color-syntax-keyword: #7c3aed; --color-syntax-string: #059669; --color-syntax-number: #0284c7; --color-syntax-function: #2563eb; --color-syntax-comment: #64748b; --color-syntax-property: #c2410c; --color-syntax-punctuation: #475569; --color-syntax-operator: #475569; /* =================================== Tab Colors =================================== */ --color-tab: #71717a; --color-tab-active: #3b82f6; /* =================================== Utility Colors =================================== */ --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-white: #ffffff; /* Gray Ring (for ghost buttons, etc.) */ --color-gray-ring: rgba(161, 161, 170, 0.2); --color-gray-ring-dark: rgba(15, 23, 42, 0.1); /* Dark/Inverted Section Colors */ --color-bg-dark: #0f172a; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255, 255, 255, 0.85); /* Accent Color (for CTAs, highlights) */ --color-accent: #f59e0b; --color-accent-hover: #d97706; /* CTA Color */ --color-cta: #3b82f6; --color-cta-hover: #2563eb; /* =================================== Form Controls (Checkbox, Radio, Toggle) =================================== */ /* Unchecked state */ --color-control-border: var(--color-border-light); --color-control-border-hover: var(--color-border); --color-control-bg: var(--color-bg-primary); --color-control-bg-hover: var(--color-bg-secondary); /* Checked state */ --color-control-checked: var(--color-primary); --color-control-checked-hover: var(--color-primary-hover); --color-control-checked-border: var(--color-primary); --color-control-checkmark: #ffffff; /* Focus state */ --color-control-ring: var(--color-primary-ring); /* Toggle-specific */ --color-toggle-bg: var(--color-border); --color-toggle-bg-checked: var(--color-primary); --color-toggle-knob: #ffffff; /* =================================== Choice Card Colors =================================== */ --color-choice-border: var(--color-border-light); --color-choice-border-hover: var(--color-border); --color-choice-border-checked: var(--color-primary); --color-choice-bg: transparent; --color-choice-bg-hover: var(--color-bg-secondary); --color-choice-bg-checked: rgba(59, 130, 246, 0.05); --color-choice-ring: var(--color-primary); } .theme-scope { /* =================================== Text Colors =================================== */ --color-text-primary: #0f172a; --color-text-secondary: oklch(21% 0.034 264.665); --color-text-tertiary: #9ca3af; /* Lighter than -muted, for de-emphasized list markers, etc. */ /* slate-500. Was #94a3b8 (slate-400) but that has ~3:1 contrast on white — fails WCAG AA (needs 4.5:1 for normal text). slate-500 has ~4.6:1 and reads as "a tad darker" without crossing into primary/secondary darkness. */ --color-text-muted: #64748b; --color-text-neutral: #475569; --color-text-neutral-dark: #334155; --color-text-disabled: #9ca3af; /* Readable disabled text color */ /* Inverted text — used inside .prose-invert and dark-bg surfaces */ --color-text-invert: #e5e7eb; --color-text-secondary-invert: #9ca3af; --color-text-tertiary-invert: #6b7280; /* =================================== Background Colors =================================== */ --color-bg-page: var(--color-bg-light); --color-bg-card: var(--color-bg-primary); --color-bg-primary: #ffffff; --color-bg-secondary: #f8fafc; --color-bg-muted: #f1f5f9; --color-bg-inverted-content: #374151; /* Dark content panels on inverted surfaces */ --color-bg-tertiary: var(--color-bg-inverted-content); /* Back-compat alias */ --color-bg-hover: rgba(0, 0, 0, 0.025); /* Subtle hover wash — works on light surfaces */ --color-bg-light: #F3F4F6; --color-bg-disabled: #f1f5f9; /* Disabled background color */ /* =================================== Border Colors =================================== */ --color-border: #e2e8f0; --color-border-light: #cbd5e1; --color-border-tab: #e4e4e7; /* Inverted borders — paired with --color-text-invert */ --color-border-invert: #374151; --color-border-strong-invert: #4b5563; /* Inverted code — paired with .prose-invert */ --color-code-text-invert: #f9fafb; --color-code-bg-invert: #374151; /* =================================== Primary Colors =================================== */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-active: #1d4ed8; --color-primary-dark: #1e40af; --color-primary-light: #eff6ff; --color-primary-lighter: #dbeafe; --color-primary-lightest: #bfdbfe; --color-primary-ring: rgba(59, 130, 246, 0.3); --color-primary-text: #ffffff; /* =================================== Success Colors =================================== */ --color-success: #10b981; /* Brighter, less dark green (emerald-500) */ --color-success-light: #d1fae5; --color-success-dark: #047857; --color-success-link: #059669; --color-success-link-hover: #047857; --color-success-ring: rgba(34, 197, 94, 0.3); --color-success-text: #ffffff; --color-success-200: #bbf7d0; --color-success-300: #86efac; /* Full ramp (emerald family, matches Tailwind emerald-N). 500 matches --color-success; 700 matches --color-success-dark. */ --color-success-50: #ecfdf5; --color-success-100: #d1fae5; --color-success-400: #34d399; --color-success-500: #10b981; --color-success-600: #059669; --color-success-700: #047857; --color-success-800: #065f46; --color-success-900: #064e3b; --color-success-950: #022c22; /* =================================== Warning Colors =================================== */ --color-warning: #f59e0b; --color-warning-light: #fef3c7; --color-warning-dark: #92400e; --color-warning-link: #d97706; --color-warning-link-hover: #b45309; --color-warning-ring: rgba(245, 158, 11, 0.3); --color-warning-text: #ffffff; --color-warning-200: #fde68a; --color-warning-300: #fcd34d; /* Full ramp (amber family, matches Tailwind amber-N). */ --color-warning-50: #fffbeb; --color-warning-100: #fef3c7; --color-warning-400: #fbbf24; --color-warning-500: #f59e0b; --color-warning-600: #d97706; --color-warning-700: #b45309; --color-warning-800: #92400e; --color-warning-900: #78350f; --color-warning-950: #451a03; /* =================================== Danger Colors =================================== */ --color-danger: #ef4444; --color-danger-light: #fee2e2; --color-danger-dark: #b91c1c; --color-danger-link: #dc2626; --color-danger-link-hover: #b91c1c; --color-danger-ring: rgba(239, 68, 68, 0.3); --color-danger-text: #ffffff; --color-danger-200: #fecaca; --color-danger-300: #fca5a5; /* Full ramp (red family, matches Tailwind red-N). */ --color-danger-50: #fef2f2; --color-danger-100: #fee2e2; --color-danger-400: #f87171; --color-danger-500: #ef4444; --color-danger-600: #dc2626; --color-danger-700: #b91c1c; --color-danger-800: #991b1b; --color-danger-900: #7f1d1d; --color-danger-950: #450a0a; /* =================================== Info Colors =================================== */ --color-info: #0ea5e9; --color-info-light: #e0f2fe; --color-info-dark: #075985; --color-info-link: #0284c7; --color-info-link-hover: #0369a1; --color-info-ring: rgba(14, 165, 233, 0.3); --color-info-text: #ffffff; --color-info-200: #bae6fd; --color-info-300: #7dd3fc; /* Full ramp (sky family, matches Tailwind sky-N). */ --color-info-50: #f0f9ff; --color-info-100: #e0f2fe; --color-info-400: #38bdf8; --color-info-500: #0ea5e9; --color-info-600: #0284c7; --color-info-700: #0369a1; --color-info-800: #075985; --color-info-900: #0c4a6e; --color-info-950: #082f49; /* =================================== Neutral Colors =================================== */ --color-neutral: #71717a; --color-neutral-light: #f4f4f5; --color-neutral-dark: #3f3f46; --color-neutral-link: #52525b; --color-neutral-link-hover: #3f3f46; --color-neutral-ring: rgba(113, 113, 122, 0.3); --color-neutral-text: #ffffff; /* Neutral Ramp 50..950 (zinc-based) */ --color-neutral-50: #fafafa; --color-neutral-100: #f4f4f5; --color-neutral-200: #e4e4e7; --color-neutral-300: #d4d4d8; --color-neutral-400: #a1a1aa; --color-neutral-500: #71717a; --color-neutral-600: #52525b; --color-neutral-700: #3f3f46; --color-neutral-800: #27272a; --color-neutral-900: #18181b; --color-neutral-950: #09090b; /* =================================== Code Colors — light mode (light gray bg + strong text contrast) =================================== */ --color-code-bg: #f8fafc; --color-code-text: #be185d; --color-code-bg-dark: #f1f5f9; --color-code-text-dark: #334155; --color-code-header-bg: #e2e8f0; --color-code-border: #e2e8f0; /* =================================== Syntax Highlighting — light mode (strong contrast on light bg) =================================== */ --color-syntax-keyword: #7c3aed; --color-syntax-string: #059669; --color-syntax-number: #0284c7; --color-syntax-function: #2563eb; --color-syntax-comment: #64748b; --color-syntax-property: #c2410c; --color-syntax-punctuation: #475569; --color-syntax-operator: #475569; /* =================================== Tab Colors =================================== */ --color-tab: #71717a; --color-tab-active: #3b82f6; /* =================================== Utility Colors =================================== */ --color-gray-300: #d1d5db; --color-gray-400: #9ca3af; --color-white: #ffffff; /* Gray Ring (for ghost buttons, etc.) */ --color-gray-ring: rgba(161, 161, 170, 0.2); --color-gray-ring-dark: rgba(15, 23, 42, 0.1); /* Dark/Inverted Section Colors */ --color-bg-dark: #0f172a; --color-text-on-dark: #ffffff; --color-text-on-dark-muted: rgba(255, 255, 255, 0.85); /* Accent Color (for CTAs, highlights) */ --color-accent: #f59e0b; --color-accent-hover: #d97706; /* CTA Color */ --color-cta: #3b82f6; --color-cta-hover: #2563eb; /* =================================== Form Controls (Checkbox, Radio, Toggle) =================================== */ /* Unchecked state */ --color-control-border: var(--color-border-light); --color-control-border-hover: var(--color-border); --color-control-bg: var(--color-bg-primary); --color-control-bg-hover: var(--color-bg-secondary); /* Checked state */ --color-control-checked: var(--color-primary); --color-control-checked-hover: var(--color-primary-hover); --color-control-checked-border: var(--color-primary); --color-control-checkmark: #ffffff; /* Focus state */ --color-control-ring: var(--color-primary-ring); /* Toggle-specific */ --color-toggle-bg: var(--color-border); --color-toggle-bg-checked: var(--color-primary); --color-toggle-knob: #ffffff; /* =================================== Choice Card Colors =================================== */ --color-choice-border: var(--color-border-light); --color-choice-border-hover: var(--color-border); --color-choice-border-checked: var(--color-primary); --color-choice-bg: transparent; --color-choice-bg-hover: var(--color-bg-secondary); --color-choice-bg-checked: rgba(59, 130, 246, 0.05); --color-choice-ring: var(--color-primary); } /* =================================== Dark Mode Colors Fan-out via @mixin dark-mode supports `.dark`, `[data-variant="dark"]`, and `[data-theme="dark"]` activations at scope/ancestor/:root levels. See tokens/_mixins.scss for the selector fan-out. =================================== */ /* Scoped — `.theme-scope` is on the activating element */ .theme-scope.dark, .theme-scope[data-variant=dark], .theme-scope[data-theme=dark], .dark .theme-scope, [data-variant=dark] .theme-scope, [data-theme=dark] .theme-scope, :root.dark, :root[data-variant=dark], :root[data-theme=dark] { /* =================================== Text Colors - inverted for dark backgrounds =================================== */ --color-text-primary: #f8fafc; --color-text-secondary: #e2e8f0; --color-text-muted: #94a3b8; --color-text-neutral: #cbd5e1; --color-text-neutral-dark: #e2e8f0; --color-text-disabled: #64748b; /* =================================== Background Colors - dark variants =================================== */ --color-bg-page: var(--color-bg-primary); --color-bg-card: var(--color-bg-secondary); --color-bg-primary: #0f172a; --color-bg-secondary: #1e293b; --color-bg-muted: #334155; --color-bg-light: #1e293b; --color-bg-disabled: #1e293b; /* Hover wash needs a light overlay on dark surfaces; the light-mode rgba(0,0,0,0.025) would be invisible on a near-black background. */ --color-bg-hover: rgba(255, 255, 255, 0.05); /* =================================== Border Colors - subtle on dark =================================== */ --color-border: #334155; --color-border-light: #475569; --color-border-tab: #475569; /* =================================== Primary Colors - slightly brighter for dark mode visibility =================================== */ --color-primary: #60a5fa; --color-primary-hover: #3b82f6; --color-primary-active: #2563eb; --color-primary-dark: #93c5fd; --color-primary-light: rgba(59, 130, 246, 0.15); --color-primary-lighter: rgba(59, 130, 246, 0.1); --color-primary-lightest: rgba(59, 130, 246, 0.05); --color-primary-ring: rgba(96, 165, 250, 0.4); --color-primary-text: #0f172a; /* =================================== Success Colors - brighter for dark mode =================================== */ --color-success: #34d399; --color-success-light: rgba(16, 185, 129, 0.15); --color-success-dark: #6ee7b7; --color-success-link: #34d399; --color-success-link-hover: #6ee7b7; --color-success-ring: rgba(52, 211, 153, 0.4); --color-success-text: #0f172a; --color-success-200: rgba(16, 185, 129, 0.2); --color-success-300: rgba(16, 185, 129, 0.3); /* =================================== Warning Colors =================================== */ --color-warning: #fbbf24; --color-warning-light: rgba(245, 158, 11, 0.15); --color-warning-dark: #fcd34d; --color-warning-link: #fbbf24; --color-warning-link-hover: #fcd34d; --color-warning-ring: rgba(251, 191, 36, 0.4); --color-warning-text: #0f172a; --color-warning-200: rgba(245, 158, 11, 0.2); --color-warning-300: rgba(245, 158, 11, 0.3); /* =================================== Danger Colors =================================== */ --color-danger: #f87171; --color-danger-light: rgba(239, 68, 68, 0.15); --color-danger-dark: #fca5a5; --color-danger-link: #f87171; --color-danger-link-hover: #fca5a5; --color-danger-ring: rgba(248, 113, 113, 0.4); --color-danger-text: #0f172a; --color-danger-200: rgba(239, 68, 68, 0.2); --color-danger-300: rgba(239, 68, 68, 0.3); /* =================================== Info Colors =================================== */ --color-info: #38bdf8; --color-info-light: rgba(14, 165, 233, 0.15); --color-info-dark: #7dd3fc; --color-info-link: #38bdf8; --color-info-link-hover: #7dd3fc; --color-info-ring: rgba(56, 189, 248, 0.4); --color-info-text: #0f172a; --color-info-200: rgba(14, 165, 233, 0.2); --color-info-300: rgba(14, 165, 233, 0.3); /* =================================== Neutral Colors =================================== */ --color-neutral: #a1a1aa; --color-neutral-light: rgba(113, 113, 122, 0.15); --color-neutral-dark: #d4d4d8; --color-neutral-link: #a1a1aa; --color-neutral-link-hover: #d4d4d8; --color-neutral-ring: rgba(161, 161, 170, 0.4); --color-neutral-text: #0f172a; /* Neutral Ramp 50..950 — inverted for dark mode (zinc-950 → zinc-50) */ --color-neutral-50: #09090b; --color-neutral-100: #18181b; --color-neutral-200: #27272a; --color-neutral-300: #3f3f46; --color-neutral-400: #52525b; --color-neutral-500: #71717a; --color-neutral-600: #a1a1aa; --color-neutral-700: #d4d4d8; --color-neutral-800: #e4e4e7; --color-neutral-900: #f4f4f5; --color-neutral-950: #fafafa; /* =================================== Code Colors - Dark mode (actual dark background) =================================== */ --color-code-bg: #1e293b; --color-code-text: #fb7185; --color-code-bg-dark: #1e293b; --color-code-text-dark: #e2e8f0; --color-code-header-bg: #334155; --color-code-border: #475569; /* =================================== Syntax highlighting - dark mode (Prism Tomorrow-style) =================================== */ --color-syntax-keyword: #cc99cd; --color-syntax-string: #7ec699; --color-syntax-number: #f08d49; --color-syntax-function: #f8c555; --color-syntax-comment: #999999; --color-syntax-property: #e90; --color-syntax-punctuation: #cccccc; --color-syntax-operator: #67cdcc; /* =================================== Tab Colors =================================== */ --color-tab: #94a3b8; --color-tab-active: #60a5fa; /* =================================== Utility Colors =================================== */ --color-gray-300: #475569; --color-gray-400: #64748b; --color-white: #0f172a; /* Gray Ring (for ghost buttons, etc.) */ --color-gray-ring: rgba(148, 163, 184, 0.25); --color-gray-ring-dark: rgba(248, 250, 252, 0.1); /* Dark/Inverted Section Colors (swap for dark mode) */ --color-bg-dark: #f8fafc; --color-text-on-dark: #0f172a; --color-text-on-dark-muted: rgba(15, 23, 42, 0.85); /* Accent Color (for CTAs, highlights) */ --color-accent: #fbbf24; --color-accent-hover: #f59e0b; /* CTA Color */ --color-cta: #60a5fa; --color-cta-hover: #3b82f6; /* =================================== Form Controls - Dark Mode =================================== */ /* Unchecked state */ --color-control-border: var(--color-border); --color-control-border-hover: var(--color-border-light); --color-control-bg: var(--color-bg-secondary); --color-control-bg-hover: var(--color-bg-muted); /* Checked state */ --color-control-checked: var(--color-primary); --color-control-checked-hover: var(--color-primary-hover); --color-control-checked-border: var(--color-primary); --color-control-checkmark: #0f172a; /* Toggle-specific */ --color-toggle-bg: var(--color-border-light); --color-toggle-bg-checked: var(--color-primary); --color-toggle-knob: #0f172a; /* =================================== Choice Card Colors - Dark Mode =================================== */ --color-choice-border: var(--color-border); --color-choice-border-hover: var(--color-border-light); --color-choice-border-checked: var(--color-primary); --color-choice-bg: transparent; --color-choice-bg-hover: var(--color-bg-muted); --color-choice-bg-checked: rgba(96, 165, 250, 0.1); --color-choice-ring: var(--color-primary); } .theme-scope { /* =================================== Spacing Tokens (Semantic) =================================== */ /* Button Spacing */ --space-btn-x: 0.875rem; /* 14px - horizontal padding */ --space-btn-y: 0.5rem; /* 8px - vertical padding */ --space-btn-sm-x: 0.5rem; /* 8px - small button horizontal */ --space-btn-sm-y: 0.25rem; /* 4px - small button vertical */ --space-btn-lg-x: 1rem; /* 16px - large button horizontal */ --space-btn-lg-y: 0.625rem; /* 10px - large button vertical */ --space-btn-icon: 0.75rem; /* 12px - icon-only button padding */ /* Input/Form Spacing */ --space-input-x: 0.75rem; /* 12px - horizontal padding */ --space-input-y: 0.5rem; /* 8px - vertical padding */ --space-input-sm-x: 0.5rem; /* 8px - small input horizontal */ --space-input-sm-y: 0.25rem; /* 4px - small input vertical */ --input-padding-x: var(--space-input-x); --input-padding-y: var(--space-input-y); --input-padding-sm-x: var(--space-input-sm-x); --input-padding-sm-y: var(--space-input-sm-y); /* Card Spacing */ --space-card-padding: 0.75rem; /* 20px - card body padding */ /* Tab Spacing */ --space-tab-x: 1rem; /* 16px - tab horizontal spacing */ --space-tab-y: 0.5rem; /* 8px - tab vertical spacing */ --space-tab-modern-x: 1rem; /* 16px - modern tab horizontal */ --space-tab-modern-y: 0.5rem; /* 8px - modern tab vertical */ --space-tab-btn-x: 1.25rem; /* 20px - button-style tab horizontal */ --space-tab-btn-y: 0.625rem; /* 10px - button-style tab vertical */ /* Badge Spacing */ --space-badge-x: 0.625rem; /* 10px - badge horizontal */ --space-badge-y: 0.25rem; /* 4px - badge vertical */ --space-badge-sm-x: 0.5rem; /* 8px - small badge horizontal */ --space-badge-sm-y: 0.125rem; /* 2px - small badge vertical */ /* Dropdown Spacing */ --space-dropdown-item-x: 0.75rem; /* 12px - dropdown item horizontal */ --space-dropdown-item-y: 0.5rem; /* 8px - dropdown item vertical */ /* Toast Spacing */ --space-toast-x: 1rem; /* 16px - toast horizontal */ --space-toast-y: 1rem; /* 16px - toast vertical */ /* Copy Button Spacing */ --space-copy-btn-x: 0.625rem; /* 10px - copy button horizontal */ --space-copy-btn-y: 0.25rem; /* 4px - copy button vertical */ /* Accordion Spacing */ --space-accordion-x: 1rem; /* 16px - accordion item horizontal */ --space-accordion-y: 1rem; /* 16px - accordion item vertical */ /* Table Spacing */ --space-table-cell-x: 0.75rem; /* 12px - table cell horizontal */ --space-table-cell-y: 0.75rem; /* 12px - table cell vertical */ /* List Item Spacing */ --space-list-item-x: 1rem; /* 16px - list item horizontal */ --space-list-item-y: 0.75rem; /* 12px - list item vertical */ /* Pagination Spacing */ --space-pagination-x: 0.75rem; /* 12px - pagination item horizontal */ --space-pagination-y: 0.5rem; /* 8px - pagination item vertical */ /* Toggle Group Spacing */ --space-toggle-x: 0.75rem; /* 12px - toggle item horizontal */ --space-toggle-y: 0.5rem; /* 8px - toggle item vertical */ /* Gap Spacing (for flex/grid layouts) */ --space-gap-xs: 0.25rem; /* 4px */ --space-gap-sm: 0.5rem; /* 8px */ --space-gap-md: 1rem; /* 16px */ --space-gap-lg: 1.5rem; /* 24px */ /* =================================== Numeric Spacing Scale (Tailwind-aligned) For ad-hoc spacing/sizing where no semantic role applies. Doubles as a sizing scale (width/height) like Tailwind's `spacing`. Prefer the semantic --space-* tokens above for component padding; reach for these only when the value has no semantic name. =================================== */ --spacing-0: 0; --spacing-px: 1px; --spacing-0_5: 0.125rem; /* 2px */ --spacing-1: 0.25rem; /* 4px */ --spacing-1_5: 0.375rem; /* 6px */ --spacing-2: 0.5rem; /* 8px */ --spacing-3: 0.75rem; /* 12px */ --spacing-4: 1rem; /* 16px */ --spacing-5: 1.25rem; /* 20px */ --spacing-6: 1.5rem; /* 24px */ --spacing-8: 2rem; /* 32px */ --spacing-10: 2.5rem; /* 40px */ --spacing-12: 3rem; /* 48px */ --spacing-16: 4rem; /* 64px */ --spacing-20: 5rem; /* 80px */ --spacing-24: 6rem; /* 96px */ /* =================================== Icon Sizing Standard icon dimensions used across components. =================================== */ --icon-xs: 0.75rem; /* 12px */ --icon-sm: 1rem; /* 16px */ --icon-base: 1.25rem; /* 20px */ --icon-lg: 1.5rem; /* 24px */ --icon-xl: 2rem; /* 32px */ /* =================================== Z-Index Layering Stack order for overlapping UI. Higher = on top. Components should use the semantic name, not a literal z-index. =================================== */ --z-base: 0; --z-dropdown: 10; --z-sticky: 20; --z-fixed: 30; --z-overlay: 40; --z-modal: 50; --z-popover: 60; --z-tooltip: 70; } /* :root font tokens — make the engine sans-serif stack reachable from unscoped chrome (html, body, page background) so any element outside `.theme-scope` doesn't fall back to Times-on-Mac. The same tokens are redeclared inside `.theme-scope` below so themed scopes can override them per theme (`themes//tokens.scss` emits `.theme-scope[data-theme=X]` token blocks that win over both). */ :root { --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; --font-display: var(--font-sans); --font-marketing: var(--font-sans); } .theme-scope { /* =================================== Typography Tokens =================================== */ /* Font Families */ --font-sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; --font-mono: 'Menlo', ui-monospace, SFMono-Regular, 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; --font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif; /* Marketing/Display Font (for landing pages, hero sections) */ --font-display: var(--font-sans); /* Body Copy Font (for marketing content) */ --font-marketing: var(--font-sans); /* Font Sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Font Weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Semantic Weight Roles */ --font-heading-weight: var(--font-semibold); --font-display-weight: var(--font-bold); --font-control-weight: var(--font-medium); --font-emphasis-weight: var(--font-semibold); /* Line Heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; /* Letter Spacing */ --tracking-tighter: -0.05em; --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; --tracking-wider: 0.05em; /* Heading Sizes (semantic) */ --text-h1: 2rem; /* 32px */ --text-h2: 1.5rem; /* 24px */ --text-h3: 1.25rem; /* 20px */ --text-h4: 1.125rem; /* 18px */ --text-h5: 1rem; /* 16px */ --text-h6: 0.875rem; /* 14px */ /* Component-Specific Typography */ --text-button: var(--text-sm); --text-button-sm: var(--text-xs); --text-button-lg: var(--text-base); --text-badge: var(--text-xs); --text-input: var(--text-sm); --text-label: var(--text-sm); --text-copy-btn: var(--text-xs); } .theme-scope { /* =================================== Border Radius Tokens =================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Fully rounded */ /* Component-Specific Radii */ --radius-button: var(--radius-md); --radius-input: var(--radius-md); --radius-card: var(--radius-lg); --radius-badge: var(--radius-md); --radius-badge-pill: var(--radius-full); --radius-dropdown: var(--radius-md); --radius-tab: var(--radius-md); --radius-tab-modern: var(--radius-md); --radius-toast: var(--radius-lg); } .theme-scope { /* =================================== Shadow Tokens =================================== */ /* Base Shadows */ --shadow-none: none; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 1px 3px 0 rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, 0.1); --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, 0.1); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* Component-Specific Shadows */ --shadow-card: var(--shadow-md); --shadow-dropdown: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-toast: 0 5px 15px -3px rgba(0, 0, 0, 0.08); /* Toast shadow stops — composed at the call-site so semantic variants can swap the inner stop for a colored glow via color-mix. Outer is the drop shadow; inner is the soft ambient default. Both override in dark mode (see the dark variant block below). */ --shadow-toast-outer: 0 5px 15px -3px rgba(0, 0, 0, 0.08); --shadow-toast-inner: 0 2px 4px -1px rgba(0, 0, 0, 0.04); /* Focus Ring Sizes (used with color-*-ring variables) */ --ring-width: 3px; --ring-offset: 0px; } /* Dark variant — softer shadows + heavier ambient on near-black surfaces */ .theme-scope.dark, .theme-scope[data-variant=dark], .theme-scope[data-theme=dark], .dark .theme-scope, [data-variant=dark] .theme-scope, [data-theme=dark] .theme-scope { --shadow-toast-outer: 0 4px 12px -1px rgba(0, 0, 0, 0.4); --shadow-toast-inner: 0 2px 6px -1px rgba(0, 0, 0, 0.3); } .theme-scope { /* =================================== Motion Tokens Transition durations + easing curves used across components. Themes MAY override durations to feel snappier/slower; easings should stay consistent across themes for a coherent motion language. =================================== */ /* Durations */ --transition-instant: 0ms; --transition-fast: 150ms; --transition-base: 200ms; --transition-slow: 300ms; --transition-slower: 500ms; /* Easings */ --ease: ease; --ease-in: ease-in; --ease-out: ease-out; --ease-in-out: ease-in-out; /* Sharper curves for interactive feedback */ --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53); --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955); } /* All CSS custom properties are now defined in ../tokens/ This file exists for backwards compatibility and to allow theme-specific overrides */ /* Import all component partials with underscore prefix */ /* Engine baseline for unscoped chrome (html, body, page wrapper). Without this, anything that renders outside `.theme-scope` falls back to the browser default — Times on Mac, etc. Apps that wrap content in `.theme-scope` still get the scoped overrides; this just guarantees the page chrome itself is sans-serif even when nothing is themed. */ html, body { height: 100%; font-family: var(--font-role-body, var(--font-sans, ui-sans-serif, system-ui, sans-serif)); } .theme-scope { font-family: var(--font-role-body, var(--font-sans, ui-sans-serif, system-ui, sans-serif)); color: var(--color-text-primary); line-height: 1.5; background-color: var(--color-bg-primary); padding: 1.25rem; border-radius: var(--radius-lg); box-sizing: border-box; --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)), var(--tw-shadow); } .theme-scope.app-main-content { padding: 0; border-radius: 0; box-shadow: none; } .theme-scope *, .theme-scope *::before, .theme-scope *::after { box-sizing: border-box; border-style: none; border-width: 0; } .theme-scope [hidden]:not([hidden=until-found]) { display: none !important; } body.theme-scope { margin: 0; padding: 0; border-radius: 0; box-shadow: none; } /* Engine baseline font-family on unscoped chrome (html, body). Without this, anything that renders outside `.theme-scope` falls back to the browser default — Times on Mac, etc. Apps that wrap content in `.theme-scope` get the scoped overrides; this just guarantees that the page chrome itself is sans-serif even before any theme loads. Uses a literal stack (not var()) so it works at :root before token blocks are read by the cascade. Themes that want a specific body font (e.g. chorus's Geist) still need to set it on body themselves. */ html, body { font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", sans-serif; } .theme-scope h1, .theme-scope h2, .theme-scope h3, .theme-scope h4, .theme-scope h5, .theme-scope h6 { font-family: var(--font-role-heading, var(--font-sans)); font-weight: var(--font-heading-weight); line-height: var(--leading-tight); color: var(--color-text-primary); letter-spacing: -0.015em; /* Tighter tracking for headings */ } .theme-scope h1 { font-family: var(--font-role-display, var(--font-display, var(--font-role-heading, var(--font-sans)))); font-size: var(--text-h1); margin-bottom: 0.75rem; } .theme-scope h2 { font-size: var(--text-2xl); margin-bottom: 0.625rem; } .theme-scope h3 { font-size: var(--text-xl); margin-bottom: 0.5rem; } .theme-scope h4 { font-size: var(--text-lg); margin-bottom: 0.5rem; } .theme-scope h5 { font-size: var(--text-base); margin-bottom: 0.375rem; } .theme-scope h6 { font-size: var(--text-sm); margin-bottom: 0.25rem; } .theme-scope p { margin-bottom: 0.75rem; /* Reduced from 1rem */ /* color: var(--color-text-secondary); */ color: var(--color-text-primary); /* looks better I think */ line-height: 1.6; /* Slightly tighter */ } .theme-scope strong, .theme-scope b { font-weight: var(--font-emphasis-weight); color: var(--color-text-primary); } .theme-scope em, .theme-scope i { font-style: italic; } .theme-scope .text-display-xl { font-family: var(--font-role-display, var(--font-display, var(--font-sans))); font-size: 2.25rem; /* text-4xl */ font-weight: var(--font-display-weight); color: var(--color-gray-300); letter-spacing: -0.025em; /* tracking-tight */ line-height: var(--leading-tight); } .theme-scope .text-display-lg { font-family: var(--font-role-display, var(--font-display, var(--font-sans))); font-size: 1.875rem; /* text-3xl */ font-weight: var(--font-display-weight); color: var(--color-gray-300); letter-spacing: -0.025em; /* tracking-tight */ line-height: var(--leading-tight); } .theme-scope .text-display-md { font-family: var(--font-role-display, var(--font-display, var(--font-sans))); font-size: var(--text-2xl); /* text-2xl */ font-weight: var(--font-display-weight); color: var(--color-gray-300); letter-spacing: -0.025em; /* tracking-tight */ line-height: var(--leading-tight); } .theme-scope .text-display-sm { font-family: var(--font-role-display, var(--font-display, var(--font-sans))); font-size: var(--text-xl); /* text-xl */ font-weight: var(--font-display-weight); color: var(--color-gray-300); letter-spacing: -0.025em; /* tracking-tight */ line-height: var(--leading-tight); } .theme-scope .link, .theme-scope :where(a:not([role=button]):not([class*=btn]):not([class*=button])) { color: var(--color-primary); text-decoration: none; transition: color 0.15s ease-in-out; } .theme-scope .link:hover, .theme-scope :where(a:not([role=button]):not([class*=btn]):not([class*=button]):hover) { color: var(--color-primary-hover); text-decoration: underline; } .theme-scope code { padding: 0.125rem 0.375rem; background-color: var(--color-code-bg); color: var(--color-code-text); border-radius: var(--radius-sm); font-family: var(--font-role-code, var(--font-mono, ui-monospace, monospace)); font-size: 0.875em; } .theme-scope pre { padding: 1rem; background-color: var(--color-code-bg-dark); color: var(--color-code-text-dark); border: 1px solid var(--color-code-border, var(--color-border)); border-radius: var(--radius-lg); overflow-x: auto; margin-bottom: 1rem; } .theme-scope pre code { padding: 0; background-color: transparent; color: inherit; border-radius: 0; font-size: var(--text-sm); } .theme-scope blockquote { padding-left: 1rem; border-left: 4px solid var(--color-border); color: var(--color-text-neutral); font-style: italic; margin-bottom: 1rem; } .theme-scope hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; } .theme-scope .font-serif { font-family: var(--font-serif); } .theme-scope .font-medium { font-weight: var(--font-medium); } .theme-scope .font-semibold { font-weight: var(--font-semibold); } .theme-scope .font-bold { font-weight: var(--font-bold); } .theme-scope .font-weight-heading { font-weight: var(--font-heading-weight); } .theme-scope .font-weight-display { font-weight: var(--font-display-weight); } .theme-scope .font-weight-control { font-weight: var(--font-control-weight); } .theme-scope .font-weight-emphasis { font-weight: var(--font-emphasis-weight); } .theme-scope .italic { font-style: italic; } /** * Prose Styles - Typography for Markdown Content * * Apply .prose to any container with rendered markdown/HTML content * to restore proper typography styling stripped by Tailwind's reset. * * Based on Tailwind Typography plugin patterns. * * Usage: *
* *
* * Variants: * .prose-sm - Smaller text (articles in sidebars) * .prose-lg - Larger text (featured content) * .prose-invert - Light text on dark background */ .prose { color: var(--color-text-primary); max-width: 65ch; font-size: 1rem; line-height: 1.75; } .prose.prose-full { max-width: none; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { color: var(--color-text-primary); font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; } .prose h1 { font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; } .prose h2 { font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; padding-bottom: 0.3em; border-bottom: 1px solid var(--color-border); } .prose h3 { font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; } .prose h4 { font-size: 1em; margin-top: 1.5em; margin-bottom: 0.5em; } .prose h5 { font-size: 0.875em; margin-top: 1.5em; margin-bottom: 0.5em; } .prose h6 { font-size: 0.875em; margin-top: 1.5em; margin-bottom: 0.5em; color: var(--color-text-secondary); } .prose p { margin-top: 1.25em; margin-bottom: 1.25em; } .prose > :first-child { margin-top: 0; } .prose > :last-child { margin-bottom: 0; } .prose a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; transition: color 0.15s; } .prose a:hover { color: var(--color-primary-hover); } .prose strong, .prose b { color: var(--color-text-primary); font-weight: 600; } .prose em, .prose i { font-style: italic; } .prose code { color: var(--color-code-text); background-color: var(--color-code-bg); padding: 0.2em 0.4em; border-radius: var(--radius-sm); font-size: 0.875em; font-family: var(--font-role-code, var(--font-mono)); font-weight: 500; } .prose pre code { background-color: transparent; padding: 0; font-size: inherit; font-weight: normal; color: inherit; border-radius: 0; } .prose pre { color: var(--color-code-text-dark); background-color: var(--color-code-bg-dark); overflow-x: auto; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: var(--radius-md); padding: 0.8571429em 1.1428571em; font-family: var(--font-role-code, var(--font-mono)); } .prose blockquote { font-style: italic; color: var(--color-text-secondary); border-left: 4px solid var(--color-border); margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; quotes: "“" "”" "‘" "’"; } .prose blockquote p:first-of-type::before { content: open-quote; } .prose blockquote p:last-of-type::after { content: close-quote; } .prose hr { border: none; border-top: 1px solid var(--color-border); margin-top: 3em; margin-bottom: 3em; } .prose ul, .prose ol { margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose ul { list-style-type: disc; } .prose ol { list-style-type: decimal; } .prose li { margin-top: 0.5em; margin-bottom: 0.5em; } .prose ul ul, .prose ul ol, .prose ol ul, .prose ol ol { margin-top: 0.75em; margin-bottom: 0.75em; } .prose li::marker { color: var(--color-text-tertiary); } .prose ol > li::marker { color: var(--color-text-secondary); font-weight: 500; } .prose ul.contains-task-list { list-style-type: none; padding-left: 0; } .prose li.task-list-item { display: flex; align-items: flex-start; gap: 0.5em; } .prose li.task-list-item input[type=checkbox] { margin-top: 0.35em; } .prose img { margin-top: 2em; margin-bottom: 2em; border-radius: var(--radius-md); } .prose figure { margin-top: 2em; margin-bottom: 2em; } .prose figcaption { color: var(--color-text-secondary); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; text-align: center; } .prose .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 2em; margin-bottom: 2em; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-primary, white); } .prose .table-wrapper table { margin-top: 0; margin-bottom: 0; border: none; border-radius: 0; } .prose table { width: 100%; table-layout: auto; text-align: left; margin-top: 2em; margin-bottom: 2em; font-size: 0.875rem; line-height: 1.5; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-bg-primary, white); } .prose thead { background-color: var(--color-bg-muted); } .prose thead th { color: var(--color-text-muted); font-weight: 500; vertical-align: middle; padding: 1rem; text-align: left; border-bottom: 1px solid var(--color-border); } .prose tbody tr { transition: background-color 0.15s; } .prose tbody tr:hover { background-color: var(--color-bg-hover); } .prose tbody td { vertical-align: middle; padding: 1rem; border-bottom: 1px solid var(--color-border); } .prose tbody tr:last-child td { border-bottom: none; } .prose tbody td:first-child { font-weight: 500; } @media (max-width: 640px) { .prose .table-wrapper { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-left: none; border-right: none; } .prose table { font-size: 0.8125rem; border-radius: 0; } .prose thead th, .prose tbody td { padding: 0.75rem; white-space: nowrap; } } .prose dl { margin-top: 1.25em; margin-bottom: 1.25em; } .prose dt { color: var(--color-text-primary); font-weight: 600; margin-top: 1.25em; } .prose dd { margin-top: 0.5em; padding-left: 1.625em; } .prose abbr[title] { text-decoration: underline dotted; cursor: help; } .prose kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.875em; padding: 0.125em 0.375em; border-radius: var(--radius-sm); border: 1px solid var(--color-border); background-color: var(--color-bg-secondary); box-shadow: 0 1px 0 var(--color-border); } .prose sub, .prose sup { font-size: 0.75em; } .prose-sm { font-size: 0.875rem; line-height: 1.7142857; } .prose-sm h1 { font-size: 1.75em; } .prose-sm h2 { font-size: 1.25em; } .prose-sm h3 { font-size: 1.125em; } .prose-sm p, .prose-sm ul, .prose-sm ol, .prose-sm blockquote { margin-top: 1em; margin-bottom: 1em; } .prose-sm pre { font-size: 0.8em; } .prose-lg { font-size: 1.125rem; line-height: 1.7777778; } .prose-lg h1 { font-size: 2.5em; } .prose-lg h2 { font-size: 1.75em; } .prose-lg h3 { font-size: 1.375em; } .prose-lg p, .prose-lg ul, .prose-lg ol, .prose-lg blockquote { margin-top: 1.5em; margin-bottom: 1.5em; } .prose-invert { color: var(--color-text-invert); } .prose-invert h1, .prose-invert h2, .prose-invert h3, .prose-invert h4, .prose-invert h5, .prose-invert h6, .prose-invert strong, .prose-invert b { color: var(--color-text-invert); } .prose-invert h2 { border-bottom-color: var(--color-border-invert); } .prose-invert a { color: var(--color-primary-light); } .prose-invert a:hover { color: var(--color-primary-lighter); } .prose-invert code { color: var(--color-code-text-invert); background-color: var(--color-code-bg-invert); } .prose-invert blockquote { border-left-color: var(--color-border-invert); color: var(--color-text-secondary-invert); } .prose-invert hr { border-top-color: var(--color-border-invert); } .prose-invert thead { border-bottom-color: var(--color-border-strong-invert); } .prose-invert tbody tr { border-bottom-color: var(--color-border-invert); } .prose-invert li::marker { color: var(--color-text-tertiary-invert); } .prose-compact h1 { margin-bottom: 0.5em; } .prose-compact h2 { margin-top: 1.25em; margin-bottom: 0.5em; } .prose-compact h3 { margin-top: 1em; margin-bottom: 0.4em; } .prose-compact h4, .prose-compact h5, .prose-compact h6 { margin-top: 0.75em; margin-bottom: 0.25em; } .prose-compact p, .prose-compact ul, .prose-compact ol, .prose-compact blockquote { margin-top: 0.75em; margin-bottom: 0.75em; } .prose-compact hr { margin-top: 1.5em; margin-bottom: 1.5em; } .theme-scope ul, .theme-scope ol { margin-bottom: 1rem; padding-left: 1.5rem; color: var(--color-text-neutral); } .theme-scope ul { list-style-type: disc; } .theme-scope ol { list-style-type: decimal; } .theme-scope li { margin-bottom: 0.5rem; } .theme-scope ul ul, .theme-scope ol ol { margin-top: 0.5rem; margin-bottom: 0.5rem; } .theme-scope .list-none { list-style-type: none; padding-left: 0; } .theme-scope dl { margin: 0; } .theme-scope dt { font-weight: var(--font-emphasis-weight); color: var(--color-text-primary); } .theme-scope dd { margin: 0; color: var(--color-text-secondary); } .theme-scope table { width: 100%; margin-bottom: 1rem; } .theme-scope th { padding: 0.75rem; font-weight: var(--font-emphasis-weight); text-align: left; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border); } .theme-scope td { padding: 0.75rem; color: var(--color-text-neutral); border-bottom: 1px solid var(--color-border); } .theme-scope tbody tr:last-child td { border-bottom: none; } .theme-scope .app-table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; } .theme-scope .app-table th, .theme-scope .app-table td { border: none; border-bottom: 1px solid var(--color-border); } .theme-scope .app-table th { background-color: var(--color-bg-secondary); } .theme-scope .app-table tbody tr:last-child td { border-bottom: none; } .theme-scope .app-table th:not(:last-child), .theme-scope .app-table td:not(:last-child) { border-right: 1px solid var(--color-border); } .theme-scope .data-table td { padding: 0.25rem 1rem; } .theme-scope .data-table th { padding: 0.5rem 1rem; height: 1.3rem; } .theme-scope tr:hover { background-color: var(--color-bg-secondary); } .theme-scope .table-compact { border-collapse: collapse; background-color: var(--color-bg-primary); } .theme-scope .table-compact caption { caption-side: bottom; text-align: left; color: var(--color-text-muted); font-size: var(--text-sm); padding: 0.75rem 1rem; margin-top: 0; } .theme-scope .table-compact thead { background-color: transparent; } .theme-scope .table-compact thead tr { border-bottom: 1px solid var(--color-border); transition: none; } .theme-scope .table-compact thead tr:hover { background-color: transparent; } .theme-scope .table-compact thead th { height: 3rem; padding: 0.75rem 1rem; text-align: left; font-weight: var(--font-control-weight); color: var(--color-text-muted); font-size: var(--text-sm); vertical-align: middle; background-color: transparent; border: none; border-bottom: 1px solid var(--color-border); } .theme-scope .table-compact thead th.text-right { text-align: right; } .theme-scope .table-compact tbody tr { border-bottom: 1px solid var(--color-border); transition: background-color 0.2s ease; } .theme-scope .table-compact tbody tr:hover { background-color: var(--color-bg-muted); } .theme-scope .table-compact tbody tr:last-child { border-bottom: none; } .theme-scope .table-compact tbody td { padding: 0.75rem 1rem; vertical-align: middle; border: none; color: var(--color-text-primary); font-size: var(--text-sm); } .theme-scope .table-compact tfoot { background-color: var(--color-bg-secondary); border-top: 1px solid var(--color-border); font-weight: var(--font-control-weight); } .theme-scope .table-compact tfoot tr { border: none; } .theme-scope .table-compact tfoot tr:hover { background-color: var(--color-bg-secondary); } .theme-scope .table-compact tfoot td { padding: 0.75rem 1rem; border: none; color: var(--color-text-primary); font-size: var(--text-sm); } .theme-scope .table-compact .table-caption { caption-side: bottom; margin-top: 0.5rem; padding: 0.75rem 1rem; text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); } .theme-scope .expandable-table-container { font-size: var(--text-sm); } .theme-scope .expandable-table-header-row { display: flex; align-items: center; padding: 0.5rem 1rem; gap: 0.5rem; } .theme-scope .expandable-table-header-row .exp-col-name { flex: 1; min-width: 0; /* padding-left: 1.25rem; /* account for native marker */ padding-left: 0; /* flush left instead */ } .theme-scope .expandable-table-header-row .exp-col-type { width: 100px; flex-shrink: 0; } .theme-scope .expandable-table-header-row .exp-col-status { width: 100px; flex-shrink: 0; } .theme-scope .expandable-table-header-row .exp-col-date { width: 110px; flex-shrink: 0; text-align: right; } .theme-scope .expandable-row { border-bottom: none; border-bottom-width: 1px; /* Override .divide-y */ --tw-divide-y-reverse: 0; /* Override Tailwind divide */ margin-bottom: 0; border-radius: 0; /* Reset default details radius */ padding: 0; background: var(--color-bg-primary); } .theme-scope .expandable-row:first-child { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .theme-scope .expandable-row:first-child summary { border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .theme-scope .expandable-row:last-child { border-bottom-left-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); } .theme-scope .expandable-row:not(:first-child):not(:last-child) { border-radius: 0; } .theme-scope .expandable-row:not(:first-child):not(:last-child) summary { border-radius: 0; } .theme-scope .expandable-row summary { display: flex; align-items: center; padding: 0.5rem 1rem; gap: 0.5rem; cursor: pointer; transition: background-color 0.15s ease; border-radius: 0; /* Reset default */ margin-bottom: 0 !important; } .theme-scope .expandable-row summary:hover { background-color: var(--color-bg-muted); } .theme-scope .expandable-row summary .exp-col-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-scope .expandable-row summary .exp-col-type { width: 100px; flex-shrink: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-scope .expandable-row summary .exp-col-status { width: 100px; flex-shrink: 0; } .theme-scope .expandable-row summary .exp-col-date { width: 110px; flex-shrink: 0; text-align: right; white-space: nowrap; color: var(--color-text-muted); } .theme-scope .expandable-row[open] summary { background-color: var(--color-bg-muted); } .theme-scope .expandable-row-content { padding: 1rem 1rem 1rem 2.5rem; } .theme-scope input[type=text], .theme-scope input[type=email], .theme-scope input[type=password], .theme-scope input[type=number], .theme-scope input[type=url], .theme-scope input[type=search], .theme-scope input[type=tel], .theme-scope input[type=date], .theme-scope input[type=time], .theme-scope input[type=datetime-local], .theme-scope input[type=month], .theme-scope input[type=week], .theme-scope input[type=file], .theme-scope textarea:not(.inputarea), .theme-scope select, .theme-scope .form-input, .theme-scope .form-select { display: block; width: 100%; margin: 0; padding: var(--input-padding-y) var(--input-padding-x); font-size: var(--text-input); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-primary); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .theme-scope .form-input.pl-10 { padding-left: 2.5rem; } .theme-scope .form-input.rounded-none, .theme-scope textarea.form-input.rounded-none, .theme-scope input.form-input.rounded-none { border-radius: 0; } .theme-scope .form-input.rounded-t-none, .theme-scope textarea.form-input.rounded-t-none, .theme-scope input.form-input.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; } .theme-scope .form-input.rounded-b-none, .theme-scope textarea.form-input.rounded-b-none, .theme-scope input.form-input.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .theme-scope input[type=text]:focus, .theme-scope input[type=email]:focus, .theme-scope input[type=password]:focus, .theme-scope input[type=number]:focus, .theme-scope input[type=url]:focus, .theme-scope input[type=search]:focus, .theme-scope input[type=tel]:focus, .theme-scope input[type=date]:focus, .theme-scope input[type=time]:focus, .theme-scope input[type=datetime-local]:focus, .theme-scope input[type=month]:focus, .theme-scope input[type=week]:focus, .theme-scope input[type=file]:focus, .theme-scope textarea:not(.inputarea):focus, .theme-scope select:focus, .theme-scope .form-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-ring); } .theme-scope input[type=text]:disabled, .theme-scope input[type=email]:disabled, .theme-scope input[type=password]:disabled, .theme-scope input[type=number]:disabled, .theme-scope input[type=url]:disabled, .theme-scope input[type=search]:disabled, .theme-scope input[type=tel]:disabled, .theme-scope input[type=date]:disabled, .theme-scope input[type=time]:disabled, .theme-scope input[type=datetime-local]:disabled, .theme-scope input[type=month]:disabled, .theme-scope input[type=week]:disabled, .theme-scope input[type=file]:disabled, .theme-scope textarea:not(.inputarea):disabled, .theme-scope select:disabled, .theme-scope .form-input:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-muted); cursor: not-allowed; } .theme-scope input[readonly], .theme-scope textarea:not(.inputarea)[readonly], .theme-scope .form-input[readonly] { background-color: var(--color-bg-secondary); color: var(--color-text-secondary); } .theme-scope textarea:not(.inputarea) { resize: vertical; min-height: 80px; overflow: hidden; } .theme-scope textarea.no-auto-grow { resize: both; overflow: auto; } .theme-scope select, .theme-scope .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236b7280' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.25rem 1.25rem; padding-right: 2.5rem; } .theme-scope select:disabled, .theme-scope .form-select:disabled { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%23cbd5e1' d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z'/%3E%3C/svg%3E"); } .theme-scope .form-input-sm, .theme-scope .form-select-sm { font-size: var(--text-xs); padding: var(--input-padding-sm-y) var(--input-padding-sm-x); line-height: 1.25; } .theme-scope .form-select-sm { background-size: 1rem 1rem; background-position: right 0.375rem center; padding-right: 1.75rem; } .theme-scope .form-label { display: block; margin-bottom: 0.5rem; font-weight: var(--font-control-weight); color: var(--color-text-primary); font-size: var(--text-sm); } .theme-scope .form-label-inline, .theme-scope .form-label.inline { display: inline; margin-bottom: 0; } .theme-scope .field-check, .theme-scope label.field-check { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; margin-bottom: 0; } .theme-scope .field-check.items-start { align-items: flex-start; } .theme-scope .field-check input[type=checkbox], .theme-scope .field-check input[type=radio] { flex-shrink: 0; } .theme-scope .field-check > span, .theme-scope .field-check > div { flex: 1; } .theme-scope .field-check .field-check-label { font-weight: var(--font-control-weight); font-size: var(--text-sm); color: var(--color-text-primary); line-height: 1.25; } .theme-scope .field-check .field-check-description { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.25rem; } .theme-scope input[type=checkbox], .theme-scope input[type=radio], .theme-scope .form-checkbox, .theme-scope .form-radio { display: inline-block; width: 1rem; height: 1rem; min-width: 1rem; margin: 0; /* reset user-agent defaults that leak through flex centering */ flex-shrink: 0; background-color: var(--color-control-bg); border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease-in-out; accent-color: var(--color-control-checked); } .theme-scope input[type=radio] { border-radius: 50%; } .theme-scope input[type=checkbox]:hover, .theme-scope input[type=radio]:hover { background-color: var(--color-control-bg-hover); border-color: var(--color-control-border-hover); } .theme-scope input[type=checkbox]:checked, .theme-scope input[type=radio]:checked { background-color: var(--color-control-checked); border-color: var(--color-control-checked-border); } .theme-scope input[type=checkbox]:checked:hover, .theme-scope input[type=radio]:checked:hover { background-color: var(--color-control-checked-hover); border-color: var(--color-control-checked-hover); } .theme-scope input[type=checkbox]:focus, .theme-scope input[type=radio]:focus { outline: none; box-shadow: 0 0 0 3px var(--color-control-ring); } .theme-scope input[type=range], .theme-scope .form-range { width: 100%; height: 0.25rem; background: var(--color-border-light); border-radius: var(--radius-full); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none; } .theme-scope input[type=range]::-webkit-slider-runnable-track, .theme-scope .form-range::-webkit-slider-runnable-track { width: 100%; height: 0.25rem; background: var(--color-border-light); border-radius: var(--radius-full); } .theme-scope input[type=range]::-webkit-slider-thumb, .theme-scope .form-range::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 1rem; height: 1rem; background: var(--color-bg-primary); border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; margin-top: -0.375rem; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease-in-out; } .theme-scope input[type=range]::-webkit-slider-thumb:hover, .theme-scope .form-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=range]::-webkit-slider-thumb:active, .theme-scope .form-range::-webkit-slider-thumb:active { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=range]::-moz-range-track, .theme-scope .form-range::-moz-range-track { width: 100%; height: 0.25rem; background: var(--color-border-light); border-radius: var(--radius-full); border: none; } .theme-scope input[type=range]::-moz-range-thumb, .theme-scope .form-range::-moz-range-thumb { width: 1rem; height: 1rem; background: var(--color-bg-primary); border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease-in-out; } .theme-scope input[type=range]::-moz-range-thumb:hover, .theme-scope .form-range::-moz-range-thumb:hover { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=range]::-moz-range-thumb:active, .theme-scope .form-range::-moz-range-thumb:active { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=range]:focus, .theme-scope .form-range:focus { outline: none; } .theme-scope input[type=range]:focus::-webkit-slider-thumb, .theme-scope .form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=range]:focus::-moz-range-thumb, .theme-scope .form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope input[type=checkbox].form-toggle { appearance: none; width: 2.75rem; height: 1.5rem; background-color: var(--color-toggle-bg); border-radius: var(--radius-full); position: relative; cursor: pointer; outline: none; transition: background-color 0.2s ease-in-out; border: none; flex-shrink: 0; /* Prevent squashing in flex containers */ box-sizing: border-box; margin: 0; } .theme-scope .form-toggle::after { content: ""; position: absolute; top: 0.125rem; left: 0.125rem; width: 1.25rem; height: 1.25rem; background-color: var(--color-toggle-knob); border-radius: 50%; box-shadow: var(--shadow-sm); transition: transform 0.2s ease-in-out; } .theme-scope input[type=checkbox].form-toggle:checked { background-color: var(--color-toggle-bg-checked); border-color: transparent; } .theme-scope .form-toggle:checked::after { transform: translateX(1.25rem); } .theme-scope input[type=checkbox].form-toggle:focus { box-shadow: 0 0 0 3px var(--color-control-ring); } .theme-scope input[type=checkbox].form-toggle:disabled { opacity: 0.5; cursor: not-allowed; } .theme-scope .input-group { display: flex; position: relative; width: 100%; align-items: stretch; } .theme-scope .input-group-text { display: flex; align-items: center; padding: 0.5rem 0.625rem; font-size: var(--text-sm); font-weight: 400; line-height: var(--leading-normal); color: var(--color-text-secondary); text-align: center; white-space: nowrap; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); } .theme-scope label.input-group-text, .theme-scope .form-label.input-group-text, .theme-scope .input-group-text label, .theme-scope .input-group-text .form-label { margin-bottom: 0; } .theme-scope .input-group .form-input, .theme-scope .input-group .form-select { flex: 1 1 auto; width: 1%; min-width: 0; border-radius: var(--radius-md); } .theme-scope .input-group textarea { min-height: auto; height: auto; } .theme-scope .input-group > :not(:first-child) { margin-left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } .theme-scope .input-group > :not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; } .theme-scope .input-group .form-input:focus, .theme-scope .input-group .form-select:focus, .theme-scope .input-group .btn-primary:focus, .theme-scope .input-group .btn-secondary:focus, .theme-scope .input-group .action-btn:focus { z-index: 20; position: relative; } .theme-scope .input-group .btn-primary, .theme-scope .input-group .btn-secondary, .theme-scope .input-group .action-btn { position: relative; z-index: 10; } .theme-scope .btn, .theme-scope [class^=btn-], .theme-scope [class*=" btn-"], .theme-scope .action-btn, .theme-scope .copy-button, .theme-scope .copy-button-copied { font-family: var(--font-role-control, var(--font-sans)); } .theme-scope .btn-default { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-bg-primary); background-color: var(--color-text-primary); border: 1px solid var(--color-text-primary); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-default:hover { background-color: var(--color-text-neutral-dark); border-color: var(--color-text-neutral-dark); color: var(--color-bg-primary); text-decoration: none; } .theme-scope .btn-default:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring); } .theme-scope .btn-default:active { background-color: var(--color-text-neutral); border-color: var(--color-text-neutral); } .theme-scope .btn-default:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-primary, .theme-scope .action-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-primary-text); background-color: var(--color-primary); border: 1px solid var(--color-primary); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-primary:hover, .theme-scope .action-btn:hover { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-primary-text); text-decoration: none; } .theme-scope .btn-primary:focus, .theme-scope .action-btn:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring); } .theme-scope .btn-primary:active, .theme-scope .action-btn:active { background-color: var(--color-primary-active); border-color: var(--color-primary-active); } .theme-scope .btn-primary:disabled, .theme-scope .action-btn:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-primary.btn-icon, .theme-scope .action-btn.btn-icon { padding: var(--space-btn-icon); border-radius: var(--radius-2xl); min-width: 44px; aspect-ratio: 1; } .theme-scope .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-primary); background-color: var(--color-primary-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-secondary:hover { background-color: var(--color-primary-lighter); color: var(--color-primary-hover); text-decoration: none; } .theme-scope .btn-secondary:focus { outline: none; box-shadow: var(--button-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 var(--ring-width) var(--color-primary-ring)); } .theme-scope .btn-secondary:active { background-color: var(--color-primary-lightest); color: var(--color-primary-active); } .theme-scope .btn-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-tertiary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); /* Matches form-input height */ font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-primary); background-color: transparent; border: 1px solid var(--color-primary); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-tertiary:hover { background-color: var(--color-bg-secondary); color: var(--color-primary-hover); border-color: var(--color-primary-hover); text-decoration: none; } .theme-scope .btn-tertiary:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring); } .theme-scope .btn-tertiary:active { background-color: var(--color-bg-muted); color: var(--color-primary-active); border-color: var(--color-primary-active); } .theme-scope .btn-tertiary:disabled { background-color: transparent; border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-gap-xs); padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-primary); background-color: transparent; border: 1px solid transparent; border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-link:hover { color: var(--color-primary-hover); text-decoration: none; background-color: var(--color-bg-secondary); } .theme-scope .btn-link:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring); } .theme-scope .btn-link:active { color: var(--color-primary-active); background-color: var(--color-bg-muted); } .theme-scope .btn-link:disabled, .theme-scope .btn-link:disabled:hover { color: var(--color-text-disabled); cursor: not-allowed; text-decoration: none; background-color: transparent; border-color: transparent; opacity: 0.6; } .theme-scope .btn-ghost { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: transparent; border: 1px solid transparent; border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-ghost:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); text-decoration: none; } .theme-scope .btn-ghost:focus { outline: none; background-color: var(--color-bg-secondary); box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring); /* Neutral ring instead of blue */ } .theme-scope .btn-ghost:active { background-color: var(--color-bg-muted); } .theme-scope .btn-ghost:disabled { color: var(--color-text-disabled); cursor: not-allowed; background-color: transparent; opacity: 0.6; } .theme-scope .copy-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-gap-sm); padding: var(--space-copy-btn-y) var(--space-copy-btn-x); font-size: var(--text-copy-btn); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .copy-button:hover { background-color: var(--color-bg-secondary); border-color: var(--color-border-light); } .theme-scope .copy-button:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring); } .theme-scope .copy-button:active { background-color: var(--color-bg-muted); } .theme-scope .copy-button-copied { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-gap-sm); padding: var(--space-copy-btn-y) var(--space-copy-btn-x); font-size: var(--text-copy-btn); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-success-text); background-color: var(--color-success); border: 1px solid var(--color-success); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .copy-button-copied:hover { background-color: var(--color-success-link); border-color: var(--color-success-link); } .theme-scope .btn-group { display: inline-flex; isolation: isolate; vertical-align: middle; } .theme-scope .btn-group-label { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-muted); background-color: var(--color-bg-muted); border: 1px solid currentColor; box-shadow: var(--button-group-label-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); text-decoration: none; white-space: nowrap; } .theme-scope .btn-group-sm { --btn-group-font-size: var(--text-button-sm); --btn-group-padding-x: var(--space-btn-sm-x); --btn-group-padding-y: var(--space-btn-sm-y); --btn-group-line-height: 1.25; } .theme-scope .btn-group-md, .theme-scope .btn-group-default { --btn-group-font-size: var(--text-button); --btn-group-padding-x: var(--space-btn-x); --btn-group-padding-y: var(--space-btn-y); --btn-group-line-height: var(--leading-normal); } .theme-scope .btn-group-lg { --btn-group-font-size: var(--text-button-lg); --btn-group-padding-x: var(--space-btn-lg-x); --btn-group-padding-y: var(--space-btn-lg-y); --btn-group-line-height: var(--leading-normal); } .theme-scope .btn-group-sm > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-sm > .dropdown > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-md > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-md > .dropdown > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-default > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-default > .dropdown > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-lg > :is([class^=btn-], [class*=" btn-"], .action-btn), .theme-scope .btn-group-lg > .dropdown > :is([class^=btn-], [class*=" btn-"], .action-btn) { padding: var(--btn-group-padding-y) var(--btn-group-padding-x) !important; font-size: var(--btn-group-font-size) !important; line-height: var(--btn-group-line-height) !important; } .theme-scope .btn-group > .dropdown { display: flex; } .theme-scope .btn-group > .btn-primary, .theme-scope .btn-group > .btn-secondary, .theme-scope .btn-group > .btn-tertiary, .theme-scope .btn-group > .btn-danger, .theme-scope .btn-group > .btn-success, .theme-scope .btn-group > .btn-warning, .theme-scope .btn-group > .btn-info, .theme-scope .btn-group > .btn-neutral, .theme-scope .btn-group > .btn-gray, .theme-scope .btn-group > .btn-danger-secondary, .theme-scope .btn-group > .btn-success-secondary, .theme-scope .btn-group > .btn-warning-secondary, .theme-scope .btn-group > .btn-info-secondary, .theme-scope .btn-group > .btn-neutral-secondary, .theme-scope .btn-group > .btn-gray-secondary, .theme-scope .btn-group > .dropdown > .btn-primary, .theme-scope .btn-group > .dropdown > .btn-secondary, .theme-scope .btn-group > .dropdown > .btn-tertiary, .theme-scope .btn-group > .dropdown > .btn-danger, .theme-scope .btn-group > .dropdown > .btn-success, .theme-scope .btn-group > .dropdown > .btn-warning, .theme-scope .btn-group > .dropdown > .btn-info, .theme-scope .btn-group > .dropdown > .btn-neutral, .theme-scope .btn-group > .dropdown > .btn-gray, .theme-scope .btn-group > .dropdown > .btn-danger-secondary, .theme-scope .btn-group > .dropdown > .btn-success-secondary, .theme-scope .btn-group > .dropdown > .btn-warning-secondary, .theme-scope .btn-group > .dropdown > .btn-info-secondary, .theme-scope .btn-group > .dropdown > .btn-neutral-secondary, .theme-scope .btn-group > .dropdown > .btn-gray-secondary, .theme-scope .btn-group > .action-btn { position: relative; border-width: 1px !important; /* Force 1px border when in group, override any other styles */ } .theme-scope .btn-group > .btn-secondary:not(:first-child), .theme-scope .btn-group > .btn-danger-secondary:not(:first-child), .theme-scope .btn-group > .btn-success-secondary:not(:first-child), .theme-scope .btn-group > .btn-warning-secondary:not(:first-child), .theme-scope .btn-group > .btn-info-secondary:not(:first-child), .theme-scope .btn-group > .btn-neutral-secondary:not(:first-child), .theme-scope .btn-group > .btn-gray-secondary:not(:first-child), .theme-scope .btn-group > .dropdown > .btn-secondary, .theme-scope .btn-group > .dropdown > .btn-danger-secondary, .theme-scope .btn-group > .dropdown > .btn-success-secondary, .theme-scope .btn-group > .dropdown > .btn-warning-secondary, .theme-scope .btn-group > .dropdown > .btn-info-secondary, .theme-scope .btn-group > .dropdown > .btn-neutral-secondary, .theme-scope .btn-group > .dropdown > .btn-gray-secondary { border-left-width: 1px !important; /* Restore left border for overlap */ } .theme-scope .btn-group > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary), .theme-scope .btn-group > .dropdown > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary) { box-shadow: var(--button-group-outline-shadow, inset 0 0 0 1px currentColor) !important; } .theme-scope .btn-group > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary):first-child:not(:last-child), .theme-scope .btn-group > .dropdown:first-child:not(:last-child) > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary) { box-shadow: var(--button-group-outline-first-shadow, inset 1px 0 0 currentColor, inset 0 1px 0 currentColor, inset 0 -1px 0 currentColor) !important; } .theme-scope .btn-group > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary):not(:first-child):not(:last-child), .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary) { box-shadow: var(--button-group-outline-middle-shadow, inset 0 1px 0 currentColor, inset 0 -1px 0 currentColor) !important; } .theme-scope .btn-group > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary):last-child:not(:first-child), .theme-scope .btn-group > .dropdown:last-child:not(:first-child) > :is(.btn-secondary, .btn-danger-secondary, .btn-success-secondary, .btn-warning-secondary, .btn-info-secondary, .btn-neutral-secondary, .btn-gray-secondary) { box-shadow: var(--button-group-outline-last-shadow, inset -1px 0 0 currentColor, inset 0 1px 0 currentColor, inset 0 -1px 0 currentColor) !important; } .theme-scope .btn-group > *:not(:first-child) { margin-left: -1px; /* Overlap borders */ } .theme-scope .btn-group > .btn-primary:first-child, .theme-scope .btn-group > .btn-secondary:first-child, .theme-scope .btn-group > .btn-tertiary:first-child, .theme-scope .btn-group > .btn-danger:first-child, .theme-scope .btn-group > .btn-success:first-child, .theme-scope .btn-group > .btn-warning:first-child, .theme-scope .btn-group > .btn-info:first-child, .theme-scope .btn-group > .btn-neutral:first-child, .theme-scope .btn-group > .btn-gray:first-child, .theme-scope .btn-group > .btn-danger-secondary:first-child, .theme-scope .btn-group > .btn-success-secondary:first-child, .theme-scope .btn-group > .btn-warning-secondary:first-child, .theme-scope .btn-group > .btn-info-secondary:first-child, .theme-scope .btn-group > .btn-neutral-secondary:first-child, .theme-scope .btn-group > .btn-gray-secondary:first-child, .theme-scope .btn-group > .dropdown:first-child > .btn-primary, .theme-scope .btn-group > .dropdown:first-child > .btn-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-tertiary, .theme-scope .btn-group > .dropdown:first-child > .btn-danger, .theme-scope .btn-group > .dropdown:first-child > .btn-success, .theme-scope .btn-group > .dropdown:first-child > .btn-warning, .theme-scope .btn-group > .dropdown:first-child > .btn-info, .theme-scope .btn-group > .dropdown:first-child > .btn-neutral, .theme-scope .btn-group > .dropdown:first-child > .btn-gray, .theme-scope .btn-group > .dropdown:first-child > .btn-danger-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-success-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-warning-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-info-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-neutral-secondary, .theme-scope .btn-group > .dropdown:first-child > .btn-gray-secondary { border-top-right-radius: 0; border-bottom-right-radius: 0; } .theme-scope .btn-group > .btn-group-label:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .theme-scope .btn-group > .btn-primary:last-child, .theme-scope .btn-group > .btn-secondary:last-child, .theme-scope .btn-group > .btn-tertiary:last-child, .theme-scope .btn-group > .btn-danger:last-child, .theme-scope .btn-group > .btn-success:last-child, .theme-scope .btn-group > .btn-warning:last-child, .theme-scope .btn-group > .btn-info:last-child, .theme-scope .btn-group > .btn-neutral:last-child, .theme-scope .btn-group > .btn-gray:last-child, .theme-scope .btn-group > .btn-danger-secondary:last-child, .theme-scope .btn-group > .btn-success-secondary:last-child, .theme-scope .btn-group > .btn-warning-secondary:last-child, .theme-scope .btn-group > .btn-info-secondary:last-child, .theme-scope .btn-group > .btn-neutral-secondary:last-child, .theme-scope .btn-group > .btn-gray-secondary:last-child, .theme-scope .btn-group > .dropdown:last-child > .btn-primary, .theme-scope .btn-group > .dropdown:last-child > .btn-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-tertiary, .theme-scope .btn-group > .dropdown:last-child > .btn-danger, .theme-scope .btn-group > .dropdown:last-child > .btn-success, .theme-scope .btn-group > .dropdown:last-child > .btn-warning, .theme-scope .btn-group > .dropdown:last-child > .btn-info, .theme-scope .btn-group > .dropdown:last-child > .btn-neutral, .theme-scope .btn-group > .dropdown:last-child > .btn-gray, .theme-scope .btn-group > .dropdown:last-child > .btn-danger-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-success-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-warning-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-info-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-neutral-secondary, .theme-scope .btn-group > .dropdown:last-child > .btn-gray-secondary { border-top-left-radius: 0; border-bottom-left-radius: 0; } .theme-scope .btn-group > .btn-group-label:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .theme-scope .btn-group > .btn-primary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-tertiary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-danger:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-success:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-warning:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-info:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-neutral:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-gray:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-danger-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-success-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-warning-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-info-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-neutral-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .btn-gray-secondary:not(:first-child):not(:last-child), .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-primary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-tertiary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-danger, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-success, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-warning, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-info, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-neutral, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-gray, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-danger-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-success-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-warning-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-info-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-neutral-secondary, .theme-scope .btn-group > .dropdown:not(:first-child):not(:last-child) > .btn-gray-secondary { border-radius: 0; } .theme-scope .btn-group > .btn-group-label:not(:first-child):not(:last-child) { border-radius: 0; } .theme-scope .btn-group > *:hover, .theme-scope .btn-group > .dropdown:hover { z-index: 2; } .theme-scope .btn-group > *:focus, .theme-scope .btn-group > .dropdown:focus-within { z-index: 3; } .theme-scope .btn-icon-only { padding: var(--space-btn-icon); aspect-ratio: 1; display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; /* 36px — matches default button height, ensures tap target */ min-height: 2.25rem; font-size: 1.125rem; /* 18px — default icon size for em-based icons */ line-height: 1; /* no extra leading around a single icon */ } .theme-scope .btn-icon-only > .iconify, .theme-scope .btn-icon-only > svg { width: 1em; height: 1em; flex-shrink: 0; /* never get squeezed by surrounding flex contexts */ } .theme-scope .btn-sm.btn-icon-only, .theme-scope .btn-short.btn-icon-only, .theme-scope .btn-group-sm > .btn-icon-only, .theme-scope .btn-group-sm > .dropdown > .btn-icon-only { min-width: 1.75rem; min-height: 1.75rem; font-size: 0.875rem !important; } .theme-scope .btn-lg.btn-icon-only, .theme-scope .btn-group-lg > .btn-icon-only, .theme-scope .btn-group-lg > .dropdown > .btn-icon-only { min-width: 2.75rem; min-height: 2.75rem; font-size: 1.25rem !important; } .theme-scope .btn-arrow { --btn-arrow-gap: 0.5rem; --btn-arrow-shift: 0.25rem; --btn-arrow-size: 1.05em; display: inline-flex; align-items: center; gap: var(--btn-arrow-gap); white-space: nowrap; } .theme-scope .btn-arrow::after { content: "→"; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 1em; font-size: var(--btn-arrow-size); line-height: 1; transform: translateX(0); transition: transform 0.18s ease; } .theme-scope .btn-arrow:has(> .iconify:last-child)::after, .theme-scope .btn-arrow:has(> svg:last-child)::after, .theme-scope .btn-arrow:has(> .btn-arrow-icon)::after { content: none; } .theme-scope .btn-arrow > .iconify:last-child, .theme-scope .btn-arrow > svg:last-child, .theme-scope .btn-arrow > .btn-arrow-icon { flex: 0 0 auto; transform: translateX(0); transition: transform 0.18s ease; } .theme-scope .btn-arrow:hover:not(:disabled):not([aria-disabled=true])::after, .theme-scope .btn-arrow:focus-visible::after { transform: translateX(var(--btn-arrow-shift)); } .theme-scope .btn-arrow:hover:not(:disabled):not([aria-disabled=true]) > .iconify:last-child, .theme-scope .btn-arrow:hover:not(:disabled):not([aria-disabled=true]) > svg:last-child, .theme-scope .btn-arrow:hover:not(:disabled):not([aria-disabled=true]) > .btn-arrow-icon, .theme-scope .btn-arrow:focus-visible > .iconify:last-child, .theme-scope .btn-arrow:focus-visible > svg:last-child, .theme-scope .btn-arrow:focus-visible > .btn-arrow-icon { transform: translateX(var(--btn-arrow-shift)); } @media (prefers-reduced-motion: reduce) { .theme-scope .btn-arrow::after, .theme-scope .btn-arrow > .iconify:last-child, .theme-scope .btn-arrow > svg:last-child, .theme-scope .btn-arrow > .btn-arrow-icon { transition: none; } } .theme-scope .btn-sm, .theme-scope .btn-short { font-size: 0.75rem !important; padding: var(--space-btn-sm-y) var(--space-btn-sm-x) !important; line-height: 1.25 !important; } .theme-scope .btn-md { font-size: var(--text-button) !important; padding: var(--space-btn-y) var(--space-btn-x) !important; line-height: var(--leading-normal) !important; } .theme-scope .btn-lg { font-size: var(--text-button-lg) !important; padding: var(--space-btn-lg-y) var(--space-btn-lg-x) !important; line-height: var(--leading-normal) !important; } .theme-scope .btn-danger-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-danger-link); background-color: var(--color-danger-light); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-danger-soft:hover { background-color: var(--color-danger-200); color: var(--color-danger-link-hover); } .theme-scope .btn-danger-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-danger-ring); } .theme-scope .btn-danger-soft:active { background-color: var(--color-danger-300); } .theme-scope .btn-danger-soft:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-success-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-success-link); background-color: var(--color-success-light); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-success-soft:hover { background-color: var(--color-success-200); color: var(--color-success-link-hover); } .theme-scope .btn-success-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-success-ring); } .theme-scope .btn-success-soft:active { background-color: var(--color-success-300); } .theme-scope .btn-success-soft:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-warning-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-warning-link); background-color: var(--color-warning-light); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-warning-soft:hover { background-color: var(--color-warning-200); color: var(--color-warning-link-hover); } .theme-scope .btn-warning-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-warning-ring); } .theme-scope .btn-warning-soft:active { background-color: var(--color-warning-300); } .theme-scope .btn-warning-soft:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-info-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-info-link); background-color: var(--color-info-light); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-info-soft:hover { background-color: var(--color-info-200); color: var(--color-info-link-hover); } .theme-scope .btn-info-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-info-ring); } .theme-scope .btn-info-soft:active { background-color: var(--color-info-300); } .theme-scope .btn-info-soft:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-neutral-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-neutral-link); background-color: var(--color-neutral-light); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-neutral-soft:hover { background-color: var(--color-neutral-200); color: var(--color-neutral-link-hover); } .theme-scope .btn-neutral-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-neutral-ring); } .theme-scope .btn-neutral-soft:active { background-color: var(--color-neutral-300); } .theme-scope .btn-neutral-soft:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-gray-soft { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-secondary); border: 1px solid transparent; /* No outline */ border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-gray-soft:hover { background-color: var(--color-border); } .theme-scope .btn-gray-soft:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring-dark); } .theme-scope .btn-gray-soft:active { background-color: var(--color-border-light); } .theme-scope .btn-gray-soft:disabled { background-color: var(--color-bg-muted); color: var(--color-text-muted); cursor: not-allowed; } .theme-scope .btn-danger { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-danger-text); background-color: var(--color-danger); border: 1px solid var(--color-danger); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-danger:hover { background-color: var(--color-danger-link); border-color: var(--color-danger-link); } .theme-scope .btn-danger:focus { outline: none; box-shadow: 0 0 0 3px var(--color-danger-ring); } .theme-scope .btn-danger:active { background-color: var(--color-danger-link-hover); border-color: var(--color-danger-link-hover); } .theme-scope .btn-danger:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-success { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-success-text); background-color: var(--color-success); border: 1px solid var(--color-success); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-success:hover { background-color: var(--color-success-link); border-color: var(--color-success-link); } .theme-scope .btn-success:focus { outline: none; box-shadow: 0 0 0 3px var(--color-success-ring); } .theme-scope .btn-success:active { background-color: var(--color-success-link-hover); border-color: var(--color-success-link-hover); } .theme-scope .btn-success:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-warning { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-warning-text); background-color: var(--color-warning); border: 1px solid var(--color-warning); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-warning:hover { background-color: var(--color-warning-link); border-color: var(--color-warning-link); } .theme-scope .btn-warning:focus { outline: none; box-shadow: 0 0 0 3px var(--color-warning-ring); } .theme-scope .btn-warning:active { background-color: var(--color-warning-link-hover); border-color: var(--color-warning-link-hover); } .theme-scope .btn-warning:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-info { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-info-text); background-color: var(--color-info); border: 1px solid var(--color-info); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-info:hover { background-color: var(--color-info-link); border-color: var(--color-info-link); } .theme-scope .btn-info:focus { outline: none; box-shadow: 0 0 0 3px var(--color-info-ring); } .theme-scope .btn-info:active { background-color: var(--color-info-link-hover); border-color: var(--color-info-link-hover); } .theme-scope .btn-info:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-neutral { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-neutral-text); background-color: var(--color-neutral); border: 1px solid var(--color-neutral); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-neutral:hover { background-color: var(--color-neutral-link); border-color: var(--color-neutral-link); } .theme-scope .btn-neutral:focus { outline: none; box-shadow: 0 0 0 3px var(--color-neutral-ring); } .theme-scope .btn-neutral:active { background-color: var(--color-neutral-link-hover); border-color: var(--color-neutral-link-hover); } .theme-scope .btn-neutral:disabled { background-color: var(--color-bg-disabled); border-color: var(--color-border); color: var(--color-text-disabled); cursor: not-allowed; opacity: 0.6; } .theme-scope .btn-gray { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-gray:hover { background-color: var(--color-border-light); /* Darker on hover */ border-color: var(--color-border-light); } .theme-scope .btn-gray:focus { outline: none; box-shadow: 0 0 0 3px var(--color-gray-ring); } .theme-scope .btn-gray:active { background-color: var(--color-text-muted); border-color: var(--color-text-muted); } .theme-scope .btn-gray:disabled { background-color: var(--color-bg-muted); border-color: var(--color-bg-muted); color: var(--color-text-muted); cursor: not-allowed; } .theme-scope .btn-danger-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-danger); background-color: var(--color-danger-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-danger-secondary:hover { background-color: var(--color-danger-200); color: var(--color-danger-link); } .theme-scope .btn-danger-secondary:focus { outline: none; box-shadow: var(--button-danger-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 3px var(--color-danger-ring)); } .theme-scope .btn-danger-secondary:active { background-color: var(--color-danger-300); color: var(--color-danger-link-hover); } .theme-scope .btn-danger-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-success-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-success-link); background-color: var(--color-success-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-success-secondary:hover { background-color: var(--color-success-200); color: var(--color-success-link-hover); } .theme-scope .btn-success-secondary:focus { outline: none; box-shadow: var(--button-success-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 3px var(--color-success-ring)); } .theme-scope .btn-success-secondary:active { background-color: var(--color-success-300); color: var(--color-success-dark); } .theme-scope .btn-success-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-warning-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-warning-link); background-color: var(--color-warning-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-warning-secondary:hover { background-color: var(--color-warning-200); color: var(--color-warning-link-hover); } .theme-scope .btn-warning-secondary:focus { outline: none; box-shadow: var(--button-warning-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 3px var(--color-warning-ring)); } .theme-scope .btn-warning-secondary:active { background-color: var(--color-warning-300); color: var(--color-warning-dark); } .theme-scope .btn-warning-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-info-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-info-link); background-color: var(--color-info-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-info-secondary:hover { background-color: var(--color-info-200); color: var(--color-info-link-hover); } .theme-scope .btn-info-secondary:focus { outline: none; box-shadow: var(--button-info-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 3px var(--color-info-ring)); } .theme-scope .btn-info-secondary:active { background-color: var(--color-info-300); color: var(--color-info-dark); } .theme-scope .btn-info-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-neutral-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-neutral-link); background-color: var(--color-neutral-light); border: 1px solid currentColor; box-shadow: var(--button-outline-shadow, inset 0 0 0 1px currentColor); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-neutral-secondary:hover { background-color: var(--color-neutral-200); color: var(--color-neutral-link-hover); } .theme-scope .btn-neutral-secondary:focus { outline: none; box-shadow: var(--button-neutral-outline-focus-shadow, inset 0 0 0 1px currentColor, 0 0 0 3px var(--color-neutral-ring)); } .theme-scope .btn-neutral-secondary:active { background-color: var(--color-neutral-300); color: var(--color-neutral-dark); } .theme-scope .btn-neutral-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .btn-gray-secondary { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-btn-y) var(--space-btn-x); font-size: var(--text-button); font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; } .theme-scope .btn-gray-secondary:hover { background-color: var(--color-bg-secondary); border-color: var(--color-border-light); } .theme-scope .btn-gray-secondary:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring-dark); } .theme-scope .btn-gray-secondary:active { background-color: var(--color-bg-muted); } .theme-scope .btn-gray-secondary:disabled { background-color: var(--color-bg-secondary); color: var(--color-text-disabled); cursor: not-allowed; } .theme-scope .card, .theme-scope .app-card { padding: var(--space-card-padding); /* Reduced from 1.5rem */ background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); margin-bottom: var(--space-gap-md); } .theme-scope .card-title, .theme-scope .app-title { font-size: var(--text-xl); font-weight: var(--font-emphasis-weight); color: var(--color-text-primary); margin-top: 0; margin-bottom: 0.5rem; } .theme-scope .card > :is(h1, h2, h3, h4, h5, h6):first-child, .theme-scope .app-card > :is(h1, h2, h3, h4, h5, h6):first-child, .theme-scope .card-header > :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; } .theme-scope .card-content, .theme-scope .app-card-content { color: var(--color-text-secondary); } .theme-scope .demo-card { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); } .theme-scope .demo-card p:last-child { margin-bottom: 0; } .theme-scope .app-card p:last-child, .theme-scope .app-card-content p:last-child { margin-bottom: 0; } .theme-scope div[class*=border][class*=rounded] p:last-child, .theme-scope div[class*=border][class*=p-] p:last-child { margin-bottom: 0; } .theme-scope .accordion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; } .theme-scope .accordion-group { display: flex; flex-direction: column; gap: 0.5rem; } .theme-scope .accordion-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .theme-scope .accordion-item-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .theme-scope .accordion-button { width: 100%; padding: 0.5rem 1rem 0.5rem 1rem; background-color: var(--color-bg-secondary); border: none; text-align: left; cursor: pointer; display: flex; justify-content: flex-start; align-items: center; font-weight: var(--font-control-weight); color: var(--color-text-primary); transition: background-color 0.15s ease-in-out; } .theme-scope .accordion-button:hover { background-color: var(--color-bg-muted); } .theme-scope .accordion-icon { flex-shrink: 0; position: relative; } .theme-scope .accordion-icon-line { fill: var(--color-text-secondary); transition: opacity 0.2s ease-in-out; } .theme-scope .accordion-icon-line-vertical { transform-origin: center; transform: rotate(0deg); } .theme-scope .accordion-icon-rotated { transform: rotate(90deg); } .theme-scope .accordion-button-icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .theme-scope .accordion-button-open .accordion-button-icon { transform: rotate(180deg); } .theme-scope .accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease-out; overflow: hidden; margin: 0; } .theme-scope .accordion-content-open { grid-template-rows: 1fr; } .theme-scope .accordion-content-inner { overflow: hidden; padding: 0 1rem; /* Removed vertical padding here to fix peeking */ min-height: 0; color: var(--color-text-secondary); opacity: 0; /* Fade in effect */ transition: opacity 0.3s ease-out, padding 0.3s ease-out; } .theme-scope .accordion-content-open .accordion-content-inner { padding: 1rem 1rem 1rem 1rem; /* Restore padding when open */ opacity: 1; } .theme-scope .accordion-content-inner p:last-child { margin-bottom: 0; } .theme-scope .accordion-single { border: none; border-radius: 0; } .theme-scope .accordion-single .accordion-item { border: none; border-radius: 0; overflow: visible; } .theme-scope .accordion-single .accordion-item:not(:last-child) { border-bottom: 1px solid var(--color-border); } .theme-scope .accordion-single .accordion-button { padding: 1rem 0; background-color: transparent; justify-content: space-between; font-weight: var(--font-control-weight); border: none; } .theme-scope .accordion-single .accordion-button:hover { background-color: transparent; } .theme-scope .accordion-single .accordion-button-icon { width: 1rem; height: 1rem; transition: transform 0.2s ease-in-out; flex-shrink: 0; margin-left: 1rem; } .theme-scope .accordion-single .accordion-button[aria-expanded=true] .accordion-button-icon { transform: rotate(180deg); } .theme-scope .accordion-single .accordion-content-inner { padding: 0; } .theme-scope .accordion-single .accordion-content-open .accordion-content-inner { padding: 0.5rem 0 1rem 0; } .theme-scope .accordion-draggable-container { display: flex; flex-direction: column; gap: 0.25rem; } .theme-scope .accordion-draggable-row { display: contents; } .theme-scope .accordion-draggable-item { position: relative; cursor: grab; } .theme-scope .accordion-draggable-item:active { cursor: grabbing; } .theme-scope .accordion-drag-handle { display: flex; align-items: center; justify-content: center; width: 2rem; cursor: grab; color: var(--color-text-muted); background-color: var(--color-bg-secondary); border-right: 1px solid var(--color-border); border-radius: var(--radius-lg) 0 0 var(--radius-lg); transition: background-color 0.15s ease; } .theme-scope .dark .accordion-drag-handle, .theme-scope [data-theme=dark] .accordion-drag-handle { background-color: var(--color-bg-inverted-content); color: var(--color-text-muted); } .theme-scope .accordion-drag-handle:hover { background-color: var(--color-bg-muted); } .theme-scope .dark .accordion-drag-handle:hover, .theme-scope [data-theme=dark] .accordion-drag-handle:hover { background-color: var(--color-bg-hover); } .theme-scope .accordion-drag-handle:active { cursor: grabbing; } .theme-scope .accordion-draggable-item.is-dragging { opacity: 0.5; transform: scale(0.98); } .theme-scope .accordion-draggable-item.is-dragging .accordion-item { box-shadow: var(--shadow-dropdown); } .theme-scope .accordion-drop-zone { position: relative; height: 0; transition: height 0.15s ease; } .theme-scope .accordion-drop-zone.is-active { height: 12px; } .theme-scope .accordion-drop-zone.is-target { height: 12px; } .theme-scope .accordion-drop-zone .accordion-drop-indicator { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 2px; background-color: var(--color-primary); pointer-events: none; z-index: 10; } .theme-scope .accordion-drop-zone .accordion-drop-indicator::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background-color: var(--color-primary); } .theme-scope .tab-nav { padding: var(--space-tab-y) 0; border-bottom: 1px solid var(--color-border-tab); margin-bottom: var(--space-gap-lg); position: relative; } .theme-scope .tab-list { display: flex; gap: 1rem; flex-wrap: wrap; font-size: var(--text-sm); } .theme-scope .tab-button { background: none; border: none; cursor: pointer; padding: 0.25rem 0; position: relative; color: var(--color-tab); text-decoration: none; transition: color 0.15s ease-in-out; } .theme-scope .tab-button:hover { color: var(--color-tab-active); } .theme-scope .tab-button-active { color: var(--color-tab-active); font-weight: var(--font-emphasis-weight); } .theme-scope .tab-indicator { position: absolute; bottom: -0.5rem; left: 0; right: 0; height: 2px; background: var(--color-tab-active); } .theme-scope .tab-container { border: 1px solid var(--color-border-tab); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-white); } .theme-scope .tab-container-header { background: var(--color-bg-light); border-bottom: 1px solid var(--color-border-tab); display: flex; justify-content: space-between; align-items: center; padding: 0 1rem; } .theme-scope .tab-container-nav { display: flex; gap: 1.5rem; font-size: var(--text-sm); height: 100%; } .theme-scope .tab-container-button { height: 3rem; background: none; border: none; cursor: pointer; padding: var(--space-tab-y) 0; position: relative; color: var(--color-tab); transition: color 0.15s ease-in-out; } .theme-scope .tab-container-button:hover { color: var(--color-tab-active); } .theme-scope .tab-container-button-active { color: var(--color-tab-active); font-weight: var(--font-emphasis-weight); } .theme-scope .tab-container-indicator { position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--color-tab-active); z-index: 1; } .theme-scope .tab-container-actions { display: flex; gap: 0.5rem; align-items: center; } .theme-scope .tab-action-button { background: none; border: none; cursor: pointer; color: var(--color-tab); padding: 0.25rem; display: flex; align-items: center; transition: color 0.15s ease-in-out; } .theme-scope .tab-action-button:hover { color: var(--color-tab-active); } .theme-scope .tab-content { padding: 1rem 0; } .theme-scope .tab-container-content { padding: 0; } .theme-scope .tab-buttons { display: flex; flex-wrap: wrap; gap: var(--space-gap-sm); margin-bottom: var(--space-gap-lg); } .theme-scope .tab-buttons-sm { gap: 0.375rem; margin-bottom: var(--space-gap-md); } .theme-scope .tab-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.25rem; font-size: 0.9375rem; font-weight: var(--font-control-weight); line-height: var(--leading-normal); color: var(--color-text-secondary); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.15s ease-in-out; text-decoration: none; white-space: nowrap; } .theme-scope .tab-btn:hover:not(:disabled) { color: var(--color-text-primary); background-color: var(--color-bg-muted); border-color: var(--color-border-light); } .theme-scope .tab-btn:focus { outline: none; box-shadow: 0 0 0 3px var(--color-primary-ring); } .theme-scope .tab-btn-active { color: var(--color-primary); background-color: var(--color-primary-light); border-color: var(--color-primary); font-weight: var(--font-emphasis-weight); } .theme-scope .tab-btn-active:hover:not(:disabled) { color: var(--color-primary-hover); background-color: var(--color-primary-lighter); border-color: var(--color-primary-hover); } .theme-scope .tab-btn-disabled, .theme-scope .tab-btn:disabled { color: var(--color-text-muted); background-color: var(--color-bg-secondary); border-color: var(--color-border); cursor: not-allowed; opacity: 0.6; } .theme-scope .tab-btn-sm { padding: 0.375rem 0.875rem; font-size: 0.8125rem; border-radius: var(--radius-md); } .theme-scope .tab-btn-content { padding: 1rem 0; } .theme-scope .tab-modern-group { display: inline-flex; background-color: var(--color-bg-muted); padding: 0.25rem; border-radius: var(--radius-lg); gap: 0.25rem; margin-bottom: 0.25rem; } .theme-scope .tab-modern { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1rem; font-size: var(--text-sm); font-weight: var(--font-control-weight); line-height: 1.25rem; color: var(--color-text-secondary); background-color: transparent; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all 0.15s ease-in-out; white-space: nowrap; } .theme-scope .tab-modern:hover:not(.tab-modern-active) { color: var(--color-text-primary); background-color: var(--color-bg-hover); } .theme-scope .tab-modern-active { color: var(--color-text-primary); background-color: var(--color-white); box-shadow: var(--shadow-sm); font-weight: var(--font-control-weight); } .theme-scope .tab-modern:focus { outline: none; box-shadow: none; } .theme-scope .tab-pill-group { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 0; border-radius: var(--radius-full); background: var(--tab-pill-bg, var(--color-accent-pill-bg, var(--color-bg-muted))); overflow: hidden; } .theme-scope .tab-pill { min-height: 2rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--tab-pill-color, var(--color-text-primary)); font: inherit; font-size: var(--text-sm); font-weight: var(--font-control-weight); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.16s ease, color 0.16s ease; } .theme-scope .tab-pill:hover:not(.tab-pill-active) { color: var(--tab-pill-hover-color, var(--color-primary)); } .theme-scope .tab-pill-active, .theme-scope .tab-pill[aria-selected=true] { background: var(--tab-pill-active-bg, var(--color-primary)); color: var(--tab-pill-active-color, var(--color-primary-foreground, var(--color-white))); } .theme-scope .tab-pill-sm .tab-pill { min-height: 1.75rem; padding-inline: 0.875rem; font-size: var(--text-xs); } .theme-scope .tab-modern-content { padding: 0; } .theme-scope .tab-modern-content .text-muted { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); } .theme-scope .tab-modern-content .card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-white); max-width: 24rem; } .theme-scope .tab-modern-content .card-body { padding: 0rem; } .theme-scope .callout { margin-top: 1rem; padding: 1rem 1.5rem; background: var(--color-bg-light); border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: 1.5rem; } .theme-scope .callout-title { margin-top: 0; font-size: var(--text-base); font-weight: var(--font-emphasis-weight); color: inherit; margin-bottom: 0.5rem; } .theme-scope .callout p:last-child { margin-bottom: 0; } .theme-scope .callout pre { background: var(--color-white); padding: 1rem; border-radius: var(--radius-md); overflow-x: auto; margin-top: 1rem; } .theme-scope .callout-note { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text-neutral); } .theme-scope .callout-action { background-color: var(--color-info-light); border-color: var(--color-info); color: var(--color-info-dark); } .theme-scope .callout-warning { background-color: var(--color-warning-light); border-color: var(--color-warning); color: var(--color-warning-dark); } .theme-scope .callout-error { background-color: var(--color-danger-light); border-color: var(--color-danger); color: var(--color-danger-dark); } .theme-scope .alert { position: relative; width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--color-border); border-left: 3px solid var(--color-border); padding: 1rem; display: flex; align-items: flex-start; gap: 0.75rem; background-color: var(--color-bg-primary); color: var(--color-text-primary); margin-bottom: 1rem; /* Icon styling */ } .theme-scope .alert > svg, .theme-scope .alert > .iconify { flex-shrink: 0; width: 1rem; height: 1rem; margin-top: 0.25rem; /* Align with title line-height */ color: var(--color-text-primary); } .theme-scope .alert > div { flex: 1; } .theme-scope .alert-title { margin-top: 0; margin-bottom: 0.25rem; font-weight: var(--font-control-weight); line-height: var(--leading-normal); /* slightly relaxed to align with icon if needed, or 1 for tight */ color: inherit; } .theme-scope .alert-description { color: var(--color-text-secondary); line-height: var(--leading-normal); } .theme-scope .alert-description p { margin-bottom: 0.5rem; } .theme-scope .alert-description p:last-child { margin-bottom: 0; } .theme-scope .alert-default { background-color: var(--color-bg-primary); border-color: var(--color-border); } .theme-scope .alert-destructive { border-color: var(--color-danger); background-color: var(--color-danger-light); /* Added light background */ color: var(--color-danger-dark); /* Changed from danger to danger-dark for contrast on light bg */ } .theme-scope .alert-destructive > svg, .theme-scope .alert-destructive > .iconify { color: var(--color-danger); } .theme-scope .alert-destructive .alert-description { color: var(--color-danger-dark); /* Changed from danger to danger-dark */ } .theme-scope .alert-success { border-color: var(--color-success); background-color: var(--color-success-light); /* Added light background */ color: var(--color-success-dark); } .theme-scope .alert-success > svg, .theme-scope .alert-success > .iconify { color: var(--color-success); } .theme-scope .alert-success .alert-title { color: var(--color-success-dark); } .theme-scope .alert-success .alert-description { color: var(--color-success-dark); } .theme-scope .alert-warning { border-color: var(--color-warning); background-color: var(--color-warning-light); /* Added light background */ color: var(--color-warning-dark); } .theme-scope .alert-warning > svg, .theme-scope .alert-warning > .iconify { color: var(--color-warning); } .theme-scope .alert-warning .alert-title { color: var(--color-warning-dark); } .theme-scope .alert-warning .alert-description { color: var(--color-warning-dark); } .theme-scope .alert-info { border-color: var(--color-info); background-color: var(--color-info-light); /* Added light background */ color: var(--color-info-dark); } .theme-scope .alert-info > svg, .theme-scope .alert-info > .iconify { color: var(--color-info); } .theme-scope .alert-info .alert-title { color: var(--color-info-dark); } .theme-scope .alert-info .alert-description { color: var(--color-info-dark); } .theme-scope .accent-rail, .theme-scope .rail-card { position: relative; overflow: hidden; --accent-rail-color: var(--color-primary); --accent-rail-width: 4px; --accent-rail-inset-block: 0; --accent-rail-left: 0; --accent-rail-z: 1; } .theme-scope .accent-rail::before, .theme-scope .rail-card::before { content: ""; position: absolute; top: var(--accent-rail-inset-block); bottom: var(--accent-rail-inset-block); left: var(--accent-rail-left); z-index: var(--accent-rail-z); width: var(--accent-rail-width); border-radius: var(--accent-rail-radius, 0); background: var(--accent-rail-color); box-shadow: var(--accent-rail-shadow, none); pointer-events: none; } .theme-scope .accent-rail > *, .theme-scope .rail-card > * { position: relative; z-index: var(--accent-rail-content-z, 2); } .theme-scope .rail-card { display: grid; gap: 0.75rem; padding: 1rem 1rem 1rem calc(1rem + var(--accent-rail-width)); border: var(--rail-card-accent-border-width, 1px) solid var(--accent-rail-color); border-radius: var(--radius-lg); background: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .theme-scope .rail-card-sm { gap: 0.5rem; padding: 0.75rem 0.875rem 0.75rem calc(0.875rem + var(--accent-rail-width)); } .theme-scope .rail-card-lg { gap: 1rem; padding: 1.25rem 1.5rem 1.25rem calc(1.5rem + var(--accent-rail-width)); } .theme-scope .rail-card-header { display: flex; align-items: flex-start; gap: 0.75rem; min-width: 0; } .theme-scope .rail-card-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; margin-top: 0.125rem; color: var(--accent-rail-color); } .theme-scope .rail-card-icon > svg, .theme-scope .rail-card-icon.iconify { width: 1.125rem; height: 1.125rem; } .theme-scope .rail-card-heading, .theme-scope .rail-card-content { min-width: 0; } .theme-scope .rail-card-heading { display: grid; gap: 0.25rem; } .theme-scope .rail-card-eyebrow { color: var(--color-text-muted); font-family: var(--font-role-code, var(--font-mono)); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; } .theme-scope .rail-card-title { margin: 0; color: inherit; font-size: var(--text-base); font-weight: var(--font-emphasis-weight); line-height: var(--leading-tight); letter-spacing: 0; } .theme-scope .rail-card-description, .theme-scope .rail-card-content { color: var(--color-text-secondary); font-size: var(--text-sm); line-height: var(--leading-normal); } .theme-scope .rail-card-description, .theme-scope .rail-card-content p { margin: 0; } .theme-scope .rail-card-content p + p { margin-top: 0.5rem; } .theme-scope .rail-card-default, .theme-scope .rail-card-neutral { --accent-rail-color: var(--color-border-strong, var(--color-border)); } .theme-scope .rail-card-primary { --accent-rail-color: var(--color-primary); } .theme-scope .rail-card-info { --accent-rail-color: var(--color-info); } .theme-scope .rail-card-success { --accent-rail-color: var(--color-success); } .theme-scope .rail-card-warning { --accent-rail-color: var(--color-warning); } .theme-scope .rail-card-danger { --accent-rail-color: var(--color-danger); } .theme-scope .rail-card-muted { background: var(--color-bg-secondary); } .theme-scope .rail-card-tinted { background: linear-gradient(90deg, color-mix(in oklab, var(--accent-rail-color) 10%, transparent), transparent 42%), var(--color-bg-primary); } .theme-scope .rail-card-ghost { border-color: transparent; background: transparent; box-shadow: none; } .theme-scope summary { list-style: none; cursor: pointer; font-weight: 500; color: var(--color-text-primary); user-select: none; font-size: 0.875rem; } .theme-scope summary::-webkit-details-marker { display: none; } .theme-scope summary:hover { color: var(--color-primary); } .theme-scope details { border-radius: var(--radius-md); padding: 0; margin-bottom: 0; } .theme-scope .details-icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; font-size: 0.85rem; color: var(--color-text-secondary); transition: transform 0.2s ease; flex-shrink: 0; } .theme-scope details[open] > summary .details-icon { transform: rotate(90deg); } .theme-scope .details-toggle { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background-color: var(--color-bg-primary); transition: border-color 0.15s ease-in-out; } .theme-scope .details-toggle:hover { border-color: var(--color-border-light); } .theme-scope .details-summary { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 500; color: var(--color-text-primary); user-select: none; font-size: 0.875rem; background: var(--color-bg-primary); transition: background-color 0.2s; } .theme-scope .details-summary:hover { color: var(--color-primary); background: var(--color-bg-muted); } .theme-scope .details-toggle[open] .details-summary { margin-bottom: 0; } .theme-scope .details-content { padding: 0.5rem 0.75rem; color: var(--color-text-secondary); background: var(--color-bg-primary); } .theme-scope .details-summary-card { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: background-color 0.2s; } .theme-scope .details-summary-card:hover { background: var(--color-bg-muted); } .theme-scope .details-summary-minimal { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: color 0.2s; } .theme-scope .details-summary-minimal:hover { color: var(--color-primary); } .theme-scope details.details-minimal { border: none; background: none; padding: 0; margin-bottom: 0; border-radius: 0; } .theme-scope .details-summary-nested { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0; cursor: pointer; font-weight: 500; font-size: 0.875rem; transition: color 0.2s; } .theme-scope .details-summary-nested:hover { color: var(--color-primary); } .theme-scope .color-success { color: var(--color-success); } .theme-scope .color-warning { color: var(--color-warning); } .theme-scope .color-danger { color: var(--color-danger); } .theme-scope .color-info { color: var(--color-primary); } .theme-scope .color-text-primary { color: var(--color-text-primary); } .theme-scope .color-text-secondary { color: var(--color-text-secondary); } .theme-scope .color-text-muted { color: var(--color-text-muted); } .theme-scope .color-bg-primary { background-color: var(--color-bg-primary); } .theme-scope .color-bg-secondary { background-color: var(--color-bg-secondary); } .theme-scope .color-bg-muted { background-color: var(--color-bg-muted); } .theme-scope .color-success { color: var(--color-success); } .theme-scope .color-success-bg { background-color: var(--color-success-light); color: var(--color-success-dark); } .theme-scope .color-success-border { border-color: var(--color-success); } .theme-scope .color-success-text { color: var(--color-success-dark); } .theme-scope .color-success-link { color: var(--color-success-link); } .theme-scope .color-success-link:hover { color: var(--color-success-link-hover); } .theme-scope .color-warning { color: var(--color-warning); } .theme-scope .color-warning-bg { background-color: var(--color-warning-light); color: var(--color-warning-dark); } .theme-scope .color-warning-border { border-color: var(--color-warning); } .theme-scope .color-warning-text { color: var(--color-warning-dark); } .theme-scope .color-warning-link { color: var(--color-warning-link); } .theme-scope .color-warning-link:hover { color: var(--color-warning-link-hover); } .theme-scope .color-danger { color: var(--color-danger); } .theme-scope .color-danger-bg { background-color: var(--color-danger-light); color: var(--color-danger-dark); } .theme-scope .color-danger-border { border-color: var(--color-danger); } .theme-scope .color-danger-text { color: var(--color-danger-dark); } .theme-scope .color-danger-link { color: var(--color-danger-link); } .theme-scope .color-danger-link:hover { color: var(--color-danger-link-hover); } .theme-scope .color-info { color: var(--color-primary); } .theme-scope .color-info-bg { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); } .theme-scope .color-info-border { border-color: var(--color-primary); } .theme-scope .color-info-text { color: var(--color-primary-dark); } .theme-scope .color-info-link { color: var(--color-primary-hover); } .theme-scope .color-info-link:hover { color: var(--color-primary-active); } .theme-scope .color-neutral { color: var(--color-text-secondary); } .theme-scope .color-neutral-bg { background-color: var(--color-bg-muted); color: var(--color-text-neutral-dark); } .theme-scope .color-neutral-border { border-color: var(--color-border-light); } .theme-scope .color-neutral-text { color: var(--color-text-neutral); } .theme-scope .color-neutral-link { color: var(--color-neutral-link); } .theme-scope .color-neutral-link:hover { color: var(--color-neutral-link-hover); } .theme-scope .no-underline { text-decoration: none !important; } .theme-scope .hover-no-underline:hover { text-decoration: none !important; } .theme-scope .hidden { display: none !important; } .theme-scope .mb-0 { margin-bottom: 0 !important; } .theme-scope .stack-gap-normalize > * { margin-top: 0; margin-bottom: 0; } .theme-scope .stack-gap-normalize > .app-card, .theme-scope .stack-gap-normalize > .card { margin-bottom: 0; } .theme-scope [class*=gap-] > .app-card, .theme-scope [class*=gap-] > .card { margin-bottom: 0; } .theme-scope [class*=gap-] > p, .theme-scope [class*=gap-] > h1, .theme-scope [class*=gap-] > h2, .theme-scope [class*=gap-] > h3, .theme-scope [class*=gap-] > h4, .theme-scope [class*=gap-] > h5, .theme-scope [class*=gap-] > h6 { margin-top: 0; margin-bottom: 0; } .theme-scope .stack-gap-normalize > .field, .theme-scope [class*=gap-] > .field { margin-bottom: 0; } .theme-scope .stack-fill > * { flex: 1 1 0%; min-width: 0; /* Prevent overflow from flex children */ } .theme-scope .stack-fill.flex-wrap > * { flex: 1 1 auto; min-width: 200px; /* Minimum width before wrapping */ } .theme-scope .flex.flex-row > .app-card, .theme-scope .flex.flex-row > .card { flex: 1 1 0%; min-width: 0; } .theme-scope .flex.flex-row.flex-wrap > .app-card, .theme-scope .flex.flex-row.flex-wrap > .card { flex: 1 1 200px; /* Grow, shrink, min 200px basis before wrap */ min-width: 200px; } .theme-scope .badge { display: inline-flex; align-items: center; border-radius: var(--radius-md); padding: 0.125rem 0.5rem; font-size: var(--text-xs); font-weight: var(--font-control-weight); line-height: var(--leading-tight); white-space: nowrap; gap: 0.25rem; } .theme-scope .badge-default { background-color: var(--color-primary); color: var(--color-white); } .theme-scope .badge-secondary { background-color: var(--color-bg-muted); color: var(--color-text-neutral); } .theme-scope .badge-success { background-color: var(--color-success-light); color: var(--color-success-link-hover); } .theme-scope .badge-error, .theme-scope .badge-danger, .theme-scope .badge-destructive { background-color: var(--color-danger-light); color: var(--color-danger-link-hover); } .theme-scope .badge-info { background-color: var(--color-primary-lighter); color: var(--color-primary-dark); } .theme-scope .badge-warning { background-color: var(--color-warning-light); color: var(--color-warning-link-hover); } .theme-scope .badge-neutral { background-color: var(--color-bg-muted); color: var(--color-text-neutral); } .theme-scope .badge-outline { background-color: transparent; border: 1px solid var(--color-border-light); color: var(--color-text-secondary); } .theme-scope .badge-outline-default { background-color: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); } .theme-scope .badge-outline-secondary { background-color: transparent; border: 1px solid var(--color-border-light); color: var(--color-text-secondary); } .theme-scope .badge-outline-success { background-color: transparent; border: 1px solid var(--color-success); color: var(--color-success-link-hover); } .theme-scope .badge-outline-error, .theme-scope .badge-outline-danger, .theme-scope .badge-outline-destructive { background-color: transparent; border: 1px solid var(--color-danger); color: var(--color-danger-link-hover); } .theme-scope .badge-outline-info { background-color: transparent; border: 1px solid var(--color-primary); color: var(--color-primary-dark); } .theme-scope .badge-outline-warning { background-color: transparent; border: 1px solid var(--color-warning); color: var(--color-warning-link-hover); } .theme-scope .badge-pill { border-radius: var(--radius-full); } .theme-scope .badge-number { border-radius: var(--radius-full); padding: 0.125rem 0.375rem; font-size: 0.6875rem; min-width: 1.25rem; justify-content: center; background-color: var(--color-text-neutral-dark); color: var(--color-white); } .theme-scope .badge-number-secondary { background-color: var(--color-bg-muted); color: var(--color-text-neutral); } .theme-scope .badge-sm { font-size: 0.625rem; padding: 0.125rem 0.375rem; } .theme-scope .badge-md { font-size: var(--text-sm); padding: 0.25rem 0.75rem; max-height: 25px; } .theme-scope .badge-lg { font-size: var(--text-base); padding: 0.375rem 1rem; } .theme-scope .badge .iconify { display: inline-flex; align-items: center; font-size: var(--text-sm); width: 0.875rem; height: 0.875rem; } .theme-scope .badge-md .iconify { font-size: var(--text-base); width: 1rem; height: 1rem; } .theme-scope .badge-lg .iconify { font-size: var(--text-lg); width: 1.125rem; height: 1.125rem; } .theme-scope .data-list { display: flex; flex-direction: column; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background-color: var(--color-bg-primary); } .theme-scope .data-list-row { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg-primary); transition: background-color 0.15s ease; } .theme-scope .data-list-row:last-child { border-bottom: none; } .theme-scope .data-list-row:hover { background-color: var(--color-bg-secondary); } .theme-scope .data-list-row-content { display: flex; align-items: center; gap: 1rem; flex: 1; } .theme-scope .data-list-row-actions { display: flex; align-items: center; gap: 0.5rem; } .theme-scope .data-list-item-title { font-weight: 500; color: var(--color-text-primary); } .theme-scope .data-list-item-subtitle { font-size: 0.875rem; color: var(--color-text-secondary); } .theme-scope .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; text-align: center; background-color: var(--color-bg-secondary); border: 1px dashed var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-secondary); } .theme-scope .empty-state-icon { width: 3rem; height: 3rem; margin-bottom: 1rem; color: var(--color-text-muted); } .theme-scope .empty-state-title { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); margin-bottom: 0.5rem; } .theme-scope .empty-state-description { font-size: 0.875rem; max-width: 20rem; } .theme-scope .breadcrumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-size: 0.875rem; line-height: 20px; color: var(--color-text-secondary); margin-bottom: 1.5rem; } .theme-scope .breadcrumb-item { display: flex; align-items: center; gap: 0.5rem; } .theme-scope .breadcrumb-separator, .theme-scope .crumb-divider { color: var(--color-border-light); display: inline-flex; align-items: center; } .theme-scope .breadcrumb-link { color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s ease; } .theme-scope .breadcrumb-link:hover { color: var(--color-text-primary); text-decoration: underline; } .theme-scope .breadcrumb-current { color: var(--color-text-primary); font-weight: 500; } .theme-scope .breadcrumbs-chevron .crumb-divider { color: var(--color-border-light); } .theme-scope .breadcrumbs .crumb-divider svg { width: 16px; height: 16px; color: var(--color-border-light); } .theme-scope .back-link { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 20px; margin-bottom: 1.5rem; } .theme-scope .back-link svg { width: 16px; height: 16px; color: var(--color-text-secondary); } .theme-scope .back-link .breadcrumb-link { color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s ease; } .theme-scope .back-link .breadcrumb-link:hover { color: var(--color-text-primary); text-decoration: underline; } .theme-scope .crumb-ellipsis { color: var(--color-text-muted); } .theme-scope .breadcrumbs-small { font-size: 0.75rem; line-height: 18px; } .theme-scope .breadcrumbs-small .crumb-divider svg { width: 14px; height: 14px; } .theme-scope .breadcrumbs-large { font-size: 1rem; line-height: 24px; } .theme-scope .breadcrumbs-large .crumb-divider svg { width: 18px; height: 18px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .theme-scope .animate-spin { animation: spin 1s linear infinite; } .theme-scope .loading-overlay { position: absolute; inset: 0; background-color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; z-index: 50; backdrop-filter: blur(2px); border-radius: inherit; } .theme-scope .loading-skeleton { background-color: var(--color-bg-muted); border-radius: var(--radius-sm); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .theme-scope .avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; /* Intentionally NOT overflow: hidden — that would clip the .avatar-indicator where it crosses the circle boundary. Image and fallback each clip themselves via border-radius: inherit. */ user-select: none; width: 2.5rem; /* 40px - Default md */ height: 2.5rem; border-radius: var(--radius-full); /* Circle default */ background-color: var(--color-bg-secondary); } .theme-scope .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .theme-scope .avatar-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: var(--color-bg-muted); color: var(--color-text-secondary); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; border-radius: inherit; /* clip background to the avatar's shape */ overflow: hidden; /* keep initials inside on small sizes */ } .theme-scope .avatar-sm { width: 2rem; /* 32px */ height: 2rem; } .theme-scope .avatar-sm .avatar-fallback { font-size: 0.75rem; } .theme-scope .avatar-lg { width: 3rem; /* 48px */ height: 3rem; } .theme-scope .avatar-lg .avatar-fallback { font-size: 1rem; } .theme-scope .avatar-xl { width: 4rem; /* 64px */ height: 4rem; } .theme-scope .avatar-xl .avatar-fallback { font-size: 1.25rem; } .theme-scope .avatar-square { border-radius: 0; } .theme-scope .avatar-rounded { border-radius: var(--radius-lg); } .theme-scope .avatar-indicator { position: absolute; /* Sit at the ~4:30 position. With a bigger indicator we pull it slightly further toward the corner so it doesn't crowd the avatar's content. */ bottom: 2%; right: 2%; display: block; width: 40%; /* Relative to avatar size */ height: 40%; min-width: 14px; min-height: 14px; border-radius: var(--radius-full); border: 2px solid var(--color-bg-primary); /* Cutout effect */ background-color: var(--color-bg-muted); box-sizing: border-box; } .theme-scope .status-online { background-color: var(--color-success); } .theme-scope .status-busy { background-color: var(--color-danger); } .theme-scope .status-offline { background-color: var(--color-text-muted); } .theme-scope .avatar-group { display: flex; align-items: center; flex-direction: row; } .theme-scope .avatar-group .avatar { border: 2px solid var(--color-bg-primary); margin-right: -1rem; /* Tighter overlap */ transition: margin 0.2s ease, transform 0.2s ease, z-index 0.2s; } .theme-scope .avatar-group .avatar:hover { z-index: 10; transform: translateY(-2px); margin-right: 0; } .theme-scope .avatar-group .avatar:last-child { margin-right: 0; } .theme-scope .avatar-placeholder { background-color: var(--color-bg-secondary); color: var(--color-text-primary); font-size: 0.75rem; } .theme-scope .item { display: flex; flex-direction: column; padding: 1rem; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: background-color 0.15s ease, border-color 0.15s ease; } .theme-scope .item:hover { background-color: var(--color-bg-secondary); } .theme-scope .item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--color-border); } .theme-scope .item-content { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; } .theme-scope .item-title { font-weight: var(--font-control-weight); font-size: var(--text-base); color: var(--color-text-primary); margin-bottom: 0.25rem; } .theme-scope .item-description { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); } .theme-scope .item-actions { display: flex; align-items: center; gap: 0.5rem; } .theme-scope .item-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); font-size: var(--text-sm); color: var(--color-text-secondary); } .theme-scope .item > .flex { display: flex; align-items: center; gap: 1rem; } .theme-scope .item > .flex > .item-content { margin-top: 0; } .theme-scope .dropdown { position: relative; display: inline-block; } .theme-scope .dropdown-mega { position: static; } .theme-scope .dropdown-menu { position: absolute; top: 100%; left: 0; z-index: 50; /* Base z-index */ min-width: 12rem; padding: 0.25rem 0; /* Tighter padding */ margin-top: 0.25rem; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); /* Flyout Animation Defaults */ opacity: 0; transform: scale(0.95) translateY(-5px); transform-origin: top left; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s; pointer-events: none; visibility: hidden; } .theme-scope .dropdown-menu.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s; display: block; /* Force display */ z-index: 999; /* Ensure open state maintains high index */ } .theme-scope .dropdown-menu-right { left: auto; right: 0; transform-origin: top right; } .theme-scope .dropdown-menu-center { left: 50%; transform: translateX(-50%) scale(0.95) translateY(-5px); transform-origin: top center; } .theme-scope .dropdown-menu-center.open { transform: translateX(-50%) scale(1) translateY(0); } .theme-scope .dropdown-menu-w-sm { min-width: 10rem; } .theme-scope .dropdown-menu-w-md { min-width: 16rem; } .theme-scope .dropdown-menu-w-lg { min-width: 20rem; } .theme-scope .dropdown-menu-w-xl { min-width: 24rem; } .theme-scope .dropdown-mega-container { position: relative; /* Parent container for mega menu */ } .theme-scope .dropdown-menu-mega { position: absolute; left: 2rem; right: 2rem; width: auto; padding: 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; /* Override the transform animation - no scale to prevent width squishing */ transform: translateY(-5px); transform-origin: top center; } .theme-scope .dropdown-menu-mega.open { display: grid !important; /* Override .dropdown-menu.open display: block */ transform: translateY(0); overflow: hidden; /* Clip content to dropdown boundaries */ } .theme-scope .dropdown-menu-up, .theme-scope .dropdown-menu-top { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.25rem; transform: scale(0.95) translateY(5px); transform-origin: bottom left; } .theme-scope .dropdown-menu-up.open, .theme-scope .dropdown-menu-top.open { transform: scale(1) translateY(0); } .theme-scope .dropdown-menu-up.dropdown-menu-right, .theme-scope .dropdown-menu-top.dropdown-menu-right { transform-origin: bottom right; } .theme-scope .dropdown-menu-up.dropdown-menu-center, .theme-scope .dropdown-menu-top.dropdown-menu-center { transform: translateX(-50%) scale(0.95) translateY(5px); transform-origin: bottom center; } .theme-scope .dropdown-menu-up.dropdown-menu-center.open, .theme-scope .dropdown-menu-top.dropdown-menu-center.open { transform: translateX(-50%) scale(1) translateY(0); } .theme-scope .dropdown-header { display: block; padding: 0.5rem 1rem; margin-bottom: 0; font-size: var(--text-xs); font-weight: var(--font-emphasis-weight); color: var(--color-text-secondary); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.05em; } .theme-scope .dropdown-item { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 1rem; clear: both; font-weight: 400; color: var(--color-text-primary); text-align: inherit; white-space: nowrap; background-color: transparent; border: 0; cursor: pointer; text-decoration: none; transition: all 0.15s ease-in-out; font-size: var(--text-sm); } .theme-scope .dropdown-item:hover, .theme-scope .dropdown-item:focus { background-color: var(--color-bg-secondary); color: var(--color-primary); text-decoration: none; outline: none; } .theme-scope .dropdown-item.active { background-color: var(--color-primary-light); color: var(--color-primary); } .theme-scope .dropdown-item-description { display: block; font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 0.125rem; white-space: normal; } .theme-scope .dropdown-item-text { display: block; padding: 0.5rem 1rem; font-size: var(--text-sm); color: var(--color-text-primary); } .theme-scope .dropdown-item:hover .dropdown-item-description { color: var(--color-text-neutral-dark); } .theme-scope .dropdown-divider { height: 0; margin: 0.375rem 0; overflow: hidden; border-top: 1px solid var(--color-border-light); } .theme-scope .dropdown-item-icon { width: 1rem; height: 1rem; color: var(--color-text-muted); flex-shrink: 0; } .theme-scope .dropdown-item:hover .dropdown-item-icon { color: var(--color-primary); } .theme-scope .popover-content { position: absolute; top: 100%; left: 0; z-index: 50; padding: 1rem; margin-top: 0.5rem; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-dropdown); /* Flyout Animation Defaults */ opacity: 0; transform: scale(0.95) translateY(-5px); transform-origin: top left; transition: opacity 0.15s ease-out, transform 0.15s ease-out, visibility 0s linear 0.15s; pointer-events: none; visibility: hidden; } .theme-scope .popover-content.open { opacity: 1; transform: scale(1) translateY(0); pointer-events: auto; visibility: visible; transition-delay: 0s; } .theme-scope .popover-content-right { left: auto; right: 0; transform-origin: top right; } .theme-scope .popover-content-center { left: 50%; transform: translateX(-50%) scale(0.95) translateY(-5px); transform-origin: top center; } .theme-scope .popover-content-center.open { transform: translateX(-50%) scale(1) translateY(0); } .theme-scope .popover-content-up, .theme-scope .popover-content-top { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.5rem; transform: scale(0.95) translateY(5px); transform-origin: bottom left; } .theme-scope .popover-content-up.open, .theme-scope .popover-content-top.open { transform: scale(1) translateY(0); } .theme-scope .popover-content-up.popover-content-right, .theme-scope .popover-content-top.popover-content-right { transform-origin: bottom right; } .theme-scope .popover-content-up.popover-content-center, .theme-scope .popover-content-top.popover-content-center { transform: translateX(-50%) scale(0.95) translateY(5px); transform-origin: bottom center; } .theme-scope .popover-content-up.popover-content-center.open, .theme-scope .popover-content-top.popover-content-center.open { transform: translateX(-50%) scale(1) translateY(0); } .theme-scope .field { display: flex; flex-direction: column; gap: 0.375rem; } .theme-scope .field:last-child { margin-bottom: 0; } .theme-scope .field-horizontal { flex-direction: row; align-items: center; gap: 0.75rem; } .theme-scope .field-horizontal.items-start, .theme-scope .field-horizontal:has(.field-content) { align-items: flex-start; } .theme-scope .field-responsive { flex-direction: column; } @media (min-width: 640px) { .theme-scope .field-responsive { flex-direction: row; align-items: flex-start; gap: 1.5rem; } } .theme-scope .field-label { display: block; margin-bottom: 0; font-weight: var(--font-control-weight); color: var(--color-text-primary); font-size: var(--text-sm); line-height: var(--leading-normal); } .theme-scope .field-horizontal .field-label { margin-bottom: 0; margin-top: 0; line-height: var(--leading-normal); } .theme-scope .field-title { font-weight: var(--font-control-weight); color: var(--color-text-primary); font-size: var(--text-sm); line-height: var(--leading-normal); margin-bottom: 0; } .theme-scope .field-description { font-size: var(--text-sm); color: var(--color-text-muted); line-height: var(--leading-normal); margin: 0; } .theme-scope .field-horizontal .field-description { font-size: var(--text-sm); margin-bottom: 0; } .theme-scope .fieldset > .field-description { margin-bottom: 0.75rem; } .theme-scope .field-description + .form-input, .theme-scope .field-description + .form-select, .theme-scope .field-description + .form-textarea, .theme-scope .field-description + input, .theme-scope .field-description + select, .theme-scope .field-description + textarea, .theme-scope .field-description + .range-slider { margin-top: 0; } .theme-scope .fieldset .field-description + .field-group { margin-top: 0; } .theme-scope .field-content { display: flex; flex-direction: column; gap: 0.25rem; flex: 1; } .theme-scope .field-horizontal .field-content { flex: 1; } .theme-scope .field-responsive .field-content { flex: 0 0 auto; min-width: 8rem; } @media (min-width: 640px) { .theme-scope .field-responsive .field-content { min-width: 10rem; max-width: 12rem; } } .theme-scope .fieldset { border: none; padding: 0; margin: 0; min-width: 0; } .theme-scope .field-legend { font-size: var(--text-lg); font-weight: var(--font-emphasis-weight); color: var(--color-text-primary); margin-bottom: 0.375rem; line-height: var(--leading-normal); } .theme-scope .field-legend-label { font-size: var(--text-sm); font-weight: var(--font-control-weight); line-height: var(--leading-normal); margin-bottom: 0.375rem; } .theme-scope .field-group { display: flex; flex-direction: column; gap: 0.5rem; } .theme-scope .field-group > .field-separator { margin: 0.5rem 0 !important; flex-shrink: 0; } .theme-scope .field-group.gap-3 { gap: 0.5rem; } .theme-scope .fieldset .field-group .field-horizontal { margin-bottom: 0; } .theme-scope .space-y-2 > .field-horizontal { margin-bottom: 0; } .theme-scope .space-y-2 > .field-horizontal + .field-horizontal { margin-top: 0.5rem; } @container field-group (min-width: 640px) { .theme-scope .field-responsive { flex-direction: row; align-items: flex-start; gap: 1.5rem; } } .theme-scope .field-separator { display: block !important; height: 1px; background-color: var(--color-border); margin: 0; border: none; width: 100%; } .theme-scope .field-separator-with-label { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.75rem; color: var(--color-text-muted); font-size: var(--text-xs); line-height: var(--leading-normal); text-align: center; } .theme-scope .field-separator-with-label::before, .theme-scope .field-separator-with-label::after { height: 1px; background: var(--color-border); content: ""; } .theme-scope .field-invalid input, .theme-scope .field-invalid textarea, .theme-scope .field-invalid select, .theme-scope .field-invalid .form-input, .theme-scope .field-invalid .form-select { border-color: var(--color-danger); } .theme-scope .field-invalid input:focus, .theme-scope .field-invalid textarea:focus, .theme-scope .field-invalid select:focus, .theme-scope .field-invalid .form-input:focus, .theme-scope .field-invalid .form-select:focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-ring); } .theme-scope .field-error { font-size: var(--text-sm); color: var(--color-danger); margin: 0; line-height: var(--leading-normal); } .theme-scope .native-select-field { min-width: 0; } .theme-scope .native-select-wrapper { position: relative; display: grid; min-width: 0; } .theme-scope .native-select-wrapper::after { position: absolute; top: 50%; right: 0.75rem; width: 0.45rem; height: 0.45rem; border-right: 1.5px solid var(--color-text-muted); border-bottom: 1.5px solid var(--color-text-muted); content: ""; pointer-events: none; transform: translateY(-65%) rotate(45deg); } .theme-scope .native-select { width: 100%; padding-right: 2.25rem; appearance: none; } .theme-scope .native-select:disabled { cursor: not-allowed; opacity: 0.55; } .theme-scope .field-choice-card { display: block; padding: 0.75rem 1rem; border: 1px solid var(--color-choice-border); border-radius: var(--radius-lg); cursor: pointer; transition: all 0.15s ease-in-out; background-color: var(--color-choice-bg); } .theme-scope .field-choice-card:hover { background-color: var(--color-choice-bg-hover); border-color: var(--color-choice-border-hover); } .theme-scope .field-choice-card:has(input:checked) { border-color: var(--color-choice-border-checked); background-color: var(--color-choice-bg-checked); } .theme-scope .field-choice-card:has(input:focus) { outline: 2px solid var(--color-choice-ring); outline-offset: 2px; } .theme-scope .field-responsive input, .theme-scope .field-responsive textarea, .theme-scope .field-responsive select, .theme-scope .field-responsive .form-input, .theme-scope .field-responsive .form-select { width: 100%; max-width: 100%; } @media (min-width: 640px) { .theme-scope .field-responsive input, .theme-scope .field-responsive textarea, .theme-scope .field-responsive select, .theme-scope .field-responsive .form-input, .theme-scope .field-responsive .form-select { width: 100%; max-width: 24rem; flex: 0 1 auto; } } .theme-scope .field-horizontal input[type=checkbox], .theme-scope .field-horizontal input[type=radio], .theme-scope .field-horizontal .form-toggle { flex-shrink: 0; } .theme-scope .field-group .field-horizontal.field, .theme-scope .space-y-2 .field-horizontal.field { margin-bottom: 0; gap: 0.625rem; } .theme-scope .field-horizontal button { margin-right: 0.5rem; } .theme-scope .field-horizontal button:last-child { margin-right: 0; } .theme-scope .field input[aria-invalid=true], .theme-scope .field textarea[aria-invalid=true], .theme-scope .field select[aria-invalid=true] { border-color: var(--color-danger); } .theme-scope .field:has(.field-description) .field-label, .theme-scope .field:has(.field-description) .field-title { margin-bottom: 0; } .theme-scope .field:has(input:focus) .field-label, .theme-scope .field:has(textarea:focus) .field-label, .theme-scope .field:has(select:focus) .field-label { color: var(--color-primary); } .theme-scope .range-slider { position: relative; width: 100%; height: 1.25rem; margin-top: 0.5rem; } .theme-scope .range-slider-track { position: absolute; top: 50%; left: 0; right: 0; height: 0.25rem; background: var(--color-border-light); border-radius: var(--radius-full); transform: translateY(-50%); } .theme-scope .range-slider-range { position: absolute; height: 100%; background: var(--color-primary); border-radius: var(--radius-full); } .theme-scope .range-slider-input { position: absolute; width: 100%; height: 0.25rem; top: 50%; transform: translateY(-50%); background: transparent; pointer-events: none; appearance: none; -webkit-appearance: none; margin: 0; padding: 0; } .theme-scope .range-slider-input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; pointer-events: all; width: 1rem; height: 1rem; background: var(--color-bg-primary); border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease-in-out; } .theme-scope .range-slider-input::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input::-webkit-slider-thumb:active { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input::-moz-range-thumb { pointer-events: all; width: 1rem; height: 1rem; background: var(--color-bg-primary); border: 2px solid var(--color-primary); border-radius: 50%; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow 0.15s ease-in-out; } .theme-scope .range-slider-input::-moz-range-thumb:hover { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input::-moz-range-thumb:active { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input:focus { outline: none; } .theme-scope .range-slider-input:focus::-webkit-slider-thumb { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input:focus::-moz-range-thumb { box-shadow: 0 0 0 4px var(--color-primary-ring); } .theme-scope .range-slider-input-min { z-index: 4; } .theme-scope .range-slider-input-max { z-index: 3; } .theme-scope .code-block { position: relative; border: 1px solid var(--color-code-border, var(--color-border)); border-radius: var(--radius-lg); background-color: var(--color-code-bg-dark); color: var(--color-code-text-dark); margin-bottom: 1.5rem; overflow: hidden; } .theme-scope .code-block-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: var(--color-code-header-bg); border-bottom: 1px solid var(--color-code-border, var(--color-border)); } .theme-scope .code-block-header:has(.tab-nav) { padding-bottom: 0; border-bottom: 0; align-items: flex-end; } .theme-scope .code-block-header .tab-nav { /* nav already has padding: var(--space-tab-y) 0 + border-bottom; just kill its standalone bottom-margin so it sits flush. */ margin-bottom: 0; flex: 1; } .theme-scope .code-block-header .tab-list { gap: 1.25rem; } .theme-scope .code-block-title { font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-secondary); } .theme-scope .code-block-tabs { display: flex; gap: 1rem; } .theme-scope .code-block-tab { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: var(--text-sm); font-weight: var(--font-control-weight); padding: 0.25rem 0; position: relative; transition: color 0.2s; } .theme-scope .code-block-tab:hover { color: var(--color-text-primary); } .theme-scope .code-block-tab.active { color: var(--color-text-primary); } .theme-scope .code-block-tab.active::after { content: ""; position: absolute; bottom: -0.75rem; /* align with header bottom padding */ left: 0; width: 100%; height: 1px; background-color: var(--color-primary); } .theme-scope .code-block-actions { display: flex; align-items: center; gap: 0.5rem; } .theme-scope .code-copy-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 0.25rem; border-radius: var(--radius-sm); transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .theme-scope .code-copy-btn:hover { background-color: var(--color-bg-muted); color: var(--color-text-primary); } .theme-scope .code-block-content { position: relative; padding: 1rem; overflow-x: auto; font-family: var(--font-role-code, var(--font-mono, ui-monospace, monospace)); font-size: var(--text-sm); line-height: var(--leading-normal); } .theme-scope .code-block-content pre { margin: 0; padding: 0; background: transparent; color: inherit; font-family: inherit; border: 0; border-radius: 0; } .theme-scope .code-block-content code { font-family: inherit; color: inherit; } .theme-scope .code-block.collapsed .code-block-content { max-height: 150px; /* Adjust as needed */ overflow-y: hidden; } .theme-scope .code-block-expand-overlay { position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to bottom, transparent, var(--color-code-bg-dark) 90%); display: flex; align-items: center; justify-content: center; padding-top: 2rem; pointer-events: none; } .theme-scope .code-block-expand-btn { pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; background-color: var(--color-bg-primary); color: var(--color-primary); border: 1px solid currentColor; padding: var(--space-btn-sm-y) var(--space-btn-x); border-radius: var(--radius-button); font-size: var(--text-xs); font-weight: var(--font-control-weight); line-height: var(--leading-normal); cursor: pointer; transition: all 0.15s ease-in-out; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05)); } .theme-scope .code-block-expand-btn:hover { background-color: var(--color-primary-light); color: var(--color-primary-hover); } .theme-scope .code-block-expand-btn:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-primary-ring); } .theme-scope .code-header-expand-btn { background: none; border: none; color: var(--color-text-muted); cursor: pointer; font-size: var(--text-xs); font-weight: var(--font-control-weight); padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); transition: color 0.2s; } .theme-scope .code-header-expand-btn:hover { color: var(--color-text-primary); background-color: var(--color-bg-muted); } .theme-scope .code-command { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: var(--color-code-bg-dark); color: var(--color-code-text-dark); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-family: var(--font-role-code, var(--font-mono, ui-monospace, monospace)); font-size: var(--text-sm); } .theme-scope .code-command-text { margin-right: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-scope .code-command-prefix { color: var(--color-text-muted); margin-right: 0.5rem; user-select: none; } .theme-scope .code-block.simple .code-copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 10; } .theme-scope code[class*=language-], .theme-scope pre[class*=language-] { color: var(--color-code-text-dark); text-shadow: none; } .theme-scope .token.comment, .theme-scope .token.prolog, .theme-scope .token.doctype, .theme-scope .token.cdata { color: var(--color-syntax-comment); } .theme-scope .token.punctuation { color: var(--color-syntax-punctuation); } .theme-scope .token.property, .theme-scope .token.tag, .theme-scope .token.boolean, .theme-scope .token.number, .theme-scope .token.constant, .theme-scope .token.symbol, .theme-scope .token.deleted { color: var(--color-syntax-number); } .theme-scope .token.selector, .theme-scope .token.attr-name, .theme-scope .token.string, .theme-scope .token.char, .theme-scope .token.builtin, .theme-scope .token.inserted { color: var(--color-syntax-string); } .theme-scope .token.operator, .theme-scope .token.entity, .theme-scope .token.url, .theme-scope .language-css .token.string, .theme-scope .style .token.string { color: var(--color-syntax-operator); } .theme-scope .token.atrule, .theme-scope .token.attr-value, .theme-scope .token.keyword { color: var(--color-syntax-keyword); } .theme-scope .token.function, .theme-scope .token.class-name { color: var(--color-syntax-function); } .theme-scope .token.regex, .theme-scope .token.important, .theme-scope .token.variable { color: var(--color-syntax-property); } .theme-scope .token.important, .theme-scope .token.bold { font-weight: bold; } .theme-scope .token.italic { font-style: italic; } .theme-scope .token.entity { cursor: help; } .theme-scope .toast-container { position: fixed; bottom: var(--space-gap-lg); right: var(--space-gap-lg); z-index: 100; display: flex; flex-direction: column; gap: 0.75rem; max-width: 24rem; width: 100%; pointer-events: none; /* Allow clicking through the container */ } .theme-scope .toast { pointer-events: auto; /* Re-enable pointer events for toasts */ background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-gap-md); box-shadow: var(--shadow-toast); display: flex; align-items: flex-start; gap: 0.75rem; transition: all 0.3s ease; transform-origin: bottom right; /* Animation classes will be handled by Alpine x-transition */ } .dark .theme-scope .toast, .theme-scope.dark .toast { background-color: var(--color-bg-secondary); /* Slightly lighter than page bg for contrast */ box-shadow: var(--shadow-toast-outer), var(--shadow-toast-inner); } .dark .theme-scope .toast-success, .theme-scope.dark .toast-success { box-shadow: var(--shadow-toast-outer), 0 0 20px -5px color-mix(in srgb, var(--color-success) 20%, transparent); } .dark .theme-scope .toast-error, .theme-scope.dark .toast-error { box-shadow: var(--shadow-toast-outer), 0 0 20px -5px color-mix(in srgb, var(--color-danger) 20%, transparent); } .dark .theme-scope .toast-warning, .theme-scope.dark .toast-warning { box-shadow: var(--shadow-toast-outer), 0 0 20px -5px color-mix(in srgb, var(--color-warning) 20%, transparent); } .dark .theme-scope .toast-info, .theme-scope.dark .toast-info { box-shadow: var(--shadow-toast-outer), 0 0 20px -5px color-mix(in srgb, var(--color-info) 20%, transparent); } .theme-scope .toast-content { flex: 1; } .theme-scope .toast-title { font-weight: var(--font-emphasis-weight); font-size: var(--text-sm); color: var(--color-text-primary); margin-bottom: 0.25rem; } .theme-scope .toast-description { font-size: var(--text-sm); color: var(--color-text-secondary); } .theme-scope .toast-close { color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.2s; } .theme-scope .toast-close:hover { opacity: 1; } .theme-scope .toast-default { border-left: 4px solid var(--color-border); } .theme-scope .toast-success { border-left: 4px solid var(--color-success); } .theme-scope .toast-success .toast-icon { color: var(--color-success); } .theme-scope .toast-error { border-left: 4px solid var(--color-danger); } .theme-scope .toast-error .toast-icon { color: var(--color-danger); } .theme-scope .toast-warning { border-left: 4px solid var(--color-warning); } .theme-scope .toast-warning .toast-icon { color: var(--color-warning); } .theme-scope .toast-info { border-left: 4px solid var(--color-primary); } .theme-scope .toast-info .toast-icon { color: var(--color-primary); } .theme-scope .pagination { display: flex; align-items: center; justify-content: flex-start; /* Or center depending on pref, usually start or based on container */ } .theme-scope .pagination-content { display: flex; flex-direction: row; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; } .theme-scope .pagination-item { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.75rem; font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-primary); background-color: transparent; border-radius: var(--radius-md); text-decoration: none; transition: all 0.15s ease-in-out; cursor: pointer; } .theme-scope .pagination-item:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); } .theme-scope .pagination-item.active { background-color: var(--color-white); color: var(--color-text-primary); border: 1px solid var(--color-border); font-weight: var(--font-emphasis-weight); /* Box shadow similar to buttons if needed, or flat */ box-shadow: var(--shadow-sm); } .theme-scope .pagination-item.icon-only { padding: 0; width: 2.25rem; } .theme-scope .pagination-previous, .theme-scope .pagination-next { display: inline-flex; align-items: center; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; width: auto; } .theme-scope .pagination-previous svg, .theme-scope .pagination-next svg { width: 1rem; height: 1rem; } .theme-scope .pagination-ellipsis { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--color-text-muted); } .theme-scope .toggle-group { display: inline-flex; align-items: center; justify-content: center; gap: 0; background-color: transparent; border-radius: var(--radius-sm); padding: 0; border: 1px solid var(--color-border); } .theme-scope .toggle-group-item { display: inline-flex; align-items: center; justify-content: center; border-radius: 0; padding: 0.375rem 0.5rem; min-width: 2rem; min-height: 2rem; font-size: var(--text-sm); font-weight: 400; line-height: 1.25rem; color: var(--color-text-secondary); background-color: var(--color-bg-primary); border: none; border-right: 1px solid var(--color-border); cursor: pointer; transition: background-color 0.1s ease, color 0.1s ease; white-space: nowrap; position: relative; } .theme-scope .toggle-group-item:first-child { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .theme-scope .toggle-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; border-right: none; } .theme-scope .toggle-group-item:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; z-index: 10; } .theme-scope .toggle-group-item:hover:not(:disabled):not([data-state=on]) { background-color: var(--color-bg-muted); } .theme-scope .toggle-group-item[data-state=on], .theme-scope .toggle-group-item.selected { background-color: var(--color-primary-light); color: var(--color-primary); z-index: 1; } .theme-scope .toggle-group-item:disabled, .theme-scope .toggle-group-item[disabled] { pointer-events: none; opacity: 0.38; color: var(--color-text-muted); } .theme-scope .toggle-group-item svg, .theme-scope .toggle-group-item .iconify { width: 1.125rem; height: 1.125rem; flex-shrink: 0; } .theme-scope .toggle-group-item svg + span, .theme-scope .toggle-group-item .iconify + span { margin-left: 0.375rem; } .theme-scope .toggle-group.toggle-group-outline { background-color: transparent; border: none; padding: 0; gap: 2px; /* Small gap between buttons */ } .theme-scope .toggle-group.toggle-group-outline .toggle-group-item { border-radius: var(--radius-sm); border: 1px solid transparent; border-right: none; } .theme-scope .toggle-group.toggle-group-outline .toggle-group-item:first-child { border-top-left-radius: 0.25rem; border-bottom-left-radius: 0.25rem; } .theme-scope .toggle-group.toggle-group-outline .toggle-group-item:last-child { border-top-right-radius: 0.25rem; border-bottom-right-radius: 0.25rem; } .theme-scope .toggle-group.toggle-group-outline .toggle-group-item:hover:not(:disabled):not([data-state=on]) { background-color: var(--color-bg-muted); } .theme-scope .toggle-group.toggle-group-outline .toggle-group-item[data-state=on], .theme-scope .toggle-group.toggle-group-outline .toggle-group-item.selected { background-color: var(--color-primary-light); color: var(--color-primary); border-color: transparent; } .theme-scope .toggle-group-sm .toggle-group-item { padding: 0.25rem 0.375rem; min-width: 1.75rem; min-height: 1.75rem; font-size: 0.8125rem; } .theme-scope .toggle-group-sm .toggle-group-item svg, .theme-scope .toggle-group-sm .toggle-group-item .iconify { width: 1rem; height: 1rem; } .theme-scope .toggle-group-lg .toggle-group-item { padding: var(--space-input-y) var(--space-input-x); min-width: 2.5rem; min-height: 2.5rem; font-size: 0.9375rem; } .theme-scope .toggle-group-lg .toggle-group-item svg, .theme-scope .toggle-group-lg .toggle-group-item .iconify { width: 1.25rem; height: 1.25rem; } .theme-scope .toggle-group-vertical { flex-direction: column; } .theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item { width: 100%; margin-left: 0; margin-top: -1px; border-left: none; border-top: 1px solid transparent; } .theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 0; } .theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); } .theme-scope .toggle-group-vertical.toggle-group-outline .toggle-group-item + .toggle-group-item { border-top: 1px solid var(--color-border); border-left: none; } .theme-scope .section-heading { font-size: var(--text-lg); font-weight: var(--font-heading-weight); color: var(--color-text-primary); margin-bottom: 1rem; line-height: var(--leading-tight); } .theme-scope .section-description { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: 1rem; } .theme-scope .subsection-heading { font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-secondary); margin-bottom: 0.5rem; } .theme-scope .caption { font-size: var(--text-xs); color: var(--color-text-muted); } .theme-scope .fine-print { font-size: var(--text-sm); color: var(--color-text-muted); } .theme-scope .brand-text { font-size: var(--text-xl); font-weight: var(--font-display-weight); letter-spacing: -0.025em; color: var(--color-text-primary); } .theme-scope .hero-title { font-size: var(--text-4xl); font-weight: var(--font-display-weight); letter-spacing: -0.025em; color: var(--color-text-primary); line-height: 1.1; } @media (min-width: 768px) { .theme-scope .hero-title { font-size: var(--text-5xl); } } .theme-scope .hero-accent { color: var(--color-primary); } .theme-scope .hero-description { font-size: var(--text-lg); color: var(--color-text-secondary); } .theme-scope .nav-link { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s ease; } .theme-scope .nav-link:hover { color: var(--color-text-primary); } .theme-scope .footer-link { color: var(--color-text-secondary); text-decoration: none; transition: color 0.15s ease; } .theme-scope .footer-link:hover { color: var(--color-primary); } .theme-scope .social-link { color: var(--color-text-muted); transition: color 0.15s ease; } .theme-scope .social-link:hover { color: var(--color-text-secondary); } .theme-scope .badge-dark { background-color: var(--color-text-primary); color: var(--color-white); padding: 0.25rem 0.5rem; border-radius: var(--radius-lg); font-size: var(--text-xs); font-weight: var(--font-control-weight); display: inline-block; } .theme-scope .icon-placeholder { color: var(--color-border-default); opacity: 0.6; } .theme-scope .text-accent { color: var(--color-primary); } .theme-scope .bg-accent { background-color: var(--color-primary); } .theme-scope .bg-accent-light { background-color: var(--color-primary-ring); } .theme-scope .border-accent { border-color: var(--color-primary); } .theme-scope .loading-spinner { color: var(--color-primary); animation: spin 1s linear infinite; } .theme-scope .status-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; } .theme-scope .status-success { background-color: var(--color-success); } .theme-scope .status-danger { background-color: var(--color-danger); } .theme-scope .status-warning { background-color: var(--color-warning); } .theme-scope .interactive-danger:hover { background-color: var(--color-danger-bg); } .theme-scope .btn-ghost-danger { color: var(--color-danger); } .theme-scope .btn-ghost-danger:hover { color: var(--color-danger); background-color: var(--color-danger-bg); } .theme-scope .text-success { color: var(--color-success); } .theme-scope .text-warning { color: var(--color-warning); } .theme-scope .text-danger { color: var(--color-danger); } .theme-scope .text-inverse { color: var(--color-white); } .theme-scope .text-muted { color: var(--color-text-muted); } .theme-scope .help-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.25rem; } .theme-scope .demo-container { padding: var(--space-gap-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-muted); } .theme-scope .demo-container-tall { padding: var(--space-gap-md); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-muted); min-height: 16rem; display: flex; align-items: flex-start; justify-content: center; position: relative; overflow: visible; z-index: 10; } .theme-scope .demo-container-sm { padding: 1rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-muted); } .theme-scope .surface { background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .theme-scope .surface-muted { background-color: var(--color-bg-muted); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .theme-scope .text-primary { color: var(--color-text-primary); } .theme-scope .text-secondary { color: var(--color-text-secondary); } .theme-scope .text-muted { color: var(--color-text-muted); } .theme-scope .text-accent { color: var(--color-primary); } .theme-scope .text-success { color: var(--color-success); } .theme-scope .text-danger { color: var(--color-danger); } .theme-scope .text-warning { color: var(--color-warning); } .theme-scope .bg-primary { background-color: var(--color-bg-primary); } .theme-scope .bg-muted { background-color: var(--color-bg-muted); } .theme-scope .bg-secondary { background-color: var(--color-bg-secondary); } .theme-scope .interactive { transition: background-color 0.15s ease, color 0.15s ease; } .theme-scope .interactive:hover { background-color: var(--color-bg-muted); } .theme-scope .interactive-link { color: var(--color-text-secondary); transition: color 0.15s ease; } .theme-scope .interactive-link:hover { color: var(--color-text-primary); } .theme-scope .accent-link { color: var(--color-text-secondary); transition: color 0.15s ease; } .theme-scope .accent-link:hover { color: var(--color-primary); } .theme-scope .iconify { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; line-height: 1; } .theme-scope .icon-muted { color: var(--color-text-muted); } .theme-scope .icon-interactive { color: var(--color-text-muted); transition: color 0.15s ease; } .theme-scope .icon-interactive:hover { color: var(--color-text-secondary); } .theme-scope .icon-success { color: var(--color-success); } .theme-scope .icon-danger { color: var(--color-danger); } .theme-scope .icon-warning { color: var(--color-warning); } .theme-scope .icon-accent { color: var(--color-primary); } .theme-scope .border-light { border: 1px solid var(--color-border-light); } .theme-scope .divider { border-top: 1px solid var(--color-border); } .theme-scope .divider-b { border-bottom: 1px solid var(--color-border); } .theme-scope .stat-box { padding: 0.75rem; background-color: var(--color-bg-muted); border-radius: var(--radius-lg); } .theme-scope .stat-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); } .theme-scope .stat-value { font-size: var(--text-2xl); font-weight: var(--font-display-weight); color: var(--color-text-primary); } .theme-scope .stat-change-positive { font-size: var(--text-xs); color: var(--color-success); } .theme-scope .stat-change-negative { font-size: var(--text-xs); color: var(--color-danger); } .theme-scope .nav-link { font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-secondary); transition: color 0.15s ease; text-decoration: none; } .theme-scope .nav-link:hover { color: var(--color-text-primary); } .theme-scope .brand-text { font-size: var(--text-xl); font-weight: var(--font-display-weight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); } .theme-scope .footer-link { color: var(--color-text-secondary); transition: color 0.15s ease; text-decoration: none; } .theme-scope .footer-link:hover { color: var(--color-primary); } .theme-scope .social-link { color: var(--color-text-muted); transition: color 0.15s ease; } .theme-scope .social-link:hover { color: var(--color-text-secondary); } .theme-scope .hero-title { font-size: var(--text-4xl); font-weight: var(--font-display-weight); letter-spacing: var(--tracking-tight); color: var(--color-text-primary); line-height: var(--leading-tight); } .theme-scope .hero-accent { color: var(--color-primary); } .theme-scope .hero-description { font-size: var(--text-lg); color: var(--color-text-secondary); } .theme-scope .fine-print { font-size: var(--text-sm); color: var(--color-text-muted); } .theme-scope .panel-header { width: 100%; padding: 0.75rem 1rem; display: flex; align-items: center; justify-content: space-between; background-color: var(--color-bg-primary); border-radius: var(--radius-lg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: background-color 0.15s ease; cursor: pointer; } .theme-scope .panel-header:has(+ *:not([style*="display: none"])):not(:has(+ [x-show]:not([style]))) { border-bottom: 1px solid var(--color-border); } .theme-scope .panel-header[aria-expanded=true] { border-bottom: 1px solid var(--color-border); } .theme-scope .panel-header:hover { background-color: var(--color-bg-muted); } .theme-scope .accordion-borderless .panel-header { border-radius: 0; background-color: transparent; border-bottom: none; } .theme-scope .accordion-borderless .panel-header[aria-expanded=true] { border-bottom: none; } .theme-scope .accordion-borderless .panel-header:has(+ *:not([style*="display: none"])):not(:has(+ [x-show]:not([style]))) { border-bottom: none; } .theme-scope .accordion-borderless .panel-header:hover { background-color: var(--color-bg-muted); } .theme-scope .panel-content { padding: 1rem; font-size: var(--text-sm); color: var(--color-text-secondary); } .theme-scope .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .theme-scope .grid-2-responsive { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .theme-scope .grid-2-responsive { grid-template-columns: repeat(2, 1fr); } } .theme-scope .focus-ring:focus { outline: none; box-shadow: 0 0 0 2px var(--color-primary-ring); border-color: var(--color-primary); } .theme-scope .focus-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--color-primary-ring); border-color: var(--color-primary); } .theme-scope .tooltip { position: absolute; bottom: 100%; right: 0; margin-bottom: 0.5rem; padding: 0.375rem 0.75rem; font-size: var(--text-xs); color: var(--color-white); background-color: var(--color-text-primary); border-radius: var(--radius-md); box-shadow: var(--shadow-dropdown); white-space: nowrap; z-index: 50; pointer-events: none; } .theme-scope .tooltip-arrow { position: absolute; top: 100%; right: 0.375rem; margin-top: -0.25rem; border-width: 0.25rem; border-style: solid; border-color: var(--color-text-primary) transparent transparent transparent; } .theme-scope .calendar-widget { --calendar-cell-size: 36px; --calendar-gap: 2px; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 1rem; box-shadow: var(--shadow-card); } .theme-scope .calendar-widget-xs { --calendar-cell-size: 24px; padding: 0.75rem; font-size: 0.75rem; } .theme-scope .calendar-widget-xs .calendar-nav-title { font-size: 0.75rem; } .theme-scope .calendar-widget-xs .calendar-weekday { font-size: 0.625rem; } .theme-scope .calendar-widget-sm { --calendar-cell-size: 32px; padding: 0.875rem; } .theme-scope .calendar-widget-sm .calendar-nav-title { font-size: 0.8125rem; } .theme-scope .calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; gap: 0.5rem; } .theme-scope .calendar-nav-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid transparent; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; } .theme-scope .calendar-nav-btn:hover { background-color: var(--color-bg-secondary); border-color: var(--color-border); color: var(--color-text-primary); } .theme-scope .calendar-nav-btn .iconify { font-size: 1.125rem; } .theme-scope .calendar-nav-title { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); text-align: center; flex: 1; } .theme-scope .calendar-dropdowns { display: flex; gap: 0.375rem; flex: 1; justify-content: center; } .theme-scope .calendar-dropdown { padding: 0.25rem 0.5rem; font-size: 0.8125rem; font-family: inherit; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-primary); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%2371717a' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 20px; } .theme-scope .calendar-dropdown:hover { border-color: var(--color-primary); } .theme-scope .calendar-dropdown:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-ring); } .theme-scope .calendar-grid { display: flex; flex-direction: column; gap: var(--calendar-gap); } .theme-scope .calendar-weekdays { display: flex; gap: var(--calendar-gap); } .theme-scope .calendar-weekday { width: var(--calendar-cell-size); height: calc(var(--calendar-cell-size) * 0.75); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .theme-scope .calendar-week { display: flex; gap: var(--calendar-gap); } .theme-scope .calendar-day { width: var(--calendar-cell-size); height: var(--calendar-cell-size); display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-family: inherit; background: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-primary); cursor: pointer; position: relative; transition: all 0.1s ease; } .theme-scope .calendar-day:hover:not(:disabled) { background-color: var(--color-bg-secondary); } .theme-scope .calendar-day:focus { outline: none; box-shadow: 0 0 0 2px var(--color-ring); z-index: 1; } .theme-scope .calendar-day-outside { color: var(--color-text-muted); opacity: 0.5; } .theme-scope .calendar-day-today { background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); font-weight: 600; } .theme-scope .calendar-day-selected { background-color: var(--color-primary) !important; color: var(--color-text-on-dark) !important; font-weight: 600; } .theme-scope .calendar-day-selected:hover { background-color: var(--color-primary-hover) !important; color: var(--color-text-on-dark) !important; } .theme-scope .calendar-day-in-range { background-color: var(--color-primary-light); border-radius: 0; } .theme-scope .calendar-day-range-start { background-color: var(--color-primary) !important; color: var(--color-text-on-dark) !important; border-top-left-radius: 0.375rem !important; border-bottom-left-radius: 0.375rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .theme-scope .calendar-day-range-end { background-color: var(--color-primary) !important; color: var(--color-text-on-dark) !important; border-top-right-radius: 0.375rem !important; border-bottom-right-radius: 0.375rem !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .theme-scope .calendar-day-range-start.calendar-day-range-end { border-radius: var(--radius-md) !important; } .theme-scope .calendar-day-disabled { color: var(--color-text-muted) !important; opacity: 0.3; cursor: not-allowed; } .theme-scope .date-picker-trigger { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; font-size: 0.875rem; font-family: inherit; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-primary); cursor: pointer; transition: all 0.15s ease; min-width: 240px; justify-content: flex-start; } .theme-scope .date-picker-trigger:hover { border-color: var(--color-primary); background-color: var(--color-bg-secondary); } .theme-scope .date-picker-trigger:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-ring); } .theme-scope .date-picker-trigger .date-picker-icon { color: var(--color-text-muted); font-size: 1.125rem; flex-shrink: 0; } .theme-scope .calendar-footer { display: flex; justify-content: center; margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border); } .theme-scope .calendar-today-btn { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.8125rem; font-family: inherit; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; } .theme-scope .calendar-today-btn:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); border-color: var(--color-primary); } .theme-scope .calendar-today-btn .iconify { font-size: 1rem; } .theme-scope .calendar-range-container { display: flex; gap: 1.5rem; justify-content: center; } .theme-scope .calendar-range-container .calendar-widget { border: none; box-shadow: none; padding: 0; background: transparent; } .theme-scope .calendar-view-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; padding: 0.25rem; background-color: var(--color-bg-muted); border-radius: var(--radius-lg); } .theme-scope .calendar-view-btn { flex: 1; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; background-color: transparent; border: none; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; } .theme-scope .calendar-view-btn:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); } .theme-scope .calendar-view-btn.active { background-color: var(--color-bg-primary); color: var(--color-text-primary); box-shadow: var(--shadow-sm); } .theme-scope .calendar-range-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; } .theme-scope .calendar-range-label { font-size: 0.875rem; color: var(--color-text-secondary); } .theme-scope .datetime-picker-container { display: flex; flex-direction: column; gap: 1rem; position: relative; } .theme-scope .datetime-picker-row { display: flex; gap: 1rem; align-items: flex-start; } .theme-scope .datetime-field { display: flex; flex-direction: column; gap: 0.375rem; position: relative; } .theme-scope .datetime-picker-container .date-picker-trigger { min-width: 180px; height: 38px; padding: 0.5rem 0.75rem; justify-content: space-between; } .theme-scope .datetime-label { font-size: 0.875rem; font-weight: 500; color: var(--color-text-primary); } .theme-scope .time-picker-single-input { width: 140px; height: 38px; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-family: inherit; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-primary); cursor: text; transition: all 0.15s ease; /* Style the clock icon */ } .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator { filter: invert(0); opacity: 0.6; cursor: pointer; } .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator:hover { opacity: 1; } .theme-scope .time-picker-single-input:hover { border-color: var(--color-primary); } .theme-scope .time-picker-single-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-ring); } .theme-scope .time-picker-single-input::placeholder { color: var(--color-text-muted); } .dark .theme-scope .time-picker-single-input, .dark .theme-scope input[type=time], .dark .theme-scope input[type=date], .theme-scope.dark .time-picker-single-input, .theme-scope.dark input[type=time], .theme-scope.dark input[type=date] { color-scheme: dark; } .dark .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator, .dark .theme-scope input[type=time]::-webkit-calendar-picker-indicator, .dark .theme-scope input[type=date]::-webkit-calendar-picker-indicator, .theme-scope.dark .time-picker-single-input::-webkit-calendar-picker-indicator, .theme-scope.dark input[type=time]::-webkit-calendar-picker-indicator, .theme-scope.dark input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.7; } .dark .theme-scope .time-picker-single-input::-webkit-calendar-picker-indicator:hover, .dark .theme-scope input[type=time]::-webkit-calendar-picker-indicator:hover, .dark .theme-scope input[type=date]::-webkit-calendar-picker-indicator:hover, .theme-scope.dark .time-picker-single-input::-webkit-calendar-picker-indicator:hover, .theme-scope.dark input[type=time]::-webkit-calendar-picker-indicator:hover, .theme-scope.dark input[type=date]::-webkit-calendar-picker-indicator:hover { opacity: 1; } .theme-scope .time-picker-input { display: inline-flex; align-items: center; gap: 0; padding: 0.5rem 0.5rem; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-family: inherit; height: 38px; } .theme-scope .time-picker-input:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-ring); } .theme-scope .time-segment { width: 1.25rem; padding: 0; border: none; background: transparent; font-size: 0.875rem; font-family: inherit; text-align: center; color: var(--color-text-primary); } .theme-scope .time-segment:focus { outline: none; background-color: var(--color-primary-light); border-radius: var(--radius-sm); } .theme-scope .time-separator { font-size: 0.875rem; color: var(--color-text-muted); user-select: none; } .theme-scope .time-period-btn { margin-left: 0.25rem; padding: 0.125rem 0.375rem; font-size: 0.75rem; font-weight: 500; font-family: inherit; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; } .theme-scope .time-period-btn:hover { background-color: var(--color-bg-muted); color: var(--color-text-primary); } .theme-scope .datetime-result { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 0.875rem; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--color-text-secondary); } .theme-scope .datetime-result .iconify { color: var(--color-primary); font-size: 1.125rem; } .theme-scope .nlp-picker-container { width: 100%; max-width: 500px; } .theme-scope .nlp-picker-content { display: flex; flex-direction: column; gap: 0.75rem; } .theme-scope .nlp-input-wrapper { position: relative; display: flex; align-items: center; } .theme-scope .nlp-input { width: 100%; padding: 0.625rem 2.5rem 0.625rem 0.875rem; font-size: 0.875rem; font-family: inherit; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text-primary); transition: all 0.15s ease; } .theme-scope .nlp-input::placeholder { color: var(--color-text-muted); } .theme-scope .nlp-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-ring); } .theme-scope .nlp-calendar-btn { position: absolute; right: 0.5rem; padding: 0.375rem; background: transparent; border: none; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: all 0.15s ease; } .theme-scope .nlp-calendar-btn:hover { background-color: var(--color-bg-secondary); color: var(--color-text-primary); } .theme-scope .nlp-calendar-btn .iconify { font-size: 1.125rem; display: block; } .theme-scope .nlp-result { padding: 0.75rem 1rem; background-color: var(--color-success-light); border: 1px solid var(--color-success); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--color-text-primary); line-height: 1.5; } .theme-scope .nlp-result strong { color: var(--color-success-dark); font-weight: 600; } .theme-scope .nlp-error { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background-color: var(--color-danger-light); border: 1px solid var(--color-danger); border-radius: var(--radius-lg); font-size: 0.875rem; color: var(--color-danger-dark); } .theme-scope .nlp-error .iconify { font-size: 1.125rem; flex-shrink: 0; } .theme-scope .nlp-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--color-border); } .theme-scope .nlp-examples-label { font-size: 0.75rem; font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .theme-scope .nlp-example-btn { padding: 0.25rem 0.625rem; font-size: 0.75rem; font-family: inherit; background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: all 0.15s ease; } .theme-scope .nlp-example-btn:hover { background-color: var(--color-bg-muted); color: var(--color-text-primary); border-color: var(--color-primary); } .theme-scope .drawer-overlay { position: fixed; inset: 0; z-index: 1100; background-color: rgba(0, 0, 0, 0.8); opacity: 0; visibility: hidden; transition: opacity 0.3s ease-out, visibility 0s linear 0.3s; } .theme-scope .drawer-overlay.open { opacity: 1; visibility: visible; transition-delay: 0s; } .theme-scope .drawer { position: fixed; z-index: 1101; background-color: var(--color-bg-primary); display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); pointer-events: none; } .theme-scope .drawer.open { pointer-events: auto; } .theme-scope .drawer-bottom { inset-inline: 0; bottom: 0; max-height: 96vh; border-radius: 0; transform: translateY(100%); /* Extra padding at bottom to prevent gap when dragging up */ padding-bottom: env(safe-area-inset-bottom, 0); /* Pseudo-element extends the background below the drawer for drag-up effect */ } .theme-scope .drawer-bottom::after { content: ""; position: absolute; left: 0; right: 0; bottom: -50px; height: 50px; background-color: inherit; pointer-events: none; } .theme-scope .drawer-bottom.open { transform: translateY(0); } .theme-scope .drawer-right { top: 0; right: 0; bottom: 0; width: 100%; max-width: 24rem; /* 384px */ transform: translateX(100%); } .theme-scope .drawer-right.open { transform: translateX(0); } .theme-scope .drawer-left { top: 0; left: 0; bottom: 0; width: 100%; max-width: 24rem; transform: translateX(-100%); } .theme-scope .drawer-left.open { transform: translateX(0); } .theme-scope .drawer-top { inset-inline: 0; top: 0; max-height: 96vh; transform: translateY(-100%); } .theme-scope .drawer-top.open { transform: translateY(0); } .theme-scope .drawer-sm { max-width: 20rem; /* 320px */ } .theme-scope .drawer-md { max-width: 28rem; /* 448px */ } .theme-scope .drawer-lg { max-width: 36rem; /* 576px */ } .theme-scope .drawer-xl { max-width: 48rem; /* 768px */ } .theme-scope .drawer-full { max-width: 100%; border-radius: 0; } .theme-scope .drawer-h-sm { max-height: 40vh; } .theme-scope .drawer-h-md { max-height: 60vh; } .theme-scope .drawer-h-lg { max-height: 80vh; } .theme-scope .drawer-handle { display: flex; justify-content: center; padding: 0.75rem; flex-shrink: 0; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: background-color 0.15s ease; } .theme-scope .drawer-handle:hover { background-color: var(--color-bg-secondary); } .theme-scope .drawer-handle:active { cursor: grabbing; } .theme-scope .drawer-handle-bar { width: 2.5rem; height: 0.25rem; background-color: var(--color-border-light); border-radius: var(--radius-full); transition: background-color 0.15s ease, transform 0.15s ease; } .theme-scope .drawer-handle:hover .drawer-handle-bar { background-color: var(--color-border); transform: scaleX(1.1); } .theme-scope .drawer-handle:active .drawer-handle-bar { background-color: var(--color-text-muted); } .theme-scope .drawer-header { padding: 0.75rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; text-align: center; } .theme-scope .drawer-header-left { text-align: left; } .theme-scope .drawer-title { font-size: var(--text-lg); font-weight: var(--font-emphasis-weight); color: var(--color-text-primary); line-height: 1.375; margin: 0; } .theme-scope .drawer-description { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; } .theme-scope .drawer-content { flex: 1; overflow-y: auto; padding: 0.75rem 1rem; } .theme-scope .drawer-content-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; } .theme-scope .drawer-footer { padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .theme-scope .drawer-footer-row { flex-direction: row; justify-content: flex-end; gap: 0.75rem; } .theme-scope .drawer-close { position: absolute; top: 1rem; right: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; color: var(--color-text-muted); background-color: transparent; border: none; border-radius: var(--radius-button); cursor: pointer; transition: all 0.15s ease-in-out; } .theme-scope .drawer-close:hover { color: var(--color-text-primary); background-color: var(--color-bg-secondary); } .theme-scope .drawer-close:focus { outline: none; box-shadow: 0 0 0 var(--ring-width) var(--color-gray-ring); } @media (min-width: 640px) { .theme-scope .drawer-bottom-centered { max-width: 32rem; margin-inline: auto; left: 50%; transform: translateX(-50%) translateY(100%); } .theme-scope .drawer-bottom-centered.open { transform: translateX(-50%) translateY(0); } } .theme-scope .drawer-inner-card { width: 100%; max-width: 24rem; margin-inline: auto; } .theme-scope .drawer-snap-indicator { position: absolute; left: 0; right: 0; height: 2px; background-color: var(--color-border); opacity: 0.5; } .theme-scope .toolbar { display: flex; align-items: center; /* Tight gap between top-level items — groups still read as distinct because each group/button has its own padding, and the snug rhythm reads as a single chrome strip rather than a row of disconnected chips. The shorthand sets row-gap and column-gap to the same value — both matter when flex-wrap kicks in on narrow viewports. */ gap: var(--space-gap-sm); /* 0.5rem */ flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-secondary); } .theme-scope .toolbar-sm { gap: var(--space-gap-sm); /* 0.5rem */ font-size: var(--text-xs); } .theme-scope .toolbar-lg { gap: var(--space-gap-lg); /* 1.5rem */ font-size: var(--text-base); } .theme-scope .toolbar-group { display: flex; align-items: center; /* Label and control need breathing room so the label reads as a prefix, not as part of the control. 0.75rem matches the form-elements demo's horizontal label-to-input rhythm. */ gap: 0.75rem; flex-shrink: 0; } .theme-scope .toolbar-group-label { font-size: var(--text-sm); font-weight: var(--font-control-weight); color: var(--color-text-primary); white-space: nowrap; } .theme-scope .toolbar-sm .toolbar-group { gap: var(--space-gap-sm); } .theme-scope .toolbar-sm .toolbar-group-label { font-size: var(--text-xs); } .theme-scope .toolbar-lg .toolbar-group { gap: 1rem; } .theme-scope .toolbar-lg .toolbar-group-label { font-size: var(--text-base); } .theme-scope .toolbar-separator { width: 1px; height: 1.25rem; background-color: var(--color-border); flex-shrink: 0; margin: 0 var(--space-gap-xs); } .theme-scope .toolbar-spacer { flex: 1; min-width: 0; } .theme-scope .toolbar-label { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; flex-shrink: 0; } .theme-scope .toolbar-bordered { padding: var(--space-gap-md) 0; border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-gap-md); } .theme-scope .toolbar-elevated { padding: var(--space-gap-sm) var(--space-gap-md); background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); } .theme-scope .toolbar-elevated .btn-ghost:hover, .theme-scope .toolbar-elevated .btn-ghost:focus { background-color: var(--color-bg-muted); } /* =================================== Keyboard hint badge — shadcn-like Promoted out of `playground/templates/sidebar-layout/styles.css` (minimal version) and `packages/components/typography/kbd/demo.html` (richer inline `